/* =========================================================================
   WINSTON & STRAWN — LIFTOFF THEME
   Design system: cream/black/purple. Modern, responsive, single-source-of-truth.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
    --ws-purple: #B95AFF;
    --ws-purple-deep: #A845FF;
    --ws-purple-soft: #F6ECFF;
    --ws-btn-radius: 0;
    --ws-black: #0c0b10;
    --ws-ink: #1a1a1f;
    --ws-cream: #f4f0e6;
    --ws-cream-2: #ece6d6;
    --ws-white: #ffffff;
    --ws-gray-900: #1a1a1f;
    --ws-gray-700: #44444c;
    --ws-gray-500: #6b6b75;
    --ws-gray-300: #c7c7d0;
    --ws-gray-200: #e2e2e8;
    --ws-gray-100: #f1f1f3;
    --ws-line: #e5e2d8;
    --ws-line-dark: #2a2932;

    --ws-radius-sm: 4px;
    --ws-radius: 8px;
    --ws-radius-lg: 14px;

    --ws-shadow-1: 0 2px 8px rgba(12, 11, 16, 0.06);
    --ws-shadow-2: 0 8px 24px rgba(12, 11, 16, 0.10);
    --ws-shadow-3: 0 18px 48px rgba(12, 11, 16, 0.16);

    --ws-ease: cubic-bezier(.2,.7,.2,1);
    --ws-ease-out: cubic-bezier(0,0,.2,1);

    --ws-font-display: "Inter Display", "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
    --ws-font: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --ws-h-region: 36px;
    --ws-h-banner: auto;
    --ws-h-header: 72px;
    --ws-h-subnav: 52px;
}

/* ---------- Liftoff container reset ---------- */
.container { width: 100%; max-width: 100%; display: block; }
.container#bodyContainer { padding: 0; max-width: 100%; }

/* ---------- Global: every primary ACTION button is sharp-edged purple ----------
   Only true CTA buttons — NOT header account icons (.btnGoLogin/.btnLogout/.btnSwapUser
   are nav icons, not actions). */
a.button:not(.nav--user a):not(.btnGoLogin):not(.btnLogout):not(.btnSwapUser),
button.button:not(.swap-trigger),
.button--theme--primary, .button--theme--secondary, .button--theme--negative,
.button.button--large, .btnLogin, .btnRegister, .btnAddToCart, .btnSendMessage,
.checkout-cta, .pdp-add-to-cart-button, #addToCartButton,
.winston-cta, .btn-primary, a.btn-primary, button.btn-primary,
.ws-btn-hero, .ws-btn-hero:link {
    border-radius: var(--ws-btn-radius) !important;
    background: var(--ws-purple) !important;
    background-color: var(--ws-purple) !important;
    color: #0c0b10 !important;
    -webkit-text-fill-color: #0c0b10 !important;
    border: 0 !important;
    transition: font-size .25s cubic-bezier(.2,.7,.2,1), background .2s var(--ws-ease) !important;
}
a.button:not(.nav--user a):not(.btnGoLogin):not(.btnLogout):not(.btnSwapUser):hover,
button.button:not(.swap-trigger):hover,
.button--theme--primary:hover,
.btnLogin:hover, .btnRegister:hover, .btnAddToCart:hover, .btnSendMessage:hover,
.checkout-cta:hover, .pdp-add-to-cart-button:hover, #addToCartButton:hover,
.winston-cta:hover, .btn-primary:hover,
.ws-btn-hero:hover {
    background: var(--ws-purple) !important;
    background-color: var(--ws-purple) !important;
    color: #0c0b10 !important;
    -webkit-text-fill-color: #0c0b10 !important;
    font-size: 13.5px !important;
}

/* Header account icons stay transparent with subtle hover (no purple fill) */
.nav--user .nav-list .btnGoLogin,
.nav--user .nav-list .btnLogout,
.nav--user .nav-list .btnSwapUser,
.nav--user .nav-list a.btnGoLogin,
.nav--user .nav-list a.btnLogout,
.nav--user .nav-list a.btnSwapUser,
.nav--user .ws-user-menu__trigger {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ws-ink) !important;
    -webkit-text-fill-color: var(--ws-ink) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.nav--user .nav-list .btnGoLogin:hover,
.nav--user .nav-list .btnLogout:hover,
.nav--user .nav-list .btnSwapUser:hover,
.nav--user .ws-user-menu__trigger:hover {
    background: rgba(12,11,16,.06) !important;
    color: var(--ws-ink) !important;
    -webkit-text-fill-color: var(--ws-ink) !important;
    font-weight: 800 !important;
}
.nav--user .nav-list .btnGoLogin:hover svg,
.nav--user .nav-list .btnLogout:hover svg,
.nav--user .nav-list .btnSwapUser:hover svg,
.nav--user .ws-user-menu__trigger:hover svg,
.nav--user .nav-list .btnGoLogin:hover i.fa,
.nav--user .nav-list .btnLogout:hover i.fa,
.nav--user .nav-list .btnSwapUser:hover i.fa,
.nav--user .ws-user-menu__trigger:hover i.fa { stroke-width: 2.4 !important; color: var(--ws-ink) !important; }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--ws-white);
    color: var(--ws-ink);
    font-family: var(--ws-font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}
* { box-sizing: border-box; }
a { color: var(--ws-ink); text-decoration: none; transition: font-weight .2s var(--ws-ease); }
a:hover { color: var(--ws-ink); font-weight: 800; }

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

h1, h2, h3, h4, h5 {
    font-family: var(--ws-font-display);
    color: var(--ws-ink);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p  { margin: 0 0 1rem; }

::selection { background: var(--ws-purple); color: #fff; }

/* ---------- Top progress loader ---------- */
.ws-page-loader {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
    background: transparent; pointer-events: none;
}
.ws-page-loader__bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--ws-purple), #8a5fff);
    box-shadow: 0 0 12px rgba(185,90,255,.6);
    transition: width 1.6s var(--ws-ease-out), opacity .6s ease;
    animation: wsLoaderFill 1.6s forwards;
}
@keyframes wsLoaderFill {
    0% { width: 0; } 60% { width: 80%; } 100% { width: 92%; }
}
.ws-page-loader--done .ws-page-loader__bar { width: 100% !important; opacity: 0; }

/* =========================================================================
   REGION BAR  (USA / EMEA)
   ========================================================================= */
.ws-region-bar {
    background: var(--ws-black);
    color: var(--ws-cream);
    border-bottom: 1px solid var(--ws-line-dark);
    height: var(--ws-h-region);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ws-font);
    font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
    z-index: 60; position: relative;
}
.ws-region-bar__inner {
    display: inline-flex; gap: 0; align-items: center;
}
.ws-region-btn {
    background: transparent; border: 0; color: rgba(244,240,230,.65);
    padding: 6px 14px; height: var(--ws-h-region);
    display: inline-flex; align-items: center; gap: 8px;
    font: inherit; cursor: pointer; transition: color .2s var(--ws-ease);
    border-bottom: 2px solid transparent;
}
.ws-region-btn:hover { color: var(--ws-cream); }
.ws-region-btn.is-active {
    color: var(--ws-cream);
    border-bottom-color: var(--ws-purple);
}
.ws-region-btn svg { display: block; border-radius: 2px; }
.ws-region-divider {
    width: 1px; height: 16px; background: var(--ws-line-dark); margin: 0 4px;
}

/* Live dot — appears beside the flag when region is active */
.ws-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10d36b;
    box-shadow: 0 0 0 0 rgba(16, 211, 107, .65);
    opacity: 0; transform: scale(.4);
    transition: opacity .25s var(--ws-ease), transform .35s var(--ws-ease);
    flex-shrink: 0;
}
.ws-region-btn.is-active .ws-live-dot {
    opacity: 1; transform: scale(1);
    animation: wsLivePulse 1.8s ease-out infinite;
}
@keyframes wsLivePulse {
    0%   { box-shadow: 0 0 0 0   rgba(16, 211, 107, .65); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 211, 107, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(16, 211, 107, 0);   }
}
@media (prefers-reduced-motion: reduce) {
    .ws-region-btn.is-active .ws-live-dot { animation: none; }
}

/* =========================================================================
   HEADER
   ========================================================================= */
.header-wrapper, .header-wrapper--home {
    background: var(--ws-cream) !important;
    position: sticky; top: 0; z-index: 50;
    border-bottom: 1px solid var(--ws-line);
    box-shadow: 0 1px 0 rgba(12,11,16,.02);
}

/* Liftoff banner override — slim announcement strip on top, but keeps CMS control */
.banner {
    background: var(--ws-cream-2);
    color: var(--ws-ink);
    text-align: center; padding: 8px 16px; font-size: 13px; font-weight: 500;
    border-bottom: 1px solid var(--ws-line);
}
.banner:empty { display: none; }
.banner a { color: var(--ws-purple); text-decoration: underline; }

.container--header {
    max-width: 1440px; margin: 0 auto;
    padding: 0 32px;
}

.header-wrapper .header--site,
.header-wrapper--home .header--site {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: var(--ws-h-header) var(--ws-h-subnav) !important;
    grid-template-areas:
        "search logo user"
        "nav    nav   nav" !important;
    align-items: center;
    column-gap: 16px;
    width: 100%;
    float: none !important;
}

/* --- Logo (always centered, dead-center column) --- */
.header-wrapper .header--site .logo-space,
.header-wrapper--home .header--site .logo-space {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--ws-h-header) !important;
    text-align: center;
    width: auto !important;
    float: none !important;
}
.header--site .logo-space a {
    display: inline-flex; align-items: center; line-height: 0;
}
.header--site .logo-space img {
    max-height: 28px !important; width: auto !important;
    margin: 0 !important;
    transition: transform .25s var(--ws-ease);
}
.header--site .logo-space a:hover img { transform: scale(1.02); }

/* --- Search (compact pill, replaces default plain input) --- */
.header-wrapper .header--site .search-box,
.header-wrapper--home .header--site .search-box {
    grid-area: search !important;
    display: flex !important; align-items: center; justify-content: flex-start !important;
    height: var(--ws-h-header);
    width: auto !important; float: none !important;
    padding: 0 !important; background: transparent !important; border: 0 !important;
}
/* The pill itself — beat Liftoff's default formContainer / search-form styles */
.header-wrapper .header--site .search-form,
.header-wrapper--home .header--site .search-form,
.header-wrapper .header--site .formContainer,
.header-wrapper--home .header--site .formContainer {
    position: relative !important;
    width: 100% !important; max-width: 360px !important;
    background: var(--ws-white) !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: 999px !important;
    padding: 0 14px 0 40px !important;
    height: 42px !important;
    display: flex !important; align-items: center !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: border-color .2s var(--ws-ease), box-shadow .2s var(--ws-ease);
}
.header-wrapper .header--site .search-form:focus-within,
.header-wrapper--home .header--site .search-form:focus-within {
    border-color: var(--ws-purple) !important;
    box-shadow: 0 0 0 4px rgba(185,90,255,.12) !important;
}
.header-wrapper .header--site .search-form label,
.header-wrapper--home .header--site .search-form label {
    flex: 1 !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important;
    height: auto !important;
    font: inherit !important;
}
/* The input — must NOT inherit the generic input pill, override hard */
.header-wrapper .header--site #searchTerm,
.header-wrapper--home .header--site #searchTerm {
    border: 0 !important; outline: 0 !important;
    background: transparent !important;
    width: 100% !important; height: 40px !important;
    padding: 0 !important; margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font: 14px var(--ws-font) !important;
    color: var(--ws-ink) !important;
    -webkit-appearance: none !important; appearance: none !important;
}
.header-wrapper .header--site #searchTerm::placeholder,
.header-wrapper--home .header--site #searchTerm::placeholder {
    color: var(--ws-gray-500); opacity: 1;
}
/* The search icon button (a#btnSearch) — kill default Liftoff a.search styling */
.header-wrapper .header--site .search-form #btnSearch,
.header-wrapper--home .header--site .search-form #btnSearch,
.header-wrapper .header--site a#btnSearch,
.header-wrapper--home .header--site a#btnSearch {
    position: absolute !important;
    left: 12px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ws-gray-700) !important;
    cursor: pointer;
    width: 20px !important; height: 20px !important;
    padding: 0 !important; margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}
