/* ============================================================
   Global frontend theme styles
   Shared layout, header, notification, and base element rules.
   Page-specific dynamic CSS should stay inside each page/template.
   ============================================================ */

:root {
    --theme-primary: #3498db;
    --theme-text: #333333;
    --theme-bg: #ffffff;
    --header-bg: #ffffff;
    --header-text: #333333;
    --header-border: #e0e0e0;
    --header-topbar-bg: #2c3e50;
    --header-topbar-text: #ffffff;
    --header-cart-badge: #e74c3c;
    --header-icon-size: 20px;
    --header-padding: 12px;
    --header-margin: 0;
    --header-z-index: 1000;
    --logo-width: 200px;
    --logo-height: 60px;
    --logo-opacity: 1;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--theme-font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--theme-text);
    background: var(--theme-bg);
    font-size: var(--theme-font-size-base);
    font-weight: var(--theme-font-weight-body);
    line-height: var(--theme-line-height);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--theme-heading);
    font-weight: var(--theme-font-weight-heading);
}

h1 { font-size: var(--theme-font-size-h1); }
h2 { font-size: var(--theme-font-size-h2); }
h3 { font-size: var(--theme-font-size-h3); }

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--theme-link);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--theme-link-hover);
}

.container {
    max-width: var(--theme-container-width);
}

.header-container-full {
    width: 100%;
    max-width: 100% !important;
}

.header-container-boxed {
    width: 100%;
    max-width: var(--theme-container-width) !important;
}

.header-container-contained {
    width: calc(100% - 2rem);
    max-width: calc(var(--theme-container-width) + 2rem) !important;
}

:root { --text: var(--theme-text); --text-light: #666; --primary: var(--theme-primary); }
.section { padding-top: var(--theme-section-spacing); padding-bottom: var(--theme-section-spacing); }
.section-title { margin-bottom: 24px; }
.product-grid { display: grid; gap: 24px; }
.product-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card { min-width: 0; border: 1px solid var(--theme-border); border-radius: var(--theme-card-radius); overflow: hidden; }
.product-image { display: grid; aspect-ratio: 1; background: var(--theme-bg); place-items: center; }
.product-image img { width: 100%; height: 100%; object-fit: contain; }
.product-card-image-link { display: block; color: inherit; text-decoration: none; }
.product-card .card-title a { color: inherit; text-decoration: none; }
.product-card .card-title a:hover { color: var(--theme-primary); }
.product-info { padding: 16px; }
.product-name { font-size: 1rem; overflow-wrap: anywhere; }
.product-brand { font-size: .875rem; margin-bottom: 8px; }
.product-price { font-weight: 700; margin-bottom: 0; }
.image-placeholder { color: var(--text-light); }
.product-rating-summary { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--theme-text); font-size: .9rem; text-decoration: none; }
.product-rating-summary:hover { color: var(--theme-primary); }
.review-stars { color: #f2a900; letter-spacing: .08em; white-space: nowrap; }
.review-summary { display: flex; align-items: center; gap: 18px; padding: 16px 18px; margin-bottom: 16px; border: 1px solid var(--theme-border); border-radius: var(--theme-card-radius); background: color-mix(in srgb, var(--theme-bg) 92%, var(--theme-primary)); }
.review-summary-score { display: grid; gap: 2px; }
.review-summary-score strong { font-size: 1.9rem; line-height: 1; }
.review-summary-score small, .review-date, .review-form .muted { color: var(--text-light); font-size: .8rem; }
.review-list { display: grid; gap: 14px; }
.review-layout-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-item { padding: 16px; border: 1px solid var(--theme-border); border-radius: var(--theme-card-radius); background: var(--theme-bg); }
.review-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.review-item h3 { margin: 10px 0 6px; font-size: 1rem; }
.review-item p { margin: 10px 0 8px; line-height: 1.65; }
.review-verified { color: #14804a; font-size: .75rem; white-space: nowrap; }
.review-empty { color: var(--text-light); margin: 0 0 18px; }

/* Shared 2026 storefront polish: reusable, low-noise conversion surfaces. */
.section-title { font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: 0; line-height: 1.2; }
.product-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.product-card { background: var(--theme-bg); box-shadow: 0 8px 24px rgba(15,23,42,.05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--theme-primary) 45%, var(--theme-border)); box-shadow: 0 16px 34px rgba(15,23,42,.11); }
.product-image { overflow: hidden; background: color-mix(in srgb, var(--theme-bg) 94%, var(--theme-primary)); }
.product-image img { transition: transform .35s ease; }
.product-card:hover .product-image img { transform: scale(1.035); }
.product-info { display: grid; gap: 6px; }
.product-name { margin: 0; font-weight: 700; line-height: 1.35; }
.product-price { font-size: 1.05rem; color: var(--theme-heading); }
.product-card .btn, .product-card button { min-height: 42px; }
.breadcrumb { --bs-breadcrumb-divider-color: color-mix(in srgb, var(--theme-text) 45%, transparent); padding: .65rem 0; margin-bottom: 1rem; font-size: .84rem; }
.breadcrumb-item + .breadcrumb-item::before { content: ">"; color: var(--bs-breadcrumb-divider-color); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--theme-primary) 55%, transparent); outline-offset: 2px; }
@media (max-width: 992px) { .product-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .product-grid, .product-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .product-info { padding: 12px; } .product-name { font-size: .92rem; } }
@media (max-width: 390px) { .product-grid, .product-grid-4 { grid-template-columns: 1fr 1fr; gap: 8px; } .product-info { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.review-form { display: grid; gap: 12px; max-width: 640px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--theme-border); }
.review-form h3 { margin: 0; font-size: 1.15rem; }
.review-form .form-field { margin: 0; }
.review-form .form-field span { color: var(--text-light); font-size: .8rem; font-weight: 400; }
.review-submitted, .review-signin { margin: 20px 0 0; }
.btn-primary { background: var(--theme-primary); border-color: var(--theme-primary); }
.table-responsive { overflow-x: auto; }
.info-panel { max-width: 800px; margin: 0 auto; text-align: center; font-size: 1rem; line-height: 1.8; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 900px; margin: 0 auto; }
.contact-heading { margin-bottom: 16px; }
.contact-alert { padding: 16px 20px; border-radius: 8px; margin-bottom: 20px; }
.contact-alert-error { background: #f8d7da; color: #721c24; }
.contact-alert-success { background: #d4edda; color: #155724; }
.contact-field { margin-bottom: 12px; }
.contact-field input, .contact-field textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--theme-border); border-radius: var(--theme-border-radius, 8px); font-size: 14px; }
.contact-field textarea { resize: vertical; }
.contact-submit { width: 100%; }
.contact-icon { color: var(--theme-primary); width: 24px; }
@media (max-width: 992px) { .product-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .product-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .product-info { padding: 12px; } .contact-grid { grid-template-columns: 1fr; gap: 24px; } .review-layout-cards { grid-template-columns: 1fr; } .review-item-head { flex-direction: column; gap: 5px; } }

.btn,
button,
input[type="submit"],
input[type="button"] {
    border-radius: var(--theme-btn-radius);
    font-weight: var(--theme-btn-weight);
    text-transform: var(--theme-btn-transform);
}

.theme-card,
.card {
    border-radius: var(--theme-card-radius);
    box-shadow: var(--theme-card-shadow);
}

.notif-bar {
    position: relative;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    z-index: 9999;
    transition: all 0.3s ease;
}

.notif-bar-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
}

