/* ============================================================
   Medussa Home Bedding — faithful clone of old TemplateMonster theme
   Brand:   navy #01072A  |  nav-gold #E5A435  |  logo-gold #cda379
   Body:    Ubuntu sans  |  Headings: Ubuntu  |  Decor: Open Sans
   ============================================================ */

/* === Typography baseline === */
body, .page-wrapper, .columns, .column.main, p, td, li, span, label, input, select, textarea, button {
    font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
body {
    color: #01072A !important;
    font-size: 14px !important;
    background: #ffffff !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Ubuntu', sans-serif !important;
    color: #01072A !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
a { color: #01072A; transition: color .25s; }
a:hover, a:focus { color: #E5A435; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* === Top utility bar — Magento panel.wrapper hidden everywhere; mobile gets
   a CSS-only welcome strip via ::before to dodge Luma's nested-nav cloning
   that broke previous panel.wrapper styling attempts. === */
.page-header .panel.wrapper { display: none !important; }
@media (max-width: 767px) {
    .page-header::before {
        content: "Welcome to Medussa online store!";
        display: block;
        background: #01072A;
        color: #E5A435;
        font-style: italic;
        font-size: 12px;
        padding: 8px 60px 8px 16px;
        text-align: center;
        line-height: 1.4;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
}
/* ZH variant — overwrite content on the Chinese store */
@media (max-width: 767px) {
    html[lang="zh"] .page-header::before,
    html[lang^="zh"] .page-header::before {
        content: "欢迎光临美杜莎床品！";
    }
}

/* === Unified single-row header: logo + nav inline + right-side icon strip === */
/* Magento's blank parent renders 3 stacked rows (.panel.wrapper [hidden], .header.content with
   logo+search+minicart, .nav-sections with navigation). Visual-collapse them into one row by
   pinning .nav-sections into the same horizontal band as .header.content via negative margin. */

/* Default header: solid dark-blue on inner pages */
.page-header {
    background: #01072A !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    position: relative !important;
    padding-right: 60px !important;            /* leave room for the right icon strip */
}
/* Mobile: the fixed 60-px right icon strip overlaps page content (cart summary,
   product info) because viewport is narrow. Push body padding 60-px right so
   nothing renders under the strip. Desktop already has whitespace on the
   right of the centered .page-main, so this is mobile-only. */
@media (max-width: 767px) {
    body {
        padding-right: 60px !important;
    }
}
.page-header .header.content {
    background: transparent !important;
    padding: 24px 90px 24px 30px !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 36px !important;
    position: relative !important;
}
/* HOME PAGE: header is translucent and overlays the hero slider. Old site uses
   background:#01072A; opacity:0.6 on cms-home. We use rgba so children stay
   opaque, AND we make the header absolute over the hero slider. */
body.cms-index-index .page-header,
body.cms-home .page-header {
    background: rgba(1, 7, 42, 0.6) !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 50 !important;       /* above hero, above nav-sections */
}
body.cms-index-index .page-header .header.content,
body.cms-home .page-header .header.content { background: transparent !important; }
/* Make nav-sections inherit the same top:0 band — and bring it above the header bg so menu links sit on top */
body.cms-index-index .nav-sections,
body.cms-home .nav-sections { z-index: 60 !important; }
/* Pull main content (hero) up so it starts at viewport top, beneath the translucent header */
body.cms-index-index .page-main,
body.cms-home .page-main { margin-top: 0 !important; padding-top: 0 !important; }
body.cms-index-index .page-wrapper,
body.cms-home .page-wrapper { position: relative !important; }
.page-header .logo {
    margin: 0 !important;
    flex-shrink: 0 !important;
    float: none !important;
    max-width: 280px !important;
    order: 1 !important;
}
.page-header .logo img {
    max-height: 75px !important;
    width: auto !important;
    display: block !important;
}

/* minicart + top.search are MOVED via layout XML into .medussa-header-icons */

/* Pull .nav-sections up into the same horizontal band as the logo */
.nav-sections {
    background: transparent !important;
    margin: 0 !important;
    position: absolute !important;
    left: 0 !important; right: 60px !important; top: 0 !important;
    height: 123px !important;                  /* matches .header.content height incl. padding */
    z-index: 5 !important;
}
.nav-sections .section-items,
.nav-sections .section-item-content,
.nav-sections .section-item-title { background: transparent !important; height: 100% !important; }

.navigation {
    background: transparent !important;
    max-width: none !important;
    margin: 0 !important;
    /* Logo offsetRight measured at 367px in production; +13px breathing gap.
       Previous calc(60+250+20)=330 left nav text starting under the logo. */
    padding: 0 30px 0 380px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0;
}
.navigation > ul {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    width: 100%;
}
/* Keep submenus hidden by default — Magento JS controls open state via aria-expanded */
.navigation .submenu,
.navigation ul.submenu,
.navigation .level0 .submenu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 270px !important;
    min-width: 270px !important;
    background: #01072A !important;
    box-shadow: 0 0 20px rgba(52,52,52,0.5) !important;
    padding: 8px 0 !important;
    margin: 5px 0 0 0 !important;
    border: none !important;
    z-index: 100 !important;
}
.navigation .level0:hover > .submenu,
.navigation .level0 > .submenu[aria-expanded="true"],
.navigation .level0[aria-expanded="true"] > .submenu {
    display: block !important;
}
.navigation .submenu li { display: block !important; margin: 0 !important; }
.navigation .submenu li a {
    display: block !important;
    padding: 6px 16px !important;
    color: #cda379 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 300 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 24px !important;
    white-space: nowrap;
    border: none !important;
}
.navigation .submenu li a:hover {
    color: #ffffff !important;
    background: transparent !important;
}
.navigation .level0 { position: relative !important; }
/* Welcome italic muted gold (was light-blue) */
.navigation > ul::after {
    color: #cda379 !important;
    font-size: 14px !important;
}
.navigation .level0 { margin: 0 !important; }
.navigation .level0 > a.level-top,
.navigation a.level-top {
    color: #E5A435 !important;
    background: transparent !important;
    border: none !important;
    text-transform: uppercase !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: normal !important;
    padding: 0 3px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}
.navigation .level0 { margin: 0 8px !important; }
.navigation .level0 > a.level-top span { white-space: nowrap !important; }
.navigation .level0 > a.level-top:hover,
.navigation .level0.active > a.level-top,
.navigation .level0.has-active > a.level-top {
    color: #ffffff !important; background: transparent !important;
}
/* Nested submenu: 2nd-level (and deeper) flies out to the right of its parent item.
   Old site offset: top:-8px left:270px relative to the parent <li>. */
.navigation .submenu li { position: relative !important; }
.navigation .submenu .submenu {
    top: -8px !important;
    left: 270px !important;
    margin: 0 !important;
}
/* Recursive hover/aria reveal — works for level1, level2, level3, ... */
.navigation .submenu li:hover > .submenu,
.navigation .submenu li > .submenu[aria-expanded="true"],
.navigation .submenu li[aria-expanded="true"] > .submenu {
    display: block !important;
}
/* Caret on parent items inside a submenu — points right, since the child flies right */
.navigation .submenu li.parent > a::after {
    content: '\f105'; /* font-awesome chevron-right */
    font-family: 'FontAwesome';
    font-weight: normal;
    font-size: 12px;
    float: right;
    opacity: 0.85;
}
.navigation .submenu li.parent > a .ui-menu-icon { display: none !important; }

/* Dropdown caret on parent level-0 items */
.navigation .level0.parent > a.level-top::after {
    content: '\f107'; /* font-awesome chevron-down */
    font-family: 'FontAwesome';
    font-weight: normal;
    font-size: 12px;
    margin-left: 8px;
    opacity: 0.85;
}
.navigation .level0.parent > a.level-top .ui-menu-icon { display: none !important; }

/* Welcome italic — use the actual Magento .greet.welcome element (it auto-uses the right
   per-store text from core_config_data design/header/welcome). The old hardcoded pseudo
   here forced EN text into the CN store. */
.navigation > ul::after { content: none !important; }
.page-header .greet.welcome {
    position: absolute !important;
    right: 76px;                 /* clear the 60px icon strip + a gap */
    top: 22px;
    color: #c5c8d6 !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-style: italic !important;
    font-size: 12px !important;
    text-align: right;
    white-space: nowrap;
    z-index: 5;
}
/* Hide the rest of ul.header.links (My Account, Sign In, etc.) on the top right —
   they are visually represented in the .medussa-header-icons strip instead.
   But keep the parent ul + the welcome li VISIBLE (not display:none). */
.page-header ul.header.links { display: block !important; }
.page-header ul.header.links > li.greet.welcome { display: block !important; }
.page-header ul.header.links > li:not(.greet) { display: none !important; }
/* Position the welcome (which sits inside ul.header.links) as the floating italic
   on the upper-right of the header bar */
.page-header ul.header.links {
    position: absolute !important;
    right: 76px;
    top: 22px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    z-index: 5;
}
.page-header ul.header.links li.greet.welcome {
    color: #c5c8d6 !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-style: italic !important;
    font-size: 12px !important;
    white-space: nowrap;
    line-height: 1.2;
}

/* Right-strip icon ORDER (use flex order so source order doesn't matter):
   cart (1) → search (2) → account (3) → login key (4) */
.page-header .medussa-header-icons { display: flex !important; }
.page-header .medussa-header-icons .minicart-wrapper { order: 1; }
.page-header .medussa-header-icons .block-search    { order: 2; }
.page-header .medussa-header-icons .account-icon    { order: 3; }
.page-header .medussa-header-icons .login-icon      { order: 4; }
/* Account icon — same styling as login icon but with person glyph */
.page-header .medussa-header-icons .account-icon {
    display: flex !important;
    width: 60px !important;
    height: 60px !important;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none !important;
}
.page-header .medussa-header-icons .account-icon::before {
    content: '';
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'><path d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Logo + nav-sections stacking: nav-sections is z=3 by Magento blank default
   and spans full width, so its area covers the logo even though the logo has
   z-index:5. The logo's parent .header.content was z-index:auto (defaults to 0)
   so the logo's 5 was effectively below nav's 3. Lift .header.content above
   nav-sections so the logo can receive clicks. */
/* Logo + header-icons sit ABOVE the absolute-positioned nav-sections strip.
   nav-sections is z:5, so lift just these two elements to z:11. Do NOT touch
   header.content z-index — that would visually cover nav. */
.page-header .logo {
    position: relative !important;
    z-index: 11 !important;
}
/* === Right-side vertical icon strip — fixed to viewport, full-height brown bar
   matching old site's .side-navbar. === */
.page-header .medussa-header-icons,
.medussa-header-icons {
    position: fixed !important;
    right: 0 !important; top: 0 !important;
    width: 60px !important;
    height: 100vh !important;
    background: #1b110d !important;       /* dark brown to match old site */
    border-left: none !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding-top: 0 !important;
}
.medussa-header-icons .minicart-wrapper,
.medussa-header-icons .block-search,
.medussa-header-icons .account-icon,
.medussa-header-icons .login-icon {
    position: relative !important;
    width: 60px !important;
    height: 60px !important;             /* match old 60×60 per box */
    min-height: 60px !important;
    flex: 0 0 60px !important;            /* don't let flex shrink them */
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.medussa-header-icons .minicart-wrapper .action.showcart {
    color: #ffffff !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.medussa-header-icons .minicart-wrapper .action.showcart::before {
    color: #ffffff !important;
    font-size: 22px !important;
    margin: 0 !important;
}
.medussa-header-icons .minicart-wrapper .action.showcart .text,
.medussa-header-icons .minicart-wrapper .action.showcart .counter-label,
.medussa-header-icons .minicart-wrapper .action.showcart .counter-number { display: none !important; }
.medussa-header-icons .minicart-wrapper .action.showcart .counter.qty {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 18px; height: 18px;
    background: #E5A435 !important;
    color: #ffffff !important;
    border-radius: 9px;
    font-size: 11px !important;
    line-height: 18px !important;
    padding: 0 4px !important;
}
/* search-block as collapsed icon with hover-out form */
.medussa-header-icons .block-search {
    width: 60px !important;
    position: relative !important;
}
.medussa-header-icons .block-search .block-title { display: none !important; }
.medussa-header-icons .block-search .block-content,
.medussa-header-icons .block-search form,
.medussa-header-icons .block-search .field.search {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.medussa-header-icons .block-search .label {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 60px !important;
    height: 50px !important;
    margin: 0 !important;
    cursor: pointer;
    z-index: 2;
    text-indent: -9999px;
    overflow: hidden;
}
.medussa-header-icons .block-search .label > span { display: none !important; }
.medussa-header-icons .block-search .label::before {
    content: '\f002' !important;
    font-family: 'FontAwesome' !important;
    color: #ffffff !important;
    font-size: 18px !important;
    text-indent: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    inset: 0 !important;
}
.medussa-header-icons .block-search .control {
    position: absolute !important;
    right: 60px !important;
    top: 0 !important;
    width: 280px !important;
    height: 50px !important;
    background: #01072A !important;
    padding: 5px 8px !important;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
    z-index: 1;
}
.medussa-header-icons .block-search:hover .control,
.medussa-header-icons .block-search:focus-within .control {
    visibility: visible;
    opacity: 1;
}
.medussa-header-icons .block-search input {
    position: static !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 0 !important;
    padding: 0 12px !important;
    color: #ffffff !important;
    height: 40px !important;
    width: 100% !important;
    left: auto !important;
    margin: 0 !important;
}
.medussa-header-icons .block-search input::placeholder { color: rgba(255,255,255,0.55) !important; }
.medussa-header-icons .block-search .action.search {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
}
.medussa-header-icons .block-search .action.search::before { color: #ffffff !important; }

/* Hide minicart contents popup arrow position default */
.medussa-header-icons .minicart-wrapper .block-minicart { right: 60px !important; }

/* (Legacy ::after pseudo-icons removed — real account-icon and login-icon
   elements are now injected via layout XML and render their own SVGs.) */

/* === Home page: break out of Magento blank's .page-main 1280px max-width === */
body.cms-home .page-main,
body.cms-index-index .page-main {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.cms-home .columns,
body.cms-index-index .columns,
body.cms-home .column.main,
body.cms-index-index .column.main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* === Inner pages: page-main full-bleed minus right icon strip; columns contained 1200 === */
body.page-products .page-main,
body.catalog-product-view .page-main,
body.checkout-cart-index .page-main,
body.cms-page-view .page-main,
body.catalog-category-view .page-main {
    max-width: none !important;
    width: auto !important;
    margin: 0 60px 0 0 !important;
    padding: 24px 0 60px 0 !important;
}
body.page-products .columns,
body.catalog-product-view .columns,
body.checkout-cart-index .columns,
body.cms-page-view .columns,
body.catalog-category-view .columns {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

/* Category page 2-col layout: 370 sidebar + 770 main */
body.catalog-category-view.page-layout-2columns-left .sidebar.sidebar-main {
    width: 370px !important;
    padding-right: 30px !important;
}
body.catalog-category-view.page-layout-2columns-left .column.main {
    width: calc(100% - 370px) !important;
}
body.catalog-category-view .products-grid .product-items {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 0 !important;             /* row-gap 20px, no horizontal gap — matches old edge-to-edge 2-col */
}
body.catalog-category-view .products-grid .product-item {
    width: auto !important;
    margin: 0 !important;
    padding: 0 8px !important;          /* small inner padding so card images don't kiss the column edge */
}
/* Same image-fill treatment for related/upsell products on PDP — shares .product-item /
   .product-image-container structure but scoped to body.catalog-product-view */
body.catalog-product-view .products-grid .product-item-info,
body.catalog-product-view .products-grid .product-item-photo,
body.catalog-product-view .products-grid .product-image-container,
body.catalog-product-view .products-grid .product-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}
body.catalog-product-view .products-grid [class*="product-image-container-"] {
    aspect-ratio: 3 / 2 !important;
    width: 100% !important;
    height: auto !important;
}
body.catalog-product-view .products-grid .product-image-photo {
    position: static !important;
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
body.catalog-product-view .products-grid .product-image-wrapper {
    padding: 0 !important;
    height: auto !important;
    position: static !important;
}
body.catalog-product-view .products-grid .product-item-photo {
    height: auto !important;
    line-height: 0 !important;
}
/* G1 — old category page never shows inline cart button + qty input on tiles. Hide. */
body.catalog-category-view .products-grid .product-item .product-item-actions .tocart-container,
body.catalog-category-view .products-grid .product-item .product-item-actions .actions-primary,
body.catalog-category-view .products-grid .product-item .product-item-actions .actions-secondary,
body.catalog-category-view .products-grid .product-item .action.tocart,
body.catalog-category-view .products-grid .product-item .field.qty,
body.catalog-category-view .products-grid .product-item .box-tocart {
    display: none !important;
}
/* G7 — let product image fill card width (Magento blank caps it at 240px) */
body.catalog-category-view .products-grid .product-item-info,
body.catalog-category-view .products-grid .product-item-photo,
body.catalog-category-view .products-grid .product-image-container,
body.catalog-category-view .products-grid .product-image-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}
body.catalog-category-view .products-grid .product-image-wrapper {
    /* override the padding-top:125% hack so we can use natural ratio at full width */
    padding: 0 !important;
    height: auto !important;
    position: static !important;
}
/* Magento generates an inline rule .product-image-container-<id> with
   aspect-ratio:270/360 (the natural portrait ratio). Override every variant
   so the container collapses to the IMG's 3:2 height instead of leaving a
   tall empty box below the image. */
body.catalog-category-view .products-grid [class*="product-image-container-"] {
    aspect-ratio: 3 / 2 !important;
    width: 100% !important;
    height: auto !important;
}
body.catalog-category-view .products-grid .product-item-photo {
    height: auto !important;
    line-height: 0 !important;
}
body.catalog-category-view .products-grid .product-image-photo {
    position: static !important;
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;            /* old site renders landscape crop of the portrait source */
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* G5 — rating stars: muted gold filled, light gold empty — matches old site */
body.catalog-category-view .rating-result > span:before,
body.catalog-category-view .product-reviews-summary .rating-result > span:before {
    color: #cda379 !important;
}
body.catalog-category-view .rating-result:before {
    color: #ecebeb !important;
}
body.catalog-category-view .products-grid .product-item-name a {
    color: #01072A !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    text-transform: none !important;
    font-family: 'Ubuntu', sans-serif !important;
}
body.catalog-category-view .products-grid .product-item-name a:hover { color: #E5A435 !important; }
body.catalog-category-view .products-grid .price-box .price {
    color: #01072A !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: 'Ubuntu', sans-serif !important;
}
body.catalog-category-view .breadcrumbs {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 14px 15px !important;
    font-size: 14px !important;
}
body.catalog-category-view .breadcrumbs a,
body.catalog-product-view .breadcrumbs a,
body.cms-page-view .breadcrumbs a,
body.checkout-cart-index .breadcrumbs a,
body.catalog-category-view .breadcrumbs strong,
body.catalog-product-view .breadcrumbs strong,
body.cms-page-view .breadcrumbs strong,
body.checkout-cart-index .breadcrumbs strong {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #E5A435 !important;                 /* old site renders breadcrumb link text in gold */
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}
body.catalog-category-view .breadcrumbs a:hover,
body.catalog-product-view .breadcrumbs a:hover { color: #cda379 !important; }
body.catalog-category-view .breadcrumbs strong,
body.catalog-product-view .breadcrumbs strong { color: #cda379 !important; font-weight: 500 !important; }
body.catalog-category-view .breadcrumbs .item:not(:last-child)::after,
body.catalog-product-view .breadcrumbs .item:not(:last-child)::after,
body.cms-page-view .breadcrumbs .item:not(:last-child)::after {
    color: #E5A435 !important;
    content: '\f105' !important;               /* font-awesome chevron-right — matches old */
    font-family: 'FontAwesome' !important;
    font-weight: normal !important;
}
body.catalog-category-view .breadcrumbs .home a:before,
body.catalog-product-view .breadcrumbs .home a:before,
body.cms-page-view .breadcrumbs .home a:before {
    content: '\f015' !important;               /* font-awesome home icon */
    font-family: 'FontAwesome' !important;
    margin-right: 4px;
}

/* === Product detail page (PDP) — Phase H ===
   Rules below mirror old-site theme `modules.css` (TemplateMonster theme762)
   lines 13755+ and 14325+. Source-grepped, not eyeballed. */

/* PDP DESKTOP LAYOUT (≥992px): old site uses 63/33 split with media left, info right */
@media (min-width: 992px) {
    body.catalog-product-view .columns .column.main {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }
    body.catalog-product-view .columns .column.main .product.media {
        flex: 0 0 63% !important;
        max-width: 63% !important;
        order: 1 !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    body.catalog-product-view .columns .column.main .product-info-main {
        flex: 0 0 33% !important;
        max-width: 33% !important;
        order: 2 !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    body.catalog-product-view .columns .column.main .product.info.detailed {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        order: 3 !important;
        margin: 2rem 0 !important;
    }
    /* Push any other siblings (related/upsell/crosssell + Magento's hidden form
       elements) to the end so they don't jump above the gallery+info pair */
    body.catalog-product-view .columns .column.main > .block.related,
    body.catalog-product-view .columns .column.main > .block.upsell,
    body.catalog-product-view .columns .column.main > .block.crosssell,
    body.catalog-product-view .columns .column.main > .products-related,
    body.catalog-product-view .columns .column.main > .products-upsell {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        order: 4 !important;
    }
}

/* H1 title: 30px, weight 400 (normal), dark grey #343434, no uppercase
   (computed style on old site: rgb(52,52,52), fw=400, fs=30px) */
body.catalog-product-view .page-title-wrapper .container h1.page-title,
body.catalog-product-view .page-title-wrapper .container h1.page-title span,
body.catalog-product-view .page-title-wrapper .container h1.page-title .base {
    font-size: 30px !important;
    font-weight: 400 !important;
    color: #343434 !important;
    text-transform: none !important;
    line-height: 1.567em !important;
    text-align: left !important;
    margin: 0 0 1rem 0 !important;
}
/* Reorder to match old site visual order:
   stock/sku → H1 title → reviews → price → swatches → qty/btn.
   New Magento 2.4.8 has page-title-wrapper as direct sibling of product-info-price
   (not nested inside). Use `display:contents` on product-info-price so its
   children (stock-sku, reviews, price-box) flatten into .product-info-main, then
   give each piece an explicit order. */
body.catalog-product-view .product-info-main {
    display: flex !important;
    flex-direction: column !important;
}
body.catalog-product-view .product-info-main > .product-info-price {
    display: contents !important;
}
body.catalog-product-view .product-info-main .product-info-stock-sku { order: 1 !important; }
body.catalog-product-view .product-info-main > .page-title-wrapper   { order: 2 !important; }
body.catalog-product-view .product-info-main .product-reviews-summary{ order: 3 !important; }
body.catalog-product-view .product-info-main .price-box              { order: 4 !important; }
body.catalog-product-view .product-info-main > .product-add-form     { order: 5 !important; }
body.catalog-product-view .product-info-main > .product-social-links { order: 6 !important; }

/* Stock + SKU — old site lays out:
   row 1 (right): "Availability: In stock" (In stock in green)
   row 2 (left):  "Product Code:  <SKU value>"
   Achieved with stock absolutely positioned top-right and SKU as a plain block. */
body.catalog-product-view .product-info-main .product-info-stock-sku {
    position: relative !important;
    min-height: 50px !important;
    padding-top: 30px !important;          /* leave room for stock badge in top-right corner */
}
body.catalog-product-view .product-info-stock-sku .stock.available {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    float: none !important;
    text-transform: none !important;
    font-weight: 300 !important;
    color: #01072A !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1.5 !important;
}
body.catalog-product-view .product-info-stock-sku .stock.available > span {
    color: #54b70b !important;
    text-transform: none !important;
    font-weight: 300 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.catalog-product-view .product-info-stock-sku .stock.available::before {
    content: 'Availability: ' !important;
    color: #01072A !important;
    font-weight: 300 !important;
}
body.catalog-product-view .product.attribute.sku {
    display: block !important;
    margin: 0 !important;
}
body.catalog-product-view .product.attribute.sku .type {
    font-weight: 300 !important;
    color: #01072A !important;
    display: inline !important;
}
body.catalog-product-view .product.attribute.sku .value {
    display: inline-block !important;
    padding: 0 !important;
    background: transparent !important;            /* old site renders plain text on white */
    color: #01072A !important;
    margin: 0 0 0 5px !important;
    font-weight: 400 !important;
}
/* Stock label "Availability:" + gold "In stock" — old site renders gold #cda379 */
body.catalog-product-view .product-info-stock-sku .stock.available {
    float: right !important;
    color: #01072A !important;
}
body.catalog-product-view .product-info-stock-sku .stock.available span {
    color: #cda379 !important;       /* override earlier #54b70b green — old site is gold */
    font-weight: 400 !important;
}

/* Qty input: 5rem × 48px, 20px gold text */
body.catalog-product-view .box-tocart .qty.input-text {
    width: 5rem !important;
    height: 48px !important;
    font-size: 20px !important;
    color: #cda379 !important;
    text-align: center !important;
    padding: 0 !important;
}

/* Add-to-cart button: 16px uppercase 500 + leading "+" */
body.catalog-product-view button.action.tocart {
    font-size: 16px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
}
body.catalog-product-view button.action.tocart span::before {
    content: '+';
    padding-right: 5px;
}

/* Swatch labels uppercase 16px 500 */
body.catalog-product-view .product-options-wrapper .swatch-attribute-label,
body.catalog-product-view .product-options-wrapper label.label {
    font-size: 16px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
}
body.catalog-product-view .product-options-wrapper .swatch-attribute-options {
    margin-top: 10px !important;
}


/* Pdp-2: show strikethrough old/regular price */
body.catalog-product-view .product-info-price .old-price,
body.catalog-product-view .product-info-price .old.price,
body.catalog-product-view .product.info.detailed .old-price {
    display: inline-block !important;
    text-decoration: line-through !important;
    color: #888 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    margin-left: 8px !important;
}
body.catalog-product-view .product-info-price .old-price .price-label,
body.catalog-product-view .product-info-price .normal-price .price-label {
    display: none !important;                  /* hide "Regular Price" / "Special Price" labels — old site doesn't show them */
}
/* PDP price: stack vertically — special big on top, regular strikethrough below (matches old) */
body.catalog-product-view .product-info-price .price-box.price-final_price {
    display: block !important;
}
body.catalog-product-view .product-info-price .special-price,
body.catalog-product-view .product-info-price .normal-price {
    display: block !important;
    margin: 0 !important;
}
body.catalog-product-view .product-info-price .old-price {
    display: block !important;
    margin: 4px 0 0 0 !important;
    font-size: 22px !important;
}
body.catalog-product-view .product-info-price .price-wrapper .price,
body.catalog-product-view .product-info-price .price {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #999999 !important;     /* old site grey */
    line-height: normal !important;
}

/* 4th login/key icon in the right-side strip — Magento blank renders this in
   header.links (.link.authorization-link). Move it into the icon strip via CSS
   absolute positioning. */
.page-header .medussa-header-icons .login-icon {
    display: flex !important;
    width: 60px !important;
    height: 60px !important;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none !important;
}
.page-header .medussa-header-icons .login-icon::before {
    content: '';
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'><path d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Sidebar typography */
body.catalog-category-view .sidebar .filter-title strong,
body.catalog-category-view .sidebar-main .filter-title strong {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #343434 !important;
    text-transform: uppercase !important;          /* "SHOP BY" — old site uppercase */
    font-family: 'Ubuntu', sans-serif !important;
}
/* Compare Products + My Wish List block titles — mixed case on old site */
body.catalog-category-view .sidebar .block-compare .block-title strong,
body.catalog-category-view .sidebar .block-wishlist .block-title strong,
body.catalog-category-view .sidebar .block.block-compare .block-title,
body.catalog-category-view .sidebar .block.block-wishlist .block-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #343434 !important;
    text-transform: none !important;               /* "Compare Products" not uppercase */
    font-family: 'Ubuntu', sans-serif !important;
}
body.catalog-category-view .filter-options-title {
    color: #E5A435 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #ecebeb;
}
body.catalog-category-view .filter-options-item .filter-options-content {
    padding: 12px 0 !important;
}
body.catalog-category-view .filter-options-content a {
    color: #555 !important;
    font-size: 14px !important;
}
body.catalog-category-view .filter-options-content a:hover { color: #E5A435 !important; }

/* G8 — show limiter in TOP toolbar (Magento blank hides it; old TM theme shows it) */
body.catalog-category-view .toolbar.toolbar-products .limiter {
    display: inline-block !important;
    float: right !important;
    margin-left: 16px !important;
}
body.catalog-category-view .toolbar.toolbar-products .limiter .label {
    color: #555 !important;
    font-size: 13px !important;
    margin-right: 6px !important;
}
body.catalog-category-view .toolbar.toolbar-products .toolbar-amount {
    display: inline-block !important;
    color: #555 !important;
    font-size: 13px !important;
    line-height: 32px !important;
    margin: 0 !important;
}
body.catalog-category-view .toolbar.toolbar-products .toolbar-sorter.sorter {
    float: right !important;
}

/* G4 — sidebar: only hide the "Shopping Options" subheader. Compare Products + My Wish List
   blocks are part of stock Magento (not TM module) and present on old site, so keep them. */
body.catalog-category-view .sidebar .block-subtitle.filter-subtitle {
    display: none !important;
}
body.catalog-category-view .sidebar .block.block-reorder,
body.catalog-category-view .sidebar .block.widget.block-products-list {
    display: none !important;
}

/* === Hero (full-bleed minus 60px right icon strip — matches old site exactly) === */
.medussa-hero {
    position: relative;
    width: auto !important;
    max-width: none !important;
    margin: 0 60px 0 0 !important;
    height: 636px;
    overflow: hidden;
    background: #615149;
}
.medussa-hero .slides { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.medussa-hero .slides .slide {
    position: absolute; inset: 0;
    display: block; text-decoration: none !important; color: #ffffff;
    opacity: 0;
    animation: medussaHeroFade 30s infinite;
}
.medussa-hero .slides .slide .bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    z-index: 0;
}
.medussa-hero .slides .slide .caption {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; color: #01072A;
    z-index: 1;
    padding: 0 30px;
}
.medussa-hero .slides .slide .caption .t1 {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    margin-bottom: 6px;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.medussa-hero .slides .slide .caption .t1:empty { display: none; }
.medussa-hero .slides .slide .caption .t2 {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 6px;
    line-height: 1.1;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.medussa-hero .slides .slide .caption .t3 {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #E5A435 !important;
    margin-bottom: 24px;
    text-transform: uppercase !important;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.medussa-hero .slides .slide .caption .t3:empty { display: none; }
.medussa-hero .slides .slide .caption .cta {
    display: inline-block;
    background: #E5A435 !important;
    color: #ffffff !important;
    padding: 12px 36px;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    transition: background .3s ease;
}
.medussa-hero .slides .slide:hover .caption .cta { background: #01072A !important; }
.medussa-hero .slides .slide:nth-child(1) { animation-delay: 0s; }
.medussa-hero .slides .slide:nth-child(2) { animation-delay: 5s; }
.medussa-hero .slides .slide:nth-child(3) { animation-delay: 10s; }
.medussa-hero .slides .slide:nth-child(4) { animation-delay: 15s; }
.medussa-hero .slides .slide:nth-child(5) { animation-delay: 20s; }
.medussa-hero .slides .slide:nth-child(6) { animation-delay: 25s; }
@keyframes medussaHeroFade {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    17%  { opacity: 1; }
    20%  { opacity: 0; }
    100% { opacity: 0; }
}
.medussa-hero .dots {
    position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3;
    display: flex; justify-content: center; gap: 6px;
}
.medussa-hero .dots .dot {
    width: 16px; height: 16px; border-radius: 8px;
    background: #01072A;
    border: none;
    animation: medussaDot 30s infinite;
}
.medussa-hero .dots .dot:nth-child(1) { animation-delay: 0s; }
.medussa-hero .dots .dot:nth-child(2) { animation-delay: 5s; }
.medussa-hero .dots .dot:nth-child(3) { animation-delay: 10s; }
.medussa-hero .dots .dot:nth-child(4) { animation-delay: 15s; }
.medussa-hero .dots .dot:nth-child(5) { animation-delay: 20s; }
.medussa-hero .dots .dot:nth-child(6) { animation-delay: 25s; }
@keyframes medussaDot {
    0%   { background: #01072A; }
    3%   { background: #E5A435; }
    17%  { background: #E5A435; }
    20%  { background: #01072A; }
    100% { background: #01072A; }
}
/* (legacy .medussa-hero-text rules dropped — slides now have .caption inside each .slide) */

/* === Showcases (2-col full-bleed minus right strip) === */
.medussa-section.medussa-showcases {
    max-width: none !important;
    margin: 0 60px 0 0 !important;
    padding: 0 !important;
}
.medussa-section.medussa-showcases .medussa-section-title,
.medussa-section.medussa-showcases .medussa-section-subtitle { display: none !important; }
.medussa-section.medussa-showcases .showcases ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    max-width: none !important;
}
.medussa-section.medussa-showcases .showcases li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}
.medussa-section.medussa-showcases .showcases a {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 636 / 346;
    background: #f5f5f5;
}
.medussa-section.medussa-showcases .showcases img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .6s ease !important;
}
.medussa-section.medussa-showcases .showcases a:hover img { transform: scale(1.04); }
.medussa-section.medussa-showcases .showcases--text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #01072A;
    background: transparent;
    padding: 40px;
    pointer-events: none;
    transition: background .35s ease;
}
.medussa-section.medussa-showcases .showcases a:hover .showcases--text {
    background: rgba(255,255,255,0.18);
}
.medussa-section.medussa-showcases .showcases--text span {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #01072A !important;
    line-height: 1.1 !important;
    text-shadow: 0 1px 16px rgba(255,255,255,0.6), 0 1px 3px rgba(255,255,255,0.5);
}
@media (max-width: 991px) {
    .medussa-section.medussa-showcases .showcases--text span { font-size: 28px !important; }
}
@media (max-width: 575px) {
    .medussa-section.medussa-showcases .showcases--text span { font-size: 22px !important; }
}

/* === Hand-curated Special Products section (contained 1200 like old site) === */
.medussa-section.medussa-special {
    max-width: 1200px !important;
    margin: 60px auto 60px auto !important;
    padding: 0 15px !important;
}
.medussa-special-title {
    text-align: center !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 300 !important;
    font-size: 20px !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    color: #343434 !important;
    margin: 0 0 40px 0 !important;
}
.medussa-special-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}
.medussa-card {
    display: block !important;
    text-decoration: none !important;
    color: #343434 !important;
    background: #ffffff;
    padding: 0 15px;
    transition: none;
}
.medussa-card .medussa-card-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f7f7;
    margin-bottom: 18px;
}
.medussa-card .medussa-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .5s ease;
}
.medussa-card:hover .medussa-card-img img { transform: scale(1.04); }
.medussa-card-name {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 18px !important;
    color: #343434 !important;
    font-weight: 300 !important;
    text-align: left;
    line-height: 1.3;
    margin: 0 0 12px 0;
    min-height: 46px;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.medussa-card:hover .medussa-card-name { color: #E5A435 !important; }
.medussa-card-price {
    margin: 0;
    font-family: 'Ubuntu', sans-serif !important;
    text-align: left;
}
.medussa-card-price .now {
    color: #01072A !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    display: block;
}
.medussa-card-price .old {
    color: #999999 !important;
    text-decoration: line-through;
    font-size: 16px !important;
    font-weight: 300 !important;
    margin-right: 6px;
    display: block;
}
@media (max-width: 991px) { .medussa-special-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .medussa-special-grid { grid-template-columns: repeat(2, 1fr); } }

/* === Showroom title (inside add-info section) === */
.medussa-section.medussa-add-info .medussa-section-title {
    display: block !important;
    text-align: center !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #01072A !important;
    margin: 0 0 30px 0 !important;
    line-height: 1.5 !important;
}

/* === Special products (Magento product grid in widget block) === */
.block.widget.block-products-list,
.medussa-section.medussa-special-products {
    max-width: 1280px !important;
    margin: 60px auto !important;
    padding: 0 30px !important;
}
.block.widget.block-products-list .block-title,
.medussa-section.medussa-special-products .block-title {
    text-align: center !important;
    margin-bottom: 30px !important;
    border: none !important;
    padding: 0 !important;
}
.block.widget.block-products-list .block-title strong,
.medussa-section.medussa-special-products .block-title strong {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 300 !important;
    font-size: 30px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #01072A !important;
}
.block.widget.block-products-list .block-content,
.block.widget.block-products-list .product-items {
    display: grid !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* 4-col grid only >=768px; on phones the grid-template-columns falls back to the
   .products-grid .product-items responsive rules (2-col <=1199, 1-col <=575) so the
   Special Products widget no longer forces a 1152px-wide grid -> horizontal overflow
   on mobile homepage (2026-06-01). */
@media (min-width: 768px) {
.block.widget.block-products-list .block-content,
.block.widget.block-products-list .product-items {
    grid-template-columns: repeat(4, 1fr) !important;
}
}
.block.widget.block-products-list .product-item { width: auto !important; padding: 0 !important; }

/* === Product cards (catalog grid + widget) === */
.products-grid .product-items {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
.products-grid .product-item {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.products-grid .product-item-info {
    background: #ffffff;
    border: none !important;
    padding: 0 !important;
    transition: box-shadow .25s;
}
.products-grid .product-item-info:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.products-grid .product-item-photo { display: block; overflow: hidden; }
.products-grid .product-image-photo { transition: transform .5s ease; }
.products-grid .product-item-photo:hover .product-image-photo { transform: scale(1.04); }
.products-grid .product-item-details {
    padding: 16px 4px !important;
    text-align: center;
}
.products-grid .product-item-name { margin: 0 0 8px 0 !important; }
.products-grid .product-item-name a {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #343434 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}
.products-grid .product-item-name a:hover { color: #E5A435 !important; }
.products-grid .price-box { margin: 8px 0 12px 0 !important; }
.products-grid .price-box .price {
    font-family: 'Ubuntu', sans-serif !important;
    color: #01072A !important;
    font-weight: 700 !important;
    font-size: 20px !important;
}
.products-grid .price-box .old-price .price {
    color: #999999 !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    text-decoration: line-through;
}

/* === Buttons (navy bg, white text, no radius) === */
.action.primary, button.action.primary, .action.tocart, button.action.tocart, .action.subscribe {
    background: #01072A !important;
    border: 1px solid #01072A !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    padding: 12px 26px !important;
    transition: all .25s !important;
    box-shadow: none !important;
}
.action.primary:hover, button.action.primary:hover, .action.tocart:hover, button.action.tocart:hover, .action.subscribe:hover {
    background: #E5A435 !important;
    border-color: #E5A435 !important;
    color: #ffffff !important;
}
.action.primary:focus, .action.tocart:focus { outline: none !important; }

/* === Add-info (4 squares full-bleed minus right strip) === */
.medussa-section.medussa-add-info {
    max-width: none !important;
    margin: 60px 60px 60px 0 !important;
    padding: 0 !important;
}
.medussa-section.medussa-add-info .medussa-section-title,
.medussa-section.medussa-add-info .medussa-section-subtitle { display: none !important; }
.medussa-section.medussa-add-info .add-info ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
}
.medussa-section.medussa-add-info .add-info li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.medussa-section.medussa-add-info .add-info img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .5s ease !important;
}
.medussa-section.medussa-add-info .add-info a { display: block; height: 100%; }
.medussa-section.medussa-add-info .add-info a:hover img { transform: scale(1.05); }
.medussa-section.medussa-add-info h1 {
    text-align: center !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    color: #01072A !important;
    margin: 30px 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* === Page title (catalog/CMS h1) === */
.page-title-wrapper .page-title,
.page-main > .page-title-wrapper .page-title {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 300 !important;
    font-size: 32px !important;
    color: #01072A !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    margin: 0 0 24px 0 !important;
    text-align: center !important;
}
/* CMS-page title doesn't need re-upper because content is already uppercase */
.cms-page-view .page-title-wrapper .page-title { text-transform: uppercase !important; }
.checkout-cart-index .page-title-wrapper .page-title,
.catalog-category-view .page-title-wrapper .page-title { text-transform: uppercase !important; }
/* Empty cart link gold */
.cart-empty a { color: #E5A435 !important; }
.cart-empty a:hover { color: #01072A !important; }
.page-title-wrapper { text-align: center; padding: 40px 0 24px 0; }

/* === Breadcrumbs === */
.breadcrumbs {
    max-width: 1280px;
    margin: 0 auto !important;
    padding: 14px 30px !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 12px !important;
    color: #999999 !important;
}
.breadcrumbs a { color: #999999 !important; }
.breadcrumbs a:hover { color: #01072A !important; }
.breadcrumbs .item:not(:last-child)::after { color: #cccccc !important; }

/* === Product detail (catalog-product-view) === */
body.catalog-product-view .product-info-main {
    width: 33% !important;
    padding-left: 24px;
}
body.catalog-product-view .product.media {
    width: 63% !important;
}
body.catalog-product-view .product-info-main .page-title-wrapper {
    padding: 0 !important;
    margin: 14px 0 16px 0 !important;
    text-align: left !important;
}
body.catalog-product-view .product-info-main .page-title-wrapper .page-title {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    color: #01072A !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
body.catalog-product-view .product-info-main .product-info-stock-sku,
body.catalog-product-view .product.attribute.sku,
body.catalog-product-view .stock {
    font-size: 14px !important;
    color: #01072A !important;
}
body.catalog-product-view .product-info-main .product-info-price {
    border: none !important;
    padding: 18px 0 8px 0 !important;
}
body.catalog-product-view .product-info-main .product-info-price .price-final_price .price,
body.catalog-product-view .product-info-main .price-box .price {
    color: #999999 !important;                 /* match old site grey */
    font-size: 30px !important;
    font-weight: 700 !important;
    font-family: 'Ubuntu', sans-serif !important;
}
body.catalog-product-view .product-info-main .price-box .old-price .price {
    color: #01072A !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    text-decoration: line-through;
}
body.catalog-product-view .product-info-main .swatch-attribute-label,
body.catalog-product-view .product-options-wrapper > .fieldset > .field > .label {
    color: #01072A !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    font-family: 'Ubuntu', sans-serif !important;
    margin-bottom: 10px !important;
}
body.catalog-product-view .swatch-attribute-options .swatch-option.text,
body.catalog-product-view .swatch-option.text {
    background: #f7f7f7 !important;
    color: #1b110d !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    font-family: 'Ubuntu', sans-serif !important;
    height: auto !important;
    min-width: 50px;
    margin: 0 8px 8px 0 !important;
}
body.catalog-product-view .swatch-option.text.selected,
body.catalog-product-view .swatch-option.text:hover {
    background: #01072A !important;
    color: #ffffff !important;
    outline: none !important;
}
body.catalog-product-view .box-tocart .input-text.qty,
body.catalog-product-view #qty {
    border: 1px solid #000000 !important;
    width: 80px !important;
    height: 48px !important;
    padding: 0 !important;
    text-align: center !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #cda379 !important;        /* gold to match old site */
    font-size: 20px !important;
}
body.catalog-product-view .box-tocart .field.qty .label {
    color: #01072A !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}
body.catalog-product-view #product-addtocart-button,
body.catalog-product-view .product-info-main .action.tocart {
    background: #01072A !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0 32px !important;
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-radius: 0 !important;
    font-family: 'Ubuntu', sans-serif !important;
}
body.catalog-product-view #product-addtocart-button:hover { background: #E5A435 !important; }
/* Wishlist + compare to icon-only */
body.catalog-product-view .product-social-links {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #ecebeb;
}
body.catalog-product-view .product-social-links .action.towishlist,
body.catalog-product-view .product-social-links .action.tocompare {
    background: transparent !important;
    color: #999 !important;
    padding: 0 16px 0 0 !important;
    font-size: 13px !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.catalog-product-view .product-social-links .action.towishlist:hover,
body.catalog-product-view .product-social-links .action.tocompare:hover { color: #E5A435 !important; }

/* Gallery thumbnails on left of main image */
body.catalog-product-view .product.media .fotorama__nav-wrap--horizontal,
body.catalog-product-view .product.media .fotorama__nav__shaft { background: transparent !important; }

/* === Star ratings — old site uses muted-gold #cda379, Magento default is orange.
   Bump specificity to beat Magento blank's default `.rating-summary .rating-result > span:before`. */
body.catalog-product-view .product-reviews-summary .rating-summary .rating-result > span:before,
body.catalog-product-view .product-info-main .rating-result > span:before,
.rating-result > span:before {
    color: #cda379 !important;
}
body.catalog-product-view .product-reviews-summary .rating-summary .rating-result:before,
body.catalog-product-view .product-info-main .rating-result:before {
    color: #c7c7c7 !important;
}

/* === Unavailable size swatch — keep text fully readable: faded opacity + horizontal
   line-through. Magento's default uses a ::after pseudo-element with diagonal gradient
   that mangles short words like "King". Hide that ::after. */
body.catalog-product-view .swatch-attribute.size .swatch-option.text.disabled,
body.catalog-product-view .swatch-attribute .swatch-option.text.disabled,
body.catalog-product-view .swatch-option.text[aria-disabled="true"],
body.catalog-product-view .swatch-option.text.disabled {
    opacity: 0.6 !important;
    text-decoration: line-through !important;
    color: #999999 !important;
    background-image: none !important;
    cursor: not-allowed !important;
    /* Magento default sets pointer-events:none on disabled swatches, which
       blocks browser hover so the `title` tooltip never fires. Re-enable
       pointer-events; the swatches.js click handler still ignores .disabled
       items so we don't accidentally let users add an OOS variant to cart. */
    pointer-events: auto !important;
}
body.catalog-product-view .swatch-option.text.disabled::after,
body.catalog-product-view .swatch-option.text[aria-disabled="true"]::after,
body.catalog-product-view .swatch-option.disabled::after {
    display: none !important;
    background: none !important;
    content: none !important;
}
/* Custom CSS tooltip on disabled (out-of-stock) swatches. Native browser
   `title` tooltips are unreliable cross-browser/OS — Chrome on macOS often
   suppresses them. Render explicitly via ::before/::after on hover. */
body.catalog-product-view .swatch-option.disabled {
    position: relative !important;
    /* Magento default overflow:hidden clips the ::before tooltip when it
       pops above the swatch. Allow it to escape upward. */
    overflow: visible !important;
}
body.catalog-product-view .swatch-option.disabled:hover::before {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #01072A;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 3px;
    white-space: nowrap;
    font-size: 12px;
    font-family: 'Ubuntu', sans-serif;
    line-height: 1.4;
    z-index: 9999;
    pointer-events: none;
    text-decoration: none;
    opacity: 1;
    display: block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* === Add to Wish List / Add to Compare alignment === */
body.catalog-product-view .product-addto-links .action {
    vertical-align: middle !important;
    line-height: 1.5 !important;
    margin: 0 18px 0 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
body.catalog-product-view .product-addto-links .action::before {
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* === Gallery — match old site: stage has light-grey #f7f7f7 bg, thumbs are 120x120 #ebebeb,
   thumbnail rail width 145px (120 + 25 padding), stage occupies remaining width.
   Force the shaft/frame to fill the stage width so the image isn't shrunken with grey
   side-bars (fotorama JS otherwise caps shaft maxWidth based on its own aspect logic). */
body.catalog-product-view .fotorama__stage,
body.catalog-product-view .fotorama__stage__frame {
    background: #ffffff !important;
}
/* Force shaft + active frame to fit inside the stage so the active image
   doesn't spill beyond the stage's overflow:hidden boundary. Non-active
   frames are still positioned offscreen via transform, just based on the
   new (smaller) shaft width. */
body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__stage__shaft {
    max-width: 100% !important;
    width: 100% !important;
}
body.catalog-product-view .fotorama__stage__frame {
    max-width: 100% !important;
}
body.catalog-product-view .fotorama__stage__frame.fotorama__active {
    width: 100% !important;
}
body.catalog-product-view .fotorama__img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
body.catalog-product-view .fotorama__thumb {
    background: #ebebeb !important;
}
/* Let fotorama JS compute thumb frame dimensions from view.xml (120×120 with
   25px margin). Just style the visual: light grey bg. Don't force outer width. */
body.catalog-product-view .fotorama__nav__frame--thumb .fotorama__thumb {
    background: #ebebeb !important;
}
/* Desktop-only PDP layout (mobile keeps fotorama's native horizontal nav).
   On <768px screens, fotorama auto-switches `.fotorama__nav-wrap--horizontal`
   and our forced flex-row + vertical-nav width:145 would crush stage to 0. */
@media (min-width: 768px) {
body.catalog-product-view .product.media,
body.catalog-product-view .columns .column.main .product.media {
    flex: 0 0 65% !important;
    max-width: 65% !important;
}
body.catalog-product-view .columns .column.main .product-info-main {
    flex: 0 0 31% !important;
    max-width: 31% !important;
}
/* Magento's default fotorama prev/next arrows have rgba(255,255,255,0.3)
   backgrounds (80px wide × stage-tall) that paint as translucent bands
   over the product image's left + right edges. Reset to fully transparent
   so the only visible piece is the arrow glyph (sprite icon) — same as
   old medussahome theme. */
body.catalog-product-view .fotorama__arr,
body.catalog-product-view .fotorama__thumb__arr,
body.catalog-product-view .fotorama__arr--prev,
body.catalog-product-view .fotorama__arr--next {
    background: transparent !important;
    background-color: transparent !important;
}
body.catalog-product-view .fotorama__arr:hover,
body.catalog-product-view .fotorama__thumb__arr:hover {
    background-color: transparent !important;
}
/* Magento cache image has transparent edges (1171×932 source → 720×570 cache
   adds 2-px alpha=0 strip on left + right). The old #f7f7f7 stage background
   showed through those gaps as visible greyish "bands". Switch to white so
   the bleed is invisible against the page background. */
body.catalog-product-view .fotorama__stage,
body.catalog-product-view .fotorama__stage__frame,
body.catalog-product-view .fotorama__wrap,
body.catalog-product-view .fotorama__nav-wrap {
    background: #ffffff !important;
}
body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    position: relative !important;
    overflow: hidden !important;
}
body.catalog-product-view .fotorama__nav-wrap--vertical {
    position: static !important;
    flex: 0 0 145px !important;
    width: 145px !important;
    order: 1 !important;
    align-self: stretch !important;
    overflow: hidden !important;
}
body.catalog-product-view .fotorama__nav-wrap--vertical .fotorama__nav__shaft {
    max-height: 100% !important;
}
body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__stage {
    flex: 1 1 auto !important;
    margin-left: 0 !important;
    width: auto !important;
    /* CRITICAL: fotorama JS inline-styles `left: 145px` assuming nav-wrap is
       absolutely positioned at the left of wrap so stage needs to clear it.
       In our flex layout nav-wrap is static (order:1) and stage flex follows
       (order:2) already — the extra `left:145px` creates a 145-px white gap
       between thumbs and image. Force left:0 to kill it. Same for `position`
       so transform-positioned children compute against the flex box. */
    position: relative !important;
    left: 0 !important;
    order: 2 !important;
    min-width: 0 !important;
    /* Aspect ratio match (720:570 ≈ 1.263) so the active image fills stage with
       no top/bottom grey bars. Browser support: all modern (Chrome 88+). */
    aspect-ratio: 720 / 570 !important;
    height: auto !important;
}
} /* end @media (min-width: 768px) PDP layout */

/* === Forms === */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="tel"], select, textarea {
    border: 1px solid #e2e2e2 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    height: 42px;
    box-shadow: none !important;
}
input:focus, select:focus, textarea:focus { border-color: #01072A !important; outline: none !important; box-shadow: none !important; }

/* === Footer (minimal, light) === */
.page-footer { background: #ffffff !important; border-top: 1px solid #ececec; margin-top: 0 !important; padding: 0 !important; color: #555555 !important; }
.page-footer * { color: inherit; }
.page-footer .footer.content { padding: 0 !important; max-width: none; margin: 0; border-top: none !important; background: #ffffff !important; }
.page-footer .footer.content a { color: #01072A !important; }
.page-footer .footer.content a:hover { color: #E5A435 !important; }
.page-footer .footer.content > ul.footer.links { display: none !important; }
/* Hide Magento dev-mode bug report footer link */
.page-footer .bugs, body > .bugs { display: none !important; }

.page-footer .copyright {
    background: #ffffff !important;
    color: #999999 !important;
    text-align: center;
    padding: 18px 0;
    font-size: 12px;
    border-top: 1px solid #ececec;
}
.page-footer .block.newsletter .field.newsletter input {
    border: 1px solid #d0d0d0 !important;
    color: #555555 !important;
    background: #ffffff !important;
}

/* Custom 4-col footer block — bg transparent (white via body) like old site */
.page-footer .medussa-footer-cols {
    background: transparent !important;
    color: #01072A !important;
    padding: 50px 0 30px 0 !important;
    border-top: 1px solid #ececec;
}
.page-footer .medussa-footer-cols-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
}
.page-footer .medussa-footer-cols .footer-col h4 {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #343434 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    margin: 0 0 40px 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    position: static;
    display: block;
}
.page-footer .medussa-footer-cols .footer-col h4::after,
.page-footer .medussa-footer-cols .footer-col h4::before { content: none !important; display: none !important; }
.page-footer .medussa-footer-cols .footer-col .footer-subscribe {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* footer-subscribe CSS dropped — newsletter signup removed per project decision */
.page-footer .footer-hours { margin-top: 10px; color: #999999 !important; font-size: 14px !important; font-weight: 300 !important; }
.page-footer .footer-subscribe { display: none !important; }
/* Hide Magento default newsletter block at very bottom (we embedded our own in contacts column) */
.page-footer > .footer.content > .block.newsletter,
.page-footer .footer.content .block.newsletter { display: none !important; }
.page-footer .medussa-footer-cols .footer-col {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}
.page-footer .medussa-footer-cols .footer-col p,
.page-footer .medussa-footer-cols .footer-col address,
.page-footer .medussa-footer-cols .footer-col span,
.page-footer .medussa-footer-cols .footer-col li {
    color: #999999 !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.8 !important;
}
.page-footer .medussa-footer-cols .footer-col a {
    color: #01072A !important;
    font-weight: 300 !important;
    text-transform: none !important;
}
.page-footer .medussa-footer-cols .footer-col a:hover { color: #E5A435 !important; }
.page-footer .medussa-footer-cols .footer-col ul { list-style: none; padding: 0; margin: 0; }
.page-footer .medussa-footer-cols .footer-col ul li { padding: 4px 0; }
.page-footer .medussa-footer-cols .footer-col ul li::before { content: ''; display: none; }
.page-footer .medussa-footer-cols .footer-col a { color: #555555 !important; }
.page-footer .medussa-footer-cols .footer-col a:hover { color: #E5A435 !important; }
.page-footer .medussa-footer-cols address {
    font-style: normal;
    line-height: 1.7;
}

/* === Mini cart === */
.minicart-wrapper .block-minicart { background: #ffffff !important; color: #01072A !important; }
.minicart-wrapper .block-minicart .price { color: #01072A !important; }

/* === Mobile responsive === */
@media (max-width: 1199px) {
    /* Header: pull right icon strip back into normal flow, show hamburger toggle */
    .page-header { padding-right: 0 !important; }
    .page-header::after { display: none !important; }
    .page-header .header.content {
        padding: 12px 12px !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: space-between !important;
        position: relative !important;
    }
    .page-header .logo { max-width: 200px !important; margin: 0 auto !important; order: 2 !important; }
    .page-header .logo img { max-height: 50px !important; }
    /* Show Magento's native nav-toggle hamburger button */
    .nav-toggle {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: block !important;
        width: 40px !important;
        height: 40px !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        z-index: 10;
    }
    .nav-toggle::before {
        content: '\f0c9' !important;
        font-family: 'FontAwesome' !important;
        font-size: 22px !important;
        color: #ffffff !important;
    }
    /* Nav hidden by default on mobile, revealed when html.nav-open via JS */
    .nav-sections {
        position: fixed !important;
        left: -80% !important;
        right: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 80% !important;
        height: 100vh !important;
        background: #01072A !important;
        z-index: 1000 !important;
        transition: left .3s ease !important;
        overflow-y: auto !important;
    }
    html.nav-open .nav-sections { left: 0 !important; }
    html.nav-open::after {
        content: '';
        position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999;
    }
    .nav-sections .navigation {
        padding: 60px 0 0 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
    }
    .navigation > ul {
        flex-direction: column !important;
        width: 100% !important;
    }
    .navigation > ul::after { display: none !important; }
    .navigation .level0 > a.level-top {
        padding: 14px 20px !important;
        font-size: 15px !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }
    .navigation .level0.parent > a.level-top::after { margin-left: auto !important; }
    /* Right strip: inline top-right icons */
    .medussa-header-icons {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        flex-direction: row !important;
        padding: 0 !important;
        border: none !important;
        order: 3 !important;
        gap: 4px !important;
    }
    .medussa-header-icons::after { display: none !important; }
    .medussa-header-icons .minicart-wrapper,
    .medussa-header-icons .block-search {
        width: 38px !important;
        height: 38px !important;
        border: none !important;
    }
    .medussa-header-icons .minicart-wrapper .action.showcart::before,
    .medussa-header-icons .block-search .label::before { font-size: 16px !important; }
    .medussa-header-icons .block-search .control {
        position: fixed !important;
        right: 0 !important;
        left: 0 !important;
        top: 60px !important;
        width: 100% !important;
        z-index: 100;
    }
    /* Content layout */
    body.cms-home .medussa-hero,
    .medussa-hero { height: 380px; margin: 0 !important; }
    .medussa-hero .slides .slide .caption .t2 { font-size: 28px !important; }
    .medussa-hero .slides .slide .caption .t1 { font-size: 14px !important; }
    .medussa-hero .slides .slide .caption .t3 { font-size: 13px !important; }
    .medussa-section.medussa-showcases { margin: 0 !important; }
    .medussa-section.medussa-showcases .showcases ul { grid-template-columns: 1fr !important; }
    .medussa-section.medussa-showcases .showcases--text span { font-size: 28px !important; }
    .medussa-section.medussa-add-info { margin: 30px 0 !important; }
    .medussa-section.medussa-add-info .add-info ul { grid-template-columns: repeat(2, 1fr) !important; }
    .medussa-special-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .products-grid .product-items { grid-template-columns: repeat(2, 1fr) !important; }
    .page-footer .medussa-footer-cols-inner { grid-template-columns: 1fr 1fr !important; }
    /* Inner pages: remove right gap */
    body.page-products .page-main,
    body.catalog-product-view .page-main,
    body.checkout-cart-index .page-main,
    body.cms-page-view .page-main,
    body.catalog-category-view .page-main { margin: 0 !important; padding: 16px 0 40px 0 !important; }
    body.catalog-category-view.page-layout-2columns-left .sidebar.sidebar-main { width: 100% !important; padding: 0 16px !important; }
    body.catalog-category-view.page-layout-2columns-left .column.main { width: 100% !important; }
    body.catalog-category-view .products-grid .product-items { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
    body.catalog-product-view .product-info-main { width: 100% !important; padding: 0 16px !important; }
    body.catalog-product-view .product.media { width: 100% !important; padding: 0 16px !important; }
}
@media (max-width: 575px) {
    .medussa-hero { height: 280px; }
    .medussa-hero .slides .slide .caption .t2 { font-size: 22px !important; }
    .medussa-section.medussa-showcases .showcases--text span { font-size: 22px !important; }
    .medussa-section.medussa-add-info .add-info ul { grid-template-columns: 1fr !important; }
    .medussa-special-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .page-footer .medussa-footer-cols-inner { grid-template-columns: 1fr !important; }
    body.catalog-category-view .products-grid .product-items { grid-template-columns: 1fr !important; }
}

/* ZH override: replace 'Availability: ' prefix with Chinese '库存: ' */
html[lang^="zh"] body.catalog-product-view .product-info-stock-sku .stock.available::before {
    content: '库存: ' !important;
}
/* Also Product Code label localized via similar CSS prefix pattern if any */

/* === OLD-parity: Dual-logo (.logo-dark default, .logo-light on cms-index-index hero) === */
.logo .logo-container { display: inline-block; vertical-align: middle; }
.logo .logo-container .logo-dark img,
.logo .logo-container .logo-light img { display: block; max-height: 80px; height: auto; width: auto; max-width: 250px; }
.logo .logo-container .logo-light { display: none; }
.logo .logo-container .logo-dark { display: inline-block; }
body.cms-index-index .logo .logo-container .logo-light { display: inline-block; }
body.cms-index-index .logo .logo-container .logo-dark { display: none; }

/* === OLD-parity: Sticky-shrink header on scroll (body.header-stuck) === */
.page-header { transition: padding 0.2s ease; }
body.header-stuck .page-header { padding-top: 6px !important; padding-bottom: 6px !important; }
body.header-stuck .logo .logo-container .logo-dark img,
body.header-stuck .logo .logo-container .logo-light img { max-height: 44px !important; }
/* On scroll, prefer the light logo even on inner pages (smaller visual footprint) */
body.header-stuck .logo .logo-container .logo-light { display: inline-block !important; }
body.header-stuck .logo .logo-container .logo-dark { display: none !important; }

/* Pin the page-header to top of viewport when stuck (was position:absolute) */
body.header-stuck .page-header {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 1000;
    background-color: rgba(13, 12, 38, 0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* === Sticky state: pin nav-sections alongside the fixed page-header === */
body.header-stuck .nav-sections {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999;
    background-color: transparent !important;
    pointer-events: none;
}
body.header-stuck .nav-sections .nav-sections-items,
body.header-stuck .nav-sections .section-items,
body.header-stuck .nav-sections #store\.menu,
body.header-stuck .nav-sections .navigation {
    pointer-events: auto;
    background: transparent !important;
}
body.header-stuck .navigation {
    padding-top: 0 !important;
    margin-top: 4px !important;
}
body.header-stuck .navigation .level0 > a.level-top {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 28px !important;
}
/* Hide a few decorative bits that take too much vertical space when stuck */
body.header-stuck .panel.wrapper,
body.header-stuck .panel.header { display: none !important; }

/* === PDF #6: Homepage header — match old site (transparent over hero) === */
body.cms-index-index .page-header,
body.cms-home .page-header {
    background: transparent !important;
    background-color: rgba(0, 0, 0, 0) !important;
}
/* Also remove the dark wrapper around .header.content if it's adding a visible box */
body.cms-index-index .page-header .header.content,
body.cms-home .page-header .header.content {
    background: transparent !important;
    background-color: rgba(0, 0, 0, 0) !important;
}
/* The .panel.wrapper / .panel.header top strip ("WELCOME TO MEDUSSA HOME STORE") — keep visible on inner pages but make subtle on homepage */
body.cms-index-index .page-header .panel.wrapper,
body.cms-home .page-header .panel.wrapper {
    background: transparent !important;
}

/* === PDF #3: "Visit Our Store" section — smaller title + 2x2 grid === */
.medussa-section.medussa-add-info {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
.medussa-section.medussa-add-info .medussa-section-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 24px !important;
    line-height: 1.35 !important;
    text-transform: none !important;
}
.medussa-section.medussa-add-info .add-info ul.content-align {
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 880px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 16px !important;
}
.medussa-section.medussa-add-info .add-info ul.content-align li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
}
.medussa-section.medussa-add-info .add-info ul.content-align li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    aspect-ratio: 4/3;
}
@media (max-width: 575px) {
    .medussa-section.medussa-add-info .medussa-section-title {
        font-size: 18px !important;
        padding: 0 16px !important;
    }
    .medussa-section.medussa-add-info .add-info ul.content-align {
        gap: 10px !important;
        padding: 0 12px !important;
    }
}

/* === PDF #1: Mobile main slideshow — near-full-screen height, larger captions === */
@media (max-width: 767px) {
    .medussa-hero {
        margin: 0 !important;                      /* drop the 60px right gutter on mobile (icon strip is hidden anyway) */
        height: 75vh !important;                   /* ~3/4 viewport — feels near-full-screen while leaving room for header */
        min-height: 480px !important;
        max-height: 720px !important;
    }
    .medussa-hero .slides .slide .caption {
        padding: 0 24px !important;
    }
    .medussa-hero .slides .slide .caption .t1 { font-size: 16px !important; margin-bottom: 4px !important; }
    .medussa-hero .slides .slide .caption .t2 { font-size: 32px !important; line-height: 1.15 !important; margin-bottom: 8px !important; }
    .medussa-hero .slides .slide .caption .t3 { font-size: 14px !important; margin-bottom: 28px !important; }
    .medussa-hero .slides .slide .caption .cta { padding: 14px 40px !important; font-size: 14px !important; }
}
@media (max-width: 575px) {
    .medussa-hero {
        height: 80vh !important;                   /* on actual phones (~393px wide) give it more vertical space */
        min-height: 520px !important;
        max-height: 680px !important;
    }
    /* Override the earlier 280px rule above which lingers from an older revision */
}

/* === PDF #4: Best Seller badge — products in hidden category id=88 === */
.product-item-info.is-bestseller,
.medussa-card.is-bestseller {
    position: relative;
}
.medussa-bestseller-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    background: #E5A435;
    color: #ffffff;
    font-family: 'Ubuntu', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    line-height: 1.4;
    pointer-events: none;
    white-space: nowrap;
}
@media (max-width: 575px) {
    .medussa-bestseller-badge { font-size: 10px; padding: 3px 7px; top: 8px; right: 8px; }
}

/* === Mobile: hide right-edge desktop icon strip + drop body right gutter === */
@media (max-width: 767px) {
    .medussa-header-icons { display: none !important; }
    /* Any other 60px right-reserve on body content from desktop layout */
    .page-wrapper > .page-header,
    .page-wrapper > .page-main,
    .page-wrapper > .breadcrumbs,
    .medussa-section,
    .columns,
    .footer-container { margin-right: 0 !important; }
}

/* === PDF #8: When sticky on homepage, restore opaque dark header (avoid transparent overlay collision with hero) === */
body.cms-index-index.header-stuck .page-header,
body.cms-home.header-stuck .page-header {
    background: #01072A !important;
    background-color: #01072A !important;
}
body.cms-index-index.header-stuck .page-header .header.content,
body.cms-home.header-stuck .page-header .header.content {
    background-color: transparent !important;
}

/* Footer copyright — unify span color with the 5U Website link color (was #999) */
small.copyright span { color: #01072A !important; }

/* === 2026-05-28: slide 3 (St Geneve) caption — match old site Montserrat 40/45 700/300 === */
.medussa-hero .slides .slide:nth-child(3) .caption .t2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
}
.medussa-hero .slides .slide:nth-child(3) .caption .t3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 45px !important;
    font-weight: 300 !important;
}

/* === 2026-05-28: logo bigger to match old site + vertical center with nav === */
/* Default state — logo 75px tall like old site */
.logo .logo-container img,
.logo .logo-container .logo-dark img,
.logo .logo-container .logo-light img,
a.logo img {
    max-height: 75px !important;
    height: auto !important;
}
/* Sticky state — keep larger than 44px but still tight */
body.header-stuck .logo .logo-container img,
body.header-stuck .logo .logo-container .logo-dark img,
body.header-stuck .logo .logo-container .logo-light img,
body.header-stuck a.logo img {
    max-height: 56px !important;
}
/* Tighten sticky header padding so larger logo does not push content down */
body.header-stuck .page-header {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Vertical-center nav with logo: force both into a centered flex row */
.page-header .header.content {
    display: flex !important;
    align-items: center !important;
}
.page-header .navigation,
.page-header .nav-sections {
    display: flex !important;
    align-items: center !important;
}
.page-header .navigation > ul.level0,
.page-header .nav-sections .navigation {
    display: flex !important;
    align-items: center !important;
}

/* === 2026-05-28b: sticky state — vertically center nav-link with logo === */
/* sticky page-header height ends up ~60px after logo=56 + padding 2+2.
   nav-sections is position:fixed top:0; we want nav-link midY == logo midY. */
body.header-stuck .nav-sections,
body.header-stuck .nav-sections .navigation {
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    min-height: 60px !important;
}
body.header-stuck .nav-sections .navigation > ul.level0 {
    display: flex !important;
    align-items: center !important;
}
body.header-stuck .nav-sections > .section-items.nav-sections-items {
    width: 100% !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
}

/* === 2026-05-28c: sticky page-header collapse to 60px so logo aligns with nav band === */
body.header-stuck .page-header {
    height: 60px !important;
    min-height: 60px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
body.header-stuck .page-header .header.content {
    height: 56px !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
}

/* === 2026-05-28d: sticky logo container flex-center so img midY = 30 === */
body.header-stuck .header.content > .logo,
body.header-stuck a.logo,
body.header-stuck .logo,
body.header-stuck .logo .logo-container {
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* === 2026-05-28f: slide 3 t3 white (matches old site, not the default gold) === */
.medussa-hero .slides .slide:nth-child(3) .caption .t3 {
    color: #ffffff !important;
}

/* === 2026-05-28g: footer column link color match h4 title color === */
.medussa-footer-cols .footer-col li a,
.medussa-footer-cols .footer-col .footer-col-content a,
.medussa-footer-cols .footer-col ul li {
    color: #343434 !important;
}

/* === 2026-05-28g: breadcrumbs left-align with sidebar + tighter bottom gap === */
.breadcrumbs {
    margin: 0 105px 16px 105px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 0 !important;
}

/* === 2026-05-28h: override 1200px/auto breadcrumb center (left-align to sidebar) === */
body.catalog-category-view .breadcrumbs,
body.catalog-product-view .breadcrumbs,
body.cms-page-view .breadcrumbs,
body.checkout-cart-index .breadcrumbs {
    max-width: none !important;
    margin: 0 105px 16px 105px !important;
    padding: 14px 0 0 0 !important;
}

/* === 2026-05-28i: defeat styles-l.css cascade — force right icon strip visible on desktop === */
@media (min-width: 768px) {
    html body .page-header .medussa-header-icons,
    html body .medussa-header-icons {
        display: flex !important;
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        width: 60px !important;
        height: 100vh !important;
        z-index: 999 !important;
    }
}

/* === 2026-05-28i: footer link color darker + h4 also darker (customer wants visibly clearer) === */
.medussa-footer-cols .footer-col h4,
.medussa-footer-cols .footer-col li a,
.medussa-footer-cols .footer-col .footer-col-content a,
.medussa-footer-cols .footer-col ul li,
.medussa-footer-cols .footer-col p,
.medussa-footer-cols .footer-col address,
.medussa-footer-cols .footer-col .footer-col-content {
    color: #1b110d !important;
}

/* === 2026-05-28i: breadcrumb bottom gap halved (40 → 20) === */
body.catalog-category-view .breadcrumbs,
body.catalog-product-view .breadcrumbs,
body.cms-page-view .breadcrumbs,
body.checkout-cart-index .breadcrumbs {
    margin-bottom: 8px !important;
}

/* === 2026-05-28i: ensure panel.wrapper + panel.header hidden on ALL pages (not just home) === */
.panel.wrapper, .page-header .panel.wrapper,
.page-header .panel.header { display: none !important; }

/* === 2026-05-28j: hide .header-welcome-band (the top brown bar "WELCOME TO MEDUSSA HOME STORE | CONTACT US") site-wide === */
.header-welcome-band { display: none !important; }

/* === 2026-05-28k: footer — high-specificity to defeat styles-l cascade — entire footer text #1b110d === */
html body .medussa-footer-cols .footer-col,
html body .medussa-footer-cols .footer-col h4,
html body .medussa-footer-cols .footer-col a,
html body .medussa-footer-cols .footer-col li,
html body .medussa-footer-cols .footer-col p,
html body .medussa-footer-cols .footer-col address,
html body .medussa-footer-cols .footer-col span,
html body .medussa-footer-cols .footer-col div {
    color: #1b110d !important;
}
html body .medussa-footer-cols .footer-col a:hover {
    color: #cda379 !important;
}

/* === 2026-05-28k: cart counter-number visible (was incorrectly hidden) === */
html body .medussa-header-icons .minicart-wrapper .action.showcart .counter-number {
    display: inline-block !important;
}

/* === 2026-05-28l: footer text color — match same 3-class specificity as the old rule that was winning (.page-footer prefix needed). Written LAST so cascade picks this. === */
.page-footer .medussa-footer-cols .footer-col h4,
.page-footer .medussa-footer-cols .footer-col address,
.page-footer .medussa-footer-cols .footer-col p,
.page-footer .medussa-footer-cols .footer-col span,
.page-footer .medussa-footer-cols .footer-col li,
.page-footer .medussa-footer-cols .footer-col a,
.page-footer .medussa-footer-cols .footer-col .footer-col-content,
.page-footer .medussa-footer-cols .footer-col .footer-contacts {
    color: #1b110d !important;
}
.page-footer .medussa-footer-cols .footer-col a:hover {
    color: #cda379 !important;
}

/* === 2026-05-28m: breadcrumb visual alignment fix ===
   home icon (FontAwesome ⌂) pushes "HOME" text 22px right of container edge.
   SHOP BY in sidebar sits flush at container edge. So user sees "HOME" not
   aligned with "SHOP BY". Hide the icon — text starts flush. Also halve the
   bottom gap (was ~32px, now ~16px) by tightening top of next column. */
body.catalog-category-view .breadcrumbs .home a::before,
body.catalog-product-view .breadcrumbs .home a::before,
body.cms-page-view .breadcrumbs .home a::before {
    display: none !important;
}
body.catalog-category-view .column.main,
body.catalog-product-view .column.main,
body.cms-page-view .column.main {
    padding-top: 0 !important;
}
body.catalog-category-view .sidebar.sidebar-main,
body.catalog-product-view .sidebar.sidebar-main {
    padding-top: 0 !important;
}

/* === 2026-05-28n: sticky state — nav-sections z-index above page-header
   page-header is z:1000, nav-sections was z:5 → page-header covered nav,
   making the menu text invisible on inner pages when scrolled. === */
body.header-stuck .nav-sections,
body.header-stuck .nav-sections .navigation {
    z-index: 1001 !important;
}

/* === 2026-05-29: MOBILE — keep the right icon strip visible (old site shows cart/search/account/key on mobile too). Something pushes it translateY(-50%) (=-426px on 100vh) off-screen; neutralize. === */
@media (max-width: 767px) {
  html body .page-header .medussa-header-icons,
  html body .medussa-header-icons {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    height: 100vh !important;
    z-index: 1000 !important;
  }
  /* reserve a 60px right gutter so page content is not hidden under the strip */
  html body .page-wrapper { padding-right: 60px !important; }
}

/* --- 2026-05-29 mobile fix: search-results (and any non-category) product grid
   overflowed the phone viewport (519px horizontal scroll). The 767px-block rule
   .products-grid .product-items { repeat(2,1fr) } resolves to a fixed 240px 240px
   on unconstrained containers (search uses page-layout-2columns-l), bleeding the
   2nd column off-screen. Category already switched to 1 column at <=575px; do the
   same for ALL product listing grids. Appended last so it wins source-order. --- */
@media (max-width: 575px) {
    .products-grid .product-items { grid-template-columns: 1fr !important; }
}

/* --- 2026-05-29 #4: homepage header was transparent (absolute overlay on the
   hero), so the logo's navy PNG box appeared to float. The .page-header is
   already full-width(1440)/left:0; only its background was transparent. Give it
   the same solid navy as inner pages + the logo box so the whole top bar reads
   as one dark band (matches old site). Covers both resting + stuck states. --- */
body.cms-index-index .page-header,
body.cms-home .page-header {
    background: #01072A !important;
}

/* === 2026-05-29 #5: hero caption typography — match old site exactly, per slide.
   Old captions are bespoke per slide (Montserrat headings + Ubuntu sub-lines;
   white on dark images, navy on light, one red accent on slide 2). The default
   .t2/.t3 rules forced Ubuntu + uppercase + a tiny 16px GOLD t3, which is what
   made slide 1's subtitle render as small gold text crowding the title. Source
   text already has the right case, so transform:none everywhere. Appended last
   to win source-order over the defaults + the earlier scattered slide-3 rules. */
.medussa-hero .slides .slide .caption .t1,
.medussa-hero .slides .slide .caption .t2,
.medussa-hero .slides .slide .caption .t3 {
    text-transform: none !important;
    letter-spacing: normal !important;
}
/* slide 1 — jacquard (white) */
.medussa-hero .slides .slide:nth-child(1) .caption .t2 { font-family:'Montserrat',sans-serif !important; font-size:50px !important; font-weight:600 !important; color:#fff !important; }
.medussa-hero .slides .slide:nth-child(1) .caption .t3 { font-family:'Montserrat',sans-serif !important; font-size:45px !important; font-weight:600 !important; color:#fff !important; }
/* slide 2 — hefel tencel (white + red accent) */
.medussa-hero .slides .slide:nth-child(2) .caption .t1 { font-family:'Ubuntu',sans-serif !important; font-size:45px !important; font-weight:300 !important; color:#fff !important; }
.medussa-hero .slides .slide:nth-child(2) .caption .t2 { font-family:'Montserrat',sans-serif !important; font-size:60px !important; font-weight:700 !important; color:#fff !important; }
.medussa-hero .slides .slide:nth-child(2) .caption .t3 { font-family:'Ubuntu',sans-serif !important; font-size:35px !important; font-weight:700 !important; color:#9e0b0b !important; }
/* slide 3 — st geneve (white) */
.medussa-hero .slides .slide:nth-child(3) .caption .t2 { font-family:'Montserrat',sans-serif !important; font-size:40px !important; font-weight:700 !important; color:#fff !important; }
.medussa-hero .slides .slide:nth-child(3) .caption .t3 { font-family:'Montserrat',sans-serif !important; font-size:45px !important; font-weight:300 !important; color:#fff !important; }
/* slide 4 — silk duvet (navy on light image) */
.medussa-hero .slides .slide:nth-child(4) .caption .t1 { font-family:'Ubuntu',sans-serif !important; font-size:40px !important; font-weight:400 !important; color:#01072A !important; }
.medussa-hero .slides .slide:nth-child(4) .caption .t2 { font-family:'Montserrat',sans-serif !important; font-size:55px !important; font-weight:600 !important; color:#01072A !important; }
.medussa-hero .slides .slide:nth-child(4) .caption .t3 { font-family:'Ubuntu',sans-serif !important; font-size:35px !important; font-weight:500 !important; color:#01072A !important; }
/* slide 5 — livheart (white) */
.medussa-hero .slides .slide:nth-child(5) .caption .t2 { font-family:'Montserrat',sans-serif !important; font-size:55px !important; font-weight:600 !important; color:#fff !important; }
.medussa-hero .slides .slide:nth-child(5) .caption .t3 { font-family:'Ubuntu',sans-serif !important; font-size:35px !important; font-weight:500 !important; color:#fff !important; }
/* slide 6 — goose down (navy on light image) */
.medussa-hero .slides .slide:nth-child(6) .caption .t1 { font-family:'Montserrat',sans-serif !important; font-size:40px !important; font-weight:500 !important; color:#01072A !important; }
.medussa-hero .slides .slide:nth-child(6) .caption .t2 { font-family:'Montserrat',sans-serif !important; font-size:60px !important; font-weight:700 !important; color:#01072A !important; }
/* navy-on-light slides: drop the white-text shadow */
.medussa-hero .slides .slide:nth-child(4) .caption .t1,
.medussa-hero .slides .slide:nth-child(4) .caption .t2,
.medussa-hero .slides .slide:nth-child(4) .caption .t3,
.medussa-hero .slides .slide:nth-child(6) .caption .t1,
.medussa-hero .slides .slide:nth-child(6) .caption .t2 { text-shadow:none !important; }

/* === 2026-05-29 #7: product gallery — thumbnails BELOW main image (was vertical
   left-rail). Theme laid gallery as flex-row (nav 145px left, stage right). With
   navdir=horizontal the full-width nav crushed the stage to 0 height (only thumbs,
   no big image — the reported bug). Re-lay as flex COLUMN: stage on top (keeps its
   720/570 aspect-ratio for height), thumb rail full-width below. Desktop only. === */
@media (min-width: 768px) {
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__wrap { flex-direction: column !important; align-items: stretch !important; }
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__stage { order: 1 !important; width: 100% !important; left: 0 !important; margin: 0 !important; aspect-ratio: 720 / 570 !important; }
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__nav-wrap,
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__nav-wrap--horizontal { order: 2 !important; position: static !important; flex: 0 0 auto !important; width: 100% !important; margin-top: 12px !important; }
  body.catalog-product-view .fotorama:not(.fotorama--fullscreen) .fotorama__nav-wrap--horizontal .fotorama__nav__shaft { margin: 0 auto !important; }
}

/* === 2026-05-29 C: homepage header — semi-transparent at REST so the hero shows
   through (matches old site; my earlier #4 solid fill blocked the hero top), but
   SOLID navy once scrolled/stuck so the floating sticky bar isn't messy (PDF #8).
   Pairs with the now-transparent gold logo so no abrupt navy box shows (PDF #6). */
body.cms-index-index:not(.header-stuck) .page-header,
body.cms-home:not(.header-stuck) .page-header { background: rgba(1, 7, 42, 0.60) !important; }
body.cms-index-index.header-stuck .page-header,
body.cms-home.header-stuck .page-header { background: #01072A !important; }

/* === 2026-05-29 A: homepage Special Products is now a dynamic CatalogWidget
   reading category 89 (Homepage Special Products), separate from Best Seller(88).
   Declutter the standard widget grid to read like the old clean showcase:
   hide rating + wishlist/compare, center the add-to-cart, give cards breathing room. */
.medussa-special-dynamic .block.widget .block-title,
.medussa-special-dynamic .product-reviews-summary,
.medussa-special-dynamic .product-item-actions .actions-secondary { display: none !important; }
.medussa-special-dynamic .product-item-actions { text-align: center !important; margin-top: 8px !important; }
.medussa-special-dynamic .products-grid .product-items { gap: 8px 24px !important; }
.medussa-special-dynamic .product-item-name { min-height: 2.6em !important; }
.medussa-special-dynamic .price-box { margin: 8px 0 !important; }
@media (min-width: 1200px) {
  .medussa-special-dynamic .products-grid .product-items { grid-template-columns: repeat(4, 1fr) !important; }
}

/* === 2026-05-29 hero-rwd: the hero was a fixed 636px tall on every desktop, so on
   large 27"+ monitors the band is short and slide 3's tall caption (40/45px) gets
   its top line clipped under the absolute semi-transparent header. Scale the hero
   up on big screens so the centred caption always clears the header. Laptops keep
   the 636px default (already fine). === */
@media (min-width: 1500px) { .medussa-hero { height: 720px !important; } }
@media (min-width: 1920px) { .medussa-hero { height: 820px !important; } }
@media (min-width: 2400px) { .medussa-hero { height: 900px !important; } }


/* === 2026-05-29 magnifier preview z-index: the hover-zoom preview box lives inside
   .product.media, which is DOM-before (painted under) .product-info-main, so the
   review stars + title bled on top of the magnified preview. Lift the media column's
   stacking context so the preview wins. === */
body.catalog-product-view .product.media { position: relative !important; z-index: auto !important; }
body.catalog-product-view .magnifier-preview { z-index: 100 !important; }

/* === 2026-05-29 price-swap: special/current price was light grey and the
   strikethrough original was dark navy (reversed). Swap: current prominent
   (navy), original muted grey. === */
body.catalog-product-view .product-info-main .price-box .price,
body.catalog-product-view .product-info-price .price { color: #01072A !important; }
body.catalog-product-view .product-info-main .price-box .old-price .price,
body.catalog-product-view .product-info-price .old-price .price,
body.catalog-product-view .product-info-price .old-price { color: #999999 !important; }

/* === 2026-05-29 zoom-inplace: the hover magnifier showed a preview box far to the
   right that followed the cursor. Overlay it ON the product image instead (in-place
   zoom with a border) — more natural. Preview's offsetParent is .product.media; make
   .gallery-placeholder the positioning context and pin the preview over the stage. === */
body.catalog-product-view .gallery-placeholder { position: relative !important; }
body.catalog-product-view .magnifier-preview {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 720 / 570 !important;
    margin: 0 !important;
    border: 2px solid rgba(1, 7, 42, 0.4) !important;
    box-sizing: border-box !important;
}
body.catalog-product-view .magnify-lens { display: none !important; }

/* === 2026-05-29 price-deterministic: target current vs old price by their distinct
   wrapper (.normal-price vs .old-price) so specificity is unambiguous. Current = navy
   prominent, original strikethrough = muted grey. === */
body.catalog-product-view .product-info-main .price-box .normal-price .price-wrapper .price { color: #01072A !important; }
body.catalog-product-view .product-info-main .price-box .old-price .price-wrapper .price { color: #999999 !important; }

/* === 2026-05-29 zoom flicker fix: the in-place preview overlays the image, so the
   cursor sits ON the preview, not the image → magnifier sees mouseleave on the image,
   hides the preview, cursor lands back on the image, re-shows → flicker loop. Make the
   preview transparent to pointer events so the cursor passes through to the image and
   the magnifier keeps tracking smoothly. === */
body.catalog-product-view .magnifier-preview,
body.catalog-product-view .magnifier-preview * { pointer-events: none !important; }

/* === 2026-05-29 custom magnifier lens: small (~1/4 of image) zoom box that follows
   the cursor over the product image (medussa-magnify.js). Replaces Magento's side
   preview (disabled). === */
.medussa-magnify-lens {
    position: fixed;
    width: 170px; height: 170px;
    border: 2px solid rgba(1, 7, 42, 0.55);
    border-radius: 4px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
    background-color: #fff;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 10000;
    display: none;
}

/* === Mobile hero caption cap (2026-06-01) === */
/* Per-slide .slide:nth-child(N) .caption typography (specificity 0,6,0 !important) was
   overriding the generic mobile .caption sizes (0,5,0), so phones rendered 40-60px hero
   text overflowing the header zone. Match specificity with :nth-child(n) and append last
   so the cap wins at equal specificity, only <=767px. */
@media (max-width: 767px) {
  .medussa-hero .slides .slide:nth-child(n) .caption .t1 { font-size: 13px !important; letter-spacing: 1px !important; line-height: 1.3 !important; }
  .medussa-hero .slides .slide:nth-child(n) .caption .t2 { font-size: 24px !important; line-height: 1.2 !important; }
  .medussa-hero .slides .slide:nth-child(n) .caption .t3 { font-size: 16px !important; line-height: 1.3 !important; }
}

/* === Mobile: full-width content + header-anchored icon cluster (2026-06-01) === */
/* Desktop reserves a 60px right rail for the fixed full-viewport-height vertical icon
   strip; on phones that squeezed every section to ~273px with a white gutter, and the
   852px-tall fixed dark bar covered content the whole way down. Match the old site:
   content full-width, and turn the icon strip into an auto-height cluster anchored to
   the (absolute) .page-header so it sits in the top-right corner and scrolls away with
   the header instead of covering the page. */
@media (max-width: 767px) {
  html body { padding-right: 0 !important; }
  html body .page-wrapper { padding-right: 0 !important; }
  html body .page-header .medussa-header-icons,
  html body .medussa-header-icons {
    position: absolute !important;
    height: auto !important;
    top: 0 !important;
    right: 0 !important;
  }
  /* The expandable search field (.block-search .control) is position:fixed width:100%
     with Luma's -15px side margins, so it spilled ~11px past the viewport on phones and
     created a phantom horizontal scroll even while collapsed. Clamp it (and pin both
     edges so the open state is a clean full-width search bar). */
  .medussa-header-icons .block-search .control,
  .medussa-header-icons .block-search .label,
  .medussa-header-icons .block-search input {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
  }
  .medussa-header-icons .block-search .control {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }
  /* The search icon label has a hardcoded width:60px but its anchor (.block-search) is
     only 38px wide and centered in the 60px strip at this breakpoint, so the 60px label
     spilled 11px past the viewport. Let it fill the anchor instead. */
  .medussa-header-icons .block-search .label {
    width: auto !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* === Mobile: solid homepage header before scroll (2026-06-01) === */
/* Desktop keeps the semi-transparent before-scroll header (explicit round-2 request),
   but on phones the rgba(1,7,42,0.6) header let the hero's decorative slide text bleed
   through behind the logo. The old site's mobile header is solid, so match it here.
   Same specificity (0,3,1) as the semi-transparent rule, appended later, mobile-only.
   The scrolled (header-stuck) state is already solid. */
@media (max-width: 767px) {
  body.cms-index-index:not(.header-stuck) .page-header,
  body.cms-home:not(.header-stuck) .page-header {
    background: #01072A !important;
  }
}

/* === Mobile PDP: stop gallery + info column overflowing 17px (2026-06-01) === */
/* .product.media and .product-info-main are width:100% + 16px side padding with
   box-sizing:content-box, so their border-box is 32px wider than the column and they
   spilled 17px past the viewport. This was masked by the old body padding-right:60 rail
   reservation; now that mobile content is full-width it surfaced. Make them border-box. */
@media (max-width: 767px) {
  body.catalog-product-view .product.media,
  body.catalog-product-view .product-info-main {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}

/* === Mobile search toggle reveal (2026-06-01, pairs with nav_link_fix.js #4) === */
/* Touch has no :hover, so the header search could not open on phones. nav_link_fix.js
   toggles .medussa-search-open on tap; this reveals the (already full-width, on-screen)
   .control. Desktop still uses :hover. */
@media (max-width: 767px) {
  .medussa-header-icons .block-search.medussa-search-open .control { visibility: visible !important; }
}

/* === Mobile nav drawer rebuild (2026-06-01) === */
/* The drawer inherited the desktop hover-nav: items were inline-flex + centered, a
   dim overlay (html.nav-open::after, z-index 999) sat ON TOP of the z-60 drawer so
   nothing was tappable, submenus opened only on :hover (dead on touch), and stray
   desktop separators drew vertical lines. Fix: let taps reach the links, lay items
   out as full-width left rows, strip the separators, and expand submenus inline via
   a .medussa-sub-open class toggled by nav_link_fix.js (#5). */
@media (max-width: 1199px) {
  /* overlay must not swallow taps meant for the drawer links */
  html.nav-open::after { pointer-events: none !important; }

  /* Luma's Menu/Account/Settings drawer tabs stretched full-height (852px) with a
     border-left drew the vertical lines down the drawer; Account/Settings are empty.
     Hide the tab strip and its borders -- the active Menu content shows on its own. */
  .nav-sections .section-item-title { display: none !important; }
  /* pull the menu up: drop the stacked tab-strip spacing so items start just below the
     header (~70px) instead of ~158px down. */
  .nav-sections .section-item-content { margin-top: 0 !important; padding-top: 0 !important; }
  .nav-sections .navigation { padding-top: 70px !important; padding-bottom: 24px !important; }
  .nav-sections .sections.nav-sections,
  .nav-sections .section-items,
  .nav-sections .section-item-content { border: 0 !important; }

  /* full-width, left-aligned rows (kill desktop inline-flex centering) */
  .nav-sections .navigation > ul { align-items: stretch !important; }
  .nav-sections .navigation .level0 { width: auto !important; text-align: left !important; position: relative !important; }
  .nav-sections .navigation a.level-top,
  .nav-sections .navigation .submenu a {
    display: block !important;
    width: auto !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  /* strip stray separators / frame lines; one clean divider per top item */
  .nav-sections .navigation,
  .nav-sections .navigation > ul,
  .nav-sections .navigation .level0,
  .nav-sections .navigation .submenu,
  .nav-sections .navigation .submenu li {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }
  .nav-sections .navigation .level0 > a.level-top {
    border-top: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .nav-sections .navigation .level0::before,
  .nav-sections .navigation .level0::after,
  .nav-sections .navigation > ul::before,
  .nav-sections .navigation > ul::after { display: none !important; }

  /* submenu: collapsed by default, expands inline when JS adds .medussa-sub-open */
  .nav-sections .navigation .level0 > .submenu {
    display: none !important;
    position: static !important;
    width: auto !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
  .nav-sections .navigation .level0.medussa-sub-open > .submenu { display: block !important; }
  .nav-sections .navigation .submenu a { padding-left: 40px !important; }

  /* caret on parent items, rotates when open */
  .nav-sections .navigation .level0.parent > a.level-top::after {
    content: "\203A";
    position: absolute !important;
    right: 22px; top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform .2s ease;
    font-size: 20px; line-height: 1; opacity: .7;
  }
  .nav-sections .navigation .level0.medussa-sub-open > a.level-top::after {
    transform: translateY(-50%) rotate(-90deg);
  }
}

/* === Mobile round-2 batch: header / icons / hero / breadcrumb / payment (2026-06-01) === */
@media (max-width: 767px) {
  /* (181/8) Move the 4-icon strip to the vertical middle of the right edge -- it was
     pinned top-right and collided with the language selector. Fixed so it stays centered
     on scroll (a floating quick-access bar). */
  html body .page-header .medussa-header-icons,
  html body .medussa-header-icons {
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    /* NB: do NOT use transform here -- a transformed ancestor becomes the containing
       block for the position:fixed search .control inside, collapsing the search bar to
       the strip width. Center with a negative margin instead (strip = 4x46 = 184px). */
    transform: none !important;
    margin-top: -121px !important;
    right: 0 !important;
    height: auto !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    overflow: visible !important;
  }
  /* equalize all four icons (cart/search were 38px wide, account/login 60px) */
  html body .medussa-header-icons .minicart-wrapper,
  html body .medussa-header-icons .block-search,
  html body .medussa-header-icons .account-icon,
  html body .medussa-header-icons .login-icon {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .medussa-header-icons .minicart-wrapper .action.showcart,
  .medussa-header-icons .block-search .label,
  .medussa-header-icons .account-icon,
  .medussa-header-icons .login-icon { width: 46px !important; height: 46px !important; }
  .medussa-header-icons .minicart-wrapper .action.showcart::before,
  .medussa-header-icons .block-search .label::before,
  .medussa-header-icons .account-icon::before,
  .medussa-header-icons .login-icon::before { font-size: 20px !important; line-height: 46px !important; }
  /* cart qty badge: clear gold circle with the number on the cart icon */
  .medussa-header-icons .minicart-wrapper .action.showcart .counter.qty {
    position: absolute !important; top: 0 !important; right: 0 !important;
    min-width: 17px !important; height: 17px !important; padding: 0 4px !important;
    background: #d9a441 !important; color: #01072A !important;
    border-radius: 9px !important; font-size: 10px !important; font-weight: 700 !important;
    line-height: 17px !important; text-align: center !important; display: block !important;
  }
  .medussa-header-icons .minicart-wrapper .counter-label { display: none !important; }
  .medussa-header-icons .minicart-wrapper .counter.qty.empty { display: none !important; }

  /* (182) Hero slideshow was 680px tall (portrait), cropping landscape slides to a
     vertical strip. Bring it to a landscape height that still fits the caption. */
  .medussa-hero { height: 300px !important; min-height: 0 !important; }
  .medussa-hero .slides,
  .medussa-hero .slide,
  .medussa-hero .slide .bg,
  .medussa-hero .slide .caption { height: 300px !important; min-height: 0 !important; }
  .medussa-hero .slide .bg { background-size: cover !important; background-position: 50% 50% !important; }

  /* (183) Stuck (scrolled) header: the 81px logo spilled out of the 64px bar onto the
     page content. Compact it -- hide the welcome/lang row, center a small logo. */
  body.header-stuck .page-header {
    height: 60px !important;
    /* the header keeps ~36px top padding for the (now-hidden) welcome/lang row, which
       pushed .header.content + logo out the bottom of the stuck bar -- zero it. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.header-stuck .page-header .header.content {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 60px !important; margin: 0 !important;
    padding: 0 54px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  body.header-stuck .page-header .logo { margin: 0 auto !important; padding: 0 !important; top: auto !important; }
  body.header-stuck .page-header .logo,
  body.header-stuck .page-header .logo img { max-height: 40px !important; height: auto !important; width: auto !important; }
  body.header-stuck .page-header .action.nav-toggle { top: 50% !important; transform: translateY(-50%) !important; }
  body.header-stuck .header-welcome-band,
  body.header-stuck .page-header .switcher-language,
  body.header-stuck .page-header .panel.wrapper { display: none !important; }

  /* (184) Breadcrumb had margin:0 105px (a desktop sidebar indent); on a 393px screen
     that squeezed it to 183px and wrapped it. Normal mobile side gap. */
  body.catalog-product-view .breadcrumbs,
  body.catalog-category-view .breadcrumbs,
  .page-wrapper .breadcrumbs {
    margin-left: 15px !important;
    margin-right: 15px !important;
    max-width: none !important;
  }
}

/* (185) Gap between Add to Cart and the Stripe express-payment (Apple/Google Pay) button;
   they were touching. Applies at all widths (desktop had it too). */
.box-tocart .actions #payment-request-button,
.product-add-form #payment-request-button,
#payment-request-button { margin-top: 18px !important; }

/* === Mobile round-2 batch fixes (addendum) === */
@media (max-width: 767px) {
  /* icon equalization needed higher specificity (account/login had a 0,3,0 width:60 rule) */
  html body .page-header .medussa-header-icons,
  html body .medussa-header-icons { width: 48px !important; }
  html body .page-header .medussa-header-icons .minicart-wrapper,
  html body .page-header .medussa-header-icons .block-search,
  html body .page-header .medussa-header-icons .account-icon,
  html body .page-header .medussa-header-icons .login-icon {
    width: 48px !important; min-width: 48px !important; height: 46px !important;
  }

  /* compact the at-rest header: the 81px logo made a 138px header that crowded the
     welcome/lang row (cramping) and hid the top of the hero behind the solid header. */
  .page-header .header.content { padding-top: 6px !important; padding-bottom: 6px !important; }
  .page-header .logo { margin-top: 4px !important; margin-bottom: 4px !important; }
  .page-header .logo,
  .page-header .logo img { max-height: 52px !important; height: auto !important; width: auto !important; }

  /* hero caption sits behind the solid header overlay; push it into the visible zone.
     NB: must include .slides to reach (0,4,0) and beat the existing
     `.medussa-hero .slides .slide .caption{padding:0 24px!important}` shorthand. */
  .medussa-hero .slides .slide .caption {
    box-sizing: border-box !important;
    padding-top: 0 !important;
    justify-content: center !important;
  }
}

/* === Mobile: keep the closed drawer off-screen even when the header is stuck === */
/* body.header-stuck reset the drawer to left:0, so on scroll the closed nav-sections
   slid on-screen (its "Menu" content showed at the top + could intercept taps). Pin it
   off-screen whenever html is NOT .nav-open; slide it in only when open. */
@media (max-width: 1199px) {
  html:not(.nav-open) body .nav-sections { left: -380px !important; }
  html.nav-open body .nav-sections { left: 0 !important; }
}

/* === Mobile: hide the welcome text (a .page-header::before pseudo) when the header is
   stuck, so it stops overlapping the compact logo bar (2026-06-01) === */
@media (max-width: 767px) {
  body.header-stuck .page-header::before { content: "" !important; display: none !important; }
}

/* === Mobile round-3: hero below header + compact category toolbar (2026-06-01) === */
@media (max-width: 767px) {
  /* Stack the hero BELOW the solid header instead of behind it. The solid header (to
     stop the bleed) was overlaying the hero's top ~106px, leaving only ~194px of the
     300px hero visible and cramming the caption into a thin band. Overlap ~6px so the
     navy header always covers the seam (no white sliver) whatever the store header height. */
  body.cms-index-index .medussa-hero,
  body.cms-home .medussa-hero { margin-top: 100px !important; }

  /* Category toolbar: put "Items", "Sort By", and the page-size on ONE vertically-centered
     line; drop the "Show" word so it reads "16 per page"; smaller text + boxes. */
  .toolbar-products {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 6px 56px 6px 0 !important;
    font-size: 9px !important;
  }
  .toolbar-products .toolbar-amount {
    order: 0 !important; display: block !important;
    margin: 0 !important; padding: 0 !important;
    font-size: 8px !important; white-space: nowrap !important; line-height: 1.2 !important;
  }
  .toolbar-products .toolbar-sorter {
    order: 1 !important; display: flex !important; align-items: center !important;
    margin: 0 !important; gap: 4px !important;
  }
  .toolbar-products .toolbar-sorter .sorter-label { display: none !important; }
  .toolbar-products .limiter {
    order: 2 !important; display: flex !important; align-items: center !important;
    margin: 0 !important; gap: 4px !important; float: none !important;
  }
  .toolbar-products .limiter > .label { display: none !important; }   /* hide "Show" */
  .toolbar-products .limiter-text { font-size: 9px !important; white-space: nowrap !important; }
  .toolbar-products select.sorter-options,
  .toolbar-products select.limiter-options {
    font-size: 9px !important; height: 28px !important; min-height: 28px !important;
    padding: 2px 18px 2px 5px !important; margin: 0 !important; min-width: 0 !important; max-width: 88px !important; text-overflow: ellipsis !important;
  }
  .toolbar-products .sorter-action { margin: 0 !important; }
}

/* === Mobile round-4: header welcome text no longer overlaps the language switcher === */
/* The .page-header::before welcome text was text-align:center, so on a 393px header it
   reached ~x:267 and ran under the absolute "ENGLISH v" switcher at x:237 (the messy
   overlap, worse on iOS where the font is wider). Left-align + cap its width so it stays
   clear of the switcher. */
@media (max-width: 767px) {
  .page-header::before {
    text-align: left !important;
    font-size: 11px !important;
    width: auto !important;
    max-width: 200px !important;
    padding: 9px 8px 9px 16px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* === Cart Continue Shopping button height (2026-06-02) === */
/* .action.continue had padding 7px (height 32px) while Update/Edit/Remove use padding
   12px (height 42px), so "Continue Shopping" looked noticeably shorter. Match them.
   All widths (desktop had the same mismatch). */
.cart-container .action.continue,
.cart.main.actions .action.continue,
.cart .action.continue,
a.action.continue {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* === Round-5: slideshow button match old site + header lang align + special 6/row === */
/* #3 SHOP NOW button: match the old site (Montserrat 14px/700, padding 17x39). The
   captions already match the old site EXACTLY (Montserrat, same px + weight + position,
   verified at 1280 + 1440) — only the button font differed (was Ubuntu 13px/500). */
@media (min-width: 768px) {
  .medussa-hero .slides .slide .caption .cta {
    font-family: "Montserrat", "Ubuntu", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 17px 39px !important;
  }
}
/* #1 mobile header: the language switcher sat lower than the welcome line (top:14px),
   not aligned, which pushed the logo down. Raise it onto the welcome's line. */
@media (max-width: 767px) {
  .page-header .switcher-language { top: 2px !important; }
}
/* #5 homepage Special Products: 6 per row on desktop (was 4 -> too big); products_count
   raised to 100 in the CMS so all show across multiple rows. Needs (0,5,0) to beat the
   round-2 `.block.widget.block-products-list .product-items{repeat(4,1fr)}`. */
@media (min-width: 1200px) {
  .medussa-special-dynamic .block.widget.block-products-list .product-items {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* === Round-5b: special 6-col cards must fill the 1fr tracks (were fixed 270px ->
   6x270=1620 overflow). Make items + images flexible so 6 fit and they get smaller. === */
@media (min-width: 1200px) {
  .medussa-special-dynamic .block.widget.block-products-list .product-item,
  .medussa-special-dynamic .product-item,
  .medussa-special-dynamic .product-item-info {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .medussa-special-dynamic .product-image-photo,
  .medussa-special-dynamic .product-image-wrapper,
  .medussa-special-dynamic [class*="product-image-container"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* === Round-5c: block-content was a 4-col grid squeezing .products-grid to 25% (~267px),
   collapsing the 6 tracks to 24px. Make it block so the grid spans the full width. === */
@media (min-width: 1200px) {
  .medussa-special-dynamic .block.widget.block-products-list .block-content {
    display: block !important;
  }
  .medussa-special-dynamic .products-grid,
  .medussa-special-dynamic .block-content { width: 100% !important; max-width: 100% !important; }
}

/* === Round-5d: special-widget product image was absolute in a 0-height wrapper -> card
   reserved no space. Put it in normal flow so each card sizes to its image. === */
@media (min-width: 1200px) {
  .medussa-special-dynamic .product-image-container,
  .medussa-special-dynamic .product-image-wrapper {
    height: auto !important; padding-bottom: 0 !important; display: block !important;
  }
  .medussa-special-dynamic .product-image-photo {
    position: relative !important; top: auto !important; left: auto !important;
    width: 100% !important; height: auto !important;
  }
}

/* ===== round-6 (2026-06-02): mobile header — logo size + language dropdown panel ===== */
@media (max-width: 767px) {
  /* logo was max-height 52px and felt oversized / spilled toward the hero -> shrink it */
  .page-header .logo,
  .page-header .logo img { max-height: 44px !important; }
  .page-header .logo { max-width: 180px !important; }

  /* keep the language switcher stacked above the centered logo so its panel can cover it */
  .page-header .switcher-language { z-index: 60 !important; }

  /* the open language panel was see-through -> the gold logo bled through and options were
     unreadable. Solid navy panel (matches the header) painted on top of the logo. */
  .page-header .switcher-language .switcher-dropdown,
  .page-header .switcher-language ul.dropdown,
  .page-header .switcher-language .switcher-options .switcher-dropdown {
    background: #01072a !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.5) !important;
    border-radius: 4px !important;
    z-index: 2000 !important;
  }
  .page-header .switcher-language .switcher-dropdown li,
  .page-header .switcher-language .switcher-dropdown li a,
  .page-header .switcher-language .switcher-dropdown li strong { background: transparent !important; color: #fff !important; }
  .page-header .switcher-language .switcher-dropdown li a:hover { background: rgba(255,255,255,.14) !important; }
}

/* ===== round-7 (2026-06-02): showroom 4-across (match old) + specials button align + logo navy room ===== */

/* A) mobile header — even at 44px the logo spilled below the navy bar on real iOS.
   Slightly smaller logo + more navy room beneath it so "HOME BEDDING" stays on navy. */
@media (max-width: 767px) {
  .page-header .logo,
  .page-header .logo img { max-height: 42px !important; }
  .page-header { padding-bottom: 12px !important; }
}

/* B) homepage Special Products — cards were display:block so Add-to-Cart sat right under
   each (variable-length) name, ~71px out of line. Make the whole card a flex column and
   push the actions to the bottom, so buttons align on one row per grid row. */
.medussa-special-dynamic .product-items .product-item {
  display: flex !important;
  flex-direction: column !important;
}
.medussa-special-dynamic .product-item-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.medussa-special-dynamic .product-item-details {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.medussa-special-dynamic .product-item-inner { margin-top: auto !important; }

/* C) "Visit Our Store" showroom — old site is 4 SQUARE images across one row, full-width,
   no gap. A later round (ul.content-align) turned it into a centered 2x2 880px grid.
   Restore 4-across square on desktop to match the old site. */
@media (min-width: 768px) {
  .medussa-section.medussa-add-info .add-info ul.content-align {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: auto !important;
    max-width: none !important;
    gap: 0 !important;
  }
  .medussa-section.medussa-add-info .add-info ul.content-align li { aspect-ratio: 1 / 1 !important; }
  .medussa-section.medussa-add-info .add-info ul.content-align li img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ===== round-8 (2026-06-02): showroom heading restored + not-stuck mobile header ===== */

/* Showroom "VISIT OUR SHOWROOM TODAY ..." heading was display:none. Restore it above the
   4 images, matching the old site (Ubuntu 32/300, centered, navy, uppercase). */
.medussa-section.medussa-add-info .medussa-section-title {
  display: block !important;
  font-family: "Ubuntu", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  color: #01072a !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  margin: 32px 0 16px !important;
  padding: 0 16px !important;
}
@media (max-width: 767px) {
  .medussa-section.medussa-add-info .medussa-section-title {
    font-size: 18px !important;
    margin: 22px 0 12px !important;
  }
}

/* Not-stuck mobile header: on real iOS the logo sized off its max-width (~57px) and spilled
   below the navy, and the burger (anchored to the header top) sat too high. Force an explicit
   logo height, let the navy grow, and vertically center the burger + logo in the logo row. */
@media (max-width: 767px) {
  body:not(.header-stuck) .page-header .logo img {
    height: 38px !important;
    width: auto !important;
    max-height: 38px !important;
    max-width: none !important;
  }
  body:not(.header-stuck) .page-header .logo { max-width: none !important; margin: 0 !important; }
  body:not(.header-stuck) .page-header { height: auto !important; padding-bottom: 10px !important; }
  body:not(.header-stuck) .page-header .header.content {
    position: relative !important;
    min-height: 54px !important;
    align-items: center !important;
  }
  body:not(.header-stuck) .page-header .nav-toggle {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
  }
}

/* round-8b: round-8 set the logo margin:0 which removed its horizontal auto-centering
   (logo drifted right). Restore centered while keeping 0 vertical margin. */
@media (max-width: 767px) {
  body:not(.header-stuck) .page-header .logo { margin: 0 auto !important; }
}

/* ===== round-9 (2026-06-02): not-stuck mobile logo to match the stuck size + center it ===== */
/* client: not-stuck logo too small at 38px + sat high. Stuck logo renders ~50-56px and is
   centered; match that size and vertically center the logo+burger in the logo row, and drop
   the asymmetric bottom padding so the navy hugs the row evenly. */
@media (max-width: 767px) {
  body:not(.header-stuck) .page-header .logo img {
    height: 52px !important;
    width: auto !important;
    max-height: 52px !important;
    max-width: none !important;
  }
  body:not(.header-stuck) .page-header { padding-bottom: 0 !important; }
  body:not(.header-stuck) .page-header .header.content {
    min-height: 70px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    align-items: center !important;
  }
}

/* ===== round-10 (2026-06-02): mobile menu white gap ===== */
/* The drawer (.nav-sections) is width:80% (312px @390) but Magento shifts
   .page-wrapper by calc(100% - 54px) (336px) when nav-open, so the page sits 24px
   past the drawer's right edge -> a dimmed body strip showed between them. Match
   the page shift to the drawer width (80%) so the page's left edge meets the drawer. */
@media (max-width: 767px) {
  html.nav-open body .page-wrapper { left: 80% !important; right: auto !important; }
}

/* ===== round-11 (2026-06-03): mobile special-products image left-aligned/cut ===== */
/* The product image container is a fixed 270px inline-block inside a 300px card, so it
   sat left with ~30px white on the right and looked cut / off-center vs the centered
   name+price+button. Make it fill the card width (block, 100%) so it's centered. */
@media (max-width: 767px) {
  .medussa-special-dynamic .product-item-photo { display: block !important; width: 100% !important; }
  .medussa-special-dynamic .product-image-container,
  .medussa-special-dynamic .product-image-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .medussa-special-dynamic .product-image-photo {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
}

/* round-11b: round-11 made the wrapper height:auto but the img is position:absolute by
   default, so the wrapper collapsed to 0 and the image went blank (same as the round-5d
   desktop bug). Put the img back in normal flow so it shows + fills the card. */
@media (max-width: 767px) {
  .medussa-special-dynamic .product-image-container,
  .medussa-special-dynamic .product-image-wrapper { padding-bottom: 0 !important; }
  .medussa-special-dynamic .product-image-photo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }
}

/* ===== round-12 (2026-06-04): mobile menu cleanup ===== */
/* (633) Magento's jQuery-UI menu auto-adds an "All <Parent>" link (li.all-category)
   under every parent category — client doesn't want them. (624) nested level-2 submenus
   are jQuery-UI ui-front absolute (desktop flyout) and bleed off the right edge on mobile.
   Drawer model is: tap a top category to expand its children, tap a child to navigate to
   its page (where its own subcategories live), so hide the auto "All X" + the level-2 menu. */
@media (max-width: 1199px) {
  .nav-sections .navigation .all-category { display: none !important; }
  .nav-sections .navigation .submenu .submenu { display: none !important; }
}

/* ===== round-13 (2026-06-04): collapsed search bar must not intercept header taps ===== */
/* The mobile search .control is position:fixed, full-width, z-index:100 over the header,
   pointer-events:auto, only visibility:hidden when collapsed. On iOS Safari a hidden fixed
   element with pointer-events:auto can still swallow touches over the burger/logo -> the
   customer "cannot tap the burger" once on a page. Make it non-interactive unless open. */
@media (max-width: 767px) {
  .medussa-header-icons .block-search .control { pointer-events: none !important; }
  .medussa-header-icons .block-search.medussa-search-open .control { pointer-events: auto !important; }
}

/* round-13b: checkout "Back to Cart" link (injected by nav_link_fix.js #6) */
.medussa-back-to-cart {
  display: inline-block;
  margin: 14px 0 4px 16px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: #01072a;
  text-decoration: none;
}
.medussa-back-to-cart:hover { text-decoration: underline; color: #01072a; }

/* ===== round-14 (2026-06-04): ZH "低至" label + checkout burger + mobile minicart scroll ===== */

/* (192) "As low as" / "低至" minimal-price label — already hidden on the PDP (L873-874);
   also hide it on product listings, where it sits in .normal-price .price-label. */
.product-item .normal-price .price-label,
.block-products-list .normal-price .price-label,
.products-grid .normal-price .price-label { display: none !important; }

/* (195) Magento's 1-column checkout has no nav menu, so the header burger opens an empty
   drawer and tapping it does nothing. Hide it on checkout (logo=home + Back-to-Cart navigate). */
body.checkout-index-index .nav-toggle { display: none !important; }

/* (196) Mobile minicart was taller than the viewport with no scroll -> items below the fold
   were unreachable / un-editable. Cap to the viewport and let it scroll. */
@media (max-width: 767px) {
  .minicart-wrapper .block-minicart {
    max-height: 80vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ===== round-15 (2026-06-04): mobile minicart -> full-height right slide-out drawer ===== */
/* The dropdown was cramped (bottom cut off) and scrolling it dragged the page behind. Turn it
   into a fixed, full-height right panel that slides in; the panel scrolls (overscroll-behavior
   :contain) while nav_link_fix.js #7 locks the page scroll + shows a dim tap-to-close overlay. */
@media (max-width: 767px) {
  .minicart-wrapper .block-minicart {
    display: block !important;
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    width: 90% !important; max-width: 380px !important;
    height: 100% !important; max-height: 100% !important;
    margin: 0 !important; padding: 44px 16px 24px !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: -6px 0 24px rgba(0,0,0,.4) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateX(105%);
    transition: transform .28s ease;
    visibility: hidden;
    pointer-events: none;
    z-index: 1001 !important;
  }
  .minicart-wrapper.active .block-minicart {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .minicart-wrapper .block-minicart:before,
  .minicart-wrapper .block-minicart:after { display: none !important; }
  html.medussa-minicart-open:before {
    content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
  }
  html.medussa-minicart-open,
  html.medussa-minicart-open body { overflow: hidden !important; }
  .medussa-mc-close {
    position: fixed !important; top: 6px; right: 10px;
    width: 38px; height: 38px; line-height: 34px; text-align: center;
    font-size: 28px; color: #01072a; background: transparent; border: 0;
    cursor: pointer; z-index: 1002 !important;
  }
}

/* round-15b: line 488 (.medussa-header-icons .minicart-wrapper .block-minicart {right:60px!important},
   specificity 0,3,0) out-ranked round-15 (0,2,0) and shoved the drawer 60px left. Re-assert at
   matching specificity and make it FULL-WIDTH (client: "slide out a whole page from the right"). */
@media (max-width: 767px) {
  .medussa-header-icons .minicart-wrapper .block-minicart {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }
}

/* round-15c: the full-width drawer lives inside .medussa-header-icons (a fixed stacking
   context), so the root-level dim overlay (html.medussa-minicart-open:before z-1000) painted
   OVER it -> the panel looked grayed out. A full-width panel needs no overlay anyway. Drop it
   and force the solid white panel. Close is via the x button. */
@media (max-width: 767px) {
  html.medussa-minicart-open:before { display: none !important; }
  .medussa-header-icons .minicart-wrapper .block-minicart { background: #ffffff !important; }
}

/* ===== round-16 (2026-06-04): minicart drawer polish ===== */
@media (max-width: 767px) {
  /* no horizontal scroll; more headroom so the x doesn'\''t crowd "Cart Subtotal" */
  .medussa-header-icons .minicart-wrapper .block-minicart {
    overflow-x: hidden !important;
    padding-top: 66px !important;
  }
  /* bigger product images (mini_cart thumbnail bumped to 120x160 in view.xml); lay each item
     out as a clean flex row so the larger image + details sit nicely */
  .medussa-header-icons .block-minicart .minicart-items .product-item > .product {
    display: flex !important; gap: 14px !important; align-items: flex-start !important;
  }
  .medussa-header-icons .block-minicart .minicart-items .product-item-photo {
    position: static !important; float: none !important; width: 120px !important; flex: 0 0 120px !important; margin: 0 !important;
  }
  .medussa-header-icons .block-minicart .minicart-items .product-item-photo .product-image-photo {
    width: 120px !important; height: auto !important;
  }
  .medussa-header-icons .block-minicart .minicart-items .product-item-details {
    margin: 0 !important; padding-left: 0 !important; flex: 1 1 auto !important;
  }
}

/* ===== round-17 (2026-06-04): bigger drawer image + free-ship nudge ===== */
@media (max-width: 767px) {
  /* the image chain had inline width:60px inside a 120px box -> ~60px whitespace.
     Widen the WHOLE chain to ~170px (img fills it). view.xml bumped to 320 for sharpness. */
  .medussa-header-icons .block-minicart .minicart-items .product-item-photo {
    width: 170px !important; flex: 0 0 170px !important;
  }
  .medussa-header-icons .block-minicart .minicart-items .product-image-container,
  .medussa-header-icons .block-minicart .minicart-items .product-image-wrapper {
    width: 170px !important; max-width: 170px !important;
  }
  .medussa-header-icons .block-minicart .minicart-items .product-image-photo {
    width: 100% !important; max-width: 100% !important; height: auto !important;
  }
  .medussa-header-icons .block-minicart .minicart-items .product-item > .product { gap: 12px !important; }
}
/* free-shipping nudge banner (injected by nav_link_fix.js #8) */
.medussa-freeship-nudge {
  background: #fff7e6; color: #01072a; border: 1px solid #cda379; border-radius: 4px;
  padding: 11px 16px; margin: 0 0 16px; text-align: center; font-weight: 600; font-size: 14px;
}
.medussa-freeship-nudge.qualified { background: #eaf7ea; border-color: #5aa85a; }

/* round-17b: round-16 .product-item-photo .product-image-photo{width:120px} (0,5,0) out-ranked
   round-17 .product-image-photo{width:100%} (0,4,0) -> image stayed 120px in the 170px box.
   Re-assert at matching specificity so the image fills the widened container. */
@media (max-width: 767px) {
  .medussa-header-icons .block-minicart .minicart-items .product-item-photo .product-image-photo {
    width: 100% !important; max-width: 100% !important; height: auto !important;
  }
}

/* ===== round-18 (2026-06-04): minicart drawer - expand options, tighten label/value, fix delete ===== */
/* (1) show product options inline instead of behind a "See Details" toggle */
.block-minicart .product.options .content { display: block !important; }
.block-minicart .product.options .toggle { display: none !important; }
.block-minicart .product.options .content .subtitle { display: none !important; }
/* (2) option label + value on one tight line */
.block-minicart .product.options .content dl.product.options.list { margin: 4px 0 0 !important; }
.block-minicart .product.options .content dl.product.options.list dt.label {
  display: inline !important; margin: 0 !important; font-weight: 600 !important; float: none !important;
}
.block-minicart .product.options .content dl.product.options.list dt.label:after { content: ": "; }
.block-minicart .product.options .content dl.product.options.list dd.values {
  display: inline !important; margin: 0 0 0 3px !important; float: none !important;
}
/* (3) the delete-confirm modal renders at z:902, BEHIND the z:1001 drawer -> raise it above
   (+ its overlay) while the drawer is open, so the "OK" is reachable and delete works */
@media (max-width: 767px) {
  html.medussa-minicart-open .modal-popup,
  html.medussa-minicart-open .modals-overlay,
  html.medussa-minicart-open .confirm.modal-popup { z-index: 1100 !important; }
}

/* round-18b: round-18 raised the confirm popup AND its .modals-overlay to the SAME z:1100, so
   the dim overlay rendered on top of the Yes/Cancel popup (darkened + swallowed clicks). The
   popup must sit ABOVE its overlay. overlay above the drawer, popup above the overlay. */
@media (max-width: 767px) {
  html.medussa-minicart-open .modals-overlay { z-index: 1100 !important; }
  html.medussa-minicart-open .modal-popup,
  html.medussa-minicart-open .modal-popup.confirm,
  html.medussa-minicart-open aside.modal-popup { z-index: 1102 !important; }
}

/* ===== round-20 (2026-06-09, supersedes round-19 parts 1-2): mobile menu level-3 INLINE EXPAND + search → right slide-out drawer (part 3 search-results centering retained below) ===== */

/* (1) MENU level-2/3 — INLINE-EXPANDABLE (supersedes round-19's hide). round-19 hid level-2
   entirely (treated it as a desktop flyout); the client wants it reachable on mobile. So:
   keep level-2 collapsed AND force position:static (this kills the desktop hover/aria
   *absolute* flyout that bled off the right on iOS sticky-hover), then expand it INLINE when
   nav_link_fix.js #5 toggles .medussa-sub-open on the level-1 parent (mirrors level-0 →
   level-1). Hide selectors are 0-5-1 to beat the desktop reveal (0-4-1); the expand is 0-6-1
   to win over the hide. Because the shown submenu is static (not absolute) it cannot overflow. */
@media (max-width: 1199px) {
  .nav-sections .navigation .submenu li:hover > .submenu,
  .nav-sections .navigation .submenu li > .submenu[aria-expanded="true"],
  .nav-sections .navigation .submenu li.level1 > .submenu {
    display: none !important;
    position: static !important;
    width: auto !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }
  .nav-sections .navigation .submenu li.level1.medussa-sub-open > .submenu { display: block !important; }
  .nav-sections .navigation .submenu .submenu a { padding-left: 60px !important; }
  /* rotating chevron on level-1 parents = an injected REAL <button> (addL2Toggles in #5),
     overlaid on the right of the 36px row. A <button type=button> can't navigate, so tapping
     it ONLY expands — fixes the iOS "expand then self-navigate" (preventDefault on the link
     did not stop the nav). The link gets padding-right so its text never runs under the button. */
  .nav-sections .navigation .submenu li.level1.parent { position: relative !important; }
  .nav-sections .navigation .submenu li.level1.parent > a { padding-right: 52px !important; }
  /* kill the theme's default chevron-right (\f105) on level-1 parent links — our injected
     .medussa-l2-toggle button is the only chevron (down/up); the ::after was a duplicate. */
  .nav-sections .navigation .submenu li.level1.parent > a::after { display: none !important; content: none !important; }
  .nav-sections .navigation .submenu li.level1.parent > .medussa-l2-toggle {
    position: absolute !important; top: 0 !important; right: 0 !important;
    width: 48px !important; height: 36px !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
    color: #cda379 !important; cursor: pointer !important; z-index: 3 !important;
  }
  .nav-sections .navigation .submenu li.level1.parent > .medussa-l2-toggle::before {
    content: "\203A"; display: block; line-height: 36px; text-align: center;
    font-size: 22px; opacity: .85; transform: rotate(90deg); transition: transform .2s ease;
  }
  .nav-sections .navigation .submenu li.level1.medussa-sub-open > .medussa-l2-toggle::before {
    transform: rotate(-90deg);
  }
}

/* (2) SEARCH → right slide-out drawer (supersedes round-19's in-header overlay, which kept
   spuriously closing on iOS touch — see round-19 notes). The .control is hidden until
   html.medussa-search-active, then becomes a fixed full-height right panel that slides in via
   a keyframe (so there's no off-screen element to create phantom h-scroll). A dim backdrop +
   an injected × close it (nav_link_fix.js #4). No document outside-click / geometry guard —
   the backdrop owns closing, which is what was firing spuriously before. */
@media (max-width: 767px) {
  html.medussa-search-active { overflow: hidden !important; }
  .medussa-search-backdrop { display: none; }
  html.medussa-search-active .medussa-search-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5); z-index: 1101;
  }
  .medussa-header-icons .block-search .control { display: none !important; }
  html.medussa-search-active .medussa-header-icons .block-search .control {
    display: block !important;
    position: fixed !important;
    top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important;
    width: 88vw !important; max-width: 360px !important;
    height: 100vh !important; height: 100dvh !important;
    margin: 0 !important; padding: 58px 16px 20px !important;
    background: #01072A !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.45) !important;
    z-index: 1102 !important;
    visibility: visible !important; opacity: 1 !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
    animation: medussaSearchSlideIn .25s ease !important;
  }
  html.medussa-search-active .medussa-header-icons .block-search .control input#search,
  html.medussa-search-active .medussa-header-icons .block-search .control .input-text {
    width: 100% !important; height: 46px !important; box-sizing: border-box !important;
  }
  html.medussa-search-active .medussa-header-icons .block-search .control .search-autocomplete {
    position: static !important; width: 100% !important; margin-top: 8px !important;
    left: auto !important; top: auto !important; right: auto !important;
  }
  .medussa-search-close {
    position: absolute !important; top: 12px; right: 14px;
    width: 40px; height: 40px; line-height: 38px; text-align: center;
    font-size: 30px; color: #fff; background: none !important; border: none !important;
    padding: 0 !important; z-index: 3; cursor: pointer;
  }
  /* visible "Search" submit button below the input (injected by #4) — the native
     .action.search lives outside .control and is display:none, so users had to press the
     soft-keyboard Go key to search; this gives an explicit button inside the drawer. */
  html.medussa-search-active .medussa-header-icons .block-search .control .medussa-search-go {
    display: block !important; width: 100% !important; box-sizing: border-box !important;
    margin: 14px 0 0 !important; padding: 13px !important;
    background: #cda379 !important; color: #01072A !important;
    border: 0 !important; border-radius: 2px !important;
    font-size: 15px !important; font-weight: 700 !important; letter-spacing: .05em !important;
    text-transform: uppercase !important; text-align: center !important; cursor: pointer !important;
  }
}
@keyframes medussaSearchSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* (3) SEARCH-RESULTS / category listing products hugging the left. .product-item-info is
   a fixed 240px block with margin:0, so in the 360px 1-column grid cell it sat against the
   left with a ~120px gap on the right -> looked off-center. Center the block in its cell.
   Scoped to search + category so the homepage special-products grid (round-11) is untouched. */
@media (max-width: 767px) {
  body.catalogsearch-result-index .product-items .product-item-info,
  body.catalog-category-view .product-items .product-item-info {
    margin-left: auto !important; margin-right: auto !important;
  }
}

/* Fix 2026-06-10: hide the mobile level-2 expand toggle on DESKTOP. It is injected by
   nav_link_fix.js into every level-1 parent and only styled inside @media(max-width:1199px);
   on desktop it leaked through the hover dropdown as empty gold blocks. Desktop uses hover. */
@media (min-width: 1200px) {
  .medussa-l2-toggle { display: none !important; }
}