.header-wrapper .header--site .search-form #btnSearch svg { width: 14px; height: 14px; }
.header-wrapper .header--site .search-form #btnSearch i.fa { font-size: 13px; line-height: 1; }

/* --- Main nav (categories) — second row --- */
.header-wrapper .header--site .nav--site,
.header-wrapper--home .header--site .nav--site {
    grid-area: nav !important;
    width: 100% !important; float: none !important;
}
.nav--site .menu-toggle {
    display: none;
    align-items: center; gap: 8px;
    height: var(--ws-h-subnav); padding: 0 14px;
    background: transparent; border: 0;
    font: 600 14px var(--ws-font); color: var(--ws-ink);
    cursor: pointer;
}
.header-wrapper .nav--site #mainNav,
.header-wrapper--home .nav--site #mainNav {
    list-style: none; padding: 0; margin: 0 !important;
    display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center !important;
    gap: 4px; min-height: var(--ws-h-subnav);
    border-top: 1px solid var(--ws-line);
    width: 100% !important;
    float: none !important;
}
.nav--site #mainNav > li { position: relative; }
.nav--site #mainNav > li > a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 18px; height: var(--ws-h-subnav);
    font: 600 13px/1 var(--ws-font);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ws-ink);
    transition: color .2s var(--ws-ease);
    white-space: nowrap;
}
.nav--site #mainNav > li > a:hover,
.nav--site #mainNav > li.is-open > a { color: var(--ws-ink) !important; font-weight: 800 !important; }
.nav--site #mainNav > li.has-children > a::after {
    content: ""; width: 8px; height: 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s var(--ws-ease);
}
.nav--site #mainNav > li.has-children:hover > a::after,
.nav--site #mainNav > li.is-open > a::after {
    transform: translateY(1px) rotate(225deg);
}

/* dropdown */
.nav--site #mainNav .child {
    list-style: none; padding: 8px; margin: 0;
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: var(--ws-white);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    box-shadow: var(--ws-shadow-2);
    opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ws-ease), transform .2s var(--ws-ease);
    z-index: 80;
}
.nav--site #mainNav > li.has-children:hover .child,
.nav--site #mainNav > li.is-open .child {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav--site #mainNav .child li a {
    display: block; padding: 10px 14px; border-radius: var(--ws-radius-sm);
    font: 500 14px var(--ws-font); color: var(--ws-ink);
    text-transform: none; letter-spacing: 0;
}
.nav--site #mainNav .child li a:hover {
    background: rgba(12,11,16,.06); color: var(--ws-ink); font-weight: 800;
}

/* --- User nav (right side) --- */
.header-wrapper .header--site .nav--user,
.header-wrapper--home .header--site .nav--user {
    grid-area: user !important;
    display: flex !important; align-items: center; justify-content: flex-end !important;
    height: var(--ws-h-header);
    width: auto !important; float: none !important;
}
.nav--user .nav-list.horizontal {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; gap: 4px;
}
.nav--user .nav-list.horizontal > li { line-height: 1; }
.nav--user .nav-list.horizontal > li > a,
.nav--user .nav-list.horizontal > li > .btnGoLogin,
.nav--user .nav-list.horizontal > li > .btnLogout,
.nav--user .nav-list.horizontal > li > .btnSwapUser {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; min-width: 40px; padding: 0 10px;
    border-radius: 999px;
    color: var(--ws-ink);
    font: 500 13px var(--ws-font);
    cursor: pointer;
    transition: background .2s var(--ws-ease), color .2s var(--ws-ease);
}
.nav--user .nav-list.horizontal > li > a:hover,
.nav--user .nav-list.horizontal > li > .btnGoLogin:hover,
.nav--user .nav-list.horizontal > li > .btnLogout:hover,
.nav--user .nav-list.horizontal > li > .btnSwapUser:hover {
    background: rgba(12,11,16,.06); color: var(--ws-ink); font-weight: 800;
}
.nav--user .nav-list.horizontal i.fa,
.nav--user .ws-icon { font-size: 16px; line-height: 1; }
.nav--user .nav-list.horizontal a span:not(.cart-content-count):not(.mobile-only) {
    display: none; /* hide text labels in compact icons row, keep aria via title */
}
.nav--user .nav-list.horizontal li:has(.btnGoLogin) a span,
.nav--user .nav-list.horizontal li.login-link--mobile a span {
    display: inline; /* keep "Log In" text */
}

/* Cart — purple pill button with count */
.cart-indicator {
    display: inline-flex; align-items: center;
}
.cart-indicator a {
    display: inline-flex !important; align-items: center; gap: 8px;
    height: 40px; padding: 0 14px !important;
    background: var(--ws-purple) !important; color: #0c0b10 !important;
    border-radius: var(--ws-btn-radius); font: 600 13px var(--ws-font);
    transition: font-size .18s ease, background .2s var(--ws-ease);
    min-width: 40px;
}
.cart-indicator a:hover { background: var(--ws-purple) !important; color: #0c0b10 !important; font-size: 13.5px !important; }
.cart-indicator i.fa-shopping-cart { font-size: 16px; }
.cart-content-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    background: rgba(255,255,255,.2); color: #fff;
    border-radius: 999px; font: 700 11px var(--ws-font); font-variant-numeric: tabular-nums;
}
.cart-indicator span.mobile-only { display: none; }

/* Identity selector (logged-in B2B accounts) */
.identity-selector {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 12px; margin-left: 12px;
    background: rgba(12,11,16,.05); border-radius: 999px;
    font-size: 12px;
}
.identity-selector select {
    border: 0; background: transparent; font: 500 13px var(--ws-font); color: var(--ws-ink);
    cursor: pointer; outline: 0;
}

/* Hide the {{> node.header}} content slot (Liftoff default) */
.header__content { display: none; }

/* Skip links */
.skip-link {
    position: absolute; left: -9999px;
    background: var(--ws-purple); color: #fff; padding: 8px 14px;
    border-radius: var(--ws-radius); font: 500 14px var(--ws-font);
    z-index: 9999;
}
.skip-link:focus { left: 16px; top: 16px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer-wrapper {
    background: var(--ws-black) !important;
    color: var(--ws-cream) !important;
    margin-top: 64px;
    border-top: 1px solid var(--ws-line-dark);
}
.footer-wrapper a { color: var(--ws-cream); }
/* PDP context — no extra margin between product card and footer */
#bodyContainer:has(.product-landing) + .footer-wrapper,
body:has(.product-landing) .footer-wrapper { margin-top: 0 !important; }
.container--footer {
    max-width: 1440px; margin: 0 auto;
    padding: 64px 32px 32px;
}
.footer--site {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.footer--site .logo-space {
    grid-column: 1 / 2;
}
.footer--site .logo-space img {
    max-height: 44px; filter: brightness(0) invert(1) opacity(.92);
}
.footer--site .cc-list {
    grid-column: 1 / -1; order: 6;
    list-style: none; padding: 0; margin: 24px 0 0;
    display: flex; flex-wrap: wrap; gap: 8px;
    border-top: 1px solid var(--ws-line-dark); padding-top: 24px;
}
.footer--site .cc-list img { height: 24px; opacity: .6; }
.footer--site .footer-nav { grid-column: 2 / 3; }
.footer--site .footer-nav .nav-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.footer--site .footer-nav a,
.footer-wrapper .footer--site .footer-nav a {
    color: var(--ws-cream) !important;
    font-size: 14px !important;
    font-weight: 500;
    opacity: 1 !important;
    transition: color .2s var(--ws-ease);
    text-decoration: none;
}
.footer--site .footer-nav a:hover,
.footer-wrapper .footer--site .footer-nav a:hover { color: var(--ws-cream) !important; font-weight: 800 !important; }

.footer--site .sm-links {
    grid-column: 3 / 4;
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 12px;
}
.footer--site .sm-links a {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); border-radius: 999px;
    color: var(--ws-cream) !important;
    transition: background .2s var(--ws-ease), color .2s var(--ws-ease);
}
.footer--site .sm-links a:hover {
    background: rgba(255,255,255,.12); color: var(--ws-cream) !important;
}
.footer--site .sm-links a:hover svg,
.footer--site .sm-links a:hover i.fa { stroke-width: 2.4; color: var(--ws-cream) !important; }
.footer--site .sm-links a i { font-size: 16px; }
.footer--site .sm-text { font-size: 13px; }

.footer--site .copyright {
    grid-column: 1 / 2; order: 7;
    font-size: 13px;
    color: rgba(244,240,230,.7) !important;
    margin-top: 16px;
}
.footer--site .copyright p { margin: 0; color: inherit; }
.footer--site .legal {
    grid-column: 2 / -1; order: 8;
    list-style: none; padding: 0; margin: 16px 0 0;
    display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-end;
}
.footer--site .legal a,
.footer-wrapper .footer--site .legal a {
    color: rgba(244,240,230,.85) !important;
    font-size: 13px !important;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s var(--ws-ease);
}
.footer--site .legal a:hover,
.footer-wrapper .footer--site .legal a:hover { color: var(--ws-cream) !important; font-weight: 800 !important; }
.footer__content { display: none; }

/* =========================================================================
   BUTTONS  (Liftoff button system + custom)
   ========================================================================= */
.button, button.button, a.button,
.button--theme--primary, .button--theme--secondary, .button--theme--negative,
.btn, input[type="submit"], input[type="button"] {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 48px; padding: 0 22px;
    background: var(--ws-purple); color: #0c0b10 !important;
    border: 0; border-radius: var(--ws-btn-radius);
    font: 700 13px/1 var(--ws-font);
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; text-decoration: none;
    transition: background .2s var(--ws-ease), font-weight .15s var(--ws-ease), box-shadow .2s var(--ws-ease);
    box-shadow: 0 1px 2px rgba(185,90,255,.18);
}
.button:hover, button.button:hover, a.button:hover,
.button--theme--primary:hover, .btn:hover,
input[type="submit"]:hover, input[type="button"]:hover {
    background: var(--ws-purple-deep); transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(185,90,255,.25);
}
.button--theme--secondary {
    background: transparent; color: var(--ws-ink) !important;
    border: 1.5px solid var(--ws-ink);
    box-shadow: none;
}
.button--theme--secondary:hover {
    background: var(--ws-ink); color: #fff !important;
}
.button--theme--negative {
    background: transparent; color: var(--ws-purple) !important;
    border: 1.5px solid var(--ws-purple); box-shadow: none;
}

/* Square / large variant for hero */
.ws-btn-hero {
    display: inline-flex; align-items: center; gap: 10px;
    height: 56px; padding: 0 28px;
    background: var(--ws-purple); color: #0c0b10;
    border-radius: var(--ws-btn-radius);
    font: 700 14px var(--ws-font);
    letter-spacing: 0.12em; text-transform: uppercase;
    transition: font-size .3s cubic-bezier(.2,.7,.2,1), background .2s var(--ws-ease);
}
.ws-btn-hero:hover { background: var(--ws-purple); color: #0c0b10; font-size: 14.5px !important; }
.ws-btn-hero .arr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    transition: transform .2s var(--ws-ease);
}
.ws-btn-hero:hover .arr { transform: translateX(4px); }

/* =========================================================================
   FORMS  (login, register, account, checkout)
   ========================================================================= */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea {
    width: 100%; height: 48px;
    padding: 0 14px;
    background: var(--ws-white);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    font: 14px var(--ws-font); color: var(--ws-ink);
    transition: border-color .2s var(--ws-ease), box-shadow .2s var(--ws-ease);
}
textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
    outline: 0; border-color: var(--ws-purple);
    box-shadow: 0 0 0 4px rgba(185,90,255,.12);
}
label { display: block; font: 600 13px var(--ws-font); color: var(--ws-ink); margin-bottom: 6px; }

/* =========================================================================
   HOMEPAGE  — Hero
   ========================================================================= */
.container--homepage { padding: 0; max-width: 100%; }

.ws-hero {
    position: relative;
    background: var(--ws-black);
    color: var(--ws-cream);
    overflow: hidden;
    min-height: 560px;
    display: flex; align-items: center;
}
@media (min-width: 900px) { .ws-hero { min-height: 640px; } }

.ws-hero__inner {
    position: relative; z-index: 3;
    max-width: 1440px; margin: 0 auto;
    padding: 80px 32px;
    width: 100%;
}

