/* Phase 2 chrome: design tokens + header, nav, mega, phone strip / search / drawer, compact sticky header, floats.
   Linked by layout handle ipatio_chrome (Observer\\ChromeLayoutHandle). Every rule that touches existing markup is scoped to
   body.ipx-chrome so the file is inert while ipatio_uiux/chrome/enabled = 0.
   Phones < 480 px get this whole file inlined by PhoneCriticalCss::liveCss() (comments stripped): keep it lean.
   Breakpoints: phone-style header below 1024 px (owner); folds of the nav at the widths listed under "nav folds".
   One real bold: 'Ipatio Rounded' 700 (Quicksand 700 subset, fonts/OFL-Quicksand.txt) through --ipx-font-bold; text at
   500 uses --ipx-font ('Ipatio Rounded Text' 500, our renamed Quicksand 500, FONT-SELF-001). Never font-weight 600 in the chrome. */

/* ---- tokens (mockup tokens.css, Direction A1) ---- */
:root{--ipx-ink:#1d1b19;--ipx-ink-2:#34312d;--ipx-grey:#6b6963;--ipx-line:#e8e3da;--ipx-line-2:#d6cfc3;--ipx-stone:#f6f4f0;--ipx-cream:#fffaf1;--ipx-cream-line:#f3e9d8;
  --ipx-orange:#ff9a02;--ipx-orange-hover:#ffab2e;--ipx-orange-ring:rgba(255,154,2,.35);
  --ipx-green-deep:#2e5902;--ipx-green-deep-2:#244702;--ipx-green:#86af28;--ipx-green-soft:#cfe39a;--ipx-green-tint:#eef4e0;
  --ipx-link:#9a5600;--ipx-link-dark:#ffc266;--ipx-sale:#c62828;--ipx-on-dark:#f3f0ea;--ipx-on-dark-2:#d9d4cb;--ipx-on-dark-3:#b3ada3;--ipx-dark-line:rgba(255,255,255,.14);
  --ipx-util-bg:var(--ipx-green-deep);--ipx-util-fg:#fff;--ipx-util-mute:#dfe9cc;--ipx-util-ico:var(--ipx-green-soft);
  --ipx-r-sm:8px;--ipx-r-md:12px;--ipx-r-lg:18px;--ipx-r-pill:999px;
  --ipx-sh-1:0 1px 2px rgba(29,27,25,.06);--ipx-sh-2:0 6px 18px rgba(29,27,25,.08);--ipx-sh-3:0 18px 40px rgba(29,27,25,.16);
  --ipx-wrap:1384px;--ipx-gutter:32px;--ipx-ease:cubic-bezier(.2,.8,.2,1);
  --ipx-font:'Ipatio Rounded Text',Quicksand,'Quicksand FB Arial','Quicksand FB Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ipx-font-bold:'Ipatio Rounded','Ipatio Rounded Text',Quicksand,'Quicksand FB Arial','Quicksand FB Roboto','Helvetica Neue',Helvetica,Arial,sans-serif}
:root:lang(zh){--ipx-font:'Ipatio Rounded Text',Quicksand,'Quicksand FB Arial','PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Helvetica Neue',Arial,sans-serif;
  --ipx-font-bold:'Ipatio Rounded','Ipatio Rounded Text',Quicksand,'Quicksand FB Arial','PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Helvetica Neue',Arial,sans-serif}
@media (max-width:1023px){:root{--ipx-gutter:24px}}
@media (max-width:767px){:root{--ipx-gutter:16px}}
@font-face{font-family:'Quicksand FB Arial';src:local('Arial'),local('ArialMT'),local('Liberation Sans');size-adjust:103.93%;ascent-override:96.22%;descent-override:24.05%;line-gap-override:0%}
@font-face{font-family:'Ipatio Rounded';font-style:normal;font-weight:700;font-display:optional;src:url(../fonts/ipatio-rounded-700.woff2) format('woff2')}

/* ---- shared helpers ---- */
.ipx-wrap{box-sizing:border-box;width:100%;max-width:var(--ipx-wrap);margin-left:auto!important;margin-right:auto!important;padding-left:var(--ipx-gutter)!important;padding-right:var(--ipx-gutter)!important}
.ipx-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ipx-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
:is(.ipx-hdr,.ipx-drawer,.ipx-compact),:is(.ipx-hdr,.ipx-drawer,.ipx-compact) *{box-sizing:border-box;letter-spacing:normal!important}
:where(.ipx-hdr,.ipx-drawer,.ipx-compact) :where(ul,ol){list-style:none;margin:0!important;padding:0!important}
:where(.ipx-hdr,.ipx-drawer,.ipx-compact) :where(li){margin:0!important;padding:0!important}
:where(.ipx-hdr,.ipx-drawer,.ipx-compact) :where(p,h2,h3){margin:0}
:where(.ipx-hdr,.ipx-drawer,.ipx-compact) :where(a){font-weight:inherit;text-decoration:none}
:is(.ipx-hdr,.ipx-drawer,.ipx-compact) :is(a,button,input):focus-visible{outline:2px solid var(--ipx-ink)!important;outline-offset:2px!important;box-shadow:0 0 0 4px #fff!important}
.ipx-util :focus-visible,.ipx-mstrip :focus-visible{outline-color:#fff!important;box-shadow:0 0 0 4px var(--ipx-ink)!important}
.ipx-hdr button,.ipx-drawer button,.ipx-compact button{font:inherit;letter-spacing:0;text-transform:none;box-shadow:none;min-height:0;min-width:0}

/* ---- the old header, retired: panel + logo row are removed by layout; Amasty's menu stays for crawlers, hidden ---- */
body.ipx-chrome .page-header{background:#fff!important;border:0!important;box-shadow:none!important;margin:0!important;padding:0!important;position:relative!important;top:auto!important;transform:none!important;height:auto!important;min-height:0!important;z-index:997!important}
body.ipx-chrome .page-header .ammenu-menu-wrapper,body.ipx-chrome .page-header .ammenu-nav-sections,body.ipx-chrome div[id^="___ratingbadge_"]{display:none!important}
body.ipx-chrome a.ipatio-skip-link{display:block}

/* ---- header ---- */
.ipx-hdr{position:relative;font-family:var(--ipx-font);font-weight:500;color:var(--ipx-ink);background:#fff}

/* utility bar (>= 1024) */
.ipx-util{background:var(--ipx-util-bg);color:var(--ipx-util-fg);font-size:13px;line-height:1}
.ipx-util__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:34px}
.ipx-util__promises{display:flex;align-items:center;gap:20px;min-width:0;white-space:nowrap;overflow:hidden}
.ipx-util__p{display:flex;align-items:center;gap:7px}
.ipx-util__p .ipx-i{width:16px;height:16px;color:var(--ipx-util-ico)}
.ipx-util__promo{display:inline-flex;align-items:center;gap:7px;height:34px;color:var(--ipx-util-fg)!important;font:500 13px/1 var(--ipx-font)}
.ipx-util__promo:hover{text-decoration:underline!important;text-underline-offset:3px}
.ipx-util__end{display:flex;align-items:center;gap:2px;white-space:nowrap;flex:none}
.ipx-util__link{display:inline-flex!important;align-items:center;gap:6px;height:34px;padding:0 8px!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;color:var(--ipx-util-fg)!important;font:500 13px/1 var(--ipx-font)!important;cursor:pointer;text-decoration:none!important}
.ipx-util__link:hover{text-decoration:underline!important;text-underline-offset:3px}
.ipx-util__link .ipx-i{width:15px;height:15px;color:var(--ipx-util-ico)}
.ipx-util__sep{width:1px;height:14px;background:rgba(255,255,255,.28);margin:0 6px}
.ipx-util__acct{display:inline-flex}
.ipx-util .ipx-lang{display:flex;align-items:center}
.ipx-util .ipx-lang li+li::before{content:"·";color:rgba(255,255,255,.45);padding:0 1px}
.ipx-util .ipx-lang :is(a,span){display:inline-flex;align-items:center;height:34px;padding:0 5px;color:var(--ipx-util-mute)!important;font:500 13px/1 var(--ipx-font)}
.ipx-util .ipx-lang a:hover{color:#fff!important;text-decoration:underline;text-underline-offset:3px}
.ipx-lang__cur{font-family:var(--ipx-font-bold)!important;font-weight:700!important;color:#fff!important;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
html.ipx-in .ipx-hdr .-out,html:not(.ipx-in) .ipx-hdr .-in,html.ipx-in :is(.ipx-drawer,.ipx-compact) .-out,html:not(.ipx-in) :is(.ipx-drawer,.ipx-compact) .-in{display:none!important}

/* logo row */
.ipx-row{background:#fff}
.ipx-row__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo search acts";align-items:center;column-gap:40px;height:80px}
.ipx-burger{display:none!important}
.ipx-logo{grid-area:logo;display:block;line-height:0}
.ipx-logo img{display:block;height:56px;width:auto;max-width:none;aspect-ratio:405/200}
.ipx-search{grid-area:search;justify-self:center;width:100%;max-width:620px;min-width:0;position:static}
.ipx-acts{grid-area:acts;display:flex;align-items:center;gap:2px}
.ipx-act{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:68px;height:58px;padding:0 8px;border-radius:var(--ipx-r-md);color:var(--ipx-ink)!important;text-decoration:none!important}
.ipx-act:hover,.ipx-act.-cart:hover{background:var(--ipx-stone)}
.ipx-act>.ipx-i{width:24px;height:24px;stroke-width:1.7}
.ipx-act__label{font:500 12.5px/1 var(--ipx-font);white-space:nowrap;pointer-events:none}
.ipx-badge{position:absolute;top:3px;right:12px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--ipx-orange);color:var(--ipx-ink);font:700 11px/19px var(--ipx-font-bold);text-align:center;pointer-events:none}
.ipx-badge[hidden]{display:none}
/* minicart: Amasty / JetTheme's link covers the whole button; its sprite icon is replaced by ours; Knockout counter kept */
body.ipx-chrome .ipx-act.-cart .minicart-wrapper{position:static!important;margin:0!important;padding:0!important;width:auto!important;height:auto!important;float:none!important;display:block!important}
body.ipx-chrome .ipx-act.-cart a.showcart{position:absolute!important;inset:0;z-index:1;display:block!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border-radius:var(--ipx-r-md);background:none!important}
body.ipx-chrome .ipx-act.-cart a.showcart>svg,body.ipx-chrome .ipx-act.-cart a.showcart::before{display:none!important}
body.ipx-chrome .ipx-act.-cart .counter.qty{position:absolute!important;top:3px!important;right:12px!important;left:auto!important;min-width:19px;height:19px;padding:0 5px!important;margin:0!important;border-radius:999px!important;background:var(--ipx-orange)!important;color:var(--ipx-ink)!important;font:700 11px/19px var(--ipx-font-bold)!important;text-align:center}
body.ipx-chrome .ipx-act.-cart .counter.qty.empty,body.ipx-chrome .ipx-act.-cart .counter-label{display:none!important}
body.ipx-chrome .ipx-act.-cart .counter-number{color:inherit!important;font:inherit!important}

/* search pill: Amasty xsearch, restyled in place (its Knockout popup still works) */
body.ipx-chrome .ipx-search .amsearch-wrapper-block{display:block!important;position:relative!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important;order:0!important;transform:none!important}
body.ipx-chrome .ipx-search :is(.amsearch-form-block,.amsearch-input-wrapper){width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;position:relative}
body.ipx-chrome .ipx-search .amsearch-full_width-title{display:none!important}
body.ipx-chrome .ipx-search .amsearch-input{box-sizing:border-box!important;height:48px!important;width:100%!important;margin:0!important;padding:0 60px 3px 22px!important;border:1.5px solid var(--ipx-line-2)!important;border-radius:999px!important;background:var(--ipx-stone)!important;color:var(--ipx-ink)!important;font:500 15px/1 var(--ipx-font)!important;letter-spacing:0!important;box-shadow:none!important;-webkit-appearance:none;appearance:none}
body.ipx-chrome .ipx-search .amsearch-input::placeholder{color:var(--ipx-grey)!important;opacity:1}
body.ipx-chrome .ipx-search .amsearch-input:focus{background:#fff!important;border-color:var(--ipx-ink)!important;box-shadow:0 0 0 3px var(--ipx-orange-ring)!important;outline:none!important}
body.ipx-chrome .ipx-search .amsearch-button.-loupe{position:absolute!important;right:4px!important;top:4px!important;left:auto!important;bottom:auto!important;width:40px!important;height:40px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:999px!important;opacity:1!important;display:block!important;visibility:visible!important;transform:none!important;font-size:0!important;color:transparent!important;cursor:pointer;
  background:var(--ipx-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1b19' stroke-width='2.3' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center/19px 19px no-repeat!important}
body.ipx-chrome .ipx-search .amsearch-button.-loupe:hover{background-color:var(--ipx-orange-hover)!important}
body.ipx-chrome .ipx-search .amsearch-button.-loupe>*,body.ipx-chrome .ipx-search .amsearch-button.-loupe::before,body.ipx-chrome .ipx-search .amsearch-button.-loupe::after{display:none!important}
body.ipx-chrome .ipx-search .amsearch-button.-close{right:50px!important}
/* Amasty's "full width" search type (config): its header rules (-opened: fixed 134 px height, hidden minicart, grey
   absolute wrapper) are switched off; the result popup opens as a panel under the logo row, the width of the content */
body.ipx-chrome .page-header.amsearch-full-width.-opened{height:auto!important}
body.ipx-chrome .ipx-search :is(.amsearch-wrapper-block,.amsearch-form-block){position:static!important;height:auto!important;min-width:0!important;padding:0!important;background:none!important;z-index:auto!important;display:block!important}
body.ipx-chrome .ipx-search .amsearch-button.-full-close{display:none!important}
.ipx-row__in{position:relative}
body.ipx-chrome .ipx-search .amsearch-result-section{position:absolute!important;top:100%!important;left:var(--ipx-gutter)!important;right:var(--ipx-gutter)!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;z-index:80!important;border:1px solid var(--ipx-line)!important;border-radius:0 0 var(--ipx-r-md) var(--ipx-r-md)!important;box-shadow:0 28px 48px -16px rgba(29,27,25,.24)!important}

/* product-type nav */
.ipx-nav{position:relative;z-index:60;background:#fff;border-top:1px solid var(--ipx-line);border-bottom:1px solid var(--ipx-line)}
.ipx-nav__list{display:flex;align-items:stretch;justify-content:space-between;gap:2px}
.ipx-nav__item{display:flex}
.ipx-nav__link{position:relative;display:flex!important;align-items:center;gap:6px;height:50px;padding:0 9px!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;cursor:pointer;
  font:700 15px/1 var(--ipx-font-bold)!important;color:var(--ipx-ink)!important;text-decoration:none!important;white-space:nowrap}
.ipx-nav__item:first-child .ipx-nav__link{padding-left:0!important}
.ipx-nav__item.-more .ipx-nav__link{padding-right:0!important}
.ipx-nav__link::after{content:"";position:absolute;left:9px;right:9px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--ipx-green-deep);transform:scaleX(0);transition:transform .2s var(--ipx-ease)}
.ipx-nav__item:first-child .ipx-nav__link::after{left:0}
.ipx-nav__item.-more .ipx-nav__link::after{right:0}
.ipx-nav__link:hover::after,.ipx-nav__item.-open>.ipx-nav__link::after,.ipx-nav__link[aria-current]::after{transform:scaleX(1)}
.ipx-nav__link.-deals{color:var(--ipx-green-deep)!important}
.ipx-nav__link .ipx-i{width:16px;height:16px}
.ipx-nav__item.-more>.ipx-nav__link .ipx-i{transition:transform .2s}
.ipx-nav__item.-more.-open>.ipx-nav__link .ipx-i{transform:rotate(180deg)}

/* mega panel (content: generated file, inserted by js/chrome.js on the first hover / focus / tap) */
.ipx-mega{display:none;position:absolute;left:0;right:0;top:100%;margin-top:1px;z-index:70;background:#fff;border-bottom:1px solid var(--ipx-line);box-shadow:0 28px 48px -16px rgba(29,27,25,.24);max-height:min(72vh,calc(100vh - 180px));overflow-y:auto;font-family:var(--ipx-font)}
.ipx-nav__item.-open>.ipx-mega.-ready{display:block}
.ipx-mega__in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1.35fr) minmax(0,.95fr) 264px;gap:8px 36px;padding-top:22px;padding-bottom:30px}
.ipx-mega__in.-g1{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 264px}
.ipx-mega__in.-links{grid-template-columns:minmax(0,2fr) minmax(0,1fr) 264px}
.ipx-mega__in.-links .ipx-mega__col:first-of-type .ipx-mega__links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.ipx-mega__head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--ipx-line)}
.ipx-mega__title{font:700 22px/1.2 var(--ipx-font-bold);color:var(--ipx-ink)}
.ipx-mega__all,.ipx-mega__promo-l{display:inline-flex;align-items:center;gap:6px;font:700 15px/1.2 var(--ipx-font-bold);color:var(--ipx-link)!important}
.ipx-mega__all:hover,.ipx-mega__promo:hover .ipx-mega__promo-l{text-decoration:underline!important;text-underline-offset:3px}
.ipx-mega__h{margin:0 0 12px!important;font:700 14px/1.2 var(--ipx-font-bold);color:var(--ipx-grey)}
.ipx-mega__chips{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ipx-mchip{display:flex;align-items:center;gap:9px;min-height:56px;padding:6px 10px 6px 6px;border:1px solid var(--ipx-line);border-radius:var(--ipx-r-md);background:#fff;color:var(--ipx-ink)!important;font:700 14px/1.2 var(--ipx-font-bold);transition:border-color .15s,box-shadow .15s,transform .15s var(--ipx-ease)}
.ipx-mchip>:is(svg,img,.ipatio-chip__swatch){width:50px!important;height:40px!important;flex:none;background:var(--ipx-stone);border-radius:8px;object-fit:contain}
.ipx-mchip>img{padding:6px;background:#fff;border:1px solid var(--ipx-line)}
.ipx-mchip>span:last-child{min-width:0;text-wrap:balance}
.ipx-mchip:hover{border-color:var(--ipx-ink);box-shadow:var(--ipx-sh-2);transform:translateY(-1px)}
.ipx-mchip .ipatio-chip__unit{color:var(--ipx-grey)!important;opacity:1!important;font:500 13px/1 var(--ipx-font)}
.ipx-mega__links{display:grid!important;gap:2px}
.ipx-mega__links a,.ipx-more__list a{display:flex;align-items:center;gap:12px;min-height:50px;padding:4px 8px 4px 4px;border-radius:10px;color:var(--ipx-ink)!important;font:700 14.5px/1.25 var(--ipx-font-bold)}
.ipx-mega__links a:hover,.ipx-more__list a:hover{background:var(--ipx-stone)}
.ipx-art{width:52px;height:42px;flex:none;display:grid;place-items:center;background:var(--ipx-stone);border-radius:8px;color:var(--ipx-green-deep)}
.ipx-art>svg:not(.ipx-i){width:52px;height:42px}
.ipx-art>.ipx-i{width:24px;height:24px;stroke-width:1.7}
.ipx-mega__promo{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 12px 16px;background:var(--ipx-cream);border:1px solid var(--ipx-cream-line);border-radius:var(--ipx-r-lg);color:var(--ipx-ink)!important}
.ipx-mega__promo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;margin:0 0 4px}
.ipx-mega__eyebrow{padding:0 4px;font:700 13px/1.2 var(--ipx-font-bold);color:var(--ipx-green-deep)}
.ipx-mega__promo-t{padding:0 4px;font:700 16px/1.3 var(--ipx-font-bold);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ipx-mega__promo-l{padding:0 4px;font-size:14px}
:is(.ipx-mega__all,.ipx-mega__promo-l) .ipx-i{width:17px;height:17px}
@media (max-width:1279px){
  .ipx-mega__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr);gap:8px 28px}
  .ipx-mega__in.-g1{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .ipx-mega__in.-links{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .ipx-mega__promo{display:none}
  .ipx-mchip{font-size:13.5px}
}

/* "More" */
.ipx-nav__item.-more{position:relative}
.ipx-more{display:none;position:absolute;right:0;top:100%;margin-top:1px;z-index:70;width:320px;max-height:min(72vh,calc(100vh - 180px));overflow-y:auto;padding:10px;background:#fff;border:1px solid var(--ipx-line);border-radius:0 0 var(--ipx-r-md) var(--ipx-r-md);box-shadow:var(--ipx-sh-3);font-family:var(--ipx-font)}
.ipx-nav__item.-more.-open>.ipx-more{display:block}
.ipx-more__list{display:grid!important;gap:2px}
.ipx-more__list li[data-fold]{display:none}

/* folds: a nav item leaves the bar for "More" (and a utility promise is hidden) at and below its data-fold width
   (etc/chrome/nav.json "fold" / "promise_fold"; 9999 = never in the bar) */
.ipx-util__p[data-fold="9999"]{display:none}
@media (max-width:1535px){:is(.ipx-nav__item,.ipx-util__p)[data-fold="1535"]{display:none}.ipx-more__list li[data-fold="1535"]{display:block}}
@media (max-width:1439px){:is(.ipx-nav__item,.ipx-util__p)[data-fold="1439"]{display:none}.ipx-more__list li[data-fold="1439"]{display:block}}
@media (max-width:1365px){:is(.ipx-nav__item,.ipx-util__p)[data-fold="1365"]{display:none}.ipx-more__list li[data-fold="1365"]{display:block}}
@media (max-width:1279px){:is(.ipx-nav__item,.ipx-util__p)[data-fold="1279"]{display:none}.ipx-more__list li[data-fold="1279"]{display:block}}
@media (max-width:1199px){:is(.ipx-nav__item,.ipx-util__p)[data-fold="1199"]{display:none}.ipx-more__list li[data-fold="1199"]{display:block}}
@media (max-width:1099px){:is(.ipx-nav__item,.ipx-util__p)[data-fold="1099"]{display:none}.ipx-more__list li[data-fold="1099"]{display:block}}

/* ---- phone / tablet header (< 1024 px): strip + row (menu, logo, account, cart) + the search field ---- */
.ipx-mstrip{display:none}
@media (max-width:1023px){
  .ipx-util,.ipx-nav,.ipx-act.-wish,.ipx-act__label{display:none!important}
  .ipx-mstrip{display:flex;align-items:center;justify-content:center;gap:7px;height:26px;margin:0;padding:0 12px;background:var(--ipx-util-bg);color:#fff;font:500 12px/1 var(--ipx-font);white-space:nowrap}
  .ipx-mstrip>span,.ipx-mstrip__link>span{overflow:hidden;text-overflow:ellipsis}
  /* the free-shipping promise links to the shipping policy; its tap target is 44 px tall without moving anything: an
     invisible extension 18 px into the row below, under the row's own controls (the row container lets taps through
     its empty areas, its children take theirs) */
  .ipx-mstrip__link{position:relative;display:flex;align-items:center;gap:7px;min-width:0;max-width:100%;height:26px;color:#fff!important;font:inherit;text-decoration:none!important}
  .ipx-mstrip__link::after{content:"";position:absolute;left:-12px;right:-12px;top:0;height:44px}
  .ipx-row__in{pointer-events:none}
  .ipx-row__in>*{pointer-events:auto}
  .ipx-mstrip .ipx-i{width:15px;height:15px;flex:none;color:var(--ipx-util-ico)}
  .ipx-row__in{grid-template-columns:44px auto minmax(0,1fr) auto;grid-template-areas:"burger logo . acts" "search search search search";grid-template-rows:56px 52px;column-gap:4px;height:auto;padding-left:6px!important;padding-right:6px!important}
  .ipx-burger{grid-area:burger;display:grid!important;place-items:center;width:44px;height:44px;margin:0!important;padding:0!important;border:0!important;border-radius:var(--ipx-r-md)!important;background:transparent!important;color:var(--ipx-ink)!important;cursor:pointer}
  .ipx-burger .ipx-i{width:26px;height:26px;stroke-width:2}
  .ipx-logo{margin-left:2px}
  .ipx-logo img{height:38px}
  .ipx-acts{gap:0}
  .ipx-act{min-width:48px;height:48px;padding:0 4px;gap:0}
  .ipx-act>.ipx-i{width:25px;height:25px}
  .ipx-badge,body.ipx-chrome .ipx-act.-cart .counter.qty{top:1px!important;right:1px!important}
  .ipx-search{grid-area:search;align-self:start;max-width:none;padding:0 6px}
  body.ipx-chrome .ipx-search .amsearch-input{height:44px!important;padding:0 52px 3px 16px!important;font-size:16px!important}
  body.ipx-chrome .ipx-search .amsearch-button.-loupe{width:36px!important;height:36px!important;background-size:18px 18px!important}
  body.ipx-chrome .ipx-search .amsearch-result-section{left:0!important;right:0!important;border-radius:0!important;border-width:1px 0!important}
  .ipx-row{border-bottom:1px solid var(--ipx-line)}
}

/* ---- drawer (< 1024 px) ---- */
.ipx-scrim{position:fixed;inset:0;z-index:10000;background:rgba(29,27,25,.5);opacity:0;visibility:hidden;transition:opacity .2s}
.ipx-drawer{position:fixed;top:0;bottom:0;left:0;z-index:10001;width:min(90vw,384px);overflow-y:auto;overscroll-behavior:contain;background:#fff;box-shadow:var(--ipx-sh-3);transform:translateX(-102%);visibility:hidden;transition:transform .25s var(--ipx-ease),visibility 0s .25s;font:500 15px/1.4 var(--ipx-font);color:var(--ipx-ink)}
html.ipx-drawer-open .ipx-drawer{transform:none;visibility:visible;transition:transform .25s var(--ipx-ease)}
html.ipx-drawer-open .ipx-scrim{opacity:1;visibility:visible}
html.ipx-drawer-open body{overflow:hidden}
html.ipx-drawer-open :is(.ipcs-launcher,.ipcs-root,.ipatio-back-to-top,.amtheme-backtotop-wrap,.ipx-compact){visibility:hidden!important}
.ipx-drawer__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 6px 0 16px;background:#fff;border-bottom:1px solid var(--ipx-line)}
.ipx-drawer__logo{display:block;height:38px;width:auto;aspect-ratio:405/200}
.ipx-drawer__close{display:grid!important;place-items:center;width:44px;height:44px;margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--ipx-ink)!important;cursor:pointer}
.ipx-drawer__close .ipx-i{width:24px;height:24px}
.ipx-drawer__h{padding:18px 16px 8px!important;font:700 13.5px/1.2 var(--ipx-font-bold);color:var(--ipx-grey)}
.ipx-dtiles{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 12px!important}
.ipx-dtiles a{display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:100%;min-height:96px;padding:8px 10px 10px;border:1px solid var(--ipx-line);border-radius:var(--ipx-r-md);background:#fff;color:var(--ipx-ink)!important;font:700 14.5px/1.2 var(--ipx-font-bold)}
.ipx-dtiles .ipx-art{width:100%;height:52px}
.ipx-dtiles .ipx-art>svg:not(.ipx-i){width:66px;height:52px}
.ipx-dtiles .-deals a{border-color:#cfe0a8;background:var(--ipx-green-tint);color:var(--ipx-green-deep)!important}
.ipx-dtiles .-deals .ipx-art{background:#fff}
.ipx-dpills{display:flex!important;flex-wrap:wrap;gap:8px;padding:0 16px!important}
.ipx-dpills a{display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--ipx-line-2);border-radius:999px;background:#fff;color:var(--ipx-ink)!important;font:500 14px/1.2 var(--ipx-font)}
.ipx-drawer__links{margin:14px 0 0!important;padding:4px 8px!important;border-top:1px solid var(--ipx-line)}
.ipx-drawer__links li+li{border-top:1px solid var(--ipx-line)}
.ipx-drawer__links :is(a,button){display:flex!important;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 8px!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;color:var(--ipx-ink)!important;font:500 15.5px/1.2 var(--ipx-font)!important;text-align:left;cursor:pointer}
.ipx-drawer__links .ipx-i{width:21px;height:21px;color:var(--ipx-green-deep)}
.ipx-drawer__links .ipx-i.-end{margin-left:auto;width:18px;height:18px;color:var(--ipx-grey)}
.ipx-dcount{display:inline-block;min-width:20px;margin-left:8px;padding:0 6px;border-radius:999px;background:var(--ipx-stone);font:700 12px/20px var(--ipx-font-bold);text-align:center}
.ipx-dcount[hidden]{display:none}
.ipx-drawer__acct{display:flex;gap:10px;padding:14px 16px 4px;border-top:1px solid var(--ipx-line)}
.ipx-dbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1.5px solid var(--ipx-ink);border-radius:var(--ipx-r-sm);background:#fff;color:var(--ipx-ink)!important;font:700 15px/1.1 var(--ipx-font-bold);white-space:nowrap}
.ipx-dbtn:hover{background:var(--ipx-stone)}
.ipx-dbtn.-tertiary{border-color:transparent;background:transparent;color:var(--ipx-link)!important;text-decoration:underline!important;text-underline-offset:3px}
.ipx-drawer__help{margin:14px 16px 0!important;padding:14px;background:var(--ipx-cream);border:1px solid var(--ipx-cream-line);border-radius:var(--ipx-r-md);font-size:14px;line-height:1.5}
.ipx-drawer__help strong{display:block;margin-bottom:2px;font:700 15px/1.3 var(--ipx-font-bold)}
.ipx-drawer__help a{color:var(--ipx-link)!important;font-family:var(--ipx-font-bold);font-weight:700}
.ipx-lang.-drawer{display:flex!important;justify-content:center;align-items:center;padding:12px 16px 28px!important}
.ipx-lang.-drawer li+li::before{content:"·";color:var(--ipx-line-2)}
.ipx-lang.-drawer :is(a,span){display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ipx-grey)!important;font:500 15px/1 var(--ipx-font)}
.ipx-lang.-drawer .ipx-lang__cur{color:var(--ipx-ink)!important;text-decoration:none}

/* ---- compact header: fixed, slides in on scroll-up (transform only), never in the layout (CLS 0) ---- */
.ipx-compact{position:fixed;top:0;left:0;right:0;z-index:900;background:#fff;border-bottom:1px solid var(--ipx-line);box-shadow:var(--ipx-sh-2);transform:translateY(-110%);visibility:hidden;transition:transform .22s var(--ipx-ease),visibility 0s .22s;font-family:var(--ipx-font)}
html.ipx-pinned .ipx-compact{transform:none;visibility:visible;transition:transform .22s var(--ipx-ease)}
body.-amsticky-cart-active .ipx-compact,body:has(.amsticky-cart-block.-amsticky-cart-active) .ipx-compact,body._has-modal .ipx-compact,body:has(.minicart-wrapper.active) .ipx-compact,html.ipx-drawer-open .ipx-compact{transform:translateY(-110%)!important;visibility:hidden!important}
.ipx-compact__in{display:flex;align-items:center;gap:24px;height:64px}
.ipx-compact .ipx-burger{display:none!important}
.ipx-compact__logo{flex:none;line-height:0}
.ipx-compact__logo img{display:block;height:40px;width:auto;aspect-ratio:405/200}
.ipx-compact__search{position:relative;flex:1;max-width:560px;margin:0 auto}
.ipx-compact__search input{box-sizing:border-box;width:100%;height:44px!important;margin:0;padding:0 52px 0 18px!important;border:1.5px solid var(--ipx-line-2)!important;border-radius:999px!important;background:var(--ipx-stone)!important;color:var(--ipx-ink);font:500 15px/1 var(--ipx-font)!important;box-shadow:none!important;-webkit-appearance:none;appearance:none}
.ipx-compact__search input::placeholder{color:var(--ipx-grey);opacity:1}
.ipx-compact__search input:focus{background:#fff!important;border-color:var(--ipx-ink)!important;box-shadow:0 0 0 3px var(--ipx-orange-ring)!important;outline:none}
.ipx-compact__search button{position:absolute;right:4px;top:4px;display:grid!important;place-items:center;width:36px;height:36px;margin:0!important;padding:0!important;border:0!important;border-radius:999px!important;background:var(--ipx-orange)!important;color:var(--ipx-ink)!important;cursor:pointer}
.ipx-compact__search button .ipx-i{width:18px;height:18px;stroke-width:2.3}
.ipx-compact__acts{display:flex;align-items:center;gap:2px;flex:none}
.ipx-compact .ipx-act{min-width:48px;height:48px;padding:0 4px}
@media (max-width:1023px){
  .ipx-compact__in{gap:4px;height:58px;padding-left:6px!important;padding-right:6px!important}
  .ipx-compact .ipx-burger{display:grid!important;place-items:center;width:44px;height:44px;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:var(--ipx-ink)!important}
  .ipx-compact .ipx-burger .ipx-i{width:26px;height:26px;stroke-width:2}
  .ipx-compact__logo img{height:30px}
  .ipx-compact .ipx-act:is(.-acct,.-wish){display:none!important}
  .ipx-compact__search input{font-size:16px!important;padding-left:14px!important}
}
@media (max-width:359px){.ipx-compact__logo{display:none}}
/* landscape phones (GAP1-01): no promise strip, so the page keeps more of a 390 px tall screen */
@media (max-width:1023px) and (max-height:500px) and (orientation:landscape){.ipx-mstrip{display:none!important}}

/* the chat launcher left, back-to-top right (owner); both under drawers, modals and the open minicart */
@media print{.ipx-compact,.ipx-drawer,.ipx-scrim,.ipx-util,.ipx-mstrip,.ipx-nav,.ipx-burger{display:none!important}}
@media (prefers-reduced-motion:reduce){:is(.ipx-hdr,.ipx-drawer,.ipx-compact,.ipx-scrim) *,.ipx-drawer,.ipx-compact,.ipx-scrim{transition:none!important;animation:none!important}}
/* HOVER-001 (owner 2026-10-14: shoppers could not tell what the pointer was on). The search text sits 1.5 px low
   with line-height 1 (this font's glyphs ride low), hence the 3 px bottom padding above. */
@media (hover:hover){
  body.ipx-chrome .ipx-search .amsearch-input:not(:focus):hover{border-color:var(--ipx-ink-2)!important;background:#fff!important}
  body.ipx-chrome .ipx-search .amsearch-button.-loupe{pointer-events:auto!important}
  body.ipx-chrome .ambanner-slider-dots li:not(.slick-active) button:hover{background:var(--ipx-ink-2)!important;transform:scaleY(1.25)}
  body.ipx-chrome .amasty-shipbar-car button:hover,body.ipx-chrome .amshipbar-terms-btn:hover,body.ipx-chrome .amshipbar-close-btn:hover{background:rgba(255,255,255,.18)!important}
  body.ipx-chrome .ipes a:not(.ipes__btn):hover,body.ipx-chrome .ipes__link:hover{color:var(--ipx-ink)!important;text-decoration-thickness:2px!important}
}

/* HOVER-001 listing + product page (kept here, a live sheet: plp.css / pdp.css changes would stale their phone critical CSS) */
@media (hover:hover){
  html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .filter-options-content .item>a:hover,
  html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .filter-options-content a.am-swatch-link:hover{background:#ede8df!important;box-shadow:-8px 0 0 #ede8df,8px 0 0 #ede8df;border-radius:2px;text-decoration:none!important}
  html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .filter-options-content .item>a:hover .count,
  html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .filter-options-content a.am-swatch-link:hover .count{color:var(--ipx-ink)!important}
  html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .filter-options-content .items.-am-multiselect .item>a:hover::before{border-width:2px;border-color:var(--ipx-ink)}
  html body.ipx-plp .sidebar-main .filter-options-title:hover,
  html body.ipx-plp .sidebar-main .filter-options-title:hover::after{color:var(--ipx-link)!important}
  html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .am-show-more:hover,
  html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .am-show-more:hover *{text-decoration:underline!important;text-underline-offset:3px}
  html body.ipx-plp .ipx-applied a.ipx-clear:hover{color:var(--ipx-ink)!important;text-decoration-thickness:2px!important}
  html body.ipx-plp .ipx-pc .action.towishlist:hover{border-color:var(--ipx-ink)!important;background:var(--ipx-stone)!important}
  html body.ipx-plp .ipatio-clamp__more:hover{color:var(--ipx-ink)!important;text-decoration-thickness:2px!important}
  html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .filter-options-content input[type=text]:hover{border-color:var(--ipx-ink)!important}
}
html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .filter-options-content .item>a:focus-visible,
html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .filter-options-content a.am-swatch-link:focus-visible{background:#ede8df!important;box-shadow:-8px 0 0 #ede8df,8px 0 0 #ede8df;outline:2px solid var(--ipx-ink)!important;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  html body.ipx-plp :is(.sidebar-main,.amasty-catalog-topnav) .filter-options-content :is(.item>a,a.am-swatch-link){transition:background-color .12s,box-shadow .12s}
}
@media (hover:hover){
  html body.ipx-pdp .amtheme-qty-box :is(.amtheme-minus,.amtheme-plus):hover{background:var(--ipx-stone);color:var(--ipx-ink)}
  html body.ipx-pdp .amtheme-qty-box:hover{border-color:var(--ipx-ink)!important}
  html body.ipx-pdp :is(.ipxp-deliv__a,.ipxp-trust a,.ipxp-help a,.ipxp-mfr a,.ipxp-freight a):hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
  html body.ipx-pdp .ipxp-sec__h:hover{color:var(--ipx-link)}
  html body.ipx-pdp .ipxp-sec__h:hover .ipx-i{stroke:var(--ipx-link)}
  html body.ipx-pdp a.am-filelink:hover{color:var(--ipx-link)!important;text-decoration:underline;text-underline-offset:3px}
  html body.ipx-pdp .am-item .am-title:hover{color:var(--ipx-link)!important;cursor:pointer}
  html body.ipx-pdp .product-item .product-item-link:hover{color:var(--ipx-link)!important;text-decoration:underline;text-underline-offset:3px}
  html body.ipx-pdp .product-item .action.tocart:hover,html body.ipx-pdp .ipxp-pairs .action.tocart:hover{background:var(--ipx-orange-hover)!important}
  html body.ipx-pdp .product-item .action.towishlist:hover{border-color:var(--ipx-ink)!important;background:var(--ipx-stone)!important}
}
@media (hover:hover){
  html body.ipx-pdp .ipxp-gal__zoom:hover{background:var(--ipx-stone);box-shadow:0 0 0 1.5px var(--ipx-ink)}
  html body.ipx-pdp .ipxp-secnav__links a:hover,html body.ipx-pdp .ipxp-secnav__morebtn:hover{color:var(--ipx-link);box-shadow:inset 0 -2px 0 var(--ipx-line-2)}
}
/* CONFIRM-001: Magento's confirm dialogs (remove an item, clear the cart …) above the mini cart and in the site style.
   The Phase 2 header carries z-index 997, and the mini cart drawer lives inside it, so the drawer and its white page
   overlay covered the dialogs (z 900 +): the "remove this item?" question showed faded under the drawer. While a modal
   is open (core sets body._has-modal) the header drops its stacking context: the drawer (z 110) falls under the modal
   overlay. */
body.ipx-chrome._has-modal .page-header{z-index:auto!important}
body.ipx-chrome .modal-popup.confirm .modal-inner-wrap{max-width:440px;border-radius:var(--ipx-r-lg);box-shadow:0 18px 48px rgba(29,27,25,.22)}
body.ipx-chrome .modal-popup.confirm .modal-content{padding-top:28px;font:500 16px/1.5 var(--ipx-font);color:var(--ipx-ink)}
body.ipx-chrome .modal-popup.confirm .modal-footer{display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;gap:10px}
body.ipx-chrome .modal-popup.confirm .modal-footer button{min-height:46px;min-width:110px;margin:0!important;padding:0 22px;border-radius:var(--ipx-r-pill)!important;font:700 15px/1 var(--ipx-font-bold)!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important}
body.ipx-chrome .modal-popup.confirm .modal-footer .action-primary{background:var(--ipx-orange)!important;border:0!important;color:var(--ipx-ink)!important}
body.ipx-chrome .modal-popup.confirm .modal-footer .action-primary:hover{background:var(--ipx-orange-hover)!important}
body.ipx-chrome .modal-popup.confirm .modal-footer .action-secondary{background:#fff!important;border:1.5px solid var(--ipx-ink)!important;color:var(--ipx-ink)!important}
body.ipx-chrome .modal-popup.confirm .modal-footer .action-secondary:hover{background:var(--ipx-stone)!important}
body:has(.modal-popup.confirm._show) .modals-overlay{background:rgba(29,27,25,.42)!important}
body.ipx-chrome .modal-popup.confirm .modal-header{min-height:0;padding:14px 14px 0!important}
body.ipx-chrome .modal-popup.confirm .modal-content{padding:14px 56px 6px 28px!important;text-align:left}
body.ipx-chrome .modal-popup.confirm .modal-footer{padding:18px 28px 26px!important}
@media (max-width:767px){body.ipx-chrome .modal-popup.confirm .modal-inner-wrap{padding:0!important;width:calc(100% - 32px)!important;margin-left:16px!important;margin-right:16px!important}body.ipx-chrome .modal-popup.confirm .modal-header{padding:0!important}body.ipx-chrome .modal-popup.confirm .modal-content{padding:26px 22px 4px!important}body.ipx-chrome .modal-popup.confirm .modal-footer{padding:16px 22px 22px!important}body.ipx-chrome .modal-popup.confirm .modal-footer button{flex:1 1 100%!important;width:100%!important;max-width:none!important}}
body.ipx-chrome .modal-popup.confirm .modal-footer button:focus-visible{outline:2px solid var(--ipx-ink);outline-offset:2px}

/* DIALOG-003 (owner, 2026-10-15): one remove dialog on cart, mini cart and checkout: Cancel and OK side by side at the
   same size (OK was full width), a short fade in and out (Magento slid the box up off screen on Cancel, so it jumped
   to the top before disappearing) */
body.ipx-chrome .modal-popup.confirm .modal-footer{display:flex!important;align-items:stretch!important;flex-wrap:nowrap!important;justify-content:flex-end!important;gap:10px!important}
body.ipx-chrome .modal-popup.confirm .modal-footer button{flex:0 0 auto!important;width:auto!important;min-width:120px!important;min-height:46px!important}
@media (min-width:768px){body.ipx-chrome .modal-popup.confirm .modal-inner-wrap{transform:none!important;transition:none!important}}
body.ipx-chrome .modal-popup.confirm{transition:opacity .16s ease,visibility 0s linear .16s!important}
body.ipx-chrome .modal-popup.confirm._show{transition:opacity .16s ease!important}
@media (prefers-reduced-motion:reduce){body.ipx-chrome .modal-popup.confirm,body.ipx-chrome .modal-popup.confirm._show{transition:none!important}}
@media (max-width:767px){
  body.ipx-chrome .modal-popup.confirm .modal-footer{flex-direction:row-reverse!important}
  body.ipx-chrome .modal-popup.confirm .modal-footer button{flex:1 1 0!important;min-width:0!important}
}
/* DIALOG-004 (owner, 2026-10-15): the dialog stays where it is while it fades out. JetTheme centres the phone dialog
   (top 50% + translateY(-50%)) only while it is shown, so it dropped to the top the moment Magento began closing it;
   and Magento closes on the first transitionend inside the dialog, so the Cancel button's own colour transition
   ended the fade early (the flash). No tap highlight (the blue flash on iPhone). */
body.ipx-chrome .modal-popup.confirm .modal-footer button,body.ipx-chrome .modal-popup.confirm .action-close{transition:none!important;-webkit-tap-highlight-color:transparent}
body.ipx-chrome .modal-popup.confirm .modal-footer .action-secondary:active{background:var(--ipx-stone)!important;color:var(--ipx-ink)!important}
body.ipx-chrome .modal-popup.confirm .modal-footer .action-primary:active{background:var(--ipx-orange-hover)!important;color:var(--ipx-ink)!important}
@media (max-width:767px){
  body.ipx-chrome .modal-popup.confirm .modal-inner-wrap,body.ipx-chrome .modal-popup.confirm._show .modal-inner-wrap{top:50%!important;transform:translateY(-50%)!important;transition:none!important}
}