.notif-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.notif-bar .notif-text {
    display: inline-block;
}

.notif-bar .notif-btn {
    display: inline-block;
    text-decoration: none !important;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 0;
    cursor: pointer;
    line-height: 1.2;
}

.notif-bar .notif-btn:hover {
    transform: translateY(-1px);
    text-decoration: none !important;
}

.notif-bar .notif-close {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 5px;
    line-height: 1;
}

.notif-bar .notif-close:hover {
    opacity: 1;
}

.header-topbar {
    font-size: var(--header-topbar-font-size);
    padding: calc(var(--header-topbar-padding, 4px) + var(--header-topbar-extra-padding, 5px)) 0;
    background: var(--header-topbar-bg);
    color: var(--header-topbar-text);
    border-bottom: var(--header-topbar-border);
}

.header-topbar a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.header-topbar a:hover {
    opacity: 1;
}

.header-main {
    padding: var(--header-padding) 0;
    margin: var(--header-margin) 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
}

.header-main.is-sticky {
    position: var(--header-sticky);
    top: 0;
    z-index: var(--header-z-index);
}

.header-main.has-shadow {
    box-shadow: var(--header-shadow);
}

.header-logo img {
    max-width: var(--logo-width);
    max-height: var(--logo-height);
    margin-top: var(--logo-margin-top);
    margin-bottom: var(--logo-margin-bottom);
    width: auto;
    height: auto;
    opacity: var(--logo-opacity);
}

.header-nav .nav-link {
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    color: var(--header-text);
    transition: color 0.2s;
}

.header-nav .nav-link:hover,
.header-nav .nav-link.active {
    color: var(--theme-primary);
}

.header-nav-parent,.header-submenu-row,.header-mobile-nav-row{display:flex;align-items:center}
.header-nav-parent>.nav-link{flex:0 1 auto}
.header-nav-disclosure{border:0;background:transparent;color:var(--header-text);padding:8px 10px;line-height:1}
.header-nav-disclosure:hover,.header-nav-disclosure:focus-visible{color:var(--theme-primary)}
.header-submenu-node{position:relative;list-style:none}
.header-submenu-row>.dropdown-item{flex:1;min-width:0}
.header-submenu-toggle{flex:0 0 34px;border:0;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.header-submenu-toggle:hover,.header-submenu-toggle:focus-visible{color:var(--theme-primary)}
.header-nested-menu{position:absolute;top:0;left:100%;z-index:1050;min-width:220px;margin-left:.15rem}
.header-nested-menu:not([hidden]){display:block}
.header-mobile-disclosure{border:0;background:transparent;color:var(--header-text);padding:0 12px;min-width:42px}
.header-mobile-nav-row>.nav-link{flex:1}
.header-mobile-menu .header-mobile-nav-row .nav-link{border-bottom:1px solid #f5f5f5}

.header-icon {
    font-size: var(--header-icon-size);
    color: var(--header-text);
    transition: color 0.2s;
    position: relative;
    text-decoration: none;
}

.header-icon:hover {
    color: var(--theme-primary);
}

.header-icon .badge-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--header-cart-badge);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    padding: 0 5px;
    min-width: 18px;
    text-align: center;
    line-height: 18px;
}

.header-search-form {
    display: flex;
    align-items: center;
}

.header-search-form input {
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    width: 200px;
}

.header-search-form input:focus {
    border-color: var(--theme-primary);
}

.header-search-form button {
    background: none;
    border: 0;
    color: #666;
    margin-left: -40px;
    padding: 6px 10px;
    cursor: pointer;
    transition: color 0.2s;
}

.header-search-form button:hover {
    color: var(--theme-primary);
}

.header-mobile-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 24px;
    color: var(--header-text);
    cursor: pointer;
}

.header-mobile-menu {
    display: none;
    background: var(--header-bg);
    padding: 20px;
    border-top: 1px solid var(--header-border);
}