.ws-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font: 600 12px var(--ws-font);
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(244,240,230,.7);
    margin-bottom: 24px;
}
.ws-hero__eyebrow::before {
    content: ""; width: 32px; height: 2px; background: var(--ws-purple);
}
.ws-hero__title {
    font-family: var(--ws-font-display);
    font-weight: 900; font-size: clamp(2.5rem, 8vw, 6rem);
    line-height: .95; letter-spacing: -0.04em;
    color: var(--ws-cream);
    margin: 0 0 24px;
    max-width: 14ch;
}
.ws-hero__title .accent { color: var(--ws-purple); }
.ws-hero__lede {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.55; color: rgba(244,240,230,.78);
    margin: 0 0 36px; max-width: 44ch;
}
.ws-hero__cta { display: inline-flex; }

/* Decorative squares pattern (right side, diagonal feel) */
.ws-hero__pattern {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background-image:
        linear-gradient(135deg, transparent 0%, transparent 55%, rgba(185,90,255,.95) 55%, rgba(185,90,255,.95) 100%);
}
.ws-hero__grid {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    opacity: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.18) 1.4px, transparent 1.4px),
        radial-gradient(rgba(0,0,0,.18) 1.4px, transparent 1.4px);
    background-size: 32px 32px, 32px 32px;
    background-position: 0 0, 16px 16px;
    -webkit-mask-image: linear-gradient(135deg, transparent 0%, transparent 55%, #000 60%, #000 100%);
            mask-image: linear-gradient(135deg, transparent 0%, transparent 55%, #000 60%, #000 100%);
    opacity: 1;
}
/* Word-mark watermark (subtle, on purple side) */
.ws-hero__watermark {
    position: absolute; right: -2%; bottom: 8%;
    z-index: 2; pointer-events: none;
    font-family: var(--ws-font-display);
    font-weight: 900; font-size: clamp(3rem, 9vw, 9rem);
    color: rgba(0,0,0,.18);
    letter-spacing: -0.04em; line-height: 1;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .ws-hero__pattern, .ws-hero__grid { background: none; }
    .ws-hero__pattern {
        background-image: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(185,90,255,.95) 60%, rgba(185,90,255,.95) 100%);
    }
    .ws-hero__watermark { display: none; }
    .ws-hero__inner { padding: 64px 20px; }

    /* Existing CMS hero: shrink further on mobile */
    .homepage__content section.winston-hero,
    .homepage__content .winston-hero,
    section.winston-hero {
        height: clamp(380px, 60vh, 520px) !important;
        min-height: clamp(380px, 60vh, 520px) !important;
    }
    .homepage__content .winston-hero .winston-title {
        font-size: clamp(2rem, 9vw, 3rem) !important;
    }
}

/* =========================================================================
   HOMEPAGE — "Shop the collection" bento
   ========================================================================= */
.ws-collection {
    max-width: 1440px; margin: 0 auto;
    padding: 96px 32px;
}
.ws-collection__head {
    display: flex; align-items: end; justify-content: space-between;
    gap: 32px; margin-bottom: 40px;
}
.ws-section-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font: 600 12px var(--ws-font);
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ws-gray-700);
    margin-bottom: 16px;
}
.ws-section-eyebrow::before {
    content: ""; width: 24px; height: 2px; background: var(--ws-purple);
}
.ws-section-title {
    font-family: var(--ws-font-display);
    font-weight: 900; font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1; letter-spacing: -0.03em;
    margin: 0;
}
.ws-section-title em { font-style: italic; font-weight: 900; }
.ws-section-title .accent { color: var(--ws-purple); }
.ws-collection__viewall {
    font: 600 13px var(--ws-font);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ws-ink); display: inline-flex; align-items: center; gap: 8px;
    border-bottom: 1.5px solid var(--ws-ink); padding-bottom: 4px;
    transition: color .2s var(--ws-ease), border-color .2s var(--ws-ease);
    flex-shrink: 0;
}
.ws-collection__viewall:hover { color: var(--ws-ink); border-color: var(--ws-ink); font-weight: 800; }

.ws-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 280px 280px;
    grid-template-areas:
        "apparel apparel bags    accessories"
        "apparel apparel pride   pride";
    gap: 16px;
}
@media (max-width: 1024px) {
    .ws-bento {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 240px 240px 240px;
        grid-template-areas:
            "apparel apparel"
            "bags    accessories"
            "pride   pride";
    }
}
@media (max-width: 600px) {
    .ws-bento {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 220px);
        grid-template-areas:
            "apparel"
            "bags"
            "accessories"
            "pride";
    }
}

.ws-tile {
    position: relative; overflow: hidden;
    border-radius: var(--ws-radius-lg);
    background: var(--ws-gray-100);
    cursor: pointer;
    isolation: isolate;
    transition: transform .35s var(--ws-ease), box-shadow .35s var(--ws-ease);
}
.ws-tile:hover { transform: translateY(-3px); box-shadow: var(--ws-shadow-3); }
.ws-tile--apparel     { grid-area: apparel; }
.ws-tile--bags        { grid-area: bags; }
.ws-tile--accessories { grid-area: accessories; }
.ws-tile--pride       { grid-area: pride; }

/* Region-gated bentos: USA has 4 tiles (default), EMEA has 3.
   Hide the bento that doesn't match the current <html data-region>. */
.ws-bento--emea { display: none; }
html[data-region="emea"] .ws-bento--usa { display: none; }
html[data-region="emea"] .ws-bento--emea { display: grid; }

/* EMEA bento layout — 3 tiles: large EMEA Merchmart hero on the left,
   EMEA BD Marketing and EMEA Facilities stacked on the right. */
.ws-bento--emea {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 280px 280px;
    grid-template-areas:
        "emea-merchmart emea-bd"
        "emea-merchmart emea-facilities";
}
.ws-tile--emea-merchmart  { grid-area: emea-merchmart; }
.ws-tile--emea-bd         { grid-area: emea-bd; }
.ws-tile--emea-facilities { grid-area: emea-facilities; }

@media (max-width: 1024px) {
    .ws-bento--emea {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 240px 240px;
        grid-template-areas:
            "emea-merchmart emea-merchmart"
            "emea-bd        emea-facilities";
    }
}
@media (max-width: 600px) {
    .ws-bento--emea {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 220px);
        grid-template-areas:
            "emea-merchmart"
            "emea-bd"
            "emea-facilities";
    }
}

.ws-tile__img {
    position: absolute; inset: 0; z-index: 1;
    background-size: cover; background-position: center;
    transition: transform .8s var(--ws-ease);
}
.ws-tile:hover .ws-tile__img { transform: scale(1.06); }
.ws-tile__overlay {
    position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.65) 100%);
    transition: background .3s var(--ws-ease);
}
.ws-tile:hover .ws-tile__overlay {
    background: linear-gradient(180deg, rgba(185,90,255,.15) 0%, rgba(0,0,0,.75) 100%);
}
.ws-tile__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 22px 22px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.ws-tile__name {
    font-family: var(--ws-font-display);
    font-weight: 800; font-size: clamp(1.35rem, 2.2vw, 2rem);
    letter-spacing: -0.02em; line-height: 1;
    margin: 0;
    word-break: break-word;
}
.ws-tile__cta {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 11px var(--ws-font);
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 8px 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: var(--ws-btn-radius);
    color: #fff;
    backdrop-filter: blur(6px);
    transition: background .25s var(--ws-ease), transform .25s var(--ws-ease), border-color .25s var(--ws-ease);
    flex-shrink: 0;
    white-space: nowrap;
    max-width: 100%;
}
.ws-tile:hover .ws-tile__cta {
    background: var(--ws-purple); border-color: var(--ws-purple);
    color: #0c0b10 !important;
    -webkit-text-fill-color: #0c0b10 !important;
    font-weight: 900 !important;
}
.ws-tile:hover .ws-tile__cta svg {
    stroke: #0c0b10 !important;
    fill: none !important;
    stroke-width: 2.6 !important;
}
@media (max-width: 600px) {
    .ws-tile__body { padding: 18px 18px; }
    .ws-tile__name { font-size: 1.5rem; }
}

/* CMS-driven Liftoff homepage callouts (kept for admin compatibility) */
.homepage__callouts {
    max-width: 1440px; margin: 0 auto; padding: 0 32px 96px;
}
.homepage__callouts h2 {
    font-family: var(--ws-font-display);
    font-weight: 900; font-size: clamp(1.75rem, 3vw, 2.4rem);
    letter-spacing: -0.02em;
    margin: 0 0 32px;
}
.homepage__callouts .callouts {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.homepage__callouts .callout {
    margin: 0; position: relative; overflow: hidden;
    border-radius: var(--ws-radius-lg);
    background: var(--ws-gray-100);
    transition: transform .3s var(--ws-ease), box-shadow .3s var(--ws-ease);
}
.homepage__callouts .callout:hover { transform: translateY(-2px); box-shadow: var(--ws-shadow-2); }
.homepage__callouts .callout .img-wrap { display: block; aspect-ratio: 4/3; overflow: hidden; }
.homepage__callouts .callout .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ws-ease); }
.homepage__callouts .callout:hover .img-wrap img { transform: scale(1.05); }
.homepage__callouts .callout figcaption {
    position: absolute; left: 16px; bottom: 16px; right: 16px;
}
.homepage__callouts .callout .cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.92); color: var(--ws-ink);
    padding: 10px 16px; border-radius: 999px;
    font: 600 13px var(--ws-font);
}
.homepage__callouts .callouts:empty { display: none; }

/* CMS slider — keep spec but visually hide if empty */
.slider:empty { display: none; }

/* Homepage main CMS content — full-bleed so admin-built hero spans edge-to-edge */
.homepage__content {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.homepage__content > * { max-width: 100%; }

/* Cap the existing CMS hero so it's not 100vh tall (live site uses .winston-hero with inline height:100vh) */
.homepage__content section.winston-hero,
.homepage__content .winston-hero,
section.winston-hero {
    height: clamp(440px, 70vh, 620px) !important;
    min-height: clamp(440px, 70vh, 620px) !important;
    max-height: 80vh !important;
}
/* Tighten its title scale so it fits the shorter hero */
.homepage__content .winston-hero .winston-title {
    font-size: clamp(2.5rem, 6vw, 4.4rem) !important;
    margin-bottom: 1.25rem !important;
}
.homepage__content .winston-hero .winston-description {
    margin-bottom: 1.75rem !important;
}

/* When CMS uses richer text/HTML inside, give it a constrained inner column */
.homepage__content .rich-text,
.homepage__content .text-block,
.homepage__content > .container {
    max-width: 1200px; margin: 0 auto; padding: 32px;
}

/* =========================================================================
   PAGE TITLE / BREADCRUMB
   ========================================================================= */
.page__title {
    background: var(--ws-cream);
    padding: 56px 32px 32px;
    border-bottom: 1px solid var(--ws-line);
    text-align: center;
}
.page__title h1 {
    font-family: var(--ws-font-display);
    font-weight: 900; font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -0.03em; margin: 0;
}
.breadcrumbs {
    max-width: 1440px; margin: 0 auto;
    padding: 16px 32px; font-size: 13px; color: var(--ws-gray-500);
}
.breadcrumbs a { color: var(--ws-gray-500); }
.breadcrumbs a:hover { color: var(--ws-ink); font-weight: 800; }

/* =========================================================================
   CATEGORY / PRODUCT GRID  (also used on search page)
   ========================================================================= */
.products,
section.products,
section.products--list,
.products--list,
#standardView {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 32px 32px 64px !important;
    width: 100%;
    box-sizing: border-box;
}

/* Search results page — Liftoff renders <figure> as direct children of section.products--list
   with a list-view layout. Force the same grid the category page uses. */
section.products,
section.products--list,
.products--list {
    display: grid !important;
    gap: 40px 24px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1100px) {
    section.products,
    section.products--list,
    .products--list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
    section.products,
    section.products--list,
    .products--list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 460px) {
    section.products,
    section.products--list,
    .products--list { grid-template-columns: 1fr !important; }
}
/* If there's an inner <ul>/.product-list wrapping figures, grid that instead and reset section to block */
section.products:has(> ul),
section.products:has(> .product-list),
section.products--list:has(> ul),
section.products--list:has(> .product-list) {
    display: block !important;
}
section.products > ul,
section.products > .product-list,
section.products--list > ul,
section.products--list > .product-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 40px 24px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1100px) {
    section.products > ul,
    section.products > .product-list,
    section.products--list > ul,
    section.products--list > .product-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
    section.products > ul,
    section.products > .product-list,
    section.products--list > ul,
    section.products--list > .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 460px) {
    section.products > ul,
    section.products > .product-list,
    section.products--list > ul,
    section.products--list > .product-list { grid-template-columns: 1fr !important; }
}
/* Force vertical figure layout (override Liftoff's list-view flex row) */
section.products figure.product,
section.products--list figure.product,
.products--list figure.product {
    display: block !important;
    width: auto !important;
    flex-direction: column !important;
}

