/** Shopify CDN: Minification failed Line 961:133 Unexpected ";" **/ /* ========================================================================== HELM · masthead stylesheet (all tokens from the Helm Masthead section) ========================================================================== */ .hm-shell-w{max-width:var(--hm-shell-w,1840px);margin-inline:auto;padding-inline:var(--hm-pad,40px);width:100%;} .hm-a11y{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .helm-masthead *{box-sizing:border-box;} .hm-tray *{box-sizing:border-box;} :where(.helm-masthead, .hm-tray) a{text-decoration:none;color:inherit;} :where(.helm-masthead, .hm-tray) button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;} :where(.helm-masthead,.hm-tray) :focus-visible{outline:2px solid var(--hm-spark,#e2483d);outline-offset:2px;border-radius:3px;} .hm-glyph{display:inline-block;flex:0 0 auto;vertical-align:middle;} .hm-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;flex:0 0 auto;color:inherit;} .hm-ico:hover{background:rgba(0,0,0,.06);} /* ---- announcement -------------------------------------------------------- */ .hm-ann{background:var(--hm-ann-fill,#15110e);color:var(--hm-ann-ink,#fff);} .hm-ann__wrap{display:flex;align-items:center;justify-content:center;gap:16px;min-height:40px;padding-block:8px;} .hm-ann__step{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;opacity:.85;} .hm-ann__step:hover{opacity:1;} .hm-ann__deck{text-align:center;} .hm-ann__slide{display:none;} .hm-ann__slide.is-on{display:block;animation:hm-fade var(--hm-motion,240ms) ease;} .hm-ann__slide a:hover{text-decoration:underline;} @keyframes hm-fade{from{opacity:0}to{opacity:1}} /* ---- shell --------------------------------------------------------------- */ .hm-shell{position:relative;z-index:60;background:var(--hm-surface,#fff);color:var(--hm-ink,#15110e);border-bottom:1px solid var(--hm-line,#ececec);box-shadow:var(--hm-shadow,none);font-family:var(--hm-font,system-ui,sans-serif);} /* Sticky is now handled in JS via position:fixed + body padding (helm.js setupSticky). CSS-only position:sticky kept failing in Shopify themes due to ancestor overflow/transform issues. */ /* sticky-safety: ensure no ancestor overflow blocks the shell */ .helm-masthead,.shopify-section.helm-masthead,#shopify-section-helm-masthead{overflow:visible;} /* identical horizontal math for bar + nav so the logo lines up with menu links */ .hm-bar__grid.hm-shell-w,.hm-nav__set.hm-shell-w{padding-inline:var(--hm-pad,40px);max-width:var(--hm-shell-w,1840px);margin-inline:auto;} .hm-shell[data-condensed="true"]{background:var(--hm-stick-surface,#fff);color:var(--hm-stick-ink,#15110e);box-shadow:var(--hm-stick-shadow,0 6px 22px rgba(0,0,0,.08));} /* ---- bar row (grid) ------------------------------------------------------ */ .hm-bar__grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;min-height:var(--hm-bar-h,92px);padding-block:var(--hm-bar-py,14px);transition:min-height var(--hm-motion,240ms);} .hm-shell[data-condensed="true"] .hm-bar__grid{min-height:var(--hm-stick-h,70px);} .hm-bar__lead{display:flex;align-items:center;justify-self:start;min-width:0;} .hm-bar__burger{width:0;opacity:0;pointer-events:none;overflow:hidden;flex:0 0 auto;transition:width var(--hm-motion,240ms),opacity var(--hm-motion,240ms),margin var(--hm-motion,240ms);} .hm-shell[data-condensed="true"] .hm-bar__burger{width:44px;opacity:1;pointer-events:auto;margin-right:10px;} .hm-bar__brand{display:flex;align-items:center;} .hm-bar__logo{display:block;width:var(--hm-logo-w,150px);height:auto;} .hm-bar__wordmark{font-size:26px;font-weight:800;letter-spacing:-.02em;} .hm-bar__find{justify-self:start;width:100%;max-width:var(--hm-find-w,640px);min-width:0;} .hm-bar__utils{display:flex;align-items:center;gap:var(--hm-util-gap,26px);justify-self:end;} .hm-util{display:inline-flex;align-items:center;gap:9px;font-size:15px;line-height:1.1;white-space:nowrap;color:inherit;} .hm-util .hm-glyph{width:var(--hm-ico,22px);height:var(--hm-ico,22px);} .hm-util:hover{color:var(--hm-spark,#e2483d);} .hm-util__cap{font-weight:500;} .hm-util--cart{position:relative;} .hm-util__pip{position:absolute;top:-7px;right:-9px;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:11px;font-weight:700;line-height:1;} .hm-util__pip.is-zero{display:none;} /* ---- finder -------------------------------------------------------------- */ .hm-find{position:relative;} .hm-find__bar{display:flex;align-items:center;height:var(--hm-find-h,52px);background:var(--hm-find-fill,#f3f2f0);border:1px solid var(--hm-find-edge,#e6e4e1);border-radius:var(--hm-find-round,30px);overflow:hidden;transition:border-color .15s;} .hm-find__bar:focus-within{border-color:var(--hm-find-focus,#15110e);} .hm-find__scope{position:relative;display:flex;align-items:center;height:100%;flex:0 0 auto;background:var(--hm-find-scope-fill,#f3f2f0);border-right:1px solid var(--hm-find-edge,#e6e4e1);} .hm-find__scope-pick{appearance:none;-webkit-appearance:none;border:0;background:transparent;height:100%;font-size:14px;color:var(--hm-find-ink,#33302c);cursor:pointer;} .hm-find__scope-caret{position:absolute;pointer-events:none;opacity:.6;display:inline-flex;} .hm-find__field{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;padding:0 12px 0 18px;font-size:15px;color:var(--hm-find-ink,#33302c);} .hm-find__field::placeholder{color:#9a958e;} .hm-find__field:focus{outline:none;} .hm-find__go{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:52px;height:100%;color:var(--hm-find-ink,#444);} .hm-find__go:hover{color:var(--hm-spark,#e2483d);} .hm-find__drop{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:70;background:#fff;padding:14px;max-height:70vh;} .hm-find__drop[hidden]{display:none;} .hm-find__busy{display:flex;align-items:center;gap:8px;padding:10px;} .hm-find__busy[hidden]{display:none !important;} .hm-find__ring{width:18px;height:18px;border:2px solid #ddd;border-top-color:var(--hm-spark,#e2483d);border-radius:50%;animation:hm-spin .7s linear infinite;} @keyframes hm-spin{to{transform:rotate(360deg)}} .hm-find__group{margin-bottom:14px;} .hm-find__group:last-child{margin-bottom:0;} .hm-find__hit{border-radius:10px;} .hm-find__hit:hover,.hm-find__hit.is-cued{background:#f5f4f2;} .hm-find__hit--flat{font-size:14px;font-weight:500;} .hm-find__hit-pic{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:0 0 auto;} .hm-find__hit-main{display:flex;flex-direction:column;gap:2px;min-width:0;} .hm-find__hit-name{font-weight:500;line-height:1.3;} .hm-find__all{margin-top:6px;} .hm-find__all:hover{text-decoration:underline;} /* ---- nav row ------------------------------------------------------------- */ .hm-nav{background:var(--hm-nav-fill,#fff);border-top:1px solid var(--hm-nav-line,#ececec);overflow:visible;max-height:240px;opacity:1;transition:max-height .34s cubic-bezier(.22,1,.36,1),opacity .25s ease,border-color .25s ease;} .hm-shell[data-condensed="true"] .hm-nav{max-height:0;opacity:0;overflow:hidden;pointer-events:none;border-color:transparent;} .hm-shell[data-condensed="true"][data-nav-open="true"] .hm-nav{max-height:240px;opacity:1;overflow:visible;pointer-events:auto;border-color:var(--hm-nav-line,#ececec);} .hm-nav__set{position:relative;display:flex;align-items:center;gap:var(--hm-nav-gap,34px);justify-content:var(--hm-nav-justify,flex-start);list-style:none;margin:0;padding-block:var(--hm-nav-py,10px);flex-wrap:wrap;} .hm-nav__node{position:static;} .hm-nav__node[data-hm-kind="plain"]{position:relative;} .hm-nav__link{display:inline-flex;align-items:center;gap:6px;position:relative;padding:8px 0;font-size:var(--hm-nav-size,16px);font-weight:var(--hm-nav-weight,700);color:var(--hm-nav-ink,#15110e);text-transform:var(--hm-nav-case,none);white-space:nowrap;flex-shrink:0;} .hm-nav__link>span{white-space:nowrap;} .hm-nav__link .hm-glyph{transition:transform .2s;} .hm-nav__node:hover>.hm-nav__link::after,.hm-nav__link.is-here::after{width:100%;} .hm-nav__node:hover>.hm-nav__link{color:var(--hm-nav-ink-hot,#e2483d);} .hm-nav__node:hover>.hm-nav__link .hm-glyph{transform:rotate(180deg);} .hm-nav__link.is-sale{color:var(--hm-deal,#e2483d);} /* sparkles wrap the text span, never the link's underline ::after */ .hm-nav__link.is-sale>span::before,.hm-nav__link.is-sale>span::after{content:"✦";font-size:.7em;margin:0 5px;display:inline;white-space:nowrap;} /* ---- flyout shell -------------------------------------------------------- */ .hm-fly-wrap{position:absolute;top:100%;left:0;right:0;z-index:var(--hm-fly-z,55);opacity:0;visibility:hidden;transition:opacity var(--hm-fly-dur,240ms) var(--hm-fly-ease,ease),transform var(--hm-fly-dur,240ms) var(--hm-fly-ease,ease),visibility var(--hm-fly-dur,240ms);padding-top:10px;} .hm-shell[data-anim="slide"] .hm-fly-wrap,.hm-shell[data-anim="fade-slide"] .hm-fly-wrap{transform:translateY(10px);} .hm-nav__node[data-hm-kind="m_plain"]{position:relative;} .hm-nav__node[data-hm-kind="m_plain"] .hm-fly-wrap{left:0;right:auto;width:max-content;} .hm-nav__node[data-hm-kind="m_plain"]:has(.align-right) .hm-fly-wrap{left:auto;right:0;} .hm-nav__node[data-hm-kind="m_plain"]:has(.align-center) .hm-fly-wrap{left:50%;right:auto;margin-left:calc(var(--pw,260px) / -2);} .hm-nav__node.has-fly:hover>.hm-fly-wrap,.hm-nav__node.has-fly.is-open>.hm-fly-wrap{opacity:1;visibility:visible;transform:none;} .hm-fly{background:var(--hm-fly-fill,#fff);border:1px solid var(--hm-fly-edge,#ececec);border-radius:var(--hm-fly-round,14px);box-shadow:var(--hm-fly-shadow,0 18px 48px rgba(0,0,0,.12));padding:var(--hm-fly-pad,32px);max-width:var(--hm-fly-maxw,1840px);margin-inline:auto;} /* page scrim (global overlay behind an open flyout) */ .hm-scrim{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,var(--hm-scrim-op,.35));backdrop-filter:blur(var(--hm-scrim-blur,0));-webkit-backdrop-filter:blur(var(--hm-scrim-blur,0));opacity:0;visibility:hidden;transition:opacity var(--hm-fly-dur,240ms);pointer-events:none;} .hm-shell[data-overlay="true"].is-flyopen ~ .hm-scrim{opacity:1;visibility:visible;} /* 5 · plain dropdown */ .hm-plain{list-style:none;margin:0;padding:0;column-count:var(--pcols,1);column-gap:18px;} /* 1 · category rail + image cards */ .hm-fly--rail{gap:var(--hm-fly-gap,40px);} .hm-rail{list-style:none;margin:0;padding:var(--rpad,8px);border-right:1px solid var(--rdiv,#ececec);background:var(--rfill,#fff);display:flex;flex-direction:column;gap:2px;} .hm-rail__tab{display:flex;justify-content:space-between;width:100%;text-align:left;padding:11px 14px;border-radius:var(--rrad,10px);font-size:var(--rsize,15px);font-weight:var(--rweight,600);} .hm-rail__tab .hm-glyph{opacity:.4;transition:transform .2s;} .hm-rail__tab:hover{background:#f5f4f2;color:var(--rhov,#15110e);} .hm-rail__tab.is-on{background:#f5f4f2;color:var(--ract,#e2483d);} .hm-rail__tab.is-on .hm-glyph{transform:translateX(3px);opacity:1;} .hm-rail__stage{min-width:0;} .hm-rail__panel[hidden]{display:none;} .hm-cardset{display:grid;grid-template-columns:repeat(var(--cd,4),1fr);gap:var(--cgap,20px);} .hm-card{display:flex;flex-direction:column;gap:10px;} .hm-card__shot{position:relative;display:block;overflow:hidden;border-radius:var(--crad,12px);aspect-ratio:var(--cratio,4/3);background:#f3f2f0;} .hm-card__img{width:100%;height:100%;object-fit:var(--cfit,cover);transition:transform .4s;} .hm-card__veil{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,var(--coverlay,0));} .hov-zoom .hm-card:hover .hm-card__img{transform:scale(1.06);} .hov-lift .hm-card{transition:transform .25s;} .hov-lift .hm-card:hover{transform:translateY(-4px);} .hm-card__ph{width:100%;height:100%;} /* 2 · promo banner + columns */ .hm-fly--banner{align-items:stretch;} .hm-fly--banner.no-banner{grid-template-columns:1fr;} .hm-promo{position:relative;display:block;overflow:hidden;border-radius:var(--brad,12px);} .hm-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .hm-promo__veil{position:absolute;inset:0;} .hm-promo__body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:var(--balign,flex-start);justify-content:var(--bvalign,flex-end);gap:10px;padding:26px;height:100%;color:#fff;} .hm-promo__cta{margin-top:6px;display:inline-block;} /* shared link columns */ .hm-stack{display:grid;grid-template-columns:repeat(var(--stack-cols,4),minmax(0,1fr));gap:var(--hm-fly-gap,40px);} .col-rules .hm-stack__col{border-left:1px solid var(--hm-fly-edge,#ececec);padding-left:var(--hm-fly-gap,40px);} .col-rules .hm-stack__col:first-child{border-left:0;padding-left:0;} .hm-stack__head{display:block;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;} .hm-stack__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--hm-fly-rowgap,10px);} .hm-stack__link{transition:color .15s,padding .15s;} .hm-stack__link:hover{padding-left:4px;} /* 3 & 4 · columns + products */ .hm-fly--products{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,55%);gap:var(--hm-fly-gap,40px);min-width:0;} .hm-shelf{min-width:0;border-left:1px solid var(--hm-fly-edge,#ececec);padding-left:var(--hm-fly-gap,40px);display:flex;flex-direction:column;gap:14px;} .hm-shelf__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:12px;} .hm-shelf__title{font-family:var(--hm-font-megah,inherit);font-size:var(--hm-megah-size,14px);font-weight:var(--hm-megah-weight,700);color:var(--hm-megah-color,#15110e);text-transform:uppercase;letter-spacing:.04em;margin:0;flex:1;min-width:0;} .hm-shelf__nav{display:flex;gap:8px;flex-shrink:0;} .hm-shelf__btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--hm-fly-edge,#ddd);border-radius:50%;background:#fff;color:var(--hm-ink,#15110e);transition:background .2s,border-color .2s,color .2s;flex-shrink:0;} .hm-shelf__btn:hover:not(:disabled){background:var(--hm-spark,#e2483d);color:#fff;border-color:var(--hm-spark,#e2483d);} .hm-shelf__btn:disabled{opacity:.35;cursor:not-allowed;} /* GRID mode — minmax(0,1fr) is critical to prevent overflow */ .hm-shelf__rail{display:grid;grid-template-columns:repeat(var(--pd,3),minmax(0,1fr));gap:var(--ggap,18px);min-width:0;width:100%;} /* SLIDER mode — horizontal scroll-snap, items shrink with min-width:0 */ .hm-shelf__rail.is-slider{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:var(--ggap,18px);scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;min-width:0;width:100%;} .hm-shelf__rail.is-slider::-webkit-scrollbar{display:none;} .hm-shelf__rail.is-slider>*{flex:0 0 calc((100% - (var(--pd,3) - 1) * var(--ggap,18px)) / var(--pd,3));scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;} .hm-shelf.is-grid .hm-shelf__rail{gap:var(--ggap,18px);} .hm-shelf.is-grid .hm-tile__shot{border-radius:var(--grad,12px);aspect-ratio:var(--gratio,1/1);} /* product tile */ .hm-tile{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;} .hm-tile__shot{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--hm-card-round,12px);background:#f3f2f0;} .hm-tile__shot img{width:100%;height:100%;object-fit:cover;transition:transform .4s;} .hm-tile:hover .hm-tile__shot img{transform:scale(1.05);} .hm-tile__flag{position:absolute;top:8px;left:8px;z-index:2;font-size:11px;font-weight:700;padding:3px 7px;border-radius:6px;} .hm-tile__flag--fresh{background:#1f8a52;} .hm-tile__vendor{font-size:11px;text-transform:uppercase;letter-spacing:.04em;} .hm-tile__name{line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .hm-tile__cost{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:14px;font-weight:700;margin:0;min-width:0;} .hm-tile__cost-was{color:#aaa;font-weight:400;} /* .hm-tile__grab base styles moved to the variable-driven rule lower in this file */ .hm-tile__grab[disabled]{opacity:.45;cursor:not-allowed;} .hm-tile__grab.is-busy{color:transparent;} .hm-tile__grab.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:hm-spin .7s linear infinite;} /* ---- overlays (tray) ----------------------------------------------------- */ html.hm-locked{overflow:hidden;} .hm-tray{position:fixed;inset:0;z-index:2000;visibility:hidden;pointer-events:none;} .hm-tray.is-live{visibility:visible;pointer-events:auto;} .hm-tray__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity var(--hm-motion,240ms);} .hm-tray.is-live .hm-tray__scrim{opacity:1;} .hm-tray__sheet{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;background:#fff;box-shadow:0 0 40px rgba(0,0,0,.2);transition:transform var(--hm-motion,240ms);} .hm-tray__sheet--left{left:0;width:min(var(--hm-sheet-w,390px),92vw);transform:translateX(-100%);} .hm-tray__sheet--right{right:0;width:min(var(--hm-cart-w,480px),94vw);transform:translateX(100%);background:var(--hm-cart-fill,#fff);color:var(--hm-cart-ink,#15110e);border-top-left-radius:var(--hm-cart-round,0);border-bottom-left-radius:var(--hm-cart-round,0);overflow:hidden;} .hm-tray.is-live .hm-tray__sheet--left,.hm-tray.is-live .hm-tray__sheet--right{transform:none;} /* ---- tree ---------------------------------------------------------------- */ .hm-tray--tree{--hm-tree-pad:18px;--hm-tree-title:14px;--hm-tree-item:15px;--hm-tree-sub:14px;} .hm-tree__top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #ececec;} .hm-tree__brand{display:flex;align-items:center;} .hm-tree__brand img{max-width:var(--hm-logo-w-sm,120px);height:auto;display:block;} .hm-tree__wordmark{font-weight:800;font-size:20px;} .hm-tree__top .hm-ico{margin-left:auto;} .hm-tree__find{padding:12px 16px;border-bottom:1px solid #ececec;} .hm-tree__find .hm-find__bar{height:46px;} .hm-panel{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 24px;transform:translateX(100%) translateZ(0);backface-visibility:hidden;transition:transform var(--hm-motion,260ms) cubic-bezier(.22,1,.36,1);background:var(--hm-surface,#fff);contain:layout paint style;} .hm-panel.is-front{transform:translateX(0) translateZ(0);} .hm-panel.is-rear{transform:translateX(-28%) translateZ(0);} .hm-panel[hidden]{display:none;} .hm-panel__list{list-style:none;margin:0;padding:0;} .hm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;padding:15px 18px;font-size:var(--hm-tree-item,15px);font-weight:600;border-bottom:1px solid #f1f0ee;color:inherit;} .hm-row .hm-glyph{opacity:.4;} .hm-row.is-sale{color:var(--hm-deal,#e2483d);} .hm-panel__back{display:flex;align-items:center;gap:8px;width:100%;padding:14px 18px;font-size:var(--hm-tree-item,15px);font-weight:700;border-bottom:1px solid #ececec;color:var(--hm-spark,#e2483d);} .hm-tree__foot{display:flex;flex-direction:column;gap:2px;padding:16px;border-top:1px solid #ececec;margin-top:8px;} /* Single divider above the footer: the footer keeps its border-top, so the last menu row must not also draw one (was a double line). */ .hm-panel[data-hm-panel="root"] > .hm-panel__list > li:last-child > .hm-row{border-bottom:0;} .hm-tree__foot-link{display:flex;align-items:center;gap:10px;padding:11px 4px;font-size:var(--hm-tree-item,15px);font-weight:500;} .hm-tree__cards{padding:14px 18px;} .hm-tree__promo{position:relative;display:block;margin:14px 18px 0;border-radius:12px;overflow:hidden;min-height:140px;} .hm-tree__promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .hm-tree__promo-veil{position:absolute;inset:0;background:rgba(0,0,0,var(--veil,.2));} .hm-tree__promo-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;padding:18px;color:#fff;height:100%;justify-content:flex-end;} .hm-tree__promo-title{font-size:18px;font-weight:800;} .hm-tree__promo-cta{align-self:flex-start;margin-top:4px;background:#fff;color:#15110e;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:700;} /* ---- cart ---------------------------------------------------------------- */ .hm-cart{height:100%;} .hm-cart__top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #ececec;} .hm-cart__title{font-weight:700;margin:0;} .hm-cart__body{flex:1 1 auto;overflow-y:auto;padding:16px 20px;} .hm-cart__meter{margin-bottom:16px;} .hm-cart__meter-text{font-size:14px;margin:0 0 8px;} .hm-cart__meter-track{display:block;height:8px;border-radius:999px;overflow:hidden;} .hm-cart__meter-fill{display:block;height:100%;border-radius:999px;transition:width .4s;} .hm-cart__lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;} .hm-line{display:grid;grid-template-columns:72px 1fr;gap:14px;} .hm-line__shot{display:block;border-radius:10px;overflow:hidden;background:#f3f2f0;aspect-ratio:1/1;} .hm-line__shot img{width:100%;height:100%;object-fit:cover;} .hm-line__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;} .hm-line__name{font-weight:600;line-height:1.3;} .hm-line__drop{color:#aaa;flex:0 0 auto;} .hm-line__drop:hover{color:var(--hm-deal,#e2483d);} .hm-line__opt{font-size:13px;color:#888;margin:3px 0 0;} .hm-line__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;} .hm-line__sum{font-weight:700;} .hm-step{display:inline-flex;align-items:center;border:1px solid #ddd;border-radius:999px;overflow:hidden;} .hm-step__btn{width:30px;height:32px;display:inline-flex;align-items:center;justify-content:center;} .hm-step__btn:hover{background:#f2f1ef;} .hm-step__num{width:38px;height:32px;border:0;text-align:center;font-size:14px;-moz-appearance:textfield;} .hm-step__num::-webkit-outer-spin-button,.hm-step__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} .hm-cart__rec{margin-top:22px;border-top:1px solid #ececec;padding-top:16px;} .hm-cart__rec-title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px;} .hm-cart__rec-rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;} .hm-cart__rec-rail::-webkit-scrollbar{display:none;} .hm-rec{display:flex;flex-direction:column;gap:6px;} .hm-rec__shot{display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#f3f2f0;} .hm-rec__shot img{width:100%;height:100%;object-fit:cover;} .hm-rec__name{font-weight:500;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .hm-rec__cost{font-weight:700;} .hm-rec__grab{margin-top:2px;border-radius:999px;padding:5px 0;font-weight:600;text-align:center;} .hm-rec__grab:hover:not([disabled]){background:#15110e;color:#fff;} .hm-rec__grab[disabled]{opacity:.45;cursor:not-allowed;} .hm-cart__note{margin-top:20px;border-top:1px solid #ececec;} .hm-cart__note summary{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;font-size:14px;font-weight:600;cursor:pointer;list-style:none;} .hm-cart__note summary::-webkit-details-marker{display:none;} .hm-cart__note summary .hm-glyph{transition:transform .2s;opacity:.5;} .hm-cart__note[open] summary .hm-glyph{transform:rotate(90deg);} .hm-cart__note-field{width:100%;min-height:70px;border:1px solid #ddd;border-radius:10px;padding:10px;font-size:14px;resize:vertical;} .hm-cart__void{text-align:center;padding:60px 20px;} .hm-cart__void p{font-size:16px;color:#666;margin:0 0 16px;} .hm-cart__void-link{display:inline-block;border-bottom:2px solid var(--hm-cart-cta,#15110e);font-weight:600;padding-bottom:2px;} .hm-cart__foot{flex:0 0 auto;padding:18px 20px;border-top:1px solid #ececec;} .hm-cart__tally{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700;margin-bottom:4px;} .hm-cart__fine{font-size:12px;color:#999;margin:0 0 14px;} .hm-btn{flex:1 1 0;height:50px;} .hm-btn--ghost{border:1px solid #ccc;} .hm-btn--ghost:hover{border-color:#15110e;} .hm-btn--fill:hover{opacity:.88;} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1280px){ .hm-bar__grid{gap:18px;} .hm-util__cap{font-size:14px;} .hm-fly--products{grid-template-columns:1fr minmax(260px,360px);} .hm-cardset{grid-template-columns:repeat(var(--ct,3),minmax(0,1fr));} .hm-shelf__rail:not(.is-slider){grid-template-columns:repeat(var(--pt,2),minmax(0,1fr));} .hm-shelf__rail.is-slider>*{flex-basis:calc((100% - (var(--pt,2) - 1) * var(--ggap,18px)) / var(--pt,2));} } @media (max-width:989px){ .hm-bar__burger{width:44px !important;opacity:1 !important;pointer-events:auto !important;margin-right:10px;} .hm-nav{display:none;} /* Two explicit rows: row 1 = lead + utils, row 2 = search */ .hm-bar__grid{grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:12px;column-gap:14px;min-height:0;padding-block:12px;} .hm-bar__lead{grid-column:1;grid-row:1;} .hm-bar__utils{grid-column:2;grid-row:1;justify-self:end;} .hm-bar__find{grid-column:1 / -1;grid-row:2;max-width:none;} .hm-util__cap{display:none;} .hm-find__bar{height:46px;} /* On mobile + condensed: hide search (icons + logo stay sticky, search scrolls away) */ .hm-shell[data-condensed="true"] .hm-bar__find{max-height:0;opacity:0;overflow:hidden;margin:0;padding:0;pointer-events:none;transition:max-height .25s,opacity .2s;} .hm-shell[data-condensed="true"] .hm-bar__grid{row-gap:0;padding-block:8px;} /* Mobile mega — products & cards honor their --pm / --cm */ .hm-cardset{grid-template-columns:repeat(var(--cm,2),minmax(0,1fr));} .hm-shelf__rail:not(.is-slider){grid-template-columns:repeat(var(--pm,1),minmax(0,1fr));} .hm-shelf__rail.is-slider>*{flex-basis:calc((100% - (var(--pm,1) - 1) * var(--ggap,14px)) / var(--pm,1));} /* Mega layouts collapse to single column on mobile */ .hm-fly--rail{grid-template-columns:1fr;} .hm-fly--banner{grid-template-columns:1fr;} .hm-fly--products{grid-template-columns:1fr;} .hm-shelf{border-left:0;padding-left:0;border-top:1px solid var(--hm-fly-edge,#ececec);padding-top:18px;} } @media (max-width:767px){ .hm-shell-w{padding-inline:18px;} .hm-find__scope-pick{max-width:120px;font-size:13px;} } @media (max-width:575px){ .hm-ico{width:40px;height:40px;} .hm-bar__logo{width:var(--hm-logo-w-sm,120px);} .hm-bar__wordmark{font-size:22px;} .hm-bar__utils{gap:12px;} .hm-find__scope{display:none;} } @media (max-width:380px){ .hm-bar__utils{gap:8px;} .hm-ico{width:36px;height:36px;} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } /* ============================================================ HELM v3 — typography + LTR animation + mini cart + tree accordion appended overrides; specificity matches base, so these win ============================================================ */ /* shell + body font */ .hm-shell,.hm-tray{font-family:var(--hm-font,Poppins,system-ui,sans-serif);} /* nav links — explicit family + responsive sizes */ .hm-nav__link{font-family:var(--hm-font-nav,inherit);} @media (max-width:989px){ .hm-nav__link{font-size:var(--hm-nav-size-m,15px);} } /* mega headings (column heads) — use mega-head font */ .hm-stack__head{font-family:var(--hm-font-megah,inherit);font-size:var(--col-head-size,14px);font-weight:var(--col-head-weight,700);color:var(--col-head-color,var(--hm-megah-color,#15110e));} @media (max-width:989px){ .hm-stack__head{font-size:var(--col-head-size-m,13px);} } /* mega links (column children) — use submenu font */ .hm-stack__link{font-family:var(--hm-font-sub,inherit);font-size:var(--colsize,15px);color:var(--col-link-color,#555);font-weight:var(--hm-sub-weight,400);} .hm-stack__link:hover{color:var(--col-link-hover,var(--hm-spark,#e2483d));} @media (max-width:989px){ .hm-stack__link{font-size:var(--colsize-m,14px);} } /* dropdown plain links use submenu family */ .hm-stack__link,.hm-row,.hm-rail__tab{font-family:var(--hm-font-sub,inherit);} /* card titles — typography role on captions in m_rail */ .hm-card__cap{font-family:var(--hm-font-product,inherit);font-size:var(--capsize,15px);font-weight:var(--capweight,600);color:var(--capcolor,#15110e);text-align:var(--capalign,center);transition:color .15s;} .hm-card:hover .hm-card__cap{color:var(--caphover,var(--hm-spark,#e2483d));} @media (max-width:989px){ .hm-card__cap{font-size:var(--capsize-m,14px);} } /* m_rail cards — also expose row-cap via grid-auto-rows when needed */ .hm-rail__panel .hm-cardset{grid-template-rows:repeat(var(--rows-d,2),auto);} @media (max-width:989px){ .hm-rail__panel .hm-cardset{grid-template-rows:repeat(var(--rows-m,4),auto);} } /* banner — use new typography + colored CTA + overlay color */ .hm-promo{aspect-ratio:auto;width:var(--bw,300px);max-width:100%;min-height:var(--bh,320px);} .hm-promo__veil{background:rgba(0,0,0,var(--boverlay,.25));background-color:color-mix(in srgb, var(--boverlay-c,#000) calc(var(--boverlay,.25) * 100%), transparent);} .hm-promo__kicker{font-family:var(--hm-font-megah,inherit);font-size:var(--kicker-size,12px);font-weight:var(--kicker-weight,700);color:var(--kicker-color,#fff);text-transform:uppercase;letter-spacing:.08em;} .hm-promo__title{font-family:var(--hm-font-h,inherit);font-size:var(--title-size,24px);font-weight:var(--title-weight,800);color:var(--title-color,#fff);line-height:1.15;} .hm-promo__desc{font-family:var(--hm-font,inherit);font-size:var(--desc-size,14px);color:var(--desc-color,#fff);opacity:1;max-width:34ch;} .hm-promo__cta{font-family:var(--hm-font-btn,inherit);font-size:var(--btn-size,14px);font-weight:700;background:var(--btn-bg,#fff);color:var(--btn-text,#15110e);padding:10px 22px;border-radius:999px;position:relative;overflow:hidden;transition:color .25s;} .btn-solid .hm-promo__cta{border-radius:8px;} .btn-outline .hm-promo__cta{border-radius:8px;} .btn-pill .hm-promo__cta{border-radius:999px;} @media (max-width:989px){ .hm-promo{width:100%;min-height:var(--bh-m,220px);} } /* LTR (left-to-right wipe) animation for buttons */ .btn-lr{position:relative;overflow:hidden;isolation:isolate;} .btn-lr::before{content:"";position:absolute;inset:0;background:var(--btn-bg-hov,var(--hm-addcart-bg-hov,#15110e));transform:translateX(-101%);transition:transform .35s cubic-bezier(.22,1,.36,1);z-index:-1;} .btn-lr:hover::before{transform:translateX(0);} .btn-lr:hover{color:var(--btn-text-hov,var(--hm-addcart-text-hov,#fff));} .hm-promo.btn-lr:hover .hm-promo__cta{color:var(--btn-text-hov,#fff);background:transparent;} /* product tile typography */ .hm-tile__vendor{color:var(--hm-prod-vendor-color,#999);} .hm-tile__name{font-family:var(--hm-font-product,inherit);font-size:var(--hm-prod-title-size,14px);font-weight:var(--hm-prod-title-weight,600);color:var(--hm-prod-title-color,#15110e);} .hm-tile__name:hover{color:var(--hm-prod-title-hover,var(--hm-spark,#e2483d));} .hm-tile__cost{font-family:var(--hm-font-product,inherit);color:var(--hm-prod-price-color,#15110e);} .hm-tile__cost-now.is-deal{color:var(--hm-prod-price-deal,var(--hm-deal,#e2483d));} @media (max-width:989px){ .hm-tile__name{font-size:var(--hm-prod-title-size-m,14px);} } /* add-to-cart button — full color control + LTR animation */ .hm-tile__grab{font-family:var(--hm-font-btn,inherit);font-size:var(--hm-btn-size,13px);font-weight:var(--hm-btn-weight,600);background:var(--hm-addcart-bg,#15110e);color:var(--hm-addcart-text,#fff);border:1px solid var(--hm-addcart-bg,#15110e);border-radius:999px;padding:9px 16px;transition:background .25s,color .25s;} .hm-tile__grab .hm-tile__grab-text{position:relative;z-index:1;} .hm-tile__grab:hover:not([disabled]){background:var(--hm-addcart-bg-hov,var(--hm-spark,#e2483d));color:var(--hm-addcart-text-hov,#fff);border-color:var(--hm-addcart-bg-hov,var(--hm-spark,#e2483d));} /* product badges */ .hm-tile__flag{background:var(--hm-badge-bg,var(--hm-deal,#e2483d));color:var(--hm-badge-text,#fff);} .hm-tile__flag--deal{background:var(--hm-badge-bg,var(--hm-deal,#e2483d));} /* cart count pip — use util_pip_* */ .hm-util__pip{background:var(--hm-pip-bg,var(--hm-spark,#e2483d));color:var(--hm-pip-text,#fff);} /* ===== mini cart restyle (consumes :root vars) ===== */ .hm-cart{font-family:var(--hm-font,inherit);} #hm-cart .hm-tray__sheet{background:var(--hm-mc-bg,#fff);color:var(--hm-mc-ink,#15110e);width:var(--hm-mc-w,420px);max-width:100%;border-radius:var(--hm-cart-round,0) 0 0 var(--hm-cart-round,0);} .hm-cart__top{border-bottom-color:var(--hm-mc-edge,#ececec);} .hm-cart__title{font-family:var(--hm-mc-font-head,var(--hm-font-h,inherit));font-size:var(--hm-mc-head-size,20px);color:var(--hm-mc-head-color,#15110e);} .hm-cart__meter-text{color:var(--hm-mc-ship-text,#1f8a52);font-family:var(--hm-font,inherit);} .hm-cart__meter-track{background:var(--hm-mc-ship-track,#e8efe9);} .hm-cart__meter-fill{background:var(--hm-mc-ship-bar,#1f8a52);} .hm-line__name{font-family:var(--hm-mc-font-item,inherit);font-size:var(--hm-mc-item-size,14px);color:var(--hm-mc-item-color,#15110e);} .hm-line__sum{font-family:var(--hm-mc-font-item,inherit);font-size:var(--hm-mc-price-size,14px);color:var(--hm-mc-price-color,#15110e);} .hm-cart__rec-title{font-family:var(--hm-mc-font-head,inherit);color:var(--hm-mc-recs-color,#15110e);} .hm-cart__rec-rail{scroll-snap-type:x mandatory;} .hm-rec{flex:0 0 calc(50% - 6px);scroll-snap-align:start;} .hm-rec__name{font-family:var(--hm-mc-font-item,inherit);font-size:calc(var(--hm-mc-item-size,14px) - 1px);color:var(--hm-mc-item-color,#15110e);} .hm-rec__cost{font-family:var(--hm-mc-font-item,inherit);font-size:calc(var(--hm-mc-price-size,14px) - 1px);color:var(--hm-mc-price-color,#15110e);} .hm-rec__grab{font-family:var(--hm-mc-font-btn,inherit);font-size:calc(var(--hm-mc-btn-size,14px) - 2px);background:var(--hm-addcart-bg,#15110e);color:var(--hm-addcart-text,#fff);border:1px solid var(--hm-addcart-bg,#15110e);} .hm-rec__grab .hm-rec__grab-text{position:relative;z-index:1;} .hm-cart__foot{border-top-color:var(--hm-mc-edge,#ececec);background:var(--hm-mc-bg,#fff);} .hm-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--hm-mc-font-btn,inherit);font-size:var(--hm-mc-btn-size,14px);font-weight:600;padding:14px 18px;border-radius:999px;text-align:center;position:relative;overflow:hidden;isolation:isolate;transition:color .25s,background .25s;} .hm-btn--ghost{background:var(--hm-mc-view-bg,#f3f2f0);color:var(--hm-mc-view-text,#15110e);} .hm-btn--ghost.btn-lr::before{background:var(--hm-mc-view-bg-hov,#15110e);} .hm-btn--ghost:hover{color:var(--hm-mc-view-text-hov,#fff);} .hm-btn--fill{background:var(--hm-mc-checkout-bg,#15110e);color:var(--hm-mc-checkout-text,#fff);} .hm-btn--fill.btn-lr::before{background:var(--hm-mc-checkout-bg-hov,var(--hm-spark,#e2483d));} .hm-btn--fill:hover{color:var(--hm-mc-checkout-text-hov,#fff);} .hm-cart__acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;} /* ===== mobile mega menu — accordion tree for m_rail ===== */ .hm-tree__rail{display:flex;flex-direction:column;gap:8px;margin-top:8px;} .hm-tree__acc{border-bottom:1px solid var(--hm-line,#ececec);} .hm-tree__acc[open]{padding-bottom:14px;} .hm-tree__acc-head{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;font-family:var(--hm-font-megah,inherit);font-size:var(--hm-tree-title,14px);font-weight:var(--hm-megah-weight,700);color:var(--hm-megah-color,#15110e);cursor:pointer;list-style:none;} .hm-tree__acc-head::-webkit-details-marker{display:none;} .hm-tree__acc-head .hm-glyph{transition:transform .2s;opacity:.55;} .hm-tree__acc[open] .hm-tree__acc-head .hm-glyph{transform:rotate(45deg);} .hm-tree__cards{display:grid;grid-template-columns:repeat(var(--cm,2),minmax(0,1fr));gap:12px;padding-top:4px;} .hm-tree__cards .hm-card{display:flex;flex-direction:column;gap:6px;} .hm-tree__cards .hm-card__shot{display:block;aspect-ratio:var(--cratio,1/1);overflow:hidden;border-radius:var(--crad,10px);background:#f3f2f0;} .hm-tree__cards .hm-card__shot img{width:100%;height:100%;object-fit:var(--cfit,cover);} .hm-tree__cards .hm-card__cap{font-size:13px;font-weight:500;text-align:left;color:#15110e;} /* mobile mega menu — make tree branch panels honor sticky behaviors */ /* condense behavior — mobile: keep search visible only above breakpoint OR when not condensed */ .hm-shell{transition:background var(--hm-motion,240ms),box-shadow var(--hm-motion,240ms);will-change:transform;} /* alignment safety: identical inline padding for bar grid + nav set */ .hm-bar__grid.hm-shell-w,.hm-nav__set.hm-shell-w{box-sizing:border-box;} /* ============================================================ HELM v3.1 — bug-fix patch ============================================================ */ /* m_plain dropdown — expands naturally, no internal scroll */ /* mobile tree — columns rendered inside branch panel */ .hm-tree__cols{margin-top:12px;} .hm-tree__cols .hm-stack{display:flex;flex-direction:column;gap:0;} .hm-tree__cols .hm-stack__col{padding:14px 0;border-top:1px solid var(--hm-line,#ececec);} .hm-tree__cols .hm-stack__col:first-child{border-top:0;} .hm-tree__cols .hm-stack__head{font-family:var(--hm-font-megah,inherit);font-size:var(--col-head-size-m,13px);font-weight:var(--col-head-weight,700);color:var(--col-head-color,#15110e);margin-bottom:8px;text-transform:none;letter-spacing:0;} .hm-tree__cols .hm-stack__list{gap:4px;} .hm-tree__cols .hm-stack__link{padding:8px 0;font-size:var(--colsize-m,14px);color:var(--col-link-color,#555);} /* drillable column groups (each col head + its panel list) — separate them like the old static stack columns did, so multi-column mega menus read clearly when flattened into the mobile drawer. */ .hm-tree__cols .hm-tree__group{padding:14px 0;border-top:1px solid var(--hm-line,#ececec);} .hm-tree__cols .hm-tree__group:first-child{border-top:0;padding-top:0;} .hm-tree__cols .hm-tree__group .hm-stack__head{display:block;margin-bottom:8px;} /* hamburger overlap safety — wrap lead w/ logo always above z */ .hm-bar__lead{z-index:5;} /* Mini-cart Checkout: extra specificity so background changes propagate */ #hm-cart .hm-btn--fill{background-color:var(--hm-mc-checkout-bg,#6f1b2a) !important;color:var(--hm-mc-checkout-text,#fff) !important;} #hm-cart .hm-btn--fill.btn-lr::before{background:var(--hm-mc-checkout-bg-hov,#f7ebdd) !important;} #hm-cart .hm-btn--fill:hover{color:var(--hm-mc-checkout-text-hov,#15110e) !important;} #hm-cart .hm-btn--ghost{background-color:var(--hm-mc-view-bg,#f3f2f0) !important;color:var(--hm-mc-view-text,#15110e) !important;} #hm-cart .hm-btn--ghost.btn-lr::before{background:var(--hm-mc-view-bg-hov,#15110e) !important;} #hm-cart .hm-btn--ghost:hover{color:var(--hm-mc-view-text-hov,#fff) !important;} /* Mobile-only safeties (slider/grid rules already in main breakpoints above) */ @media (max-width:989px){ .hm-fly--products{padding:18px;} } /* Auto-layout responsiveness — wrapper grows with content (capped at user's max) */ .hm-fly--banner{display:grid;grid-template-columns:var(--bw,300px) minmax(0,1fr);gap:var(--hm-fly-gap,40px);} .hm-fly--rail{display:grid;grid-template-columns:var(--rw,240px) minmax(0,1fr);} /* burgundy palette tokens (available for any block) */ :root{--hm-burgundy:#6f1b2a;--hm-cream:#f7ebdd;} /* ============================================================ HELM v3.2 — Phase 1 refactor Replaces (not patches): dropdown layout, banner button hover, sticky header, mr_tab/mr_card visual contract. ============================================================ */ /* ─── DROPDOWN (m_plain) — clean rebuild ───────────────────── Removes the max-height + overflow that caused scrollbars. Uses CSS Grid for wide-layout multi-column dropdowns. Typography pulled from section font_sub_* tokens. */ .hm-fly--plain{background:var(--plain-fill,#fff);border:1px solid var(--hm-fly-edge,#ececec);border-radius:var(--plain-radius,12px);box-shadow:var(--plain-shadow,var(--hm-fly-shadow,0 18px 48px rgba(0,0,0,.12)));padding:var(--plain-pad,14px);min-width:var(--plain-w,260px);width:max-content;max-width:min(96vw,720px);} .hm-fly--plain .hm-plain{display:grid;grid-template-columns:repeat(var(--plain-cols,1),minmax(180px,1fr));gap:var(--plain-gap,4px) 24px;list-style:none;margin:0;padding:0;} .hm-plain__item{break-inside:avoid;} .hm-plain__link{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 12px;border-radius:8px;font-family:var(--hm-font-sub,inherit);font-size:var(--plain-typo-size,var(--hm-sub-size,15px));font-weight:var(--hm-sub-weight,400);color:var(--hm-sub-ink,#555);transition:color .2s,background .2s;white-space:nowrap;} .hm-plain__link:hover{background:#f5f4f2;color:var(--plain-hover,var(--hm-sub-ink-hot,#e2483d));} /* IMPORTANT: do NOT apply font-weight here. Active state uses color only. */ .hm-plain__link.is-active{color:var(--plain-active,#15110e);font-weight:var(--hm-sub-weight,400);} .hm-plain__sub{display:none;position:absolute;top:0;left:100%;background:var(--plain-fill,#fff);border:1px solid var(--hm-fly-edge,#ececec);border-radius:10px;box-shadow:var(--plain-shadow,0 18px 48px rgba(0,0,0,.12));padding:8px;list-style:none;margin:0;} .hm-plain__item.has-kids:hover>.hm-plain__sub{display:block;} /* if dropdown would clip off the right edge of viewport, flip sub to left side */ .hm-fly--plain.align-right .hm-plain__sub{left:auto;right:100%;} /* ─── BANNER BUTTON (Shop Now) — hover refactor ─────────────── Move btn-lr animation from the banner-wide to the inner .hm-promo__cta pill so the wipe is on the button, not the card. */ /* Disable previous outer wipe behavior */ .hm-promo.btn-lr::before{content:none;} .hm-promo.btn-lr:hover{color:inherit;} /* New inner-pill animation */ .hm-promo .hm-promo__cta{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;transition:color .25s,background-color .25s,border-color .25s;} .hm-promo.btn-lr .hm-promo__cta::before{content:"";position:absolute;inset:0;background:var(--btn-bg-hov,var(--hm-addcart-bg-hov,#f7ebdd));transform:translateX(-101%);transition:transform .35s cubic-bezier(.22,1,.36,1);z-index:-1;} .hm-promo.btn-lr:hover .hm-promo__cta::before{transform:translateX(0);} .hm-promo:hover .hm-promo__cta{color:var(--btn-text-hov,#15110e);background:var(--btn-bg-hov,#f7ebdd);border-color:var(--btn-bg-hov,#f7ebdd);} .btn-pill .hm-promo__cta{background:var(--btn-bg,#fff);color:var(--btn-text,#15110e);} .btn-solid .hm-promo__cta{background:var(--btn-bg,var(--hm-spark,#e2483d));color:var(--btn-text,#fff);} .btn-outline .hm-promo__cta{background:transparent;border:2px solid var(--btn-text,#fff);color:var(--btn-text,#fff);} /* pointer events must remain — the whole banner is a link, but hover applies to cta */ .hm-promo{pointer-events:auto;} .hm-promo *{pointer-events:none;} .hm-promo .hm-promo__cta{pointer-events:auto;} /* Sticky header is implemented in JS (setupSticky in helm.js) — position:fixed + body padding. The Dawn ancestor overflow fixes are still useful for general safety. */ .shopify-section-group-header-group{overflow:visible;} .section-header,.header-wrapper{overflow:visible;} /* ─── Mega Rail tabs — visual contract for icon + subtitle ──── */ .hm-rail__tab{align-items:flex-start;gap:10px;} .hm-rail__tab-ico{flex:0 0 36px;width:36px;height:36px;border-radius:6px;overflow:hidden;background:#f3f2f0;display:flex;align-items:center;justify-content:center;} .hm-rail__tab-ico img{width:100%;height:100%;object-fit:cover;} .hm-rail__tab-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;} .hm-rail__tab-title{font-size:var(--rsize,15px);font-weight:var(--rweight,600);line-height:1.3;} .hm-rail__tab-sub{font-size:12px;color:#999;font-weight:400;} .hm-rail__tab .hm-glyph{align-self:center;} .hm-card__sub{display:block;font-size:13px;color:#888;text-align:var(--capalign,center);margin-top:2px;} .hm-card__lbl{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;color:var(--hm-spark,#e2483d);text-decoration:underline;text-underline-offset:3px;} /* ============================================================ v3.3 — Phase 1 completion: per-layout add-to-cart, equal-height tiles ============================================================ */ /* Tiles inside shelf must be equal-height with button bottom-aligned. Without this, the first product appears smaller than others when the compare-at price is missing (image 2 in user's report). */ .hm-shelf__rail .hm-tile{display:flex;flex-direction:column;height:100%;min-width:0;} .hm-shelf__rail .hm-tile__shot{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:var(--grad,10px);background:#f3f2f0;position:relative;} .hm-shelf__rail .hm-tile__shot img{width:100%;height:100%;object-fit:cover;display:block;} .hm-shelf__rail .hm-tile__meta{flex:1;display:flex;flex-direction:column;gap:4px;padding:10px 0 0;min-width:0;} .hm-shelf__rail .hm-tile__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.35;} .hm-shelf__rail .hm-tile__cost{margin:4px 0;} .hm-shelf__rail .hm-tile__grab{margin-top:auto;align-self:stretch;} /* Per-layout add-to-cart override — variables already emitted on .hm-fly--products when slider_btn_override / grid_btn_override is true. Tile button consumes them. */ /* ============================================================ v3.4 — Phase 1 polish: announcement reveal, mobile mega spacing, 2-col mobile cols, On Sale hover safety, column alignment ============================================================ */ /* ─── Announcement bar: only show at top of page; hides when condensed This addresses #11 — on scroll, the announcement is hidden so only the masthead bar (and nav row in non-condensed states) is visible. */ .hm-ann{transition:max-height var(--hm-motion,240ms) ease,opacity var(--hm-motion,240ms) ease,padding var(--hm-motion,240ms) ease;overflow:hidden;} .helm-masthead[data-condensed="true"] .hm-ann{max-height:0;opacity:0;padding-block:0;border:0;} /* Announcement typography from new section settings */ .hm-ann,.hm-ann__deck,.hm-ann__slide{font-family:var(--hm-font-ann,inherit);font-size:var(--hm-ann-size,14px);font-weight:var(--hm-ann-weight,400);color:var(--hm-ann-ink,#fff);} /* ─── Desktop scroll condense: nav row hides, burger reveals (#10). These already exist higher in the file but we make the burger reveal work on desktop too (was only mobile-scoped before). */ @media (min-width:990px){ .hm-shell[data-condensed="true"] .hm-bar__burger{width:44px;opacity:1;pointer-events:auto;margin-right:10px;} .hm-shell[data-condensed="true"] .hm-bar__lead{gap:8px;} } /* ─── Mobile spacing: bar padding + mega menu padding (#5, #6) */ @media (max-width:989px){ /* Reduce excessive side padding on the masthead bar */ .hm-bar__grid.hm-shell-w{padding-inline:14px;} .hm-nav__set.hm-shell-w{padding-inline:14px;} /* Single source of horizontal gutter lives on the content blocks below (var --hm-tree-pad). The panel itself adds NO inline padding, so gutters never double up. */ .hm-panel{padding-inline:0;} /* Mobile mega columns: two columns per row. The drillable column markup is .hm-tree__cols > .hm-tree__group (the older .hm-stack/.hm-stack__col rules no longer matched after the markup rewrite, which collapsed it to 1 col). */ .hm-tree__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;align-items:start;} .hm-tree__cols .hm-tree__group{min-width:0;padding:0;border-top:0;margin-bottom:10px;} .hm-tree__cols .hm-tree__group:first-child{padding-top:0;} /* the grid cell provides the gutter — inner list must not add another */ .hm-tree__cols .hm-panel__list{padding-inline:0;} .hm-tree__cols .hm-stack__head{margin:0 0 4px;padding-bottom:6px;border-bottom:1px solid var(--hm-line,#ececec);font-size:var(--hm-tree-title,14px);} /* compact, light column links (was inheriting the heavy full-width row style) */ .hm-tree__cols .hm-row{padding:7px 0;font-size:var(--hm-tree-sub,14px);font-weight:500;border-bottom:0;} .hm-tree__cols .hm-row--into .hm-glyph{margin-left:auto;} /* Mobile m_plain links: two-column grid in mobile branch panel */ .hm-panel__list:not(.hm-tree__cols .hm-panel__list){display:block;} } /* ─── "On Sale" nav node — hover should never become unresponsive (#2) The pseudo-element sparkles around the text may have intercepted pointer events. Force them off so hover always reaches the underlying link. */ .hm-nav__link.is-deal>span::before, .hm-nav__link.is-deal>span::after, .hm-nav__link.is-sale>span::before, .hm-nav__link.is-sale>span::after{pointer-events:none;} .hm-nav__link.is-deal,.hm-nav__link.is-sale{pointer-events:auto;position:relative;z-index:1;} /* ─── Column alignment (#3) — driven by --col-align variable on .hm-stack */ .hm-stack{text-align:var(--col-align,left);} .hm-stack__col{align-items:var(--col-align-items,flex-start);} /* ─── Slider mobile: extra safety — never let it fall back to grid */ @media (max-width:989px){ .hm-shelf__rail.is-slider{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;} .hm-shelf__rail.is-slider > *{flex-shrink:0;} } /* ─── Tile button: lift specificity above the :where() reset so bg/color from --hm-addcart-* variables actually applies (#9) */ .helm-masthead .hm-tile__grab, .hm-tray .hm-tile__grab{font-family:var(--hm-font-btn,inherit);font-size:var(--hm-btn-size,13px);font-weight:var(--hm-btn-weight,600);background:var(--hm-addcart-bg,#6f1b2a);color:var(--hm-addcart-text,#fff);border:1px solid var(--hm-addcart-bg,#6f1b2a);border-radius:999px;padding:9px 16px;margin-top:auto;transition:background .25s,color .25s,border-color .25s;} .helm-masthead .hm-tile__grab:hover:not([disabled]), .hm-tray .hm-tile__grab:hover:not([disabled]){background:var(--hm-addcart-bg-hov,#f7ebdd);color:var(--hm-addcart-text-hov,#15110e);border-color:var(--hm-addcart-bg-hov,#f7ebdd);} /* ─── Mobile tree shelf: slider variant (#7) — horizontal scroll-snap rail */ /* ── Mobile product shelf — rebuilt (Mega Columns → Slider / Grid) ── Both modes use CSS grid, so cards are grid items and never hit the iOS flex/aspect-ratio collapse. Grid mode wraps into rows of N; slider mode is a horizontal scroll-snap track showing N per view. Arrows live in the title row (.hm-shelf2__nav) so they can never overlap the cards. */ .hm-shelf2{margin-top:12px;} .hm-shelf2__head{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding-inline:var(--hm-tree-pad,18px);} .hm-shelf2__title{font-family:var(--hm-font-megah,inherit);font-size:var(--hm-tree-title,14px);font-weight:var(--hm-megah-weight,700);color:var(--hm-megah-color,#15110e);margin:0;min-width:0;text-transform:none;letter-spacing:0;} .hm-shelf2__nav{display:flex;gap:8px;margin-left:auto;flex:0 0 auto;} .hm-shelf2__nav:empty{display:none;} .hm-shelf2__btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--hm-line,#ececec);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--hm-ink,#15110e);transition:background .2s,color .2s,border-color .2s;} .hm-shelf2__btn:disabled{opacity:.35;cursor:default;} .hm-shelf2__btn:not(:disabled):active{background:var(--hm-spark,#e2483d);color:#fff;border-color:var(--hm-spark,#e2483d);} /* GRID mode — wraps into rows of N */ .hm-shelf2__track{display:grid;grid-template-columns:repeat(var(--cols-m,2),minmax(0,1fr));gap:16px 12px;padding-inline:var(--hm-tree-pad,18px);} /* SLIDER mode — horizontal scroll, N per view, snap */ .hm-shelf2.is-slider .hm-shelf2__track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--cols-m,2) - 1) * 12px) / var(--cols-m,2));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--hm-tree-pad,18px);scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;} .hm-shelf2.is-slider .hm-shelf2__track::-webkit-scrollbar{display:none;} .hm-shelf2.is-slider .hm-shelf2__track > *{scroll-snap-align:start;min-width:0;} /* ============================================================ v3.5 — On Sale wrap, mobile alignment, slider arrows, animations ============================================================ */ /* (1) White space above announcement bar — kill default margins on the section + first child, and any body top-margin Shopify themes inject. */ .helm-masthead{margin-top:0 !important;} .hm-shell,.hm-ann{margin-top:0;} .hm-ann:first-child{margin-top:0;} /* If theme adds top padding on the section wrapper, neutralize it. The wrapper element IS .helm-masthead (schema tag=header class=helm-masthead), so target the class — the literal #shopify-section-helm-masthead id never exists (Shopify hashes the section id). */ .helm-masthead{padding-top:0 !important;} /* (3) Mobile: align panel back-button (menu title) with content inset. Image 2/3 — "Catalog" title should align with "New Arrivals" cards. Unify horizontal inset to 18px for back button, lists, cards, shelf. */ @media (max-width:989px){ .hm-panel__back{padding-inline:var(--hm-tree-pad,18px);} .hm-panel__list{padding-inline:var(--hm-tree-pad,18px);} .hm-tree__cards{padding-inline:0;} .hm-tree__rail{padding-inline:var(--hm-tree-pad,18px);} .hm-tree__cols{padding-inline:var(--hm-tree-pad,18px);} .hm-tree__promo{margin-inline:var(--hm-tree-pad,18px);} .hm-tree__foot{padding-inline:var(--hm-tree-pad,18px);} /* rows sit flush inside the list's gutter so dividers align edge-to-edge */ .hm-panel__list .hm-row{padding-inline:0;} } /* (4) Smooth animations — rail tab hover + panel content change (right-to-left) */ .hm-rail__tab{transition:background .25s cubic-bezier(.22,1,.36,1),color .25s,padding-left .25s;} .hm-rail__tab:hover{padding-left:18px;} .hm-rail__panel{animation:none;} .hm-rail__panel.is-on{animation:hm-rail-in .35s cubic-bezier(.22,1,.36,1);} @keyframes hm-rail-in{ from{opacity:0;transform:translateX(24px);} to{opacity:1;transform:translateX(0);} } /* card stagger for a premium feel */ .hm-rail__panel.is-on .hm-card{animation:hm-card-in .4s cubic-bezier(.22,1,.36,1) backwards;} .hm-rail__panel.is-on .hm-card:nth-child(1){animation-delay:.02s;} .hm-rail__panel.is-on .hm-card:nth-child(2){animation-delay:.05s;} .hm-rail__panel.is-on .hm-card:nth-child(3){animation-delay:.08s;} .hm-rail__panel.is-on .hm-card:nth-child(4){animation-delay:.11s;} .hm-rail__panel.is-on .hm-card:nth-child(n/**/+5){animation-delay:.14s;} @keyframes hm-card-in{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} } /* respect reduced-motion */ @media (prefers-reduced-motion:reduce){ .hm-rail__panel.is-on,.hm-rail__panel.is-on .hm-card{animation:none;} .hm-rail__tab:hover{padding-left:14px;} } /* ============================================================ v3.5b — search category dropdown redesign ============================================================ */ .hm-find__scope{padding-right:2px;} .hm-find__scope-pick{font-family:var(--hm-font,inherit);font-weight:600;letter-spacing:.01em;border-radius:var(--hm-find-round,30px) 0 0 var(--hm-find-round,30px);padding:0 38px 0 20px;transition:background .2s,color .2s;} .hm-find__scope-pick:hover{background:rgba(0,0,0,.04);} .hm-find__scope-pick:focus-visible{outline:2px solid var(--hm-find-focus,#15110e);outline-offset:-2px;} /* subtle separator pill between scope and field */ .hm-find__scope::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:55%;background:var(--hm-find-edge,#e6e4e1);} .hm-find__scope-caret{right:14px;transition:transform .2s;} .hm-find__scope:hover .hm-find__scope-caret{transform:translateY(1px);} /* refined dropdown option styling is browser-native, but ensure the select text truncates cleanly */ .hm-find__scope-pick{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* search results dropdown polish */ .hm-find__drop{border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.14);border:1px solid var(--hm-find-edge,#ececec);overflow:hidden;margin-top:8px;} .hm-find__group-cap{font-family:var(--hm-font-megah,inherit);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#999;padding:12px 16px 6px;margin:0;} .hm-find__hit{display:flex;align-items:center;gap:12px;padding:8px 16px;transition:background .15s;} .hm-find__hit:hover{background:#f7f5f3;} .hm-find__hit-name{font-family:var(--hm-font,inherit);font-size:14px;color:var(--hm-ink,#15110e);} .hm-find__hit-cost{font-size:13px;font-weight:600;color:var(--hm-spark,#6f1b2a);} .hm-find__all{display:block;text-align:center;padding:12px;font-weight:600;font-size:13px;color:var(--hm-spark,#6f1b2a);border-top:1px solid var(--hm-find-edge,#ececec);} .hm-find__all:hover{background:#f7f5f3;} .hm-find__none{padding:20px 16px;text-align:center;color:#999;font-size:14px;} /* ============================================================ v3.6 — burger animation, desktop nav toggle, flush header, nav underline consistency, animated sale badge, submenu fixes ============================================================ */ /* ── (1) Animated burger icon (3 bars → X) ─────────────────── */ .hm-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:22px;height:16px;} .hm-burger>span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s;transform-origin:center;} .hm-bar__burger[aria-expanded="true"] .hm-burger>span:nth-child(1){transform:translateY(6px) rotate(45deg);} .hm-bar__burger[aria-expanded="true"] .hm-burger>span:nth-child(2){opacity:0;} .hm-bar__burger[aria-expanded="true"] .hm-burger>span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} /* ── (1) Desktop: burger toggles nav row, no sidebar ─────────── On desktop the nav row is shown by default. When the user scrolls (condensed) the nav row hides AND the burger appears. Clicking the burger sets data-nav-open=true which re-reveals the nav row. */ @media (min-width:990px){ .hm-bar__burger{width:0;opacity:0;pointer-events:none;overflow:hidden;transition:width .25s ease,opacity .2s ease;} .hm-shell[data-condensed="true"] .hm-bar__burger, .hm-shell[data-nav-open="true"] .hm-bar__burger{width:44px;opacity:1;pointer-events:auto;margin-right:14px;} /* condensed hides the nav row by default; the burger toggles it back */ .hm-shell[data-condensed="true"] .hm-nav{max-height:0;opacity:0;overflow:hidden;pointer-events:none;border-color:transparent;} .hm-shell[data-condensed="true"][data-nav-open="true"] .hm-nav{max-height:240px;opacity:1;overflow:visible;pointer-events:auto;border-color:var(--hm-nav-line,#ececec);} } /* ── (2) Flush header / no white space above announcement ───── */ .helm-masthead{margin:0 !important;} .helm-masthead>*:first-child{margin-top:0 !important;} .hm-ann{margin:0;} .hm-shell{margin:0;} /* when JS makes the section position:fixed, ensure top is exactly 0 */ .helm-masthead[style*="fixed"]{top:0 !important;} /* ── (3) Nav underline: hover + genuine current page only ────── The random underlines were link.active matching every "/" link. Liquid now uses link.current (exact). CSS shows underline ONLY on hover and is-here (current). Reset any inherited text-decoration. */ .hm-nav__link{text-decoration:none !important;} .hm-nav__link::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--hm-spark,#6f1b2a);transition:width .22s;} .hm-nav__node:hover>.hm-nav__link::after, .hm-nav__link.is-here::after{width:100%;} /* sale badge has its own treatment, no underline */ .hm-nav__link.is-sale::after{display:none;} /* ── (4) Animated sale badge — continuous pulse + sparkle twinkle ── */ .hm-nav__link.is-sale{animation:hm-sale-pulse 1.8s ease-in-out infinite;} @keyframes hm-sale-pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} } .hm-nav__link.is-sale>span::before, .hm-nav__link.is-sale>span::after{display:inline-block;animation:hm-sparkle 1.6s ease-in-out infinite;} .hm-nav__link.is-sale>span::after{animation-delay:.8s;} @keyframes hm-sparkle{ 0%,100%{opacity:1;transform:scale(1) rotate(0);} 50%{opacity:.4;transform:scale(.7) rotate(20deg);} } /* Mobile drawer: same continuous attention-grabbing treatment as desktop. The pulse/sparkle ride on the inner so the full-width row doesn't shift; transform-only so it never triggers layout/reflow. */ .hm-row.is-sale>span{display:inline-block;transform-origin:left center;animation:hm-sale-pulse 1.8s ease-in-out infinite;} .hm-row.is-sale>span::before, .hm-row.is-sale>span::after{content:"\2726";font-size:.7em;margin:0 5px;display:inline-block;animation:hm-sparkle 1.6s ease-in-out infinite;} .hm-row.is-sale>span::after{animation-delay:.8s;} @media (prefers-reduced-motion:reduce){ .hm-nav__link.is-sale,.hm-nav__link.is-sale>span::before,.hm-nav__link.is-sale>span::after{animation:none;} .hm-row.is-sale>span,.hm-row.is-sale>span::before,.hm-row.is-sale>span::after{animation:none;} } /* ── (5) Desktop submenus: no clipping, proper 3rd level ──────── */ .hm-fly-wrap{overflow:visible;} .hm-plain__item{position:relative;} .hm-plain__sub{z-index:80;min-width:200px;} /* ============================================================ v3.7 — clean tree (mobile multi-level), desktop 3rd-level sub ============================================================ */ /* Mobile drill chevron — make sure the "into" arrow is clearly visible */ .hm-row--into .hm-glyph{flex:0 0 auto;} .hm-row--into:hover .hm-glyph{opacity:1;} .hm-row--into{cursor:pointer;} /* Desktop plain dropdown — 3rd level (sub-sub) flyout opens beside the 2nd */ .hm-plain__sub--3{top:0;left:100%;} .hm-plain__sub .hm-plain__item{position:relative;} .hm-plain__sub .hm-plain__item.has-kids:hover>.hm-plain__sub--3{display:block;} /* flip 3rd level to the left if near right viewport edge */ .hm-fly--plain.align-right .hm-plain__sub--3{left:auto;right:100%;} .hm-plain__link>span{flex:1;min-width:0;} .hm-plain__link .hm-glyph{flex:0 0 auto;opacity:.5;} /* Tree panels: stacking container */ .hm-tree__stack{position:relative;overflow:hidden;flex:1;min-height:0;} .hm-row--into{font-weight:600;} .hm-row--into .hm-glyph{opacity:.6;color:var(--hm-ink,#15110e);} .hm-row--into:active{background:#f7f5f3;} /* ── v5: mobile tree empty-state hint ── */ .hm-tree__empty{padding:24px 18px;} .hm-tree__empty>p{font-size:16px;font-weight:600;color:var(--hm-ink,#15110e);margin:0 0 12px;} .hm-tree__empty .hm-row{border:1px solid var(--hm-line,#ececec);border-radius:8px;justify-content:center;color:var(--hm-spark,#6f1b2a);} .hm-tree__empty-note{font-size:12px;color:#c0392b;background:#fdf0ee;border-radius:8px;padding:10px;margin-top:12px;line-height:1.4;}; /* ============================================================ HELM v6.1 · Desktop dropdown scrolling Changes vs v6: · submenu visibility is now driven by an .is-open class, not by :hover, so crossing the panel's padding no longer kills it · vertical clamp is a hard "bottom must sit above the fold" rule instead of a two-branch guess ============================================================ */ .hm-shell{will-change:auto;} .hm-shell[data-anim="slide"] .hm-fly-wrap, .hm-shell[data-anim="fade-slide"] .hm-fly-wrap{ transform:none; top:calc(100% + 10px); transition:opacity var(--hm-fly-dur,240ms) var(--hm-fly-ease,ease), top var(--hm-fly-dur,240ms) var(--hm-fly-ease,ease), visibility var(--hm-fly-dur,240ms); } .hm-nav__node.has-fly:hover > .hm-fly-wrap, .hm-nav__node.has-fly.is-open > .hm-fly-wrap{top:100%;transform:none;} /* ---- 2 · Level 1 · panel keeps its radius + shadow, the