/*
 Theme Name:   Hygiene mit System
 Description:  Woodmart Child Theme for hygienemitsystem.at
 Author:       Hygiene mit System
 Author URI:   https://hygienemitsystem.at
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart-child
 License:      Proprietary
*/

/* Legacy Invoice Download Button */
.hms-legacy-invoice {
    margin: 20px 0;
}

.hms-legacy-invoice h3 {
    margin-bottom: 10px;
}

/*
 * Slider Builder hero images render at their raw uploaded resolution
 * (Elementor's "wd_images_gallery" widget with ids_size: full), so a wide
 * product photo like the 820x545 Distair pack blows the whole slide out to
 * ~600px+ of extra height instead of a compact banner. Cap the hero photo
 * itself so ancestor wrappers (all height:auto) shrink to match, regardless
 * of each product photo's native aspect ratio. The small circular product
 * thumbnails use a cropped custom size, not "full", so this only targets
 * the large hero photo.
 */
.wd-slide img.size-full {
    max-height: 360px;
    width: auto;
    object-fit: contain;
}

/*
 * The text column's own Elementor padding (40px top / 100px bottom, set
 * per-slide in the original content) was taller than the capped hero photo,
 * so it alone kept the flex row at ~550px regardless of the image cap
 * above. Trim it directly so the row's height is driven by its actual
 * content instead of that leftover padding.
 */
.wd-slide .e-con-inner > .e-con:first-child {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/*
 * Brevo newsletter box (content-subscription.php) — ported from v1's
 * vendipro-child css/style.css, then restyled to match WoodMart's own demo
 * "JOIN OUR NEWSLETTER NOW" banner (full-width section, bold uppercase
 * heading, inline input+button, brand-green CTA) instead of v1's small gray
 * card, per explicit request to follow WoodMart's native visual style.
 * #83b735 is WoodMart's actual computed brand green on this site (read off
 * .price/.add_to_cart_button at runtime), not v1's old custom #7b9f35.
 */
.newsletter-box {
    background: #fff;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    margin: 40px 0;
    padding: 0;
    clear: both;
    /* Full-bleed: .newsletter-box lives inside the theme's boxed
     * `.wd-content-layout.container`, so break out to the true viewport
     * width like WoodMart's own demo banner, rather than staying
     * constrained to the page's content column. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.newsletter-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 1222px;
    padding: 48px 20px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-text strong {
    display: block;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #212121;
    margin-bottom: 8px;
}

.newsletter-text span {
    font-size: 14px;
    color: #777;
}

.newsletter-form {
    width: 100%;
    max-width: 480px;
}

.newsletter-box .hms-newsletter-form h3 {
    display: none;
}

.newsletter-box .hms-newsletter-form form br {
    display: none;
}

.newsletter-box .hms-newsletter-form form {
    display: flex;
    flex-wrap: wrap;
}

.newsletter-box .hms-newsletter-form form p {
    display: flex;
    flex: 1;
    margin: 0;
    min-width: 0;
}

.newsletter-box .hms-newsletter-form form input[type=email] {
    width: 100% !important;
    flex: 1;
    height: 48px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    padding: 0 18px;
    font-size: 14px;
    float: none;
}

.newsletter-box .hms-newsletter-form form input[type=email]:focus {
    border-color: #83b735;
    outline: none;
}

.newsletter-box .submit-form {
    height: 48px;
    padding: 0 28px;
    margin: 0;
    border-radius: 0 4px 4px 0;
    background: #83b735;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    float: none;
    transition: background .15s ease;
}

.newsletter-box .submit-form:hover {
    background: #729e2c;
}

.newsletter-agree {
    display: block;
    clear: both;
    padding-top: 14px;
    font-size: 12px;
    color: #999;
}

.newsletter-agree a {
    text-decoration: underline;
    color: #666;
    font-weight: 600;
}

.newsletter-box #error-agree {
    color: #a94442;
    background-color: #f2dede;
    padding: 4px 12px;
    margin-bottom: 12px;
    border: 1px solid #ebccd1;
    border-radius: 4px;
    font-size: 12px;
    display: none;
}

@media (min-width: 782px) {
    .newsletter-inner {
        flex-direction: row;
        justify-content: center;
        text-align: left;
        padding: 40px;
    }

    .newsletter-text strong {
        margin-bottom: 0;
    }

    .newsletter-form {
        flex: 0 0 auto;
    }
}

/* ── Newsletter confirmation page ───────────────── */
.hms-nl-confirmed {
    max-width: 560px;
    margin: 56px auto 72px;
    padding: 0 20px;
    text-align: center;
}

.hms-nl-confirmed__icon {
    margin-bottom: 24px;
    line-height: 0;
}

.hms-nl-confirmed__title {
    margin: 0 0 14px;
    font-size: 27px;
    line-height: 1.25;
    font-weight: 600;
    color: #2f3234;
}

.hms-nl-confirmed__lead {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.6;
    color: #5c6165;
}

.hms-nl-confirmed__meta {
    margin: 0 0 30px;
    font-size: 13px;
    line-height: 1.6;
    color: #8a9095;
}

.hms-nl-confirmed__actions {
    margin: 0;
}

.hms-nl-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 4px;
    background: #83b735;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none !important;
    transition: background .15s ease;
}

.hms-nl-btn:hover,
.hms-nl-btn:focus {
    background: #729e2c;
}

@media (max-width: 600px) {
    .hms-nl-confirmed { margin: 36px auto 52px; }
    .hms-nl-confirmed__title { font-size: 23px; }
}

/*
 * Checkout "Returning customer?" notice. WooCommerce Social Login appends a
 * <br>, a sentence and a second link into this same notice; Woodmart lays the
 * notice out as inline-flex, which turns each of those into a flex column and
 * scatters them across the row. Render it as normal flowing text instead.
 * (:root prefix matches the specificity of Woodmart's own rule,
 * `:root :is(.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle) > div`.)
 */
:root .woocommerce-form-login-toggle > .woocommerce-info {
    display: block;
}

/*
 * Post-Labelcenter (wc-plc) prints its branch-pickup inputs as hidden fields,
 * each wrapped in its own <p class="form-row">, as direct children of
 * form.checkout. Woodmart lays that form out as a grid, so the seven empty
 * wrappers take grid rows and push billing + payment far down the page.
 * Hide the wrappers; hidden inputs still submit.
 */
form.woocommerce-checkout > p.form-row[id^="wc-plc__"] {
    display: none;
}

/*
 * Amazon Pay "Have an Amazon account?" checkout notice. Amazon floats its
 * button right and draws the "Use your Amazon account" caption below the
 * button box, which hung out of the notice. Contain the float and pull the
 * button up so button + caption sit inside with ~5px spacing; the negative
 * bottom margin keeps the notice at its normal height (the caption uses the
 * notice's own bottom padding).
 * (:root prefix matches the specificity of Woodmart's notice rules.)
 */
:root .woocommerce-info.wc-amazon-payments-advanced-info {
    display: flow-root;
}

:root .woocommerce-info.wc-amazon-payments-advanced-info #pay_with_amazon {
    margin: -12px 0 -8px;
}