/* Search page title — "Search Results: <term>" */
.page__title h1 i {
    font-style: italic;
    color: var(--ws-purple);
    font-weight: 800;
}
.page__title h1 i:empty::before {
    content: '"' attr(data-term) '"';
    color: var(--ws-gray-500);
}

/* Empty / "no products found" alert — cleaner than Liftoff default */
section.products .alert,
section.products--list .alert,
.alert.alert--info,
.alert.alert--warning {
    background: var(--ws-cream) !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius-lg) !important;
    padding: 48px 32px !important;
    text-align: center !important;
    color: var(--ws-gray-700) !important;
    margin: 32px auto !important;
    max-width: 720px;
}
section.products .alert h1,
section.products--list .alert h1,
.alert.alert--info h1,
.alert.alert--warning h1 {
    font-family: var(--ws-font-display) !important;
    font-weight: 800 !important;
    font-size: 1.5rem !important;
    color: var(--ws-ink) !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.015em;
}
.products-toolbar, .toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 32px;
    padding-bottom: 20px; border-bottom: 1px solid var(--ws-line);
}

/* Standard Liftoff product grid */
.products .product-list,
.products ul.products,
.product-grid,
ul.products,
.products > div,
section.products > div {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 40px 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .products .product-list,
    .products ul.products,
    .product-grid,
    ul.products,
    .products > div,
    section.products > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .products .product-list,
    .products ul.products,
    .product-grid,
    ul.products,
    .products > div,
    section.products > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
    .products .product-list,
    .products ul.products,
    .product-grid,
    ul.products,
    .products > div,
    section.products > div { grid-template-columns: 1fr; }
}
figure.product, .product-list .product, li.product {
    margin: 0; position: relative;
    background: transparent !important;
    border: 0 !important;
    transition: transform .25s var(--ws-ease);
    display: flex; flex-direction: column;
    /* Prevent grid blowout: grid items default to min-width:auto = min-content,
       which lets a long product title force minmax(240px, 1fr) wider than the
       viewport and drag the whole document past the right edge. */
    min-width: 0 !important;
}
figure.product:hover { transform: translateY(-3px); }

/* Same fix for the inner text containers — a single unbreakable word in a
   product title would otherwise still push the figure wider than its column. */
figure.product .product__title,
figure.product .product__title a,
figure.product .product__copy,
.product-list .product .product__title,
.product-list .product .product__title a {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Broad grid/flex blowout guard for all the section-level layouts that use
   `minmax(240px, 1fr)` style tracks. Any direct child of these containers
   defaults to min-width:auto = min-content, which can drag the document past
   the viewport when a single descendant has unwrappable content. */
section.products > *,
section.products > ul > *,
section.products > ul > li > *,
section.products > .product-list > *,
section.products > .product-list > li > *,
section.products--list > *,
section.products--list > ul > *,
section.products--list > ul > li > *,
section.products--list > .product-list > *,
section.products--list > .product-list > li > *,
section.products--grid > *,
section.categories > *,
section.subcategories > *,
section.categories.subcategories > *,
.products .product-list > *,
.products .product-list > li > *,
.product-grid > * {
    min-width: 0 !important;
}

/* IMAGE container — outer wrapper is the bordered card with 1:1 aspect ratio.
   Liftoff structures: category = <div.product__image><a><img></a></div>
                       search   = <div.product__image><div.img-wrap><a><img></a></div></div>
   Use flex centering to make the image always fill the card cleanly. */
figure.product > .product__image,
figure.product > .img-wrap,
figure.product > a.productLink {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1/1 !important;
    background: var(--ws-white) !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius-lg) !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: border-color .2s var(--ws-ease), box-shadow .2s var(--ws-ease);
}
figure.product:hover > .product__image,
figure.product:hover > .img-wrap,
figure.product:hover > a.productLink {
    border-color: var(--ws-gray-300) !important;
    box-shadow: 0 4px 16px rgba(12,11,16,.06);
}
/* Inner .img-wrap (when nested inside .product__image) — flex-fill, transparent, no padding */
figure.product .product__image > .img-wrap,
figure.product .product__image .img-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
}
/* Anchors inside the image card */
figure.product .product__image > a,
figure.product .product__image .img-wrap > a,
figure.product .product__image a.productLink {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    text-decoration: none !important;
}
figure.product .product__image > a,
figure.product .product__image > a.productLink,
figure.product .img-wrap > a {
    display: block !important;
    width: 100% !important; height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    text-decoration: none !important;
}
figure.product .product__image img,
figure.product .img-wrap img,
figure.product .product__image .img-wrap img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
    transition: transform .5s var(--ws-ease);
    display: block !important;
    flex: 0 1 auto !important;
}
figure.product:hover .product__image img { transform: scale(1.05); }

/* TEXT block under image — clean, no background, no aspect ratio, no dividers */
figure.product figcaption,
figure.product .product__info {
    padding: 14px 4px 0 !important;
    display: flex !important; flex-direction: column !important; gap: 6px !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    width: 100% !important; height: auto !important;
    overflow: visible !important;
    box-shadow: none !important;
}
figure.product .product__title {
    display: block !important;
    font-family: var(--ws-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ws-ink) !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    word-break: break-word; hyphens: auto;
    -webkit-text-fill-color: var(--ws-ink) !important;
    opacity: 1 !important;
}
figure.product .product__title a,
figure.product .product__title a.productLink,
figure.product .product__title a:link,
figure.product .product__title a:visited,
figure.product .product__title h3,
figure.product .product__title h3 a {
    font-family: var(--ws-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ws-ink) !important;
    -webkit-text-fill-color: var(--ws-ink) !important;
    text-decoration: none !important;
    display: inline !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    width: auto !important; height: auto !important;
    line-height: inherit !important;
    opacity: 1 !important;
    text-shadow: none !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}
/* Search wraps title in <h3>; show as block, then anchor inline */
figure.product .product__title h3 { display: block !important; line-height: 1.4 !important; }
figure.product .product__title a:hover,
figure.product .product__title a.productLink:hover {
    color: var(--ws-ink) !important;
    -webkit-text-fill-color: var(--ws-ink) !important;
    font-weight: 800 !important;
}
figure.product .product__copy {
    font-size: 13px; color: var(--ws-gray-500); line-height: 1.4;
    background: transparent !important; border: 0 !important;
    margin: 0; padding: 0;
}
figure.product .product__copy:empty { display: none; }
figure.product .product__category, .product__cat {
    font-size: 12px; color: var(--ws-gray-500);
    letter-spacing: 0.04em; text-transform: uppercase;
}
figure.product .product__price, .price {
    font: 700 15px var(--ws-font); color: var(--ws-ink);
    font-variant-numeric: tabular-nums;
}

/* HIDE the "VIEW" button — the entire card is clickable via the title link */
figure.product .product__cta,
figure.product .product__cta .button,
figure.product .product__cta a.productLink,
figure.product .product__cta a {
    display: none !important;
}

/* Make the WHOLE figure clickable feel by extending the title link to cover image too via cursor */
figure.product { cursor: pointer; }
/* Ensure NO hr/divider lines appear inside or around product cards */
figure.product hr,
figure.product figcaption hr,
figure.product .product__info hr {
    display: none !important;
}
figure.product,
figure.product figcaption,
figure.product .product__info,
figure.product .product__title,
figure.product .product__copy {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

/* =========================================================================
   PRODUCT DETAIL PAGE — modern Uber-style layout
   Liftoff renders the PDP into <div class="product-landing"> inside #productTemplate.
   Layout: image left (sticky, spans both rows) — info card top-right — pricing card
   bottom-right. Stacked on mobile.
   ========================================================================= */

/* Page background changes to soft cream when PDP is on screen — apply at every level
   to defeat the body's white default and any container that might show through. */
body:has(.product-landing),
html:has(.product-landing) body,
#bodyContainer:has(.product-landing),
#bodyContainer:has(#productTemplate),
#bodyContainer:has(.product-landing) #productTemplate {
    background: var(--ws-cream) !important;
}
.product-landing { background: var(--ws-cream) !important; }
/* Hide .page__title and any #productTemplate padding entirely on PDP */
#productTemplate { padding: 0 !important; margin: 0 !important; background: var(--ws-cream) !important; }
#productTemplate .page__title { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; }

/* PDP-context page__title — Liftoff renders this inside #productTemplate (sibling to .product-landing).
   Hide it entirely; the JS in default.html relocates the H1 into .product__info as .ws-pdp-title. */
#productTemplate .page__title,
#productTemplate > .page__title,
.product-landing ~ .page__title {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
}
/* While JS hasn't run yet (or as fallback) — make the inline page__title h1 compact */
#productTemplate .page__title h1 {
    font-family: var(--ws-font-display) !important;
    font-weight: 800 !important;
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    color: var(--ws-ink) !important;
    margin: 0 0 12px !important;
    padding: 16px 24px 0 !important;
    border: 0 !important;
    text-align: left !important;
    max-width: 1280px;
}
/* Once JS has moved the h1 into the info card, hide the now-empty .page__title wrapper */
#productTemplate:has(.product__info > .ws-pdp-title) .page__title { display: none !important; }

/* The grid wrapper Liftoff renders into.
   Direct children include: .product__images, .product__info (title/description/options/details),
   and .product__pricing (price-tier table + inventory pill — rendered as a sibling). */
.product-landing {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "images" "right" !important;
    gap: 16px !important;
    align-items: stretch !important;
}
@media (min-width: 900px) {
    .product-landing {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
        grid-template-areas: "images right" !important;
        column-gap: 40px !important;
        row-gap: 0 !important;
        padding: 0 32px 12px !important;
    }
}