.header-mobile-menu .nav-link {
    color: var(--header-text);
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

.header-mobile-menu .nav-link:last-child {
    border-bottom: 0;
}

.header-mobile-menu .collapse .nav-link {
    padding-left: 20px;
    font-size: 13px;
}

@media (max-width: 768px) {
    .header-nav {
        display: none !important;
    }

    .header-mobile-toggle {
        display: block !important;
    }

    .header-mobile-menu.open {
        display: block !important;
    }

    .header-search-form input {
        width: 140px;
    }

    .header-logo img {
        max-height: 40px;
    }

    .notif-bar .notif-close {
        top: 10px;
        right: 10px;
        transform: none;
        font-size: 14px;
    }

    .notif-bar .container {
        padding-right: 35px;
    }
}

/* ============================================================
   Modern storefront foundation
   These are shared primitives for checkout, account, cart and
   catalogue pages. Theme editors can still override the variables
   above through theme_settings and admin/theme/global.php.
   ============================================================ */
:root {
    --surface: #ffffff;
    --surface-soft: var(--theme-bg, #f7f8fa);
    --ink: var(--theme-text, #17191c);
    --muted: #69717d;
    --line: color-mix(in srgb, var(--theme-border, #e5e7eb) 88%, transparent);
    --focus: color-mix(in srgb, var(--theme-primary, #2563eb) 25%, transparent);
    --shadow-sm: 0 8px 24px rgba(17, 24, 39, .06);
    --shadow-md: 0 18px 52px rgba(17, 24, 39, .10);
}

body {
    background: var(--surface-soft);
    color: var(--ink);
}

main { min-height: 48vh; }
.muted { color: var(--muted) !important; }
.eyebrow { margin: 0 0 .55rem; color: var(--theme-primary); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.text-link { color: var(--ink); font-weight: 700; text-decoration: none; }
.text-link:hover { color: var(--theme-primary); }

html[data-theme="dark"] {
    --theme-bg: var(--theme-dark-bg, #101827);
    --theme-text: var(--theme-dark-text, #e5e7eb);
    --theme-heading: var(--theme-dark-heading, #fff);
    --theme-border: var(--theme-dark-border, #334155);
    --surface: #172131;
    --surface-soft: #101827;
    --ink: var(--theme-dark-text, #e5e7eb);
    --muted: #a8b2c2;
    --line: color-mix(in srgb, var(--theme-dark-border, #334155) 88%, transparent);
    --header-bg: #172131;
    --header-text: var(--theme-dark-text, #e5e7eb);
    --header-border: var(--theme-dark-border, #334155);
}
html[data-theme="dark"] body { background: var(--surface-soft); color: var(--ink); }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--surface) !important; color: var(--ink) !important; }
html[data-theme="dark"] .text-dark { color: var(--ink) !important; }

.header-main { background: color-mix(in srgb, var(--header-bg, #fff) 94%, transparent); backdrop-filter: blur(16px); border-bottom-color: var(--line); }
.header-main.has-shadow { box-shadow: 0 6px 22px rgba(17, 24, 39, .06); }
.header-nav .nav-link { border-radius: 999px; }
.header-nav .nav-link:hover, .header-nav .nav-link.active { background: color-mix(in srgb, var(--theme-primary) 9%, transparent); }
.header-search-form input { background: var(--surface-soft); border-color: transparent; min-height: 42px; }
.header-search-form input:focus { background: var(--surface); box-shadow: 0 0 0 4px var(--focus); }
.header-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; }
.header-icon:hover { background: color-mix(in srgb, var(--theme-primary) 9%, transparent); }
.theme-mode-toggle { padding: 0; border: 0; cursor: pointer; }
.header-layout-centered .header-logo { position: absolute; left: 50%; transform: translateX(-50%); }
.header-layout-centered .header-main > .container > .d-flex { position: relative; }
.header-layout-split .header-logo { order: 2; }
.header-layout-split .header-nav { order: 1; }
.header-layout-split .header-main > .container > .d-flex > .d-flex { order: 3; }
.header-layout-minimal .header-nav { display: none !important; }
.header-layout-minimal .header-mobile-toggle { display: block !important; }
.header-mobile-search-form { display: flex; gap: 8px; padding: 4px 0 14px; }
.header-mobile-search-form input { flex: 1; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.header-mobile-search-form button { width: 44px; border: 0; border-radius: 12px; color: #fff; background: var(--theme-primary); }
@media (max-width: 900px) { .header-layout-centered .header-logo { position: static; transform: none; } .header-layout-split .header-logo, .header-layout-split .header-nav, .header-layout-split .header-main > .container > .d-flex > .d-flex { order: initial; } }

.btn-primary, .btn-secondary, .btn-danger, .contact-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 44px; padding: var(--theme-btn-py, .7rem) var(--theme-btn-px, 1.05rem); border: 1px solid transparent; border-radius: var(--theme-btn-radius, 12px);
    font-weight: var(--theme-btn-weight, 750); text-transform: var(--theme-btn-transform, none); text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary { color: #fff !important; background: var(--theme-primary); border-color: var(--theme-primary); box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-primary) 23%, transparent); }
.btn-primary:hover { color: #fff !important; transform: translateY(-1px); box-shadow: 0 12px 26px color-mix(in srgb, var(--theme-primary) 30%, transparent); }
.btn-secondary { color: var(--ink) !important; background: var(--surface); border-color: var(--line); }
.btn-secondary:hover { color: var(--theme-primary) !important; border-color: var(--theme-primary); }
button:disabled, .btn-primary:disabled { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }

.product-card { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-image { background: linear-gradient(135deg, var(--surface-soft), var(--surface)); }
.product-info { padding: 18px; }
.product-variant-stock { margin: .55rem 0 0; font-size: .82rem; }

.cart-page, .checkout-page, .auth-page, .account-page, .order-page, .order-success-page { background: var(--surface-soft); }
.cart-page h1, .checkout-page h1, .auth-page h1, .account-page h1, .order-page h1, .order-success-page h1 { letter-spacing: 0; }
.cart-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.cart-table th, .cart-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; }
.cart-table th { background: var(--surface-soft); color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.cart-table tr:last-child td { border-bottom: 0; }
.cart-table input, .form-field input, .form-field select, .form-field textarea, .coupon-field input { width: 100%; min-height: 44px; padding: .65rem .8rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; outline: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.form-field textarea { min-height: 96px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .coupon-field input:focus { border-color: var(--theme-primary); box-shadow: 0 0 0 4px var(--focus); }
.form-field { display: grid; gap: .42rem; color: var(--ink); font-size: .86rem; font-weight: 700; }
.form-field b { color: var(--theme-danger, #dc3545); }
.form-field small { color: var(--muted); font-weight: 500; }

.checkout-heading, .account-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.checkout-heading h1, .account-heading h1 { margin: 0; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(300px, .78fr); align-items: start; gap: 24px; }
.checkout-main, .checkout-sidebar, .order-side-stack { display: grid; gap: 18px; }
.checkout-sidebar { position: sticky; top: 24px; }
.checkout-card { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); }
.checkout-card h2 { margin: 0; font-size: 1.12rem; letter-spacing: 0; }
.checkout-card-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.checkout-card-heading p { margin: .25rem 0 0; color: var(--muted); font-size: .88rem; }
.checkout-step { display: inline-grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; color: #fff; background: var(--theme-primary); border-radius: 50%; font-size: .78rem; font-weight: 800; }
.form-grid { display: grid; gap: 14px; }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-field-wide { grid-column: 1 / -1; }
.checkout-options { display: grid; gap: 10px; }
.choice-card { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.choice-card:has(input:checked) { border-color: var(--theme-primary); background: color-mix(in srgb, var(--theme-primary) 5%, var(--surface)); box-shadow: 0 0 0 3px var(--focus); }
.choice-card input { accent-color: var(--theme-primary); }
.choice-card span { display: grid; flex: 1; gap: 3px; }
.choice-card small { color: var(--muted); font-weight: 500; }
.choice-card > b, .choice-card > i { color: var(--theme-primary); font-size: .9rem; }
.checkout-notes { margin-top: 18px; }
.checkout-terms { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; color: var(--muted); font-size: .84rem; }
.checkout-terms input { margin-top: 3px; accent-color: var(--theme-primary); }
.checkout-terms a { color: var(--theme-primary); font-weight: 700; }
.checkout-items { display: grid; gap: 13px; }
.checkout-item { display: flex; align-items: center; gap: 11px; }
.checkout-item-image { display: grid; flex: 0 0 52px; place-items: center; width: 52px; height: 52px; overflow: hidden; color: var(--muted); background: var(--surface-soft); border-radius: 11px; }
.checkout-item-image img { width: 100%; height: 100%; object-fit: cover; }
.checkout-item > div:nth-child(2) { display: grid; flex: 1; gap: 3px; min-width: 0; }
.checkout-item strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.checkout-item small { color: var(--muted); }
.checkout-item > b { font-size: .88rem; white-space: nowrap; }
.coupon-field { display: grid; gap: 7px; margin-top: 20px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.coupon-field > div { display: flex; gap: 8px; }
.coupon-field .btn-secondary { min-height: 44px; padding-inline: .9rem; }
.coupon-success, .coupon-error { margin: 10px 0 0; font-size: .8rem; }
.coupon-success { color: var(--theme-success, #198754); }
.coupon-error { color: var(--theme-danger, #dc3545); }
.summary-lines { display: grid; gap: 9px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.summary-lines > div, .summary-total { display: flex; justify-content: space-between; gap: 1rem; }
.summary-lines span { color: var(--muted); font-size: .88rem; }
.summary-lines b { font-size: .88rem; }
.summary-discount { color: var(--theme-success, #198754); }
.summary-total { align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.summary-total b { font-size: 1.25rem; }
.checkout-submit { width: 100%; margin-top: 20px; }
.secure-note { margin: 13px 0 0; color: var(--muted); font-size: .76rem; text-align: center; }
.checkout-alert { margin-bottom: 18px; padding: 14px 16px; border: 1px solid; border-radius: 13px; }
.checkout-alert ul { margin: .45rem 0 0; padding-left: 1.1rem; }
.checkout-alert-error { color: #9a2f3d; background: #fff4f5; border-color: #f1c1c7; }
.checkout-alert-success { color: #176b45; background: #effaf4; border-color: #bce8cf; }

.auth-page .section { display: grid; place-items: center; min-height: 65vh; }
.auth-card { width: min(100%, 480px); padding: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-md); }
.auth-card h1 { margin: 0; }
.auth-card > .muted { margin: .5rem 0 1.5rem; }
.auth-form { display: grid; gap: 14px; }
.auth-form .btn-primary { width: 100%; margin-top: 4px; }
.auth-switch { margin: 20px 0 0; color: var(--muted); text-align: center; }
.auth-switch a { font-weight: 750; }
.account-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 20px; }
.order-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.order-list-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 14px; color: inherit; background: var(--surface); text-decoration: none; }
.order-list-row:hover { background: var(--surface-soft); }
.order-list-row span:first-child { display: grid; gap: 3px; }
.order-list-row small { color: var(--muted); }
.status-pill { display: inline-flex; align-items: center; width: max-content; padding: .3rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: capitalize; }
.status-pending, .status-payment-pending { color: #8a5a00; background: #fff4d6; }
.status-processing { color: #1d4ed8; background: #eaf1ff; }
.status-shipped { color: #6d28d9; background: #f1eaff; }
.status-delivered, .status-payment-paid { color: #13734a; background: #e9f9f0; }
.status-cancelled, .status-payment-failed { color: #a72c3a; background: #fff0f1; }
.status-returned, .status-payment-refunded { color: #7c3aed; background: #f3eaff; }
.empty-state { display: grid; place-items: center; gap: 10px; min-height: 240px; padding: 36px; color: var(--muted); text-align: center; }
.empty-state i { color: var(--theme-primary); font-size: 2.2rem; }
.empty-state h1, .empty-state p { margin: 0; }
.empty-state.compact { min-height: 160px; padding: 20px; }
.order-success-hero { max-width: 680px; margin: 0 auto 28px; text-align: center; }
.success-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px; color: #fff; background: var(--theme-success, #198754); border-radius: 50%; font-size: 1.4rem; }
.order-success-hero h1 { margin: 0; }
.order-success-hero > p:not(.eyebrow) { color: var(--muted); }
.order-status-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.order-detail-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: start; gap: 20px; }
.detail-list { display: grid; gap: 14px; margin: 0; }
.detail-list div { display: grid; gap: 4px; }
.detail-list dt { color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.detail-list dd { margin: 0; }
.payment-instructions p { color: var(--muted); white-space: normal; }
.order-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Shared footer surface. The builder controls structure and column widths;
   theme/global.css owns the presentation and responsive layout. */
.site-footer { width: 100%; padding: 3.5rem 0 0; color: var(--footer-text, #fff); background: var(--footer-bg, #1f2937); }
.footer-container { width: min(100% - 2rem, var(--footer-container-width, 1200px)); margin-inline: auto; }
.footer-layout-full .footer-container { width: 100%; max-width: none; padding-inline: 1rem; }
.footer-layout-narrow .footer-container { max-width: var(--footer-container-width, 960px); }
.footer-row { display: flex; flex-wrap: wrap; gap: 0; margin-inline: -.65rem; padding-bottom: 2rem; border-bottom: 1px solid color-mix(in srgb, var(--footer-text, #fff) 12%, transparent); }
.footer-col { flex: 0 0 var(--footer-col-width, 25%); max-width: var(--footer-col-width, 25%); padding: 0 .65rem 1.35rem; }
.footer-widget { color: var(--footer-text, #fff); }
.footer-widget-title { margin: 0 0 .85rem; color: var(--footer-heading, #fff); font-size: 1rem; font-weight: 750; letter-spacing: 0; }
.footer-widget-copy, .footer-custom-content { margin: 0; color: var(--footer-link, #b0bec5); font-size: var(--footer-text-size, 14px); line-height: 1.75; }
.footer-links, .footer-contact-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.footer-link-item, .footer-contact-item { margin: 0; }
.footer-link, .footer-contact-item { color: var(--footer-link, #b0bec5); font-size: var(--footer-text-size, 14px); line-height: 1.5; }
.footer-link { text-decoration: none; transition: color .18s ease, transform .18s ease; }
.footer-link:hover, .footer-link:focus-visible { color: var(--footer-link-hover, #fff); }
.footer-contact-item { display: flex; align-items: flex-start; gap: .65rem; }
.footer-contact-item i { flex: 0 0 1.15rem; padding-top: .18rem; color: var(--footer-link-hover, #fff); text-align: center; }
.footer-social-list, .footer-payment-list { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; color: #fff; background: var(--footer-social-color, #334155); border-radius: 50%; text-decoration: none; transition: transform .18s ease, opacity .18s ease; }
.footer-social-link:hover, .footer-social-link:focus-visible { color: #fff; transform: translateY(-2px); opacity: .88; }
.footer-payment-list { color: var(--footer-link, #b0bec5); font-size: 1.75rem; }
.footer-payment-icon { opacity: .84; }
.footer-newsletter-form { display: flex; gap: .55rem; width: min(100%, 22rem); margin-top: .75rem; }
.footer-newsletter-input { flex: 1; min-width: 0; min-height: 2.75rem; padding: .65rem .8rem; color: var(--footer-text, #fff); background: color-mix(in srgb, var(--footer-text, #fff) 10%, transparent); border: 1px solid color-mix(in srgb, var(--footer-text, #fff) 18%, transparent); border-radius: 10px; outline: 0; }
.footer-newsletter-input::placeholder { color: color-mix(in srgb, var(--footer-text, #fff) 68%, transparent); }
.footer-newsletter-input:focus { border-color: var(--footer-link-hover, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--footer-link-hover, #fff) 22%, transparent); }
.footer-newsletter-button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; color: #fff; background: var(--footer-button-color, var(--theme-primary)); border: 0; border-radius: 10px; cursor: pointer; transition: transform .18s ease, opacity .18s ease; }
.footer-newsletter-button:hover, .footer-newsletter-button:focus-visible { color: #fff; transform: translateY(-1px); opacity: .9; }
.footer-form-message { margin: .65rem 0 0; color: var(--footer-link-hover, #fff); font-size: .8rem; }
.footer-child-columns { display: flex; flex-wrap: wrap; gap: 0; margin: .7rem -.35rem 0; padding-top: .7rem; border-top: 1px solid color-mix(in srgb, var(--footer-text, #fff) 8%, transparent); }
.footer-child-column { flex: 0 0 var(--footer-col-width, 100%); max-width: var(--footer-col-width, 100%); padding-inline: .35rem; }
.footer-copyright { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; padding: 1rem 0; color: var(--footer-copyright-color, var(--footer-link, #b0bec5)); background: var(--footer-copyright-bg, transparent); border-top: 1px solid color-mix(in srgb, var(--footer-text, #fff) 10%, transparent); }
.footer-copyright-text { color: inherit; font-size: var(--footer-copyright-size, 12px); }
.footer-copyright-payments { color: inherit; font-size: 1.35rem; }
.footer-back-to-top-wrap { padding: .7rem 0; text-align: center; }
.back-to-top { display: inline-block; color: var(--footer-link, #b0bec5); font-size: .8rem; text-decoration: none; transition: color .18s ease; }
.back-to-top:hover, .back-to-top:focus-visible { color: var(--footer-link-hover, #fff); }

/* r5 reusable storefront content surfaces. Blocks are data-driven and share
   the same rhythm as product/category cards instead of shipping page-specific
   inline styles. */
.content-block { margin: 2rem 0; }
.content-block h2, .content-block h3 { margin: 0 0 1rem; letter-spacing: 0; }
.content-block-faq .faq-list { display: grid; gap: .75rem; }
.content-block-faq .faq-item { overflow: hidden; background: var(--surface, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 14px; box-shadow: var(--shadow-sm, 0 4px 18px rgba(15,23,42,.06)); }
.content-block-faq summary { padding: 1rem 1.1rem; color: var(--ink, #172033); font-weight: 750; cursor: pointer; list-style: none; }
.content-block-faq summary::-webkit-details-marker { display: none; }
.content-block-faq summary::after { float: right; margin-left: 1rem; color: var(--muted, #667085); content: '+'; font-size: 1.2rem; line-height: 1; }
.content-block-faq details[open] summary::after { content: '−'; }
.content-block-faq .faq-answer { padding: 0 1.1rem 1.1rem; color: var(--muted, #667085); line-height: 1.75; }
.attribute-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--surface, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 14px; }
.attribute-table th, .attribute-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line, #e5e7eb); text-align: left; vertical-align: top; }
.attribute-table tr:last-child th, .attribute-table tr:last-child td { border-bottom: 0; }
.attribute-table th { width: 35%; color: var(--muted, #667085); background: var(--surface-soft, #f8fafc); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.content-block-warning, .shortcode-warning { margin: 1rem 0; padding: .85rem 1rem; color: #8a4b00; background: #fff8e8; border: 1px solid #f5d89a; border-radius: 10px; }
.attribute-count, .brand-count { float: right; min-width: 1.35rem; margin-left: .5rem; color: var(--muted, #667085); font-size: .74rem; text-align: right; }

/* Live catalogue sections inserted from the static-page builder. */
.shortcode-catalog-block { margin: clamp(1.75rem, 4vw, 3.5rem) 0; }
.shortcode-block-header { max-width: 780px; margin: 0 0 1.25rem; }
.shortcode-block-header h2 { margin: 0 0 .55rem; color: var(--ink, #172033); font-size: clamp(1.4rem, 2.4vw, 2rem); }
.shortcode-block-short { margin: 0 0 .5rem; color: var(--ink, #344054); font-weight: 650; }
.shortcode-block-description { color: var(--muted, #667085); line-height: 1.7; }
.shortcode-products .card, .shortcode-collection .card, .shortcode-brands .card { height: 100%; overflow: hidden; border: 1px solid var(--line, #e5e7eb); border-radius: 14px; background: var(--surface, #fff); box-shadow: var(--shadow-sm, 0 4px 18px rgba(15,23,42,.06)); }
.shortcode-card-image { display: block; width: 100%; height: 180px; object-fit: contain; padding: 12px; background: var(--surface-soft, #f8fafc); }
.shortcode-collection .shortcode-card-image { object-fit: cover; }
.shortcode-brand-logo { display: block; max-width: min(100%, 180px); max-height: 72px; margin: 0 auto 12px; object-fit: contain; }
.shortcode-product-brand { margin: 0 0 .45rem; color: var(--muted, #667085); font-size: .82rem; }
.shortcode-block-cta { margin-top: 1.25rem; }
.shortcode-category .category-card, .shortcode-brand .brand-card, .shortcode-product .product-card { max-width: 720px; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line, #e5e7eb); border-radius: 16px; background: var(--surface, #fff); }
.shortcode-category .shortcode-card-image, .shortcode-product .shortcode-card-image { max-height: 360px; object-fit: contain; }

@media (max-width: 900px) {
    .checkout-grid, .account-grid, .order-detail-grid { grid-template-columns: 1fr; }
    .checkout-sidebar { position: static; order: -1; }
    .account-grid .checkout-card:last-child { order: -1; }
}
@media (max-width: 600px) {
    .form-grid-2 { grid-template-columns: 1fr; }
    .form-field-wide { grid-column: auto; }
    .checkout-card, .auth-card { padding: 20px; border-radius: 16px; }
    .checkout-heading, .account-heading { align-items: flex-start; flex-direction: column; }
    .order-list-row { grid-template-columns: 1fr auto; }
    .order-list-row b { grid-column: 2; grid-row: 1; }
    .order-list-row .status-pill { grid-column: 1; }
}

/* Product information and independent page sections share the theme surface. */
.product-tabs .tab-content,.product-tabs .accordion-body{padding:24px 0;line-height:1.75}
.product-facts-table{width:100%;border-collapse:collapse;font-size:14px}
.product-facts-table th,.product-facts-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line,#e5e7eb)}
.product-facts-table th{width:38%;font-weight:600;color:var(--text-muted,#64748b)}
.product-facts-table tr:nth-child(odd){background:var(--surface-soft,#f8fafc)}
.shipping-notes{margin-top:20px;max-width:75ch}
.product-page .breadcrumb{flex-wrap:wrap;row-gap:8px}
.breadcrumb-item+.breadcrumb-item::before{content:">"}
.page-content-section{margin:32px 0;padding:20px 0}
.page-content-section .shortcode-catalog-block{margin:0}
.page-content-section-feature{padding:40px;border-radius:16px;background:var(--surface-soft,#f6f7f8)}
.page-content-section-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
.page-section-media{margin:0}.page-section-media img{width:100%;height:auto;display:block;border-radius:12px}
.page-section-button{margin:20px 0}.page-section-divider{margin:32px 0;border:0;border-top:1px solid var(--line,#e5e7eb)}
.page-spacer-small{height:16px}.page-spacer-medium{height:32px}.page-spacer-large{height:64px}
@media(max-width:640px){.page-content-section-split{grid-template-columns:1fr;gap:20px}.page-content-section-feature{padding:24px}.product-facts-table th,.product-facts-table td{padding:12px 8px;overflow-wrap:anywhere}.product-facts-table th{width:44%}}
/* Explicit visibility for dynamically updated product information. */
.product-page [hidden] { display: none !important; }

/* R16 creative merchandising system: controlled style variants, no arbitrary template execution. */
.storefront[data-card-style="luxury"] .product-card{border-color:color-mix(in srgb,#b79b62 34%,var(--theme-border));background:linear-gradient(165deg,color-mix(in srgb,var(--theme-bg) 95%,#c9b58a),var(--theme-bg));box-shadow:0 12px 30px rgba(50,38,17,.07)}
.storefront[data-card-style="luxury"] .product-image{background:linear-gradient(145deg,#f6f1e8,#ece5d8)}
.storefront[data-card-style="luxury"] .product-name,.storefront[data-card-style="luxury"] .card-title{font-family:Georgia,"Times New Roman",serif;letter-spacing:.01em}
.storefront[data-card-style="floating"] .product-card{border-color:transparent;border-radius:20px;box-shadow:0 12px 28px rgba(15,23,42,.10)}
.storefront[data-card-style="floating"] .product-image{border-radius:18px;margin:8px;aspect-ratio:1;background:color-mix(in srgb,var(--theme-primary) 5%,var(--theme-bg))}
.storefront[data-card-style="floating"] .product-info,.storefront[data-card-style="floating"] .card-body{padding:16px 18px 20px}
.storefront[data-card-style="editorial"] .product-card{border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--theme-border)}
.storefront[data-card-style="editorial"] .product-image{aspect-ratio:4/5;background:linear-gradient(150deg,color-mix(in srgb,var(--theme-primary) 7%,var(--theme-bg)),var(--theme-bg))}
.storefront[data-card-style="editorial"] .product-name,.storefront[data-card-style="editorial"] .card-title{font-family:Georgia,"Times New Roman",serif;font-weight:500}
.storefront[data-card-style="arched"] .product-image,.storefront[data-card-style="arched"] .product-card-image-link{border-radius:48% 48% 8px 8px;overflow:hidden}
.storefront[data-card-style="arched"] .product-image{margin:10px 10px 0;aspect-ratio:4/4.7}
.storefront[data-card-style="arched"] .product-card{border-radius:18px}
.storefront[data-card-style="split"] .product-card{display:grid;grid-template-columns:42% 58%;align-items:stretch;border-radius:12px}
.storefront[data-card-style="split"] .product-card>.product-image{aspect-ratio:auto;min-height:180px}
.storefront[data-card-style="split"] .product-card>.product-info{align-content:center;padding:12px}
.storefront[data-card-style="split"] .product-card>.position-relative{grid-row:1;grid-column:1}
.storefront[data-card-style="split"] .product-card>.card-body{grid-row:1;grid-column:2;padding:12px;min-width:0}
.storefront[data-card-style="overlay"] .product-card{position:relative;min-height:260px;border:0;border-radius:18px;background:#151515}
.storefront[data-card-style="overlay"] .product-card>.product-image,.storefront[data-card-style="overlay"] .product-card>.position-relative{height:100%;min-height:260px;background:#151515}
.storefront[data-card-style="overlay"] .product-card>.product-image img,.storefront[data-card-style="overlay"] .product-card>.position-relative img{height:100%;min-height:260px;object-fit:cover;opacity:.88}
.storefront[data-card-style="overlay"] .product-card>.product-info,.storefront[data-card-style="overlay"] .product-card>.card-body{position:absolute;inset:auto 0 0;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.88));padding:30px 16px 16px;z-index:2}
.storefront[data-card-style="overlay"] .product-card .product-name a,.storefront[data-card-style="overlay"] .product-card .card-title a,.storefront[data-card-style="overlay"] .product-card .product-price,.storefront[data-card-style="overlay"] .product-card .card-text{color:#fff}
.storefront[data-card-style="overlay"] .product-card .product-brand{color:rgba(255,255,255,.8)}
.storefront[data-card-style="minimal"] .product-card{border:0;border-radius:0;box-shadow:none;background:transparent}
.storefront[data-card-style="minimal"] .product-info,.storefront[data-card-style="minimal"] .card-body{padding:12px 2px}
.storefront[data-card-style="rounded"] .product-card{border-radius:22px}

/* Creative e-commerce navigation: accessible states retain contrast and underline cues. */
.storefront[data-header-menu-style="pill"] .header-main .header-nav .nav-link{border-radius:999px;padding:.55rem .9rem;transition:background .18s,color .18s}
.storefront[data-header-menu-style="pill"] .header-main .header-nav .nav-link:hover,.storefront[data-header-menu-style="pill"] .header-main .header-nav .nav-link.active{background:color-mix(in srgb,var(--theme-primary) 12%,var(--header-bg));color:var(--theme-primary)}
.storefront[data-header-menu-style="underline"] .header-main .header-nav .nav-link{position:relative;text-decoration:none}
.storefront[data-header-menu-style="underline"] .header-main .header-nav .nav-link:after{content:"";position:absolute;left:.75rem;right:.75rem;bottom:.18rem;height:2px;border-radius:2px;background:var(--theme-primary);transform:scaleX(0);transform-origin:left;transition:transform .18s}
.storefront[data-header-menu-style="underline"] .header-main .header-nav .nav-link:hover:after,.storefront[data-header-menu-style="underline"] .header-main .header-nav .nav-link.active:after{transform:scaleX(1)}
.storefront[data-header-menu-style="wave"] .header-main .header-nav .nav-link{position:relative;border-radius:9px 9px 4px 4px;padding:.55rem .8rem}
.storefront[data-header-menu-style="wave"] .header-main .header-nav .nav-link:hover,.storefront[data-header-menu-style="wave"] .header-main .header-nav .nav-link.active{background:color-mix(in srgb,var(--theme-primary) 9%,transparent);box-shadow:inset 0 -3px var(--theme-primary);border-radius:9px 9px 45% 45%}
.storefront[data-header-menu-style="curve"] .header-main .header-nav .nav-link{border-radius:18px 18px 5px 18px;padding:.5rem .85rem}
.storefront[data-header-menu-style="curve"] .header-main .header-nav .nav-link:hover,.storefront[data-header-menu-style="curve"] .header-main .header-nav .nav-link.active{background:var(--theme-primary);color:#fff}
.storefront[data-header-menu-style="diagonal"] .header-main .header-nav .nav-link{position:relative;isolation:isolate;padding:.55rem .9rem}
.storefront[data-header-menu-style="diagonal"] .header-main .header-nav .nav-link:before{content:"";position:absolute;inset:.15rem .25rem;background:color-mix(in srgb,var(--theme-primary) 10%,transparent);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);z-index:-1;opacity:0;transition:opacity .18s}
.storefront[data-header-menu-style="diagonal"] .header-main .header-nav .nav-link:hover:before,.storefront[data-header-menu-style="diagonal"] .header-main .header-nav .nav-link.active:before{opacity:1}

/* Product grids: masonry and bento retain normal document order and responsive fallback. */
.home-layout-masonry{columns:4 210px;display:block!important;column-gap:20px}
.home-layout-masonry>.product-card{display:inline-block;width:100%;break-inside:avoid;margin:0 0 20px}
.home-layout-bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(120px,auto)}
.home-layout-bento>.product-card:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.home-layout-bento>.product-card:nth-child(6n+4){grid-column:span 2}
.home-layout-split{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-layout-split>.product-card:first-child{grid-row:span 2}
.home-taxonomy-masonry{columns:4 160px;display:block!important;column-gap:16px}
.home-taxonomy-masonry>a{display:flex;break-inside:avoid;margin:0 0 16px;min-height:120px}
.home-taxonomy-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.home-taxonomy-bento>a:nth-child(5n+1){grid-column:span 2;grid-row:span 2}
#productGrid.category-products-layout-bento{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0!important}
#productGrid.category-products-layout-bento>[class*="col-"]{width:auto!important;max-width:none!important;flex:none!important;padding:0!important}
#productGrid.category-products-layout-masonry{display:block!important;columns:4 220px;column-gap:20px;margin:0!important}
#productGrid.category-products-layout-masonry>[class*="col-"]{display:inline-block;break-inside:avoid;width:100%!important;max-width:none!important;flex:none!important;margin:0 0 20px;padding:0!important}
#productGrid.category-products-layout-list>[class*="col-"]{width:100%!important;max-width:100%!important;flex:0 0 100%!important}
#productGrid.category-products-layout-list .product-card{display:grid;grid-template-columns:220px minmax(0,1fr)}
#productGrid.category-products-layout-list .product-card .card-img-top{height:220px!important}

/* Homepage section compositions are purely presentational: settings/data remain unchanged. */
.storefront[data-section-style="wave"] main>.home-section:nth-of-type(even){background:color-mix(in srgb,var(--theme-primary) 5%,var(--theme-bg));border-radius:0 0 44px 44px}
.storefront[data-section-style="curve"] main>.home-section:nth-of-type(odd) .container{position:relative}
.storefront[data-section-style="curve"] main>.home-section:nth-of-type(odd){background:linear-gradient(180deg,color-mix(in srgb,var(--theme-primary) 5%,var(--theme-bg)),var(--theme-bg));border-radius:60px 0 60px 0}
.storefront[data-section-style="diagonal"] main>.home-section:nth-of-type(even){background:color-mix(in srgb,var(--theme-primary) 5%,var(--theme-bg));clip-path:polygon(0 3%,100% 0,100% 97%,0 100%);padding-top:calc(var(--theme-section-spacing) + 16px);padding-bottom:calc(var(--theme-section-spacing) + 16px)}
.storefront[data-section-style="split"] main>.home-section:nth-of-type(even)>.container{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(0,2fr);gap:28px;align-items:start}
.storefront[data-section-style="split"] main>.home-section:nth-of-type(even)>.container>h1,.storefront[data-section-style="split"] main>.home-section:nth-of-type(even)>.container>h2,.storefront[data-section-style="split"] main>.home-section:nth-of-type(even)>.container>h3{margin:0;position:sticky;top:100px}
@media(max-width:900px){.home-layout-bento,.category-products-layout-bento,.home-taxonomy-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.home-layout-bento>.product-card:nth-child(n){grid-column:auto;grid-row:auto}.category-products-layout-masonry{columns:2 180px}.home-layout-masonry{columns:2 180px}.home-taxonomy-masonry{columns:2 150px}.storefront[data-section-style="split"] main>.home-section:nth-of-type(even)>.container{grid-template-columns:1fr;gap:12px}.storefront[data-section-style="split"] main>.home-section:nth-of-type(even)>.container>h1,.storefront[data-section-style="split"] main>.home-section:nth-of-type(even)>.container>h2,.storefront[data-section-style="split"] main>.home-section:nth-of-type(even)>.container>h3{position:static}}
@media(max-width:560px){#productGrid.category-products-layout-list .product-card{grid-template-columns:120px minmax(0,1fr)}#productGrid.category-products-layout-list .product-card .card-img-top{height:130px!important}.home-layout-split{grid-template-columns:repeat(2,minmax(0,1fr))}.home-layout-masonry{columns:2 130px}.category-products-layout-masonry{columns:2 130px}}
.product-card .product-image{position:relative;text-decoration:none}
.product-card-badge{position:absolute;top:12px;left:12px;z-index:2;padding:5px 9px;border-radius:999px;background:var(--theme-primary);color:#fff;font-size:.68rem;line-height:1.2;font-weight:750;letter-spacing:.035em;text-transform:uppercase;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.product-card-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--theme-primary) 32%,var(--theme-border));border-radius:var(--theme-btn-radius,10px);color:var(--theme-primary);text-decoration:none;font-size:.85rem;font-weight:700;transition:background .18s,color .18s,transform .18s}
.product-card-cta span{font-size:1.1rem;line-height:1}
.product-card-cta:hover{background:var(--theme-primary);color:#fff;transform:translateY(-1px)}
.storefront[data-card-style="overlay"] .product-card-cta{border-color:rgba(255,255,255,.65);color:#fff;background:rgba(255,255,255,.12)}
.storefront[data-card-style="overlay"] .product-card-cta:hover{background:#fff;color:#17212c}
.storefront[data-card-style="editorial"] .product-card-cta{border-radius:0;border-width:0 0 1px;padding-left:0;padding-right:0}
.storefront[data-card-style="split"] .product-card-cta{font-size:.78rem;padding:8px}
@media(max-width:560px){.product-card-badge{top:7px;left:7px;padding:4px 7px;font-size:.6rem}.product-card-cta{padding:8px 9px;font-size:.78rem}}
/* Shared responsive header controls. */
.header-icon.header-cart{width:auto;min-width:38px;padding-inline:10px;gap:6px}
@media(min-width:901px){.header-layout-centered>.container>.d-flex{display:grid!important;grid-template-columns:1fr auto 1fr;gap:16px}.header-layout-centered .header-logo{position:static;transform:none;grid-column:2;grid-row:1;text-align:center}.header-layout-centered .header-nav{grid-column:1/-1;grid-row:2;justify-self:center}.header-layout-centered>.container>.d-flex>.d-flex{grid-column:3;grid-row:1;justify-self:end}}
@media(max-width:600px){.header-main .header-icon[href="/wishlist"],.header-main .header-icon[href="/account"],.header-main .header-search-toggle{display:none!important}.header-main>.container>.d-flex{gap:10px!important}.header-logo{min-width:0;flex-shrink:1}.header-logo a{overflow-wrap:anywhere}}
.header-main[data-search-style="icon"] .header-search-form{display:none!important}.header-main[data-search-style="icon"] .header-search-form.is-open{display:flex!important;position:absolute;right:20px;top:100%;padding:12px;background:var(--header-bg);box-shadow:0 10px 30px #0002;z-index:10}.header-search-toggle{border:0;background:transparent;color:inherit}
.header-cart-button{background:var(--theme-primary);color:#fff!important;border-radius:var(--theme-btn-radius);padding:8px 14px!important}.header-menu-close{display:none;margin:0 0 16px auto;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;padding:6px 12px}.header-mobile-menu.open .header-menu-close{display:block}
.header-main[data-mobile-style="overlay"] .header-mobile-menu.open{position:fixed;inset:0;height:100dvh;overflow:auto;background:var(--header-bg);z-index:100;padding:24px}.header-main[data-mobile-style="slide"] .header-mobile-menu.open{position:fixed;right:0;top:0;width:min(90vw,390px);height:100dvh;overflow:auto;background:var(--header-bg);z-index:100;padding:24px;box-shadow:-10px 0 40px #0003}
.topbar-notice{flex:1;text-align:var(--topbar-align,left)}.topbar-notice[data-position="left"]{order:0}.topbar-notice[data-position="right"]{order:3}.topbar-menu[data-position="left"]{order:-1}@media(max-width:600px){.topbar-notice{flex-basis:100%}.topbar-menu{flex-wrap:wrap}}
.header-logo .logo-dark,.header-logo .logo-mobile{display:none}html[data-theme="dark"] .header-logo.has-dark-logo .logo-light{display:none}html[data-theme="dark"] .header-logo.has-dark-logo .logo-dark{display:inline-block}.header-wordmark{font-weight:700;font-size:clamp(1.25rem,2.2vw,1.85rem);letter-spacing:.06em}.header-logo>a{text-decoration:none;color:var(--header-text)}
.footer-widget-title{font-size:var(--footer-heading-size,1rem)}.footer-newsletter-button{width:auto;min-width:44px;padding-inline:12px}.storefront[data-card-style="arched"] .product-card-badge{left:50%;transform:translateX(-50%);max-width:80%;white-space:nowrap}