/*
 * EU legal guarantee notice (Germanized) at checkout. Germanized caps the
 * graphic at 300px, which leaves its small print hard to read; the notice
 * must be legible and not reduced, so it fills the column (as wide as the
 * order-notes field) and the full width on phones. The graphic is shown
 * unchanged.
 * (:root prefix: Germanized's layout stylesheet loads after this one with
 * the same specificity.)
 */
:root .wc-gzd-legal-guarantee-checkout img.wc-gzd-legal-guarantee-label-image {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
}

/*
 * Review titles (HMS\Reviews\Review_Title). Woodmart lays a review out as a
 * wrapping flex row; the title takes a full-width line above the text.
 */
.hms-review-title {
    flex: 1 1 100%;
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--wd-title-color, #242424);
}

/*
 * "Vertrag widerrufen" in the footer bar (Germanized's withdrawal button via
 * the [eu_owb_order_withdrawal_button] shortcode in Woodmart's copyrights2).
 * The withdrawal function must be on every page and stand out from the other
 * footer links (§ 356a BGB / FAGG), so it takes the shop's primary button
 * colour, like "In den Warenkorb".
 */
:root .wd-copyrights .hms-withdrawal-button {
    background-color: var(--wd-primary-color);
    color: #fff;
}

:root .wd-copyrights .hms-withdrawal-button:hover,
:root .wd-copyrights .hms-withdrawal-button:focus {
    background-color: var(--wd-primary-color);
    color: #fff;
    filter: brightness(0.9);
}

:root .wd-copyrights .eu-owb-order-withdraw-from-contract-button {
    margin-bottom: 0;
}