/* Right column wrapper (added by default.html JS) — stacks info + pricing */
.product-landing .ws-pdp-right {
    grid-area: right !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-self: start !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Fallback: if the JS wrap didn't run, fall back to the old 2-row layout */
.product-landing:not(:has(.ws-pdp-right)) {
    grid-template-areas: "images info" "images pricing" !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
}
.product-landing:not(:has(.ws-pdp-right)) .product__info { grid-area: info !important; }
.product-landing:not(:has(.ws-pdp-right)) .product__pricing { grid-area: pricing !important; }

/* IMAGES — left column gallery card.
   IMPORTANT: .gallery is the thumbnails container INSIDE .product__images, NOT the main image card.
   We must NOT include .gallery here, otherwise it gets the white card + min-height treatment too. */
.product-landing .product__images,
.product-landing .product__image,
.product-landing .lp-slider-container {
    grid-area: images !important;
    background: var(--ws-white) !important;
    border-radius: var(--ws-radius-lg) !important;
    border: 1px solid var(--ws-line) !important;
    overflow: hidden !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
@media (min-width: 900px) {
    .product-landing .product__images,
    .product-landing .product__image,
    .product-landing .lp-slider-container {
        align-self: stretch !important;
        padding: 24px !important;
        max-height: min-content;
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 480px;
    }
}
/* Main image only — direct img children of .product__images / .product__image (not in .gallery).
   Liftoff usually wraps the main image in <a class="productZoom"><img class="thumbnail">
   so we target a/img both as direct child and 1-level nested. */
.product-landing .product__images > img,
.product-landing .product__image > img,
.product-landing .product__images > a > img,
.product-landing .product__image > a > img,
.product-landing .product__images > a.productZoom > img,
.product-landing .product__images > a.productZoom img,
.product-landing .product__images img.thumbnail,
.product-landing .lp-slider-container > img,
.product-landing .lp-slider-container img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
    border: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
/* The wrapping anchor for the main image — fill the card so image can size against it */
.product-landing .product__images > a,
.product-landing .product__image > a,
.product-landing .product__images > a.productZoom,
.product-landing .lp-slider-container > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}
/* === Liftoff actual thumbnail structure ===
   <div class="product__images">
     <a><img main /></a>
     <div class="gallery">
       <ul>
         <li><img></li>
         <li><img></li>
       </ul>
     </div>
   </div>
   Style .gallery as a cream strip; the inner <ul> is the flex track; each <li> is a tab tile. */
.product-landing .product__images > .gallery,
.product-landing .product__image > .gallery {
    display: block !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: var(--ws-cream) !important;
    border: 0 !important;
    border-top: 1px solid var(--ws-line) !important;
    border-radius: 0 0 var(--ws-radius-lg) var(--ws-radius-lg) !important;
    box-sizing: border-box !important;
    margin: 16px -24px -24px !important;
    padding: 12px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: auto !important;
    max-width: none !important;
}
@media (min-width: 900px) {
    .product-landing .product__images > .gallery,
    .product-landing .product__image > .gallery {
        margin: 24px -32px -32px !important;
        padding: 14px 20px !important;
    }
}
.product-landing .product__images > .gallery::-webkit-scrollbar { display: none; }
/* The <ul> inside .gallery — flex track, no list styling */
.product-landing .product__images > .gallery > ul,
.product-landing .product__image > .gallery > ul {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
}
/* Each <li> = a 56x56 tab tile (white card, purple-on-active) */
.product-landing .product__images > .gallery > ul > li,
.product-landing .product__image > .gallery > ul > li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    background: var(--ws-white) !important;
    border: 1.5px solid var(--ws-line) !important;
    border-radius: var(--ws-radius) !important;
    padding: 4px !important;
    margin: 0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: border-color .2s var(--ws-ease), transform .15s var(--ws-ease), box-shadow .2s var(--ws-ease) !important;
    box-shadow: none !important;
}
.product-landing .product__images > .gallery > ul > li:hover {
    border-color: var(--ws-ink) !important;
    transform: translateY(-1px);
}
.product-landing .product__images > .gallery > ul > li.active,
.product-landing .product__images > .gallery > ul > li.selected {
    border-color: var(--ws-purple) !important;
    box-shadow: 0 0 0 3px rgba(185,90,255,.12) !important;
}
.product-landing .product__images > .gallery > ul > li img,
.product-landing .product__image > .gallery > ul > li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    box-shadow: none !important;
}
/* Hide gallery if it has no images (avoids empty cream strip) */
.product-landing .product__images > .gallery:not(:has(li)),
.product-landing .product__images > .gallery:has(ul:empty) {
    display: none !important;
}

/* Thumbnails — for non-Liftoff variants (lp-thumbs, product-thumbs, etc.).
   Liftoff's own .gallery is styled in its dedicated block above. */
.ws-pdp-thumbs,
.product-landing .ws-pdp-thumbs,
.product-landing .lp-thumbs,
.product-landing .product-thumbs,
.product-landing .product__thumbnails,
.product-landing ul.thumbnails {
    display: flex !important;
    gap: 8px !important;
    margin: 16px -24px -24px !important;
    padding: 14px 18px !important;
    background: var(--ws-cream) !important;
    border-top: 1px solid var(--ws-line) !important;
    border-radius: 0 0 var(--ws-radius-lg) var(--ws-radius-lg) !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    list-style: none !important;
    align-items: center !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ws-pdp-thumbs::-webkit-scrollbar,
.product-landing .lp-thumbs::-webkit-scrollbar,
.product-landing .product-thumbs::-webkit-scrollbar,
.product-landing .product__thumbnails::-webkit-scrollbar { display: none; height: 0; }
@media (min-width: 900px) {
    .ws-pdp-thumbs,
    .product-landing .ws-pdp-thumbs,
    .product-landing .lp-thumbs,
    .product-landing .product-thumbs,
    .product-landing .product__thumbnails,
    .product-landing ul.thumbnails { margin: 24px -40px -40px !important; padding: 16px 24px !important; }
}

/* Each thumbnail tab — for non-Liftoff layouts (.ws-pdp-thumbs, .lp-thumbs, etc.).
   Liftoff's actual .gallery > ul > li chain is handled in the dedicated block above. */
.ws-pdp-thumbs > *,
.ws-pdp-thumbs li,
.ws-pdp-thumbs button,
.ws-pdp-thumbs > img,
.ws-pdp-thumb,
.product-landing .lp-thumbs > *,
.product-landing .product-thumbs > *,
.product-landing .product__thumbnails > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    background: var(--ws-white) !important;
    border-radius: var(--ws-radius) !important;
    border: 1.5px solid var(--ws-line) !important;
    overflow: hidden !important;
    cursor: pointer !important;
    padding: 4px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: border-color .2s var(--ws-ease), transform .15s var(--ws-ease), box-shadow .2s var(--ws-ease) !important;
    appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
}
.ws-pdp-thumbs > *:hover,
.ws-pdp-thumb:hover,
.product-landing .lp-thumbs > *:hover,
.product-landing .product-thumbs > *:hover {
    border-color: var(--ws-ink) !important;
    transform: translateY(-1px);
}
.ws-pdp-thumbs > .active,
.ws-pdp-thumbs > .selected,
.ws-pdp-thumb.active,
.product-landing .lp-thumbs > .active,
.product-landing .lp-thumbs > .selected,
.product-landing .product-thumbs > .active,
.product-landing .product-thumbs > .selected {
    border-color: var(--ws-purple) !important;
    box-shadow: 0 0 0 3px rgba(185,90,255,.12) !important;
}
/* The image inside the tab (non-Liftoff variants) */
.ws-pdp-thumbs img,
.ws-pdp-thumb img,
.product-landing .lp-thumbs img,
.product-landing .product-thumbs img,
.product-landing .product__thumbnails img,
.product-landing ul.thumbnails img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* INFO CARD — right column. Contains title, description, specs, options, pricing, ordering. */
.product-landing .product__info {
    grid-area: info !important;
    background: var(--ws-white) !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius-lg) !important;
    padding: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
}
/* Section spacing inside info card */
.product-landing .product__info > * { margin: 0 0 16px !important; }
.product-landing .product__info > *:last-child { margin-bottom: 0 !important; }
.product-landing .product__info > .product__messages:empty,
.product-landing .product__info > .product__specs:empty,
.product-landing .product__info > .product__description:empty { display: none !important; margin: 0 !important; }

/* Title — sits at top of info card (right column). Compact. */
.product-landing .product__title,
.product-landing h1,
.product-landing .product__info h1,
.product-landing .product__info .ws-pdp-title {
    font-family: var(--ws-font-display) !important;
    font-weight: 800 !important;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    color: var(--ws-ink) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
}

/* Once the JS relocates the page title, hide the original .page__title block */
#bodyContainer:has(.product-landing > .product__info > .ws-pdp-title) > .page__title { display: none !important; }

/* SKU + secondary meta */
.product-landing .product__sku,
.product-landing .sku,
.product-landing .productCode {
    font-size: 12px !important;
    color: var(--ws-gray-500) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 0 16px !important;
    display: inline-block;
}

/* Description — Liftoff may use any of these class names. Cover them all. */
.product-landing .product__description,
.product-landing .product__copy,
.product-landing .description,
.product-landing .product__body,
.product-landing .product-description,
.product-landing .product__info > p,
.product-landing .product__info > div:not(.product__title):not(.product__sku):not(.product__pricing):not(.product__options):not(.product__cta):not(.product__quantity):not(.product__ordering) {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--ws-gray-700) !important;
    margin: 0 0 20px !important;
}
/* Add a divider before the first paragraph block so description visually separates from title */
.product-landing .product__info > .product__description,
.product-landing .product__info > .product__copy,
.product-landing .product__info > .description {
    padding-top: 16px !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--ws-line) !important;
}
.product-landing .product__description h2,
.product-landing .product__description h3,
.product-landing .product__copy h2,
.product-landing .product__copy h3 {
    font-family: var(--ws-font-display);
    font-size: 1rem;
    color: var(--ws-ink);
    margin: 1.25em 0 0.4em;
}
.product-landing .product__description ul,
.product-landing .product__copy ul {
    padding-left: 1.4em; margin: 0.5em 0 1em;
}
.product-landing .product__description li::marker { color: var(--ws-purple); }

/* Options block (color, size, etc) */
.product-landing .product__options {
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.product-landing .product__options > div,
.product-landing .product__options .datum,
.product-landing .product__options .option-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
}
.product-landing .product__options label,
.product-landing label {
    font: 600 12px var(--ws-font) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--ws-gray-700) !important;
    display: block !important;
    margin: 0 !important;
}

/* Selects (Color / Size dropdowns) */
.product-landing .product__options select,
.product-landing select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 44px 0 16px !important;
    background: var(--ws-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231a1a1f' stroke-width='1.5' stroke-linecap='round'><polyline points='1 1 6 7 11 1'/></svg>") no-repeat right 18px center !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius) !important;
    font: 500 14px var(--ws-font) !important;
    color: var(--ws-ink) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    transition: border-color .2s var(--ws-ease), box-shadow .2s var(--ws-ease);
}
.product-landing select:focus {
    outline: 0 !important;
    border-color: var(--ws-purple) !important;
    box-shadow: 0 0 0 4px rgba(185,90,255,.12) !important;
}

/* PRICING CARD — sibling of .product__info, placed in column 2 row 2 (bottom right).
   Contains the QUANTITY/PRICE tier table + inventory pill. */
.product-landing > .product__pricing,
.product-landing .product__pricing {
    grid-area: pricing !important;
    background: var(--ws-white) !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius-lg) !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 !important;
    font: 500 14px var(--ws-font) !important;
    color: var(--ws-ink) !important;
    align-self: start !important;
    width: 100% !important;
}
.product-landing .product__pricing > * { margin: 0 !important; padding: 0 !important; }
.product-landing .product__pricing .label,
.product-landing .product__pricing .priceLabel,
.product-landing .product__pricing .unitPriceLabel {
    color: var(--ws-gray-500) !important;
    font: 500 11px var(--ws-font) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-right: 4px !important;
}
.product-landing .product__pricing .unitPrice,
.product-landing .product__pricing .extendedPrice,
.product-landing .product__pricing .itemTotal {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.product-landing .product__pricing .unitPrice .price,
.product-landing .product__pricing .extendedPrice .price,
.product-landing .product__pricing .price {
    font-family: var(--ws-font-display) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    color: var(--ws-ink) !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.1 !important;
}

/* Price tier table — Liftoff uses these class names: table--pricing product-price-breaks
   (also legacy table--ogrid). Both styled identically. */
.product-landing table.table--pricing,
.product-landing table.product-price-breaks,
.product-landing .table--pricing,
.product-landing table.table--ogrid,
.product-landing .table--ogrid {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius) !important;
    overflow: hidden !important;
    margin: 0 !important;
    font: 13px var(--ws-font) !important;
}
.product-landing .table--pricing th,
.product-landing .product-price-breaks th,
.product-landing .table--ogrid th {
    background: var(--ws-ink) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font: 600 11px var(--ws-font) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    text-align: left !important;
    border: 0 !important;
}
.product-landing .table--pricing td,
.product-landing .product-price-breaks td,
.product-landing .table--ogrid td {
    padding: 12px 16px !important;
    color: var(--ws-ink) !important;
    background: var(--ws-white) !important;
    border-bottom: 1px solid var(--ws-line) !important;
    border-left: 1px solid var(--ws-line) !important;
    font-variant-numeric: tabular-nums;
}
.product-landing .table--pricing td:first-child,
.product-landing .product-price-breaks td:first-child,
.product-landing .table--ogrid td:first-child { border-left: 0 !important; }
.product-landing .table--pricing tr:last-child td,
.product-landing .product-price-breaks tr:last-child td,
.product-landing .table--ogrid tr:last-child td { border-bottom: 0 !important; }
.product-landing input.input--ogrid,
.product-landing input.productQuantity {
    width: 64px !important;
    height: 36px !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: 6px !important;
    background: #fff !important;
    text-align: center !important;
    font: 600 14px var(--ws-font) !important;
    padding: 0 8px !important;
}

/* Inventory pill — Liftoff renders <div class="flash flash--success|--alert|--error">
   inside .product__pricing for stock state. Style as a compact pill. */
