/** * theme.css — generated by tools/build-css.mjs. Do not hand-edit. * * Sections: * 1. the prototypes' shared element resets and keyframes * 2. theme-owned component and state CSS * 3. each prototype's own responsive rules, scoped by body class * 4. hover/active states lifted off the prototypes, namespaced per page */ /* ---------- 1. shared ---------- */ body{margin:0;background:#f7faf9;font-family:"Poppins",system-ui,sans-serif;color:#062730} a{color:#00827e;text-decoration:none} a:hover{color:#004c4a} img{max-width:100%} @keyframes hpDraw{to{stroke-dashoffset:0}} @keyframes hpPulse{0%,100%{opacity:.4}50%{opacity:1}} @keyframes hpFill{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes hpSpin{to{transform:rotate(360deg)}} @keyframes hpHalo{0%{transform:scale(.86);opacity:.55}70%{opacity:0}100%{transform:scale(1.5);opacity:0}} @keyframes hpSheen{0%{transform:translateX(-160%) rotate(18deg)}45%,100%{transform:translateX(320%) rotate(18deg)}} @keyframes hpBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}} @keyframes coaSheen{0%{left:-40%}55%,100%{left:130%}} /* ---------- 2. theme ---------- */ /* ---------- primitives the prototypes assumed ---------- */ *,*::before,*::after{box-sizing:border-box} body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} button{font-family:inherit} :focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--teal-500)} /* hp-if wraps conditional content without disturbing layout, so it can guard an inline element (the bag badge) as safely as a block. */ hp-if{display:contents} hp-if[hidden]{display:none} .hp-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--ink-900);color:#fff;border-radius:0 0 var(--radius-md) 0;font-weight:600;font-size:14px} .hp-skip:focus{left:0;color:#fff} /* Images inside a fixed frame lift 1.03 on card hover — the handoff's hover rule; the prototypes declare the transition but never the end state. */ .hp-card:hover .hp-card__media img, a:hover > div > img[style*="object-fit"]{transform:scale(1.03)} /* ---------- reveal / rise ---------- Progressive enhancement: the hidden start state is scoped to .hp-js, which an inline script in sets. Without JS — or if app.js fails to load — every section is simply visible rather than a blank page. */ .hp-js [data-reveal]{opacity:0;filter:blur(10px);transform:translateY(22px) scale(.985)} .hp-js [data-reveal].is-in{opacity:1;filter:blur(0);transform:none} .hp-js [data-rise]{opacity:0;transform:translateY(12px)} .hp-js [data-rise].is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .hp-js [data-reveal],.hp-js [data-rise]{opacity:1!important;filter:none!important;transform:none!important;transition:none!important} } /* ---------- search panel ---------- */ .hp-search__panel{position:absolute;left:24px;right:24px;top:100%;margin-top:10px;z-index:5;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden} .hp-search__panel[hidden]{display:none} .hp-search__row{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--border-subtle);color:var(--ink-900)} .hp-search__row:last-child{border-bottom:none} .hp-search__row:hover{background:var(--stone-100)} .hp-search__thumb{width:44px;height:44px;flex:0 0 44px;border-radius:var(--radius-sm);object-fit:cover;background:var(--photo-teal)} .hp-search__name{font-weight:600;font-size:14.5px} .hp-search__meta{font-size:12.5px;color:var(--text-muted)} .hp-search__price{margin-left:auto;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums} .hp-search__empty{padding:18px;font-size:14px;color:var(--text-muted)} /* ---------- Button ---------- */ .hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:var(--fw-semibold);letter-spacing:var(--ls-chip);border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--motion-hover),var(--motion-press);-webkit-tap-highlight-color:transparent} .hp-btn:active{transform:scale(var(--press-scale))} .hp-btn--primary{background:var(--teal-500);color:var(--ink-900)} .hp-btn--primary:hover{background:var(--teal-400);color:var(--ink-900)} .hp-btn--ink{background:var(--ink-900);color:#fff} .hp-btn--ink:hover{background:var(--ink-700);color:#fff} .hp-btn--amber{background:var(--amber-500);color:var(--ink-900)} .hp-btn--amber:hover{background:var(--amber-400);color:var(--ink-900)} .hp-btn--outline{background:transparent;color:var(--ink-900);border-color:var(--border-strong)} .hp-btn--outline:hover{background:var(--stone-100);border-color:var(--ink-900);color:var(--ink-900)} .hp-btn--ghost{background:transparent;color:var(--text-brand)} .hp-btn--ghost:hover{background:var(--teal-100)} .hp-btn--onDark{background:#fff;color:var(--ink-900)} .hp-btn--onDark:hover{background:var(--teal-100);color:var(--ink-900)} .hp-btn--outlineOnDark{background:transparent;color:#fff;border-color:var(--border-inverse)} .hp-btn--outlineOnDark:hover{background:rgba(255,255,255,.10);border-color:#fff;color:#fff} @media (prefers-reduced-motion:reduce){.hp-btn:active{transform:none}} /* ---------- ProductCard ---------- */ .hp-card{position:relative;display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--motion-hover),transform var(--dur-base) var(--ease-out-strong)} .hp-card:hover{box-shadow:var(--shadow-lg);transform:translateY(var(--lift-y))} .hp-card__hit{position:absolute;inset:0;z-index:2} .hp-card__media{position:relative;aspect-ratio:4 / 3;overflow:hidden} .hp-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-out)} .hp-card__badge{position:absolute;top:var(--space-4);left:var(--space-4);z-index:3} .hp-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1} .hp-card__price{margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--border-subtle);display:flex;align-items:baseline;justify-content:space-between} .hp-card__action{position:relative;z-index:3;padding-top:var(--space-3)} /* ---------- AddToCartButton ---------- */ .hp-atc{position:relative;width:100%;height:var(--control-h-md);border-radius:var(--radius-pill);overflow:hidden;background:var(--hp-atc-accent);transition:background-color 320ms ease,box-shadow 320ms ease} .hp-atc[data-phase="done"]{background:var(--success)} .hp-atc[data-phase="qty"]{background:#fff;box-shadow:inset 0 0 0 1px var(--border-subtle)} .hp-atc__rail{display:flex;width:200%;height:100%;transform:translateX(0);transition:transform 460ms var(--ease-out-strong)} .hp-atc[data-phase="qty"] .hp-atc__rail{transform:translateX(-50%)} .hp-atc__add{flex:0 0 50%;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:100%;border:none;background:transparent;color:var(--ink-900);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);letter-spacing:var(--ls-chip);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 160ms ease,color 260ms ease,var(--motion-press)} .hp-atc[data-phase="idle"] .hp-atc__add:hover{background:color-mix(in srgb,#fff 18%,transparent)} .hp-atc[data-phase="idle"] .hp-atc__add:active{transform:scale(var(--press-scale))} .hp-atc[data-phase="done"] .hp-atc__add{color:#fff} .hp-atc[data-phase="busy"] .hp-atc__add [data-atc-label]{opacity:.72} .hp-atc__glyph{width:16px;height:16px;flex:0 0 16px;display:grid;place-items:center} .hp-atc__layer{grid-area:1 / 1;display:flex;opacity:0;transform:scale(.9);transition:opacity 200ms var(--ease-out-strong),transform 200ms var(--ease-out-strong)} .hp-atc[data-phase="idle"] .hp-atc__layer.is-idle, .hp-atc[data-phase="busy"] .hp-atc__layer.is-busy, .hp-atc[data-phase="done"] .hp-atc__layer.is-done, .hp-atc[data-phase="qty"] .hp-atc__layer.is-idle{opacity:1;transform:scale(1)} .hp-atc__ring{stroke-dashoffset:57} .hp-atc[data-phase="busy"] .hp-atc__ring{animation:hp-ring-sweep var(--hp-atc-dur,700ms) cubic-bezier(.42,.06,.28,1) forwards} .hp-atc__tick{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset 320ms var(--ease-out-strong) 40ms} .hp-atc[data-phase="done"] .hp-atc__tick{stroke-dashoffset:0} .hp-atc__qty{flex:0 0 50%;height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4px;opacity:0;transition:opacity 200ms ease 120ms} .hp-atc[data-phase="qty"] .hp-atc__qty{opacity:1} .hp-atc__step{width:36px;height:36px;display:grid;place-items:center;border:none;border-radius:var(--radius-pill);background:transparent;color:var(--ink-900);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 140ms ease,color 200ms ease,var(--motion-press)} .hp-atc__step.is-start{justify-self:start} .hp-atc__step.is-end{justify-self:end} .hp-atc__step:hover{background:var(--stone-100)} .hp-atc__step:active{transform:scale(var(--press-scale))} .hp-atc__step:disabled{color:var(--stone-300);cursor:default;background:transparent} .hp-atc__num{min-width:34px;display:grid;place-items:center;overflow:hidden;height:100%} .hp-atc__num .hp-qty-num{font-weight:var(--fw-semibold);font-size:var(--fs-body);font-variant-numeric:tabular-nums;color:var(--ink-900);line-height:1} .hp-atc__num .hp-qty-num.is-up{animation:hp-num-up 220ms var(--ease-out-strong)} .hp-atc__num .hp-qty-num.is-down{animation:hp-num-down 220ms var(--ease-out-strong)} /* ---------- Switch ---------- */ .hp-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;-webkit-tap-highlight-color:transparent} .hp-switch__track{position:relative;width:46px;height:26px;flex:0 0 46px;border-radius:var(--radius-pill);background:var(--stone-300);box-shadow:inset 0 0 0 1px rgba(0,22,30,.06);transition:background-color 220ms ease} .hp-switch:hover .hp-switch__track{background:var(--stone-400)} .hp-switch__track input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit} .hp-switch__track:has(input:checked){background:var(--teal-500)} .hp-switch__knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-pill);background:#fff;box-shadow:0 1px 2px rgba(0,22,30,.18),0 0 0 .5px rgba(0,22,30,.04);transform-origin:left center;transform:translateX(0) scaleX(1);transition:transform 260ms var(--ease-out-strong)} .hp-switch__track:has(input:checked) .hp-switch__knob{transform-origin:right center;transform:translateX(20px) scaleX(1)} .hp-switch:active .hp-switch__knob{transform:translateX(0) scaleX(1.22)} .hp-switch__track:has(input:checked) ~ .hp-switch__knob, .hp-switch:active .hp-switch__track:has(input:checked) .hp-switch__knob{transform:translateX(20px) scaleX(1.22)} .hp-switch__track:has(input:focus-visible){box-shadow:var(--shadow-focus)} .hp-switch__label{font:var(--fw-regular) var(--fs-body)/1.4 var(--font-sans);color:var(--text-heading)} @media (prefers-reduced-motion:reduce){.hp-switch__knob{transition:none}} /* ---------- form fields ---------- */ .hp-form{display:contents} .hp-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .hp-field{display:flex;flex-direction:column;gap:var(--space-2)} .hp-field__label{font:var(--fw-medium) var(--fs-body-sm)/1.2 var(--font-sans);color:var(--text-heading)} .hp-field__control{display:flex;align-items:center;gap:var(--space-2);height:var(--control-h-md);padding:0 var(--space-4);background:var(--white);border-radius:var(--radius-md);border:1px solid var(--border-strong);transition:var(--motion-hover)} .hp-field__control:focus-within{border-color:var(--teal-500);box-shadow:var(--shadow-focus)} .hp-field__control input{flex:1;border:none;outline:none;background:transparent;min-width:0;font:var(--text-body-md);color:var(--text-heading)} .hp-field__select{position:relative;display:block} .hp-field__select select{width:100%;height:var(--control-h-md);padding:0 var(--space-8) 0 var(--space-4);appearance:none;background:var(--white);border-radius:var(--radius-md);border:1px solid var(--border-strong);font:var(--text-body-md);color:var(--text-heading);outline:none;transition:var(--motion-hover)} .hp-field__select select:focus{border-color:var(--teal-500);box-shadow:var(--shadow-focus)} .hp-field__chevron{position:absolute;right:var(--space-4);top:50%;margin-top:-3px;width:8px;height:8px;border-right:2px solid var(--stone-500);border-bottom:2px solid var(--stone-500);transform:rotate(45deg);pointer-events:none} .hp-field__hint{font:var(--fw-regular) var(--fs-caption)/1.4 var(--font-sans);color:var(--text-muted)} .hp-field__error{font:var(--fw-regular) var(--fs-caption)/1.4 var(--font-sans);color:var(--danger)} .hp-field__error[hidden]{display:none} textarea{font:var(--text-body-md);color:var(--text-heading);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:12px 16px;background:var(--white);outline:none;resize:vertical;width:100%;transition:var(--motion-hover)} textarea:focus{border-color:var(--teal-500);box-shadow:var(--shadow-focus)} .hp-check{display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer} .hp-check input{appearance:none;width:20px;height:20px;flex:0 0 20px;margin-top:1px;border-radius:var(--radius-xs);border:1px solid var(--border-strong);background:var(--white);cursor:inherit;background-size:100%;transition:var(--motion-hover)} .hp-check input:checked{border-color:var(--teal-500);background-color:var(--teal-500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%2300161e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .hp-check input:focus-visible{box-shadow:var(--shadow-focus)} .hp-check__body{display:flex;flex-direction:column;gap:2px} .hp-check__label{font:var(--fw-regular) var(--fs-body)/1.4 var(--font-sans);color:var(--text-heading)} .hp-check__desc{font:var(--fw-regular) var(--fs-caption)/1.5 var(--font-sans);color:var(--text-muted)} /* Submission outcome banners. */ .hp-notice{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius-md);font-size:15px;line-height:1.55;margin-bottom:20px} .hp-notice--ok{background:var(--success-bg);color:#0a5c37;border:1px solid rgba(15,157,92,.28)} .hp-notice--error{background:var(--danger-bg);color:#8d2b25;border:1px solid rgba(194,65,58,.28)} /* ---------- shop ---------- */ .hp-shop-item{display:flex;min-width:0} .hp-shop-item > *{width:100%} .hp-shop-item[hidden]{display:none} .hp-card.is-pending{opacity:.72} .hp-card__pending{display:inline-flex;align-items:center;height:var(--control-h-md);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);color:var(--text-muted)} .hp-card__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px} .hp-card__placeholder img{width:92px;height:auto;opacity:.5} .hp-card__placeholder span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)} /* ---------- FAQ accordion ---------- */ [data-faq-panel][hidden]{display:none} [data-faq-panel]{animation:hp-faq-in 200ms var(--ease-out-strong)} /* ---------- bag drawer ---------- The closed drawer parks at translateX(112%), off the right edge. A fixed, viewport-sized clipping root contains it: body overflow cannot clip a fixed element, so without this the page scrolls sideways to reach it on mobile. */ .hp-drawer-root{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none} /* Switching the panel and scrim to absolute makes the root their containing block, so the root's overflow actually clips them — a fixed element ignores an ancestor's overflow. The root is fixed at inset:0, so absolute inside it resolves to exactly the same box the prototype's fixed positioning gave. */ .hp-drawer-root [data-drawer], .hp-drawer-root [data-scrim]{position:absolute!important} .hp-drawer-root > *{pointer-events:auto} /* Open/closed is painted inline by pdp.js, because the prototype ships the closed transform and opacity as inline styles that no class rule can beat. */ body.hp-drawer-open{overflow:hidden} /* ---------- 3. responsive, per page ---------- */ @media (max-width:1180px){ [data-hide-md]{display:none!important} [data-menu-btn]{display:grid!important} [data-menu-links]{display:flex!important} } @media (max-width:1024px){ [data-hide-md]{display:none!important} [data-menu-btn]{display:grid!important} [data-r="3"],[data-r="4"]{grid-template-columns:repeat(2,minmax(0,1fr))!important} [data-r="2"],[data-r="foot"]{grid-template-columns:minmax(0,1fr)!important;gap:34px!important} [data-r="2"]{min-height:0!important} [data-sticky]{position:static!important;top:auto!important} [data-pad]{padding:34px!important} } @media (max-width:760px){ [data-r="3"],[data-r="4"],[data-r="strip"]{grid-template-columns:minmax(0,1fr)!important} [data-r="foot"]{grid-template-columns:repeat(2,minmax(0,1fr))!important} [data-hide-sm]{display:none!important} [data-r] > *{min-width:0} [data-logo]{height:34px!important} [data-pad]{padding:28px 24px!important} section{padding-left:18px!important;padding-right:18px!important} h2[style]{font-size:30px!important;letter-spacing:-.028em!important} [data-stack]{flex-direction:column!important;align-items:stretch!important} [data-stack] > a{justify-content:center} } @media (max-width:1180px){ [data-hide-md]{display:none!important}[data-menu-btn]{display:grid!important}[data-menu-links]{display:flex!important} } @media (max-width:1024px){ [data-hide-md]{display:none!important}[data-menu-btn]{display:grid!important}body.hp-product [data-r="3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.hp-product [data-r="2"],body.hp-product [data-r="pdp"],[data-r="foot"]{grid-template-columns:minmax(0,1fr)!important;gap:34px!important}body.hp-product [data-sticky]{position:static!important;top:auto!important}body.hp-product [data-r="pdp"] > *{grid-column:auto!important;grid-row:auto!important} } @media (max-width:760px){ body.hp-product [data-r="3"],body.hp-product [data-r="strip"],body.hp-product [data-r="tiers"]{grid-template-columns:minmax(0,1fr)!important}[data-r="foot"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}[data-hide-sm]{display:none!important}body.hp-product [data-r] > *{min-width:0}body.hp-product [data-buyrow]{flex-wrap:wrap!important}body.hp-product [data-cta]{flex:1 0 100%!important;order:3;margin-top:2px}[data-logo]{height:34px!important}body.hp-product [data-drawer]{top:0!important;right:0!important;bottom:0!important;width:100%!important;border-radius:0!important}body.hp-product section{padding-left:0!important;padding-right:0!important}body.hp-product h1[style]{font-size:34px!important;letter-spacing:-.03em!important}body.hp-product h2[style]{font-size:30px!important;letter-spacing:-.028em!important} } /* ---------- 4. generated states ---------- */ /* home: hover and active states lifted off the prototype */ .hp-home-h1:hover{background:rgba(255,255,255,.11)!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important} .hp-home-h2:hover{background:#eef2f1!important} .hp-home-h3:hover{background:#eef2f1!important;color:#00161e!important} .hp-home-h4:hover{transform:translateY(-2px)!important;background:#062730!important;color:#fff!important} .hp-home-a5:active{transform:scale(.97)!important} .hp-home-h6:hover{border-color:rgba(0,167,160,.4)!important;box-shadow:0 8px 24px -12px rgba(0,22,30,.18)!important;transform:translateY(-2px)!important} .hp-home-a7:active{transform:scale(.99)!important} .hp-home-h8:hover{transform:translateY(-3px)!important;box-shadow:0 22px 44px -18px rgba(0,22,30,.55)!important;color:#fff!important} .hp-home-a9:active{transform:scale(.97) translateY(-1px)!important} .hp-home-h10:hover{background:rgba(0,22,30,.08)!important;transform:translateY(-3px)!important;color:#00161e!important} .hp-home-h11:hover{background:rgba(255,255,255,.5)!important} .hp-home-h12:hover{background:rgba(0,22,30,.04)!important;border-color:rgba(0,22,30,.3)!important} .hp-home-h13:hover{transform:translateY(-2px)!important;box-shadow:0 24px 44px -28px rgba(0,48,47,.45)!important;color:#00161e!important} .hp-home-h14:hover{color:#5c3c0d!important;gap:11px!important} .hp-home-h15:hover{background:rgba(0,22,30,.05)!important;color:#00161e!important} .hp-home-h16:hover{background:#062730!important;transform:translateY(-2px)!important;box-shadow:0 20px 38px -16px rgba(0,22,30,.65)!important;color:#fff!important} .hp-home-a17:active{transform:scale(.985)!important} .hp-home-h18:hover{background:rgba(0,22,30,.08)!important;border-color:rgba(0,22,30,.42)!important;color:#00161e!important} .hp-home-h19:hover{transform:translateX(4px)!important} .hp-home-h20:hover{color:#fff!important} /* pdp: hover and active states lifted off the prototype */ .hp-pdp-h1:hover{background:rgba(255,255,255,.11)!important;border-color:rgba(255,255,255,.4)!important;color:#fff!important} .hp-pdp-h2:hover{background:#eef2f1!important} .hp-pdp-h3:hover{background:#eef2f1!important;color:#00161e!important} .hp-pdp-h4:hover{transform:translateY(-2px)!important;background:#062730!important;color:#fff!important} .hp-pdp-a5:active{transform:scale(.97)!important} .hp-pdp-h6:hover{border-color:#00a7a0!important} .hp-pdp-h7:hover{background:#f7faf9!important;transform:translateY(-2px)!important} .hp-pdp-a8:active{transform:scale(.95)!important} .hp-pdp-h9:hover{background:#eef2f1!important;transform:translateY(-2px)!important;color:#00161e!important} .hp-pdp-h10:hover{background:#dfe6e5!important;color:#00161e!important} .hp-pdp-h11:hover{color:#fff!important} .hp-pdp-h12:hover{background:#e2e9e8!important;transform:rotate(90deg)!important} .hp-pdp-h13:hover{background:#eef2f1!important;color:#c2413a!important} .hp-pdp-h14:hover{background:#04323a!important;color:#fff!important;transform:translateY(-2px)!important} .hp-pdp-a15:active{transform:scale(.99)!important}