/*
 * Product cards (shop, categories, carousels, related products): a fixed
 * square image frame. Product thumbnails are uncropped (as on v1), so photos
 * of different proportions made cards of different heights; the photo is
 * fitted whole inside the frame (no cropping of bottles or sprays).
 */
.wd-product .product-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.wd-product .product-image-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * Page titles (category, shop and page headers) on phones: at Woodmart's 36px
 * a long German word ("Schädlingsbekämpfung", "Versandbedingungen") is wider
 * than the screen. Smaller, and hyphenated by the browser (the page is lang="de").
 */
@media (max-width: 767px) {
    h1.entry-title.title {
        font-size: 28px;
        hyphens: auto;
        overflow-wrap: break-word;
    }
}

/* Product page: photo swatches as cards, a larger photo with the option name under it
   (v1 listed photo and name; a hover tooltip is no help on touch screens). Woodmart
   already prints the name in .wd-swatch-text and only hides it for photo swatches.
   Borders follow the theme's form fields; hover and the chosen option use the primary colour
   (scoped under the form: Woodmart prints its swatch styles later in the page). */
:root .variations_form [class*=wd-swatches].wd-swatches-single {
    --wd-swatch-brd-color: var(--wd-form-brd-color);
    --brd-width: var(--wd-form-brd-width);
}

:root .variations_form [class*=wd-swatches].wd-swatches-single .wd-swatch.wd-active {
    --wd-swatch-brd-color: var(--wd-primary-color);
}

@media (hover: hover) {
    :root .variations_form [class*=wd-swatches].wd-swatches-single .wd-swatch:hover:not(.wd-disabled) {
        --wd-swatch-brd-color: var(--wd-primary-color);
    }
}

:root .wd-swatches-single:has(.wd-swatch.wd-bg) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    width: 100%;
}

:root .wd-swatches-single .wd-swatch.wd-bg {
    --wd-swatch-inn-sp: 6px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    width: auto;
    height: auto;
    padding: 6px 6px 8px;
    border-radius: var(--wd-brd-radius);
}

:root .wd-swatches-single .wd-swatch.wd-bg .wd-swatch-bg {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--wd-brd-radius);
}

:root .wd-swatches-single .wd-swatch.wd-bg .wd-swatch-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

:root .wd-swatches-single .wd-swatch.wd-bg .wd-swatch-text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Product descriptions and page texts: long words (e.g. "Schutzhandschuhe/Schutzkleidung/Augenschutz/Gesichtsschutz")
   and bare URLs (privacy policy) wrap instead of running off a phone screen. */
:is(.single-product .wd-entry-content, .elementor-widget-container) :is(p, li, td, th, h2, h3, h4) {
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    :is(.single-product .wd-entry-content, .elementor-widget-container) :is(p, li) {
        hyphens: auto;
    }

    .single-product .wd-entry-content :is(td, th) {
        padding-inline: 6px;
    }
}

/* Touch-size tap targets: the text links next to the add-to-cart form, the shop's "Filter" button, the cart's "apply points discount" button. */
@media (max-width: 1024px) {
    :root .single-product .variations_form .reset_variations,
    :root .single-product .summary .wd-action-btn > a,
    :root .wd-show-sidebar-btn > a,
    :root .wc_points_rewards_apply_discount .button {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* YITH waiting list: the email field like the theme's fields (colours, padding and panel
   corners are the plugin's own settings); readable line spacing for the consent text. */
:root .yith-wcwtl-output #yith-wcwtl-user-email {
    border-color: var(--wd-form-brd-color);
    border-radius: var(--wd-form-brd-radius);
}

:root .yith-wcwtl-output label[for="yith-wcwtl-policy-check"] {
    font-size: 13px;
    line-height: 1.5;
}

:root .yith-wcwtl-output label[for="yith-wcwtl-policy-check"] span {
    font-size: inherit;
}

/* iPhones zoom into any form field under 16px when it is tapped (Safari's readability rule) and stay
   zoomed; 16px fields on phones and tablets avoid that without disabling zoom. */
@media (max-width: 1024px) {
    :root :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], textarea, select) {
        font-size: 16px;
    }

    /* Wishlist: the product selection checkbox (13px, no label) at the 24px minimum tap size. */
    :root .wd-wishlist-checkbox {
        width: 24px;
        height: 24px;
    }
}