.product-landing .flash,
.product-landing .product__pricing .flash,
.product-landing .product__pricing > .flash--success,
.product-landing .product__pricing > .flash--alert,
.product-landing .product__pricing > .flash--error {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    font: 600 11px var(--ws-font) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    width: auto !important;
    max-width: max-content !important;
    align-self: flex-start !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
.product-landing .flash--success,
.product-landing .product__pricing .flash--success {
    background: rgba(16, 211, 107, .14) !important;
    color: #0a9352 !important;
}
.product-landing .flash--success::before,
.product-landing .product__pricing .flash--success::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #10d36b;
    box-shadow: 0 0 0 0 rgba(16,211,107,.6);
    animation: wsLivePulse 1.8s ease-out infinite;
    flex-shrink: 0;
}
.product-landing .flash--alert,
.product-landing .product__pricing .flash--alert {
    background: rgba(245, 158, 11, .14) !important;
    color: #b45309 !important;
}
.product-landing .flash--error,
.product-landing .product__pricing .flash--error {
    background: rgba(220, 53, 69, .12) !important;
    color: #b91c1c !important;
}

/* Price display — large + bold */
.product-landing .product__pricing .price,
.product-landing .price,
.product-landing .pdp-price {
    font: 800 28px var(--ws-font-display) !important;
    color: var(--ws-ink) !important;
    font-variant-numeric: tabular-nums;
    margin: 0 !important;
    display: block !important;
    line-height: 1.1;
}
.product-landing .product__pricing .unitPriceLabel,
.product-landing .unitPriceLabel,
.product-landing .priceLabel,
.product-landing .product__pricing > .label {
    font: 500 11px var(--ws-font) !important;
    color: var(--ws-gray-500) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    display: block !important;
    margin: 0 0 4px !important;
}

/* Quantity input */
.product-landing .product__quantity,
.product-landing .product__ordering {
    margin: 0 !important;
}
.product-landing .product__quantity label,
.product-landing .product__ordering label {
    font: 600 11px var(--ws-font) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ws-gray-700) !important;
    margin: 0 0 8px !important;
    display: block !important;
}
.product-landing .product__quantity input,
.product-landing input[type="number"],
.product-landing input.qtyInput,
.product-landing input[id*="uantity"] {
    width: 100px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius) !important;
    background: var(--ws-white) !important;
    font: 600 16px var(--ws-font) !important;
    text-align: center !important;
    color: var(--ws-ink) !important;
}

/* Order totals (price-summary, totals, dl) */
.product-landing .product__ordering .price-summary,
.product-landing .product__ordering .order-total,
.product-landing .product__ordering dl,
.product-landing .product__ordering .totals,
.product-landing dl {
    margin: 8px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--ws-line) !important;
    font: 14px var(--ws-font) !important;
    color: var(--ws-ink) !important;
}
.product-landing dl dt {
    font: 600 11px var(--ws-font) !important;
    color: var(--ws-gray-500) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 8px 0 4px !important;
}
.product-landing dl dd {
    margin: 0 !important;
    padding: 0 0 8px !important;
    color: var(--ws-ink) !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ADD TO CART BUTTON — purple, full-width, prominent */
.product-landing .button,
.product-landing .button--theme--primary,
.product-landing button.button,
.product-landing .product__ordering .button,
.product-landing button.btnAddToCart,
.product-landing #addToCartButton,
.product-landing .pdp-add-to-cart-button {
    width: 100% !important;
    height: 56px !important;
    background: var(--ws-purple) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 0 !important;
    border-radius: var(--ws-btn-radius) !important;
    padding: 0 24px !important;
    font: 700 13px var(--ws-font) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(185,90,255,.25) !important;
    transition: font-size .3s cubic-bezier(.2,.7,.2,1), background .2s var(--ws-ease), box-shadow .2s var(--ws-ease) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    text-decoration: none !important;
    margin: 4px 0 0 !important;
}
.product-landing .button:hover,
.product-landing .button--theme--primary:hover,
.product-landing button.btnAddToCart:hover,
.product-landing #addToCartButton:hover {
    background: var(--ws-purple-deep) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(185,90,255,.32) !important;
}
.product-landing .button:active,
.product-landing #addToCartButton:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(185,90,255,.2) !important;
}
.product-landing .button i.fa { font-size: 14px; }

/* Inventory / In Stock indicator */
.product-landing .inventoryStatus,
.product-landing .inStock,
.product-landing .stock,
.product-landing .product-stock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 14px !important;
    background: rgba(16, 211, 107, .12) !important;
    color: #0a9352 !important;
    border-radius: 999px !important;
    font: 600 11px var(--ws-font) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    width: auto !important;
    align-self: flex-start !important;
    margin: 0 !important;
}
.product-landing .inventoryStatus::before,
.product-landing .inStock::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #10d36b;
    box-shadow: 0 0 0 0 rgba(16,211,107,.6);
    animation: wsLivePulse 1.8s ease-out infinite;
}
.product-landing .outOfStock {
    background: rgba(220, 53, 69, .1) !important;
    color: #dc3545 !important;
}

/* Tier price table — sharp edges */
.product-landing table,
.product-landing .priceTier,
.product-landing .table--pricing,
.product-landing .product-price-breaks,
.product__pricing table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    font-size: 13px !important;
}
.product-landing table th,
.product-landing thead th,
.product-landing .priceTier th {
    background: var(--ws-ink) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font: 600 11px var(--ws-font) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    text-align: left !important;
    border: 0 !important;
}
.product-landing table td,
.product-landing .priceTier td {
    padding: 12px 16px !important;
    color: var(--ws-ink) !important;
    background: var(--ws-white) !important;
    border-bottom: 1px solid var(--ws-line) !important;
    border-left: 1px solid var(--ws-line) !important;
    font-variant-numeric: tabular-nums;
}
.product-landing table td:first-child { border-left: 0 !important; }
.product-landing table tr:last-child td { border-bottom: 0 !important; }

/* Mobile tightening */
@media (max-width: 900px) {
    .product-landing { padding: 24px 16px 64px !important; }
    .product-landing .product__info { padding: 24px !important; }
    .product-landing .product__pricing { padding: 22px 24px !important; }
    .product-landing .product__title,
    .product-landing h1 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    .product-landing .product__pricing .price { font-size: 24px !important; }
    .product-landing .product__images,
    .product-landing .product__image { min-height: 360px !important; padding: 24px !important; }
}

/* Quantity stepper — kept for custom widgets if used elsewhere */
.qty-stepper, .quantity-input {
    display: inline-flex; align-items: center;
    border: 1px solid var(--ws-line); border-radius: 999px; height: 48px;
    overflow: hidden;
}
.qty-stepper button { width: 40px; height: 100%; background: transparent; border: 0; cursor: pointer; font-size: 18px; }
.qty-stepper input, .quantity-input input {
    width: 56px; height: 100%; text-align: center;
    border: 0; background: transparent; font: 600 14px var(--ws-font);
}

/* =========================================================================
   CART / CHECKOUT
   ========================================================================= */
.cart, #cartTemplate, .checkout, #checkoutTemplate {
    max-width: 1280px; margin: 0 auto;
    padding: 32px 32px 96px;
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 48px; align-items: start;
}
@media (max-width: 900px) { .cart, #cartTemplate, .checkout, #checkoutTemplate { grid-template-columns: 1fr; gap: 32px; } }

.cart h1, .checkout h1, #cartTemplate h1, #checkoutTemplate h1 {
    grid-column: 1 / -1;
    font-family: var(--ws-font-display);
    font-weight: 900; font-size: clamp(2rem, 3.6vw, 2.8rem);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.cart-items, .cart__items, .checkout-items {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    border-top: 1px solid var(--ws-line);
}
.cart-item, .cart__item {
    display: grid; grid-template-columns: 96px 1fr auto;
    gap: 16px; padding: 20px 0;
    border-bottom: 1px solid var(--ws-line);
}
.cart-item__image, .cart__item-image {
    width: 96px; height: 96px;
    background: var(--ws-gray-100); border-radius: var(--ws-radius);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.cart-item__image img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 8px; }
.cart-item__info { display: flex; flex-direction: column; gap: 6px; }
.cart-item__name, .cart-item h3 { font: 600 15px var(--ws-font); margin: 0; }
.cart-item__meta { font-size: 13px; color: var(--ws-gray-500); }
.cart-item__price { font: 700 15px var(--ws-font); white-space: nowrap; }
.cart-item__remove {
    background: transparent; border: 0; color: var(--ws-gray-500);
    font-size: 12px; cursor: pointer; padding: 0; align-self: end;
}
.cart-item__remove:hover { color: var(--ws-ink); font-weight: 800; }

.cart-summary, .order-summary, .checkout-summary {
    position: sticky; top: 180px;
    background: var(--ws-cream);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
    padding: 24px;
    display: flex; flex-direction: column; gap: 12px;
}
.cart-summary h3, .order-summary h3 { font-family: var(--ws-font-display); font-size: 1.25rem; margin: 0 0 8px; }
.summary-row { display: flex; justify-content: space-between; font-size: 14px; }
.summary-row--total {
    border-top: 1px solid var(--ws-line); padding-top: 14px; margin-top: 8px;
    font: 800 18px var(--ws-font-display);
}
.checkout-cta { width: 100%; margin-top: 12px; }

/* Empty cart state */
.cart-empty, .empty-cart {
    text-align: center; padding: 96px 32px;
    grid-column: 1 / -1;
}
.cart-empty h2 { font-family: var(--ws-font-display); margin-bottom: 12px; }

/* =========================================================================
   LOGIN / REGISTER  (centered card layout)
   ========================================================================= */
section.login, #loginTemplate {
    min-height: auto !important;
    background: var(--ws-cream) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 80px 24px 96px !important;
    margin: 0 !important;
    width: 100% !important;
}
section.login .login__box {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border-radius: var(--ws-radius-lg) !important;
    padding: 36px !important;
    box-shadow: 0 8px 32px rgba(12,11,16,.06), 0 1px 0 rgba(12,11,16,.04) !important;
    border: 1px solid var(--ws-line) !important;
    height: auto !important;
    min-height: auto !important;
}
section.login .form-area {
    display: block !important;
}
/* Tabs (Log In / Register) */
section.login .swap-pane {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--ws-line) !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    background: transparent !important;
}
section.login .swap-pane .swap-trigger,
section.login button.swap-trigger {
    flex: 1 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 14px 8px !important;
    height: auto !important;
    font: 600 13px var(--ws-font) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ws-gray-500) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: color .2s var(--ws-ease), border-color .2s var(--ws-ease) !important;
    margin-bottom: -1px !important;
}
section.login .swap-pane .swap-trigger:hover,
section.login button.swap-trigger:hover { color: var(--ws-ink) !important; background: transparent !important; transform: none !important; }
section.login .swap-pane .swap-trigger.active,
section.login .swap-pane .swap-trigger--active,
section.login .swap-pane .swap-trigger.swap-trigger--active,
section.login button.swap-trigger.active {
    color: var(--ws-purple) !important;
    border-bottom-color: var(--ws-purple) !important;
}
/* Fieldsets — DON'T force display, let Liftoff JS toggle inline display:none */
section.login fieldset.formFieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
}
/* When fieldset is visible (no inline display:none) → use flex column */
section.login fieldset.formFieldset:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
/* When hidden, force collapse so it doesn't take layout space */
section.login fieldset.formFieldset[style*="display: none"],
section.login fieldset.formFieldset[style*="display:none"] {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
section.login fieldset.formFieldset h1 {
    font-family: var(--ws-font-display) !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: 900 !important; letter-spacing: -0.02em !important;
    margin: 0 0 4px !important;
    text-align: center !important;
}
section.login fieldset.formFieldset .datum {
    display: flex !important; flex-direction: column !important; gap: 6px !important;
    margin: 0 !important;
}
section.login fieldset.formFieldset .datum label {
    font: 600 12px var(--ws-font) !important;
    letter-spacing: 0.06em !important; text-transform: uppercase !important;
    color: var(--ws-gray-700) !important;
    margin: 0 !important;
}
section.login fieldset.formFieldset .datum.control {
    margin-top: 8px !important;
}
section.login fieldset.formFieldset .datum.control .button,
section.login fieldset.formFieldset button.btnLogin,
section.login fieldset.formFieldset button.btnRegister,
section.login button.button--theme--primary,
section.login button.button--large {
    width: 100% !important;
    height: 52px !important;
    background: var(--ws-purple) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--ws-radius) !important;
    font: 700 13px var(--ws-font) !important;
    letter-spacing: 0.1em !important; text-transform: uppercase !important;
    box-shadow: 0 1px 2px rgba(185,90,255,.18) !important;
    cursor: pointer !important;
    transition: background .2s var(--ws-ease) !important;
}
section.login fieldset.formFieldset .datum.control .button:hover,
section.login fieldset.formFieldset button.btnLogin:hover,
section.login fieldset.formFieldset button.btnRegister:hover {
    background: var(--ws-purple-deep) !important;
    transform: none !important;
}
section.login p {
    margin: 0 !important; text-align: center !important;
}
section.login p button.link,
section.login button.link {
    background: transparent !important; border: 0 !important; padding: 0 !important;
    height: auto !important; box-shadow: none !important;
    color: var(--ws-purple) !important; font: 500 13px var(--ws-font) !important;
    text-transform: none !important; letter-spacing: 0 !important;
    cursor: pointer !important; text-decoration: underline !important;
}
section.login p button.link:hover,
section.login button.link:hover { color: var(--ws-purple-deep) !important; background: transparent !important; transform: none !important; }
section.login .hint {
    font-size: 12px !important;
    color: var(--ws-gray-500) !important;
    margin-top: 4px !important;
}
section.login fieldset.formFieldset .datum.isRequired label::after,
section.login fieldset.formFieldset label.isRequired::after {
    content: " *"; color: var(--ws-purple);
}
@media (max-width: 480px) {
    section.login .login__box { padding: 32px 24px !important; }
    section.login { padding: 32px 16px !important; }
}

