/* Standard inner-page header only: the independent mobile homepage is untouched. */
@media (max-width: 1100px) {
    body:not(.single-product) .kst-standard-header {
        display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 40px;
        align-items: center; gap: 10px 8px; padding: 10px 16px 12px; min-height: 0;
    }
    body:not(.single-product) .kst-standard-header > .kst-standard-brand {
        grid-area: 1 / 1; width: 48px; min-width: 0;
    }
    body:not(.single-product) .kst-standard-brand-logo { width: 48px; height: 54px; object-fit: contain; }
    body:not(.single-product) .kst-standard-header > .kst-standard-nav { display: none; }
    body:not(.single-product) .kst-standard-actions { display: contents; }
    body:not(.single-product) .kst-standard-actions > .kst-product-search {
        grid-area: 2 / 1 / 3 / -1; width: 100%; min-width: 0; max-width: 100%;
    }
    body:not(.single-product) .kst-standard-header .kst-product-search__form input[type=search] { font-size: 16px; height: 42px; }
    body:not(.single-product) .kst-standard-header .kst-product-search__form button { font-size: 11px; min-height: 42px; }
    body:not(.single-product) .kst-standard-actions > .kst-language-dropdown {
        grid-area: 1 / 2; justify-self: end; min-width: 0; max-width: 124px;
    }
    body:not(.single-product) .kst-standard-header .kst-language-dropdown summary {
        min-width: 0; padding: 8px; gap: 5px; height: 42px; font-size: 12px;
    }
    body:not(.single-product) .kst-standard-header .kst-language-dropdown summary > span:not([aria-hidden]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body:not(.single-product) .kst-standard-actions > .kst-standard-account,
    body:not(.single-product) .kst-standard-actions > .kst-standard-rewards { display: none; }
    body:not(.single-product) .kst-standard-actions > .kst-standard-cart {
        grid-area: 1 / 3; min-width: 0; padding: 8px; white-space: nowrap; min-height: 42px;
    }
    body:not(.single-product) .kst-standard-header > .kst-mobile-menu { display: block; grid-area: 1 / 4; min-width: 0; position: relative; }
    body:not(.single-product) .kst-mobile-menu summary { width: 40px; min-width: 0; height: 42px; padding: 0; font-size: 9px; }
    body:not(.single-product) .kst-mobile-menu nav { z-index: 1000; }

    /* Long translated payment labels must not impose a min-content grid width. */
    .kst-standard-shell .kst-preorder-loop-payment-options { grid-template-columns: minmax(0, 1fr); min-width: 0; }
    .kst-standard-shell .kst-preorder-loop-payment-options .kst-preorder-loop-payment {
        min-width: 0; max-width: 100%; white-space: normal; flex-wrap: wrap; overflow-wrap: anywhere;
    }
    .kst-standard-shell .kst-preorder-loop-payment-options .kst-preorder-loop-payment span { min-width: 0; white-space: normal; }

}
@media (min-width: 768px) and (max-width: 1100px) {
    /* Product pages retain their separate phone UI, but share the tablet header. */
    body.single-product .kst-standard-header { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px 8px; padding: 10px 16px 12px; min-height: 0; }
    body.single-product .kst-standard-header > .kst-standard-brand { grid-area: 1 / 1; width: 48px; min-width: 0; }
    body.single-product .kst-standard-brand-logo { width: 48px; height: 54px; object-fit: contain; }
    body.single-product .kst-standard-header > .kst-standard-nav { display: none; }
    body.single-product .kst-standard-actions { display: contents; }
    body.single-product .kst-standard-actions > .kst-product-search { grid-area: 2 / 1 / 3 / -1; width: 100%; min-width: 0; max-width: 100%; }
    body.single-product .kst-standard-header .kst-product-search__form input[type=search] { font-size: 16px; height: 42px; }
    body.single-product .kst-standard-header .kst-product-search__form button { font-size: 11px; min-height: 42px; }
    body.single-product .kst-standard-actions > .kst-language-dropdown { grid-area: 1 / 2; justify-self: end; min-width: 0; max-width: 124px; }
    body.single-product .kst-standard-header .kst-language-dropdown summary { min-width: 0; padding: 8px; gap: 5px; height: 42px; font-size: 12px; }
    body.single-product .kst-standard-actions > .kst-standard-account,
    body.single-product .kst-standard-actions > .kst-standard-rewards { display: none; }
    body.single-product .kst-standard-actions > .kst-standard-cart { grid-area: 1 / 3; min-width: 0; padding: 8px; white-space: nowrap; min-height: 42px; }
    body.single-product .kst-standard-header > .kst-mobile-menu { display: block; grid-area: 1 / 4; min-width: 0; position: relative; }
    body.single-product .kst-mobile-menu summary { width: 40px; min-width: 0; height: 42px; padding: 0; font-size: 9px; }
    body .kst-mobile-menu summary {
        display: grid; place-items: center; border: 1px solid var(--kst-plum); color: var(--kst-plum);
        font-weight: 700; text-transform: uppercase; cursor: pointer; list-style: none;
    }
    body .kst-mobile-menu summary::-webkit-details-marker { display: none; }
    body .kst-mobile-menu nav {
        position: absolute; top: 52px; right: 0; width: min(280px, calc(100vw - 32px));
        display: grid; padding: 12px; background: #fbf8f4; border: 1px solid var(--kst-line);
        box-shadow: 0 18px 40px rgba(38,30,34,.16); z-index: 1000;
    }
    body .kst-mobile-menu nav a {
        padding: 13px 12px; border-bottom: 1px solid var(--kst-line); color: var(--kst-ink);
        font-size: 10px; font-weight: 600; text-decoration: none; text-transform: uppercase;
    }
}
@media (max-width: 768px) {
    /* WooCommerce smallscreen.css gives columns-* children 48% width.
       A grid child must fill its track, not take 48% of that track again. */
    body.woocommerce .kst-standard-shell ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
    body.woocommerce .kst-standard-shell ul.products[class*="columns-"] > li.product {
        width: 100%; max-width: 100%; min-width: 0; float: none; clear: none; margin: 0;
    }
    body.woocommerce .kst-standard-shell ul.products > li.product a img { width: 100%; object-fit: contain; }
    body.woocommerce .kst-standard-shell ul.products > li.product .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    body.woocommerce .kst-standard-shell .woocommerce-products-header__title { overflow-wrap: anywhere; }
}

/* Account reward opportunities: product-scale artwork rather than 42px icons. */
body.woocommerce-account .wlr-campaign-container:has([id^="wlr-card-ways-to-earn-name-"]){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;align-items:stretch}
body.woocommerce-account .wlr-campaign-container .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]){width:auto!important;min-width:0!important;max-width:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:18px!important;box-sizing:border-box}
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]) .wlr-card-container{width:100%!important;min-width:0;box-sizing:border-box}
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]) .wlr-card-container>img{display:block!important;width:100%!important;height:180px!important;max-width:100%!important;object-fit:contain!important;object-position:center!important;margin:0 0 16px!important;border-radius:6px}
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]) .wlr-card-container>i{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:180px!important;font-size:44px!important;margin:0 0 16px!important;box-shadow:none}
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]) .wlr-name{font-size:18px!important;line-height:1.3!important;margin:0 0 8px!important;white-space:normal!important;overflow-wrap:anywhere}
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]) .wlr-description{font-size:14px!important;line-height:1.5!important;margin:0!important;white-space:normal!important;overflow-wrap:anywhere}
@media(max-width:1100px){body.woocommerce-account .wlr-campaign-container:has([id^="wlr-card-ways-to-earn-name-"]){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){body.woocommerce-account .wlr-campaign-container:has([id^="wlr-card-ways-to-earn-name-"]){grid-template-columns:minmax(0,1fr)!important;gap:14px!important}}

/* Let reward artwork use the card width instead of a fixed 180px thumbnail. */
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]){padding:14px!important}
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]) .wlr-card-container{padding:0!important}
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]) .wlr-card-container>img{height:auto!important;aspect-ratio:1;object-fit:contain!important;margin:0 0 14px!important}
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]) .wlr-card-container>i{height:auto!important;aspect-ratio:1;font-size:88px!important;margin:0 0 14px!important;background:#faf7fc;border-radius:6px}
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]) .wlr-card-container>i:before{font-size:inherit!important}

body.woocommerce-account .wlr-campaign-container .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]){padding:14px!important}
body.woocommerce-account .wlr-card:has([id^="wlr-card-ways-to-earn-name-"]) .wlr-card-container{margin:0!important}