/* =========================================================================
   ACCOUNT  (dashboard, order history)
   ========================================================================= */
.account, #accountTemplate, .order-history {
    max-width: 1280px; margin: 0 auto;
    padding: 32px 32px 96px;
}
.account h1, #accountTemplate h1, .order-history h1 {
    font-family: var(--ws-font-display);
    font-weight: 900; font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.02em; margin: 0 0 24px;
}
.account-grid, .account-cards {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.account-card {
    background: var(--ws-cream); border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg); padding: 24px;
}
.account-card h3 {
    font-family: var(--ws-font-display); margin: 0 0 8px;
    font-size: 1.1rem;
}
.account-card a { color: var(--ws-purple); font: 600 13px var(--ws-font); }

/* Tables (orders) */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
table th, table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--ws-line); }
table th { font: 600 12px var(--ws-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ws-gray-500); background: var(--ws-cream); }
table tr:hover td { background: rgba(185,90,255,.03); }

/* =========================================================================
   STATIC PAGES (FAQ, About, Terms, Privacy, Contact)
   Liftoff renders these as raw HTML (h1/h2/p/ul) directly inside #bodyContainer
   with NO wrapper class, so we target by tag from the container directly.
   ========================================================================= */

/* Heuristic: a page is "static" when #bodyContainer's first real child is a heading.
   Style direct children of the container as a centered article column. */
#bodyContainer.container > h1,
#bodyContainer.container > h2,
#bodyContainer.container > h3,
#bodyContainer.container > h4,
#bodyContainer.container > p,
#bodyContainer.container > ul,
#bodyContainer.container > ol,
#bodyContainer.container > blockquote,
#bodyContainer.container > pre,
#bodyContainer.container > table,
#bodyContainer.container > hr,
#bodyContainer.container > figure {
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px;
    padding-right: 32px;
    color: var(--ws-gray-700);
    line-height: 1.75;
    font-size: 16px;
}

/* H1: page title — large, ink color, generous top spacing */
#bodyContainer.container > h1 {
    font-family: var(--ws-font-display) !important;
    font-weight: 900 !important;
    font-size: clamp(2rem, 4.2vw, 3rem) !important;
    letter-spacing: -0.03em !important;
    color: var(--ws-ink) !important;
    margin-top: 80px !important;
    margin-bottom: 32px !important;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ws-line);
}

/* H2: section heading */
#bodyContainer.container > h2 {
    font-family: var(--ws-font-display) !important;
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em;
    color: var(--ws-ink) !important;
    margin-top: 2.5em !important;
    margin-bottom: 0.6em !important;
    line-height: 1.25;
}

/* H3 */
#bodyContainer.container > h3 {
    font-family: var(--ws-font-display) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--ws-ink) !important;
    margin-top: 2em !important;
    margin-bottom: 0.4em !important;
}

#bodyContainer.container > h4 {
    font-size: 1rem; font-weight: 700; color: var(--ws-ink);
    margin-top: 1.5em; margin-bottom: 0.3em;
}

/* Paragraph */
#bodyContainer.container > p {
    margin-top: 0 !important;
    margin-bottom: 1.1em !important;
}

/* Lists */
#bodyContainer.container > ul,
#bodyContainer.container > ol {
    padding-left: calc(32px + 1.4em);
    margin: 1em auto !important;
}
#bodyContainer.container > ul > li,
#bodyContainer.container > ol > li {
    margin-bottom: 0.5em;
    padding-left: 0.25em;
}
#bodyContainer.container > ul > li::marker {
    color: var(--ws-purple);
}

/* Inline links */
#bodyContainer.container > p a,
#bodyContainer.container > li a,
#bodyContainer.container > h2 a,
#bodyContainer.container > h3 a {
    color: var(--ws-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s var(--ws-ease);
}
#bodyContainer.container > p a:hover,
#bodyContainer.container > li a:hover { color: var(--ws-purple-deep); }

/* Blockquote */
#bodyContainer.container > blockquote {
    margin: 2em auto !important;
    padding: 1.25em 1.5em !important;
    border-left: 3px solid var(--ws-purple);
    background: var(--ws-cream);
    color: var(--ws-ink);
    border-radius: 0 var(--ws-radius) var(--ws-radius) 0;
    font-size: 17px; line-height: 1.6;
}
#bodyContainer.container > blockquote p { margin: 0 0 0.75em; }
#bodyContainer.container > blockquote p:last-child { margin: 0; }

/* Tables in static pages */
#bodyContainer.container > table {
    border-collapse: collapse;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    overflow: hidden;
    font-size: 14px;
    margin: 1.5em auto !important;
}
#bodyContainer.container > table th {
    background: var(--ws-cream);
    color: var(--ws-gray-700);
    font: 600 12px var(--ws-font);
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 12px 16px; text-align: left;
    border-bottom: 1px solid var(--ws-line);
}
#bodyContainer.container > table td {
    padding: 12px 16px; border-bottom: 1px solid var(--ws-line);
    color: var(--ws-ink);
}

#bodyContainer.container > hr {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 0 !important;
    border-top: 1px solid var(--ws-line) !important;
    height: 0 !important;
    background: transparent !important;
    margin: 3em auto !important;
    padding: 0 !important;
    max-width: 760px !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    color: transparent !important;
}

/* Add bottom space before footer for static pages.
   We use the last direct child to add a margin-bottom. */
#bodyContainer.container > h1:last-child,
#bodyContainer.container > h2:last-child,
#bodyContainer.container > h3:last-child,
#bodyContainer.container > p:last-child,
#bodyContainer.container > ul:last-child,
#bodyContainer.container > ol:last-child,
#bodyContainer.container > blockquote:last-child {
    margin-bottom: 96px !important;
}

/* Contact form (in case the contact page renders form fields directly) */
#bodyContainer.container > form {
    max-width: 640px;
    margin: 32px auto !important;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* =========================================================================
   CONTACT PAGE — Liftoff renders <div class="contact"><div class="contact__title">
   <h1></h1></div><div class="wrap"><div class="form">...</div><div class="map">...</div></div></div>
   ========================================================================= */
.contact {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 64px 32px 96px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.contact__title {
    text-align: center !important;
    margin-bottom: 48px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.contact__title h1 {
    font-family: var(--ws-font-display) !important;
    font-weight: 900 !important;
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    letter-spacing: -0.03em !important;
    color: var(--ws-ink) !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}
.contact .wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    align-items: start !important;
}
@media (min-width: 900px) {
    .contact .wrap {
        gap: 56px !important;
    }
}

/* Form card */
.contact .form,
.contact .formContainer {
    background: var(--ws-white) !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius-lg) !important;
    padding: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    box-shadow: 0 2px 8px rgba(12,11,16,.04);
}
.contact .form .datum,
.contact .formContainer .datum {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
}
.contact .form label,
.contact .formContainer label {
    font: 600 12px var(--ws-font) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--ws-gray-700) !important;
    margin: 0 !important;
}
.contact .form label.isRequired::after,
.contact .formContainer label.isRequired::after {
    content: " *";
    color: var(--ws-purple);
}
.contact .form input[type="text"],
.contact .form input[type="email"],
.contact .form textarea,
.contact .formContainer input[type="text"],
.contact .formContainer input[type="email"],
.contact .formContainer textarea {
    width: 100% !important;
    padding: 0 14px !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius) !important;
    background: var(--ws-white) !important;
    font: 14px var(--ws-font) !important;
    color: var(--ws-ink) !important;
    box-sizing: border-box !important;
}
.contact .form input[type="text"],
.contact .form input[type="email"],
.contact .formContainer input[type="text"],
.contact .formContainer input[type="email"] {
    height: 48px !important;
}
.contact .form textarea,
.contact .formContainer textarea {
    min-height: 140px !important;
    padding: 12px 14px !important;
    resize: vertical;
    line-height: 1.5;
}
.contact .form input:focus,
.contact .form textarea:focus {
    outline: 0 !important;
    border-color: var(--ws-purple) !important;
    box-shadow: 0 0 0 4px rgba(185,90,255,.12) !important;
}
.contact .form .g-recaptcha {
    margin: 0 !important;
}
/* Send Message button — purple primary */
.contact .form button.btnSendMessage,
.contact .form button.button--theme--primary,
.contact .formContainer button.btnSendMessage,
.contact .formContainer button.button--theme--primary {
    width: 100% !important;
    height: 52px !important;
    background: var(--ws-purple) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 0 !important;
    border-radius: var(--ws-radius) !important;
    font: 700 13px var(--ws-font) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(185,90,255,.22) !important;
    transition: background .2s var(--ws-ease), transform .15s var(--ws-ease), box-shadow .2s var(--ws-ease) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    margin: 4px 0 0 !important;
}
.contact .form button.btnSendMessage:hover,
.contact .form button.button--theme--primary:hover {
    background: var(--ws-purple-deep) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(185,90,255,.3) !important;
}
.contact .form button.btnSendMessage i.fa { font-size: 13px; }

/* Map card */
.contact .map {
    background: var(--ws-white) !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius-lg) !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(12,11,16,.04);
}
.contact .map #map {
    width: 100%;
    height: 100%;
    min-height: 400px;
    line-height: 0;
}
.contact .map #map iframe {
    width: 100% !important;
    height: 400px !important;
    border: 0 !important;
    display: block;
}
.contact .map #map br + a,
.contact .map #map a {
    display: block;
    padding: 12px 18px;
    font: 500 13px var(--ws-font);
    color: var(--ws-purple);
    text-decoration: none;
    border-top: 1px solid var(--ws-line);
    background: var(--ws-cream);
    transition: background .2s var(--ws-ease);
}
.contact .map #map a:hover {
    background: var(--ws-line);
}
.contact .map #map br {
    display: none;
}

@media (max-width: 600px) {
    .contact { padding: 40px 16px 64px !important; }
    .contact .form { padding: 24px !important; }
}

/* Legacy class hooks (keep working for any custom-built pages) */
.static-page, .cms-page, .faq, #faqTemplate, .about, .terms, .privacy {
    max-width: 760px; margin: 0 auto;
    padding: 64px 32px 96px;
    color: var(--ws-gray-700); line-height: 1.7;
}
.static-page h1, .cms-page h1 {
    font-family: var(--ws-font-display); font-weight: 900;
    font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em;
    color: var(--ws-ink); margin: 0 0 24px;
}
.static-page h2 { font-size: 1.5rem; margin-top: 2.5em; color: var(--ws-ink); }
.static-page a, .cms-page a { color: var(--ws-purple); text-decoration: underline; }
.contact-form {
    max-width: 640px; margin: 0 auto; padding: 64px 32px 96px;
    display: flex; flex-direction: column; gap: 16px;
}

/* =========================================================================
   IMPERSONATION BAR (Liftoff)
   ========================================================================= */
.imp-container-parent { z-index: 65; }
.imp-container { background: var(--ws-purple); color: #fff; }
.imp-container .button { background: rgba(0,0,0,.2); height: 32px; padding: 0 14px; font-size: 12px; }

/* =========================================================================
   RESPONSIVE — Mobile header + nav drawer
   ========================================================================= */
@media (max-width: 1024px) {
    .container--header { padding: 0 20px; }
    .header--site {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: var(--ws-h-header);
        grid-template-areas: "menu logo user";
    }
    .nav--site { grid-area: menu; height: var(--ws-h-header); }
    .header--site .search-box { display: none; }
    .nav--site .menu-toggle {
        display: inline-flex;
        height: var(--ws-h-header);
        padding: 0 8px;
    }
    .nav--site .menu-toggle .fa { font-size: 18px; margin-right: 6px; }

    .nav--site #mainNav {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: min(86vw, 360px);
        background: var(--ws-cream);
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        height: 100vh;
        border-top: 0; padding: 80px 8px 24px;
        gap: 0;
        transform: translateX(-105%);
        transition: transform .35s var(--ws-ease);
        z-index: 90;
        box-shadow: var(--ws-shadow-3);
        overflow-y: auto;
    }
    .nav--site #mainNav.shown { transform: translateX(0); }
    .nav--site #mainNav > li > a {
        height: 56px; padding: 0 20px;
        font-size: 16px; letter-spacing: 0.04em;
        border-bottom: 1px solid var(--ws-line);
        justify-content: flex-start;
    }
    .nav--site #mainNav .child {
        position: static; transform: none; opacity: 1; pointer-events: auto;
        box-shadow: none; border: 0; border-radius: 0;
        background: rgba(0,0,0,.03); margin: 0; padding: 8px 0 12px 12px;
        min-width: 0;
    }
    .nav--site #mainNav .child li a { padding: 10px 20px; }
    .ws-mobile-close {
        position: absolute; top: 16px; right: 16px;
        width: 40px; height: 40px; border-radius: 50%;
        background: rgba(0,0,0,.06); border: 0; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .ws-mobile-close svg { width: 18px; height: 18px; stroke: var(--ws-ink); }
    /* Backdrop when open */
    body.ws-nav-open::after {
        content: ""; position: fixed; inset: 0;
        background: rgba(12,11,16,.4); z-index: 85;
    }

    /* Compact icons row — hide login text on mobile */
    .nav--user .nav-list.horizontal > li.login-link--mobile a span { display: none; }

    /* Footer responsive */
    .footer--site {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .footer--site .legal { justify-content: flex-start; }

    /* Cart pill compact */
    .cart-indicator a { padding: 0 12px !important; }
}

@media (max-width: 600px) {
    .container--header { padding: 0 12px; }
    .container--footer { padding: 48px 20px 24px; }
    .ws-collection { padding: 64px 20px; }
    .ws-collection__head { flex-direction: column; align-items: start; }
    .header--site .logo-space img { max-height: 28px; }
    .nav--user .ws-icon { display: inline-flex; }
    /* Hide user/swap icons on tiny screens, keep cart + login */
    .nav--user .nav-list.horizontal > li:has(.btnLogout),
    .nav--user .nav-list.horizontal > li:has(.btnSwapUser) { display: none; }

    .ws-region-bar { font-size: 11px; }
    .ws-region-btn { padding: 6px 10px; }
}

/* =========================================================================
   SEARCH OVERLAY  (full-screen on icon click)
   ========================================================================= */
.ws-search-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(244,240,230,.98);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ws-ease);
}
.ws-search-overlay.is-open { opacity: 1; pointer-events: auto; }
.ws-search-overlay__form {
    width: min(720px, 90vw);
    border-bottom: 2px solid var(--ws-ink);
    padding: 12px 0;
    display: flex; align-items: center; gap: 16px;
}
.ws-search-overlay__form input {
    flex: 1; height: 64px; border: 0; background: transparent;
    font: 600 clamp(1.5rem, 3vw, 2rem) var(--ws-font-display);
    color: var(--ws-ink); padding: 0;
    box-shadow: none !important;
}
.ws-search-overlay__form input:focus { outline: 0; box-shadow: none !important; }
.ws-search-overlay__close {
    position: absolute; top: 24px; right: 24px;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ws-ink); color: var(--ws-cream);
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}

/* =========================================================================
   USER DROPDOWN (when logged in)
   ========================================================================= */
.ws-user-menu { position: relative; }
.ws-user-menu__dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 220px;
    background: var(--ws-white);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius);
    box-shadow: var(--ws-shadow-2);
    padding: 8px;
    z-index: 80;
}
.ws-user-menu__dropdown a {
    display: block; padding: 10px 14px; border-radius: var(--ws-radius-sm);
    font: 500 14px var(--ws-font); color: var(--ws-ink);
}
.ws-user-menu__dropdown a:hover { background: rgba(12,11,16,.06); color: var(--ws-ink); font-weight: 800; }

/* =========================================================================
   UTILITIES
   ========================================================================= */
.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mobile-only { display: none; }
@media (max-width: 600px) { .mobile-only { display: inline; } }

/* Hide raw FontAwesome glyphs we replace with SVG, but keep markup for ADA */
.fa { display: inline-block; }

/*Hide Subcategories */
.categories {
display: none;
}
.checkout {
    display: grid;
    grid-template: auto auto / 1fr;}

/* ----- Hub category aggregator (default.html script) ----- */

/* Subcategory dropdown injected after .page__title on parent and child
   category pages, so users can jump between siblings of the same parent. */
.ws-subcategory-wrap {
    margin: 8px 32px 28px;
    max-width: 360px;
}
.ws-subcategory-select {
    width: 100%;
    padding: 12px 40px 12px 14px;
    font: 600 14px var(--ws-font);
    color: var(--ws-ink);
    background-color: var(--ws-cream);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230c0b10' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-sm);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.ws-subcategory-select:hover { border-color: var(--ws-ink); }
.ws-subcategory-select:focus {
    outline: 2px solid var(--ws-purple);
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .ws-subcategory-wrap { margin-left: 16px; margin-right: 16px; max-width: none; }
}

/* Loading state shown while child category pages are being fetched in parallel.
   First-visit hub pages typically wait 1–3s for N category fetches to resolve. */
.ws-aggregating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 32px;
    color: var(--ws-gray-700);
    font: 500 14px var(--ws-font);
}
.ws-aggregating__spinner {
    width: 28px; height: 28px;
    border: 3px solid rgba(185, 90, 255, 0.2);
    border-top-color: #B95AFF;
    border-radius: 50%;
    animation: ws-aggregating-spin 0.8s linear infinite;
}
@keyframes ws-aggregating-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ws-aggregating__spinner { animation: none; }
}

/* ----- Region indicator (default.html script) ----- */

/* Tiny grey USA / EMEA tag aligned to the bottom-right of a category H1.
   Resolved from #mainNav (matches the path against /us or /emea region UL). */
.page__title h1 .ws-region-tag {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 12px;
    margin-bottom: 0.35em;
    font-family: var(--ws-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-gray-500);
    line-height: 1;
}

/* "Region" row appended to .product__pricing on PDPs. Styled to match the
   existing label/value rows in that block (small caps label + bold value). */
.product-landing .product__pricing .ws-region-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 0 !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--ws-line);
}
.product-landing .product__pricing .ws-region-row__label {
    color: var(--ws-gray-500) !important;
    font: 500 11px var(--ws-font) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.product-landing .product__pricing .ws-region-row__value {
    color: var(--ws-ink) !important;
    font: 700 14px var(--ws-font) !important;
    letter-spacing: 0.04em;
}

/* Add-to-Cart region gate: when the viewer's flag doesn't match the product's
   true region, the button is locked and a notice appears just above it. */
.ws-region-mismatch-notice {
    background: rgba(185, 90, 255, 0.08);
    border: 1px solid var(--ws-purple, #B95AFF);
    color: var(--ws-ink);
    padding: 12px 14px;
    border-radius: var(--ws-radius-sm);
    font: 500 13px var(--ws-font);
    line-height: 1.5;
    margin: 0 0 12px;
}
.btnAddToCart.ws-region-locked,
#addToCartButton.ws-region-locked,
.pdp-add-to-cart-button.ws-region-locked,
button.ws-region-locked.add-to-cart,
button[name="add-to-cart"].ws-region-locked {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(40%);
}

/* ----- Region switch gate modal (cart guard / auth guard) ----- */
.ws-region-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(12, 11, 16, 0.55);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: ws-modal-fade .15s ease-out;
}
@keyframes ws-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.ws-region-modal {
    background: var(--ws-white);
    border-radius: var(--ws-radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    max-width: 460px;
    width: 100%;
    padding: 32px;
    font-family: var(--ws-font);
    animation: ws-modal-pop .2s cubic-bezier(.2,.7,.2,1);
}
@keyframes ws-modal-pop {
    from { transform: scale(.96); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.ws-region-modal__title {
    font-family: var(--ws-font-display);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--ws-ink);
    letter-spacing: -0.02em;
}
.ws-region-modal__body {
    font: 500 15px var(--ws-font);
    color: var(--ws-gray-700);
    margin: 0 0 24px;
    line-height: 1.5;
}
.ws-region-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.ws-region-modal__btn {
    border: 0;
    cursor: pointer;
    padding: 14px 24px;
    font: 700 13px var(--ws-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--ws-radius-sm);
    transition: background .2s, color .2s, border-color .2s, font-size .2s cubic-bezier(.2,.7,.2,1);
}
.ws-region-modal__btn--primary {
    background: #B95AFF;
    color: #0c0b10;
}
.ws-region-modal__btn--primary:hover {
    background: #B95AFF;
    color: #0c0b10;
    font-size: 13.5px;
}
.ws-region-modal__btn--secondary {
    background: transparent;
    color: var(--ws-gray-700);
    border: 1px solid var(--ws-line);
}
.ws-region-modal__btn--secondary:hover {
    color: var(--ws-ink);
    border-color: var(--ws-ink);
}

/* Cart quantity datum: Liftoff renders this as a grid which forces an awkward
   stacked layout. Switch to block so label + input flow naturally. */
.cart__item .item__details .item__pricing .quantity .datum {
    display: block !important;
}

/* ----- Shop All page (default.html script) -----
   Region-wide product aggregation with category filter and pagination. */
.ws-shop-all-root { padding: 0; }
.ws-shop-all__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 8px 32px 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ws-line);
}
.ws-shop-all__filter {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ws-shop-all__filter label {
    font: 600 11px var(--ws-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ws-gray-500);
    white-space: nowrap;
}
.ws-shop-all__filter .ws-subcategory-select { min-width: 240px; }
.ws-shop-all__count {
    font: 500 13px var(--ws-font);
    color: var(--ws-gray-500);
    font-variant-numeric: tabular-nums;
}

.ws-shop-all__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 48px 32px 32px;
    padding-top: 24px;
    border-top: 1px solid var(--ws-line);
}
.ws-shop-all__page-btn {
    background: var(--ws-cream);
    border: 1px solid var(--ws-line);
    color: var(--ws-ink);
    font: 700 12px var(--ws-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 11px 20px;
    border-radius: var(--ws-radius-sm);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.ws-shop-all__page-btn:hover:not(:disabled) {
    background: var(--ws-ink);
    color: var(--ws-white);
    border-color: var(--ws-ink);
}
.ws-shop-all__page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.ws-shop-all__page-info {
    font: 500 13px var(--ws-font);
    color: var(--ws-gray-700);
    font-variant-numeric: tabular-nums;
    min-width: 100px;
    text-align: center;
}

@media (max-width: 600px) {
    .ws-shop-all__toolbar {
        margin: 8px 16px 20px;
        flex-direction: column;
        align-items: stretch;
    }
    .ws-shop-all__filter {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .ws-shop-all__filter .ws-subcategory-select { min-width: 0; width: 100%; }
    .ws-shop-all__count { text-align: center; }
    .ws-shop-all__pagination { margin: 32px 16px 24px; gap: 10px; flex-wrap: wrap; }
}
.nav--site #mainNav .nav-list--extra {
    display: flex !important;
    list-style: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    height: 52px;
    font: 600 13px / 1 var(--ws-font, sans-serif);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0c0b10;
    text-decoration: none;
    white-space: nowrap;
}
.datum .hint { display: none;}