/* Fieldhouse Coffee. Direction: the split stage. Stone and kraft grounds, one fir-green action colour, one deep fir band. */
.b-ecommerce {
  --fh-paper: #ebeae6; --fh-panel: #dfdcd5; --fh-kraft: #cdbfa8; --fh-label: #f5f4f1;
  --fh-ink: #2b2723; --fh-muted: #5f5852; --fh-fir: #4d5c45; --fh-fir-d: #3c4936; --fh-deep: #232a20; --fh-mist: #dde1d3; --fh-on-deep: #ece8df; --fh-on-deep-2: #c9cdbf;
  --b-bg: var(--fh-paper); --b-ink: var(--fh-ink); --b-acc: var(--fh-fir); --b-soft: var(--fh-panel); --b-on: #ffffff;
  --b-d: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --b-t: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --fh-hand: "Caveat", "Segoe Print", cursive;
  --s-small: 14px; --s-body: clamp(17px, 16px + .1vw, 18px); --s-lead: clamp(20px, 1rem + .4vw, 24px);
  --s-head: clamp(30px, 1.2rem + 1.7vw, 44px); --s-disp: clamp(34px, 1rem + 2.6vw, 54px);
  --m: clamp(16px, 2.6vw, 36px); --r: 20px; --gap: clamp(96px, 11vw, 176px);
  --ease: cubic-bezier(.22, 1, .36, 1); --soft: cubic-bezier(.33, 1, .68, 1);
  font-family: var(--b-t); color: var(--fh-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
body.b-ecommerce { background: var(--fh-paper); font-size: var(--s-body); line-height: 1.5; caret-color: var(--fh-fir); scrollbar-color: var(--fh-kraft) var(--fh-paper); }
.b-ecommerce ::selection { background: var(--fh-fir); color: #fff; }
.b-ecommerce :focus-visible { outline: 3px solid var(--fh-fir); outline-offset: 3px; border-radius: 6px; }
.b-ecommerce h1, .b-ecommerce h2, .b-ecommerce h3 { font-family: var(--b-d); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; margin: 0 0 .5em; text-wrap: balance; color: var(--fh-ink); }
.b-ecommerce h1 { font-size: var(--s-disp); }
.b-ecommerce h2 { font-size: var(--s-head); line-height: 1.08; }
.b-ecommerce h3 { font-size: var(--s-lead); letter-spacing: -.02em; margin: 0 0 4px; }
.b-ecommerce p { margin: 0 0 1em; }
.b-ecommerce a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.b-ecommerce img { display: block; max-width: 100%; height: auto; color: transparent; background: var(--fh-kraft); }
.b-ecommerce .fh-hand { font-family: var(--fh-hand); font-weight: 600; letter-spacing: 0; }
.b-ecommerce mark { background: var(--fh-mist); color: inherit; padding: 0 .15em; }

/* buttons, links, chips, steppers */
.b-ecommerce .fh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 2px solid var(--fh-fir); background: var(--fh-fir); color: #fff; font: 600 var(--s-body)/1 var(--b-t); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: transform 140ms var(--ease), background-color 180ms ease, border-color 180ms ease; }
.b-ecommerce .fh-btn:hover { background: var(--fh-fir-d); border-color: var(--fh-fir-d); }
.b-ecommerce .fh-btn:active { transform: scale(.95); }
.b-ecommerce .fh-btn:disabled { background: var(--fh-kraft); border-color: var(--fh-kraft); color: var(--fh-muted); cursor: not-allowed; transform: none; }
.b-ecommerce .fh-btn--sm { min-height: 44px; padding: 0 20px; font-size: var(--s-small); }
.b-ecommerce .fh-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.b-ecommerce .fh-btn--ghost:hover { background: var(--fh-paper); color: var(--fh-ink); border-color: var(--fh-paper); }
.b-ecommerce .fh-btn--light { background: var(--fh-paper); border-color: var(--fh-paper); color: var(--fh-ink); }
.b-ecommerce .fh-btn--light:hover { background: #fff; border-color: #fff; }
.b-ecommerce .fh-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: 500 var(--s-body) var(--b-t); color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; cursor: pointer; transition: color 180ms ease, text-underline-offset 180ms var(--ease); }
.b-ecommerce .fh-link:hover { text-underline-offset: 8px; }
.b-ecommerce .fh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.b-ecommerce .fh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.b-ecommerce .fh-chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--fh-panel); color: var(--fh-ink); font: 500 var(--s-body) var(--b-t); letter-spacing: -.01em; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease); }
.b-ecommerce .fh-chip:hover { background: var(--fh-kraft); }
.b-ecommerce .fh-chip:active { transform: scale(.95); }
.b-ecommerce .fh-chip[aria-pressed="true"] { background: var(--fh-fir); color: #fff; }
.b-ecommerce .fh-chip small { display: block; font-size: var(--s-small); opacity: .9; font-weight: 400; }
.b-ecommerce .fh-step { display: inline-flex; align-items: center; gap: 6px; }
.b-ecommerce .fh-step button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fh-panel); color: var(--fh-ink); font: 500 var(--s-lead)/1 var(--b-t); cursor: pointer; transition: background-color 180ms ease, transform 140ms var(--ease); }
.b-ecommerce .fh-step button:hover { background: var(--fh-kraft); } .b-ecommerce .fh-step button:active { transform: scale(.9); }
.b-ecommerce .fh-step output { min-width: 2.2ch; text-align: center; font-size: var(--s-lead); font-weight: 600; }
.b-ecommerce .fh-step span { font-size: var(--s-small); color: var(--fh-muted); }
.b-ecommerce .fh-f { margin: 0 0 22px; }
.b-ecommerce .fh-f__k { margin: 0 0 10px; font-weight: 600; font-size: var(--s-body); }
.b-ecommerce .fh-f__hint, .b-ecommerce .fh-f__fit { margin: 10px 0 0; font-size: var(--s-small); color: var(--fh-muted); }
.b-ecommerce .fh-f__fit { margin: -6px 0 22px; color: var(--fh-ink); }
.b-ecommerce .fh-f__fit b { color: var(--fh-fir); }
.b-ecommerce .fh-f--row { display: flex; flex-wrap: wrap; gap: 20px 36px; }
.b-ecommerce .fh-f__grow { flex: 1 1 260px; }

/* header */
.b-ecommerce .fh-bar { display: flex; align-items: center; gap: 28px; padding: 14px var(--m); position: relative; z-index: 15; }
.b-ecommerce .fh-logo { display: inline-flex; align-items: center; gap: .32em; font: 700 25px/1 var(--b-d); letter-spacing: -.04em; text-decoration: none; color: var(--fh-ink); min-height: 44px; }
.b-ecommerce .fh-logo__mark { color: var(--fh-fir); flex: none; }
.b-ecommerce .fh-nav { display: flex; gap: 26px; margin-left: auto; font-size: var(--s-body); font-weight: 500; }
.b-ecommerce .fh-nav a { text-decoration: none; padding: 10px 0; position: relative; }
.b-ecommerce .fh-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease); }
.b-ecommerce .fh-nav a:hover::after, .b-ecommerce .fh-nav a[aria-current]::after { transform: scaleX(1); }
.b-ecommerce .fh-menu { display: none; margin-left: auto; position: relative; }
.b-ecommerce .fh-menu summary { list-style: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--fh-panel); font-weight: 600; cursor: pointer; }
.b-ecommerce .fh-menu summary::-webkit-details-marker { display: none; }
.b-ecommerce .fh-menu__p { position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 32px)); display: grid; padding: 10px; border-radius: var(--r); background: var(--fh-label); }
.b-ecommerce .fh-menu__p a { padding: 12px 14px; border-radius: 12px; text-decoration: none; font-size: var(--s-body); font-weight: 500; }
.b-ecommerce .fh-menu__p a:hover { background: var(--fh-panel); }
.b-ecommerce .fh-menu[open] .fh-menu__p { animation: fhPop 220ms var(--ease); }
@keyframes fhPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* home: the split stage */
.b-ecommerce .fh-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px; }
.b-ecommerce .fh-split__read { min-width: 0; }
.b-ecommerce .fh-split__stage { position: sticky; top: 12px; height: calc(100svh - 24px); border-radius: var(--r); overflow: hidden; align-self: start; background: var(--fh-kraft); }
.b-ecommerce .fh-stage { position: absolute; inset: 0; }
.b-ecommerce .fh-stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--soft); }
.b-ecommerce .fh-stage > .is-on { opacity: 1; animation: fhDrift 22s ease-in-out infinite alternate; }
@keyframes fhDrift { from { transform: scale(1.07); } to { transform: scale(1); } }
.b-ecommerce .fh-stage__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; margin: 0; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: var(--fh-paper); font-size: var(--s-small); }
.b-ecommerce .fh-credit { font-size: var(--s-small); color: var(--fh-muted); }
.b-ecommerce .fh-sheet { min-height: calc(100svh - 104px); display: grid; align-content: center; padding: 56px clamp(24px, 4vw, 64px); border-radius: var(--r); background: var(--fh-panel); text-align: center; }
.b-ecommerce .fh-sheet__in { display: grid; justify-items: center; }
.b-ecommerce .fh-sheet h1 { margin-bottom: 22px; }
.b-ecommerce .fh-sheet__p { max-width: 40ch; font-size: var(--s-lead); line-height: 1.4; }
.b-ecommerce .fh-sheet .fh-row { justify-content: center; margin-top: 12px; }
.b-ecommerce .fh-sheet__s { margin: 26px 0 0; font-size: var(--s-small); color: var(--fh-muted); }
.b-ecommerce .fh-field { min-height: 92svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding: 72px clamp(24px, 4.4vw, 72px); }
.b-ecommerce .fh-field > div { max-width: 46ch; }
.b-ecommerce .fh-field__img { display: none; }
.b-ecommerce .fh-fv { margin: 0 0 28px; color: var(--fh-ink); }
.b-ecommerce .fh-fv.fh-hand { font-size: var(--s-disp); line-height: 1; color: var(--fh-fir); }
.b-ecommerce .fh-fv--name { font-size: var(--s-lead); font-weight: 600; line-height: 1.25; padding: 18px 22px; background: var(--fh-label); border-radius: 4px; display: inline-block; }
.b-ecommerce .fh-fv--big { font-size: var(--s-disp); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.b-ecommerce .fh-fv--big span { font-size: var(--s-lead); font-weight: 500; letter-spacing: -.01em; }
.b-ecommerce .fh-fv--rec { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px 28px; padding: 20px 24px; background: var(--fh-deep); color: var(--fh-on-deep); border-radius: 4px; }
.b-ecommerce .fh-fv--rec dt { font-size: 14px; color: var(--fh-on-deep-2); } .b-ecommerce .fh-fv--rec dd { margin: 0; font-size: var(--s-lead); font-weight: 600; }

/* home: taste wheel */
.b-ecommerce .fh-taste { margin-top: var(--gap); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: center; padding: clamp(48px, 7vw, 112px) var(--m); background: var(--fh-kraft); }
.b-ecommerce .fh-taste__p { max-width: 40ch; }
.b-ecommerce .fh-taste__list { display: grid; gap: 6px; margin: 26px 0 10px; }
.b-ecommerce .fh-wheel svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.b-ecommerce .fh-wheel__seg { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; transition: transform 240ms var(--ease); }
.b-ecommerce .fh-wheel__seg path { fill: var(--c); transition: fill 200ms ease; }
.b-ecommerce .fh-wheel__seg text { fill: var(--fh-ink); font: 600 var(--s-body) var(--b-t); letter-spacing: -.01em; pointer-events: none; }
.b-ecommerce .fh-wheel__seg .fh-wheel__and { font-weight: 400; font-size: var(--s-small); }
.b-ecommerce .fh-wheel__seg:hover { transform: scale(1.025); }
.b-ecommerce .fh-wheel__seg:focus-visible path { stroke: var(--fh-fir); stroke-width: 4px; }
.b-ecommerce .fh-wheel__seg[aria-pressed="true"] path { fill: var(--fh-deep); }
.b-ecommerce .fh-wheel__seg[aria-pressed="true"] text { fill: var(--fh-on-deep); }
.b-ecommerce .fh-wheel__hub { fill: var(--fh-paper); }
.b-ecommerce .fh-wheel__n { font: 600 54px var(--b-d); letter-spacing: -.04em; fill: var(--fh-ink); }
.b-ecommerce .fh-wheel__l { font: 400 var(--s-body) var(--b-t); fill: var(--fh-muted); }

/* product rows */
.b-ecommerce .fh-prod { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.b-ecommerce .fh-prod[hidden] { display: none; }
.b-ecommerce .fh-prod__bag { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r); background: var(--fh-panel); transition: transform 240ms var(--ease); }
.b-ecommerce .fh-prod__bag svg { width: 64%; height: auto; transition: transform 300ms var(--ease); }
.b-ecommerce .fh-prod:hover .fh-prod__bag svg { transform: translateY(-4px) rotate(-3deg); }
.b-ecommerce .fh-prod h3 a { text-decoration: none; } .b-ecommerce .fh-prod h3 a:hover { text-decoration: underline; }
.b-ecommerce .fh-prod__o, .b-ecommerce .fh-prod__m { margin: 0; font-size: var(--s-small); color: var(--fh-muted); }
.b-ecommerce .fh-prod__n { margin: 4px 0; }
.b-ecommerce .fh-prod__p { margin: 0; text-align: right; display: grid; }
.b-ecommerce .fh-prod__p b { font-size: var(--s-lead); font-weight: 600; } .b-ecommerce .fh-prod__p span { font-size: 14px; color: var(--fh-muted); }
.b-ecommerce .fh-prod--c { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; }
.b-ecommerce .fh-prod--c .fh-prod__bag { border-radius: 14px; background: var(--fh-paper); }
.b-ecommerce .fh-prod--c h3 { font-size: var(--s-body); }
.b-ecommerce .fh-prod--c .fh-prod__o { display: none; }
.b-ecommerce .fh-prod--c .fh-prod__n { margin: 0; font-size: var(--s-body); }
.b-ecommerce .fh-taste .fh-prod__o, .b-ecommerce .fh-taste .fh-prod__p span { color: #4a433d; }
.b-ecommerce .fh-empty { margin: 16px 0; font-weight: 500; }

/* home: itinerary slip */
.b-ecommerce .fh-slipsec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: clamp(64px, 9vw, 140px) var(--m) clamp(80px, 10vw, 160px); background: var(--fh-deep); color: var(--fh-on-deep); }
.b-ecommerce .fh-slipsec__h { grid-column: 1 / 6; }
.b-ecommerce .fh-slipsec__h h2 { color: var(--fh-on-deep); font-size: var(--s-disp); }
.b-ecommerce .fh-slipsec__h p { max-width: 32ch; font-size: var(--s-lead); line-height: 1.4; color: var(--fh-on-deep); }
.b-ecommerce .fh-slip { grid-column: 7 / 12; max-width: 480px; width: 100%; justify-self: start; padding: 30px 32px 64px; background: var(--fh-label); color: var(--fh-ink); font-size: var(--s-body); clip-path: polygon(0 0, 100% 0, 100.000% calc(100% - 10px), 98.333% 100%, 96.667% calc(100% - 10px), 95.000% 100%, 93.333% calc(100% - 10px), 91.667% 100%, 90.000% calc(100% - 10px), 88.333% 100%, 86.667% calc(100% - 10px), 85.000% 100%, 83.333% calc(100% - 10px), 81.667% 100%, 80.000% calc(100% - 10px), 78.333% 100%, 76.667% calc(100% - 10px), 75.000% 100%, 73.333% calc(100% - 10px), 71.667% 100%, 70.000% calc(100% - 10px), 68.333% 100%, 66.667% calc(100% - 10px), 65.000% 100%, 63.333% calc(100% - 10px), 61.667% 100%, 60.000% calc(100% - 10px), 58.333% 100%, 56.667% calc(100% - 10px), 55.000% 100%, 53.333% calc(100% - 10px), 51.667% 100%, 50.000% calc(100% - 10px), 48.333% 100%, 46.667% calc(100% - 10px), 45.000% 100%, 43.333% calc(100% - 10px), 41.667% 100%, 40.000% calc(100% - 10px), 38.333% 100%, 36.667% calc(100% - 10px), 35.000% 100%, 33.333% calc(100% - 10px), 31.667% 100%, 30.000% calc(100% - 10px), 28.333% 100%, 26.667% calc(100% - 10px), 25.000% 100%, 23.333% calc(100% - 10px), 21.667% 100%, 20.000% calc(100% - 10px), 18.333% 100%, 16.667% calc(100% - 10px), 15.000% 100%, 13.333% calc(100% - 10px), 11.667% 100%, 10.000% calc(100% - 10px), 8.333% 100%, 6.667% calc(100% - 10px), 5.000% 100%, 3.333% calc(100% - 10px), 1.667% 100%, 0 calc(100% - 10px)); }
.b-ecommerce .fh-slip__t { font-weight: 600; margin: 0 0 6px; }
.b-ecommerce .fh-slip__g { font-weight: 700; margin: 26px 0 8px; }
.b-ecommerce .fh-slip__r { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.b-ecommerce .fh-slip__r i { flex: 1; min-width: 20px; height: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='4'%3E%3Ccircle cx='2' cy='2' r='2' fill='%237d746b'/%3E%3C/svg%3E") repeat-x; }
.b-ecommerce .fh-slip__r span:last-child { white-space: nowrap; color: var(--fh-muted); }
.b-ecommerce .fh-slip__end { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 48px; margin: 28px -32px 0; padding: 0 32px; background: var(--fh-ink); color: var(--fh-label); font-weight: 600; }

/* home: brew list, sticky picture and active rows */
.b-ecommerce .fh-al { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-al__pic { grid-column: 1 / 6; position: sticky; top: 12vh; align-self: start; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--fh-kraft); }
.b-ecommerce .fh-al__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 400ms ease, transform 900ms var(--soft); }
.b-ecommerce .fh-al__pic img.is-on { opacity: 1; transform: none; }
.b-ecommerce .fh-al__t { grid-column: 7 / 12; padding-top: 4vh; }
.b-ecommerce .fh-al__t h2 { margin-bottom: 40px; }
.b-ecommerce .fh-al__list { list-style: none; margin: 0 0 24px; padding: 0; }
.b-ecommerce .fh-al__row { width: 100%; min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0; border: 0; background: none; font: 500 var(--s-lead) var(--b-t); letter-spacing: -.02em; color: var(--fh-muted); cursor: pointer; text-align: left; transition: color 200ms ease, transform 240ms var(--ease); }
.b-ecommerce .fh-al__row span:last-child { font-size: var(--s-body); font-weight: 500; letter-spacing: 0; }
.b-ecommerce .fh-al__row:hover { color: var(--fh-ink); transform: translateX(6px); }
.b-ecommerce .fh-al__row[aria-expanded="true"] { color: var(--fh-ink); font-weight: 600; }
.b-ecommerce .fh-al__row[aria-expanded="true"] span:last-child { color: var(--fh-fir); }
.b-ecommerce .fh-al__d { display: none; max-width: 40ch; margin: 0 0 18px; font-size: var(--s-body); }
.b-ecommerce .fh-al__row[aria-expanded="true"] + .fh-al__d { display: block; animation: fhRise 360ms var(--ease); }
@keyframes fhRise { from { opacity: 0; transform: translateY(8px); } }

/* menu-style prices */
.b-ecommerce .fh-menu-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-menu-sec__h { grid-column: 1 / 4; }
.b-ecommerce .fh-menu-sec__h img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); margin: 8px 0 18px; }
.b-ecommerce .fh-menu-sec__h p { font-size: var(--s-body); color: var(--fh-muted); }
.b-ecommerce .fh-menu-sec__l { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.b-ecommerce .fh-menu-sec ul, .b-ecommerce .fh-gift__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.b-ecommerce .fh-menu__g { font-size: var(--s-lead); font-weight: 500; letter-spacing: -.02em; margin: 0 0 24px; }
.b-ecommerce .fh-menu__r { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-size: var(--s-body); font-weight: 500; }
.b-ecommerce .fh-menu__d { margin: 2px 0 0; font-size: var(--s-body); color: var(--fh-muted); max-width: 36ch; }

/* founder's letter */
.b-ecommerce .fh-letter { margin-top: var(--gap); padding: clamp(80px, 11vw, 170px) var(--m); background: var(--fh-kraft); display: grid; justify-items: center; }
.b-ecommerce .fh-letter__sheet { width: min(640px, 100%); padding: 60px 60px 40px; background: var(--fh-label); font-size: var(--s-body); line-height: 1.6; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 99.306% calc(100% - 6.00px), 98.611% calc(100% - 1.61px), 97.917% calc(100% - 0.00px), 97.222% calc(100% - 1.61px), 96.528% calc(100% - 6.00px), 95.833% calc(100% - 12.00px), 95.139% calc(100% - 6.00px), 94.444% calc(100% - 1.61px), 93.750% calc(100% - 0.00px), 93.056% calc(100% - 1.61px), 92.361% calc(100% - 6.00px), 91.667% calc(100% - 12.00px), 90.972% calc(100% - 6.00px), 90.278% calc(100% - 1.61px), 89.583% calc(100% - 0.00px), 88.889% calc(100% - 1.61px), 88.194% calc(100% - 6.00px), 87.500% calc(100% - 12.00px), 86.806% calc(100% - 6.00px), 86.111% calc(100% - 1.61px), 85.417% calc(100% - 0.00px), 84.722% calc(100% - 1.61px), 84.028% calc(100% - 6.00px), 83.333% calc(100% - 12.00px), 82.639% calc(100% - 6.00px), 81.944% calc(100% - 1.61px), 81.250% calc(100% - 0.00px), 80.556% calc(100% - 1.61px), 79.861% calc(100% - 6.00px), 79.167% calc(100% - 12.00px), 78.472% calc(100% - 6.00px), 77.778% calc(100% - 1.61px), 77.083% calc(100% - 0.00px), 76.389% calc(100% - 1.61px), 75.694% calc(100% - 6.00px), 75.000% calc(100% - 12.00px), 74.306% calc(100% - 6.00px), 73.611% calc(100% - 1.61px), 72.917% calc(100% - 0.00px), 72.222% calc(100% - 1.61px), 71.528% calc(100% - 6.00px), 70.833% calc(100% - 12.00px), 70.139% calc(100% - 6.00px), 69.444% calc(100% - 1.61px), 68.750% calc(100% - 0.00px), 68.056% calc(100% - 1.61px), 67.361% calc(100% - 6.00px), 66.667% calc(100% - 12.00px), 65.972% calc(100% - 6.00px), 65.278% calc(100% - 1.61px), 64.583% calc(100% - 0.00px), 63.889% calc(100% - 1.61px), 63.194% calc(100% - 6.00px), 62.500% calc(100% - 12.00px), 61.806% calc(100% - 6.00px), 61.111% calc(100% - 1.61px), 60.417% calc(100% - 0.00px), 59.722% calc(100% - 1.61px), 59.028% calc(100% - 6.00px), 58.333% calc(100% - 12.00px), 57.639% calc(100% - 6.00px), 56.944% calc(100% - 1.61px), 56.250% calc(100% - 0.00px), 55.556% calc(100% - 1.61px), 54.861% calc(100% - 6.00px), 54.167% calc(100% - 12.00px), 53.472% calc(100% - 6.00px), 52.778% calc(100% - 1.61px), 52.083% calc(100% - 0.00px), 51.389% calc(100% - 1.61px), 50.694% calc(100% - 6.00px), 50.000% calc(100% - 12.00px), 49.306% calc(100% - 6.00px), 48.611% calc(100% - 1.61px), 47.917% calc(100% - 0.00px), 47.222% calc(100% - 1.61px), 46.528% calc(100% - 6.00px), 45.833% calc(100% - 12.00px), 45.139% calc(100% - 6.00px), 44.444% calc(100% - 1.61px), 43.750% calc(100% - 0.00px), 43.056% calc(100% - 1.61px), 42.361% calc(100% - 6.00px), 41.667% calc(100% - 12.00px), 40.972% calc(100% - 6.00px), 40.278% calc(100% - 1.61px), 39.583% calc(100% - 0.00px), 38.889% calc(100% - 1.61px), 38.194% calc(100% - 6.00px), 37.500% calc(100% - 12.00px), 36.806% calc(100% - 6.00px), 36.111% calc(100% - 1.61px), 35.417% calc(100% - 0.00px), 34.722% calc(100% - 1.61px), 34.028% calc(100% - 6.00px), 33.333% calc(100% - 12.00px), 32.639% calc(100% - 6.00px), 31.944% calc(100% - 1.61px), 31.250% calc(100% - 0.00px), 30.556% calc(100% - 1.61px), 29.861% calc(100% - 6.00px), 29.167% calc(100% - 12.00px), 28.472% calc(100% - 6.00px), 27.778% calc(100% - 1.61px), 27.083% calc(100% - 0.00px), 26.389% calc(100% - 1.61px), 25.694% calc(100% - 6.00px), 25.000% calc(100% - 12.00px), 24.306% calc(100% - 6.00px), 23.611% calc(100% - 1.61px), 22.917% calc(100% - 0.00px), 22.222% calc(100% - 1.61px), 21.528% calc(100% - 6.00px), 20.833% calc(100% - 12.00px), 20.139% calc(100% - 6.00px), 19.444% calc(100% - 1.61px), 18.750% calc(100% - 0.00px), 18.056% calc(100% - 1.61px), 17.361% calc(100% - 6.00px), 16.667% calc(100% - 12.00px), 15.972% calc(100% - 6.00px), 15.278% calc(100% - 1.61px), 14.583% calc(100% - 0.00px), 13.889% calc(100% - 1.61px), 13.194% calc(100% - 6.00px), 12.500% calc(100% - 12.00px), 11.806% calc(100% - 6.00px), 11.111% calc(100% - 1.61px), 10.417% calc(100% - 0.00px), 9.722% calc(100% - 1.61px), 9.028% calc(100% - 6.00px), 8.333% calc(100% - 12.00px), 7.639% calc(100% - 6.00px), 6.944% calc(100% - 1.61px), 6.250% calc(100% - 0.00px), 5.556% calc(100% - 1.61px), 4.861% calc(100% - 6.00px), 4.167% calc(100% - 12.00px), 3.472% calc(100% - 6.00px), 2.778% calc(100% - 1.61px), 2.083% calc(100% - 0.00px), 1.389% calc(100% - 1.61px), 0.694% calc(100% - 6.00px), 0.000% calc(100% - 12.00px)); padding-bottom: 52px; }
.b-ecommerce .fh-letter__face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-bottom: 28px; }
.b-ecommerce .fh-letter__sig { font-family: var(--fh-hand); font-size: var(--s-lead); font-weight: 600; margin: 28px 0 0; line-height: 1; }
.b-ecommerce .fh-letter__role { font-size: 14px; color: var(--fh-muted); }
.b-ecommerce .fh-letter__tear { margin: 30px -60px 0; padding: 30px 60px 0; min-height: 72px; font-weight: 600; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Ccircle cx='3' cy='3' r='2.5' fill='%23b5a891'/%3E%3C/svg%3E") repeat-x 0 0; }

/* questions beside a tall photograph */
.b-ecommerce .fh-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 0 var(--m) 80px; margin-top: calc(var(--gap) + 80px); background: var(--fh-mist); }
.b-ecommerce .fh-faq__t { grid-column: 1 / 6; padding-top: clamp(64px, 7vw, 112px); }
.b-ecommerce .fh-faq__facts { list-style: none; padding: 0; margin: 0 0 36px; display: grid; gap: 6px; font-size: var(--s-body); font-weight: 500; }
.b-ecommerce .fh-q { padding: 0 0 26px; }
.b-ecommerce .fh-q summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; font-size: var(--s-body); font-weight: 600; letter-spacing: -.015em; cursor: pointer; }
.b-ecommerce .fh-q summary::-webkit-details-marker { display: none; }
.b-ecommerce .fh-q summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 300ms var(--ease); }
.b-ecommerce .fh-q[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.b-ecommerce .fh-q p { margin: 8px 0 0; font-size: var(--s-body); color: #4a4540; max-width: 44ch; }
.b-ecommerce .fh-q[open] p { animation: fhRise 300ms var(--ease); }
.b-ecommerce .fh-faq__pics { grid-column: 7 / 13; position: relative; margin-top: -80px; }
.b-ecommerce .fh-faq__tall { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); }
.b-ecommerce .fh-faq__sq { position: absolute; left: -40px; bottom: -40px; width: 34%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); }

/* footer: the name returns, then one quiet line */
.b-ecommerce .fh-foot { padding: var(--gap) var(--m) 28px; }
.b-ecommerce .fh-foot__name { display: flex; align-items: center; gap: .2em; font: 700 clamp(52px, 13.4vw, 200px)/.9 var(--b-d); letter-spacing: -.055em; text-decoration: none; color: var(--fh-ink); padding-bottom: .06em; }
.b-ecommerce .fh-foot__name .fh-logo__mark { width: .95em; height: .75em; }
.b-ecommerce .fh-foot__line { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px 24px; align-items: center; margin-top: 40px; font-size: var(--s-small); color: var(--fh-muted); }
.b-ecommerce .fh-foot__line p { margin: 0; } .b-ecommerce .fh-foot__line p:last-child { text-align: right; }
.b-ecommerce .fh-foot__line nav { display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: center; }
.b-ecommerce .fh-foot__line a { color: var(--fh-ink); display: inline-block; padding: 10px 0; }

/* inner pages: page head */
.b-ecommerce .fh-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px; padding: 0 12px; }
.b-ecommerce .fh-head__t { padding: clamp(40px, 6vw, 96px) clamp(16px, 3vw, 48px); border-radius: var(--r); background: var(--fh-panel); display: grid; align-content: end; }
.b-ecommerce .fh-head__t p { max-width: 46ch; font-size: var(--s-lead); line-height: 1.4; }
.b-ecommerce .fh-head__s { font-size: var(--s-body) !important; margin: 0; }
.b-ecommerce .fh-head__s .fh-hand { font-size: var(--s-lead); color: var(--fh-fir); }
.b-ecommerce .fh-head > img { width: 100%; height: 100%; min-height: 360px; max-height: 70svh; object-fit: cover; border-radius: var(--r); }
.b-ecommerce .fh-idx { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.b-ecommerce .fh-idx a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--fh-paper); text-decoration: none; font-weight: 500; font-size: var(--s-small); transition: background-color 180ms ease; }
.b-ecommerce .fh-idx a:hover { background: var(--fh-kraft); }

/* shop */
.b-ecommerce .fh-shop { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); padding: clamp(56px, 7vw, 112px) var(--m) 0; }
.b-ecommerce .fh-shop__side { position: sticky; top: 16px; align-self: start; }
.b-ecommerce .fh-shop__side .fh-wheel { margin-bottom: 28px; }
.b-ecommerce .fh-shop__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.b-ecommerce .fh-shop__bar p { margin: 0; font-weight: 600; font-size: var(--s-lead); }
.b-ecommerce .fh-shop__famtxt { color: var(--fh-muted); }
.b-ecommerce .fh-shop__list { display: grid; gap: 30px; }
.b-ecommerce .fh-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; margin-top: var(--gap); padding: clamp(40px, 5vw, 72px) var(--m); background: var(--fh-deep); color: var(--fh-on-deep); }
.b-ecommerce .fh-band img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.b-ecommerce .fh-band h2 { color: var(--fh-on-deep); } .b-ecommerce .fh-band p { max-width: 42ch; font-size: var(--s-lead); line-height: 1.4; }
.b-ecommerce .fh-ship { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-ship__dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; }
.b-ecommerce .fh-ship__dl dt { font-weight: 600; font-size: var(--s-body); margin-bottom: 6px; } .b-ecommerce .fh-ship__dl dd { margin: 0; }

/* product page */
.b-ecommerce .fh-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px; }
.b-ecommerce .fh-pdp__stage { position: sticky; top: 12px; height: calc(100svh - 24px); align-self: start; border-radius: var(--r); overflow: hidden; background: var(--fh-kraft); }
.b-ecommerce .fh-pdp__stage .p3d { height: 100%; aspect-ratio: auto; }
.b-ecommerce .p3d__hint { font-family: var(--b-t); background: rgba(35, 42, 32, .82); }
.b-ecommerce .fh-pdp__read { padding: clamp(28px, 4vw, 64px) clamp(16px, 4vw, 72px); max-width: 680px; }
.b-ecommerce .fh-crumb { font-size: var(--s-small); color: var(--fh-muted); }
.b-ecommerce .fh-crumb a { color: var(--fh-ink); }
.b-ecommerce .fh-pdp__read h1 { margin-bottom: 6px; }
.b-ecommerce .fh-pdp__o { font-size: var(--s-lead); font-weight: 500; margin-bottom: 18px; }
.b-ecommerce .fh-pdp__date { font-size: var(--s-body); } .b-ecommerce .fh-pdp__date .fh-hand { font-size: var(--s-lead); color: var(--fh-fir); }
.b-ecommerce .fh-buy { margin: 30px 0 0; padding: 26px; border-radius: var(--r); background: var(--fh-panel); }
.b-ecommerce .fh-buy .fh-chip { background: var(--fh-paper); } .b-ecommerce .fh-buy .fh-chip:hover { background: var(--fh-kraft); } .b-ecommerce .fh-buy .fh-chip[aria-pressed="true"] { background: var(--fh-fir); }
.b-ecommerce .fh-buy__opts { display: grid; gap: 8px; }
.b-ecommerce .fh-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--fh-paper); cursor: pointer; transition: background-color 180ms ease; }
.b-ecommerce .fh-opt:has(input:checked) { background: var(--fh-label); outline: 2px solid var(--fh-fir); outline-offset: -2px; }
.b-ecommerce .fh-opt input { width: 22px; height: 22px; accent-color: var(--fh-fir); margin: 0; }
.b-ecommerce .fh-opt b { display: block; font-weight: 600; } .b-ecommerce .fh-opt small { display: block; font-size: 14px; color: var(--fh-muted); }
.b-ecommerce .fh-opt em { font-style: normal; font-weight: 600; font-size: var(--s-body); }
.b-ecommerce .fh-buy .fh-row { margin-top: 18px; }
.b-ecommerce .fh-buy__done { margin: 14px 0 0; font-weight: 500; }
.b-ecommerce .fh-pdp__sec { margin-top: clamp(64px, 8vw, 120px); }
.b-ecommerce .fh-pdp__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-bottom: 24px; }
.b-ecommerce .fh-taste2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.b-ecommerce .fh-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.b-ecommerce .fh-notes li { display: flex; align-items: center; gap: 14px; font-size: var(--s-lead); font-weight: 600; letter-spacing: -.02em; }
.b-ecommerce .fh-notes li::before { content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--c); flex: none; }
.b-ecommerce .fh-prof { display: grid; gap: 12px; }
.b-ecommerce .fh-prof__r { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 12px; font-size: var(--s-body); }
.b-ecommerce .fh-prof__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.b-ecommerce .fh-prof__bar i { height: 12px; border-radius: 3px; background: var(--fh-panel); }
.b-ecommerce .fh-prof__bar i.on { background: var(--fh-fir); }
.b-ecommerce .fh-facts { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: var(--s-body); }
.b-ecommerce .fh-facts th, .b-ecommerce .fh-facts td { text-align: left; vertical-align: top; padding: 10px 0; }
.b-ecommerce .fh-facts th { width: 38%; font-weight: 500; color: var(--fh-muted); padding-right: 16px; }
.b-ecommerce .fh-facts tr + tr th, .b-ecommerce .fh-facts tr + tr td { border-top: 1px solid var(--fh-panel); }
.b-ecommerce .fh-pdp-more { padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-pdp-more__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.b-ecommerce .fh-pdp-more .fh-prod { grid-template-columns: 1fr; gap: 14px; align-items: start; }
.b-ecommerce .fh-pdp-more .fh-prod__p { text-align: left; }

/* brew ratio scaler */
.b-ecommerce .fh-brew { padding: 24px; border-radius: var(--r); background: var(--fh-panel); }
.b-ecommerce .fh-brew .fh-chip { background: var(--fh-paper); } .b-ecommerce .fh-brew .fh-chip:hover { background: var(--fh-kraft); } .b-ecommerce .fh-brew .fh-chip[aria-pressed="true"] { background: var(--fh-fir); }
.b-ecommerce .fh-brew .fh-step button { background: var(--fh-paper); }
.b-ecommerce .fh-brew__row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin: 24px 0 18px; }
.b-ecommerce .fh-brew__dl { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0; }
.b-ecommerce .fh-brew__dl dt, .b-ecommerce .fh-brew__dl2 dt { font-size: 14px; color: var(--fh-muted); }
.b-ecommerce .fh-brew__dl dd { margin: 0; font-size: var(--s-head); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.b-ecommerce .fh-brew__dl2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.b-ecommerce .fh-brew__dl2 dd { margin: 0; font-size: var(--s-body); font-weight: 500; }

/* subscribe */
.b-ecommerce .fh-subhead { padding: clamp(32px, 4vw, 64px) var(--m) 36px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 64px; align-items: end; }
.b-ecommerce .fh-subhead h1 { margin: 0; grid-column: 1 / -1; font-size: clamp(34px, 6.6vw, 108px); letter-spacing: -.045em; line-height: .95; }
.b-ecommerce .fh-subhead__p { grid-column: 2; }
.b-ecommerce .fh-subhead p { margin: 0; font-size: var(--s-lead); line-height: 1.4; max-width: 44ch; }
.b-ecommerce .fh-sigsec { padding: 0 12px; }
.b-ecommerce .fh-cadsec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); margin-top: var(--gap); padding: clamp(56px, 7vw, 112px) var(--m); background: var(--fh-deep); color: var(--fh-on-deep); }
.b-ecommerce .fh-cadsec h2 { color: var(--fh-on-deep); }
.b-ecommerce .fh-cadsec__h p { max-width: 38ch; }
.b-ecommerce .fh-cadsec__h img, .b-ecommerce .fh-terms img { width: 100%; max-width: 380px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); margin-top: 28px; }
.b-ecommerce .fh-gift { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 112px); padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-gift__pics { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.b-ecommerce .fh-gift__h img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-top: 16px; }
.b-ecommerce .fh-gift__l { margin-bottom: 28px !important; }
.b-ecommerce .fh-gift__l .fh-menu__r { font-size: var(--s-lead); }
.b-ecommerce .fh-gift__p { max-width: 46ch; }
.b-ecommerce .fh-terms { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-terms__b { padding: clamp(24px, 3vw, 44px); border-radius: var(--r); background: var(--fh-panel); max-width: 760px; }
.b-ecommerce .fh-terms__b p:last-child { margin: 0; }

/* the signature: coffee match into subscription builder */
.b-ecommerce .fh-match { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px; align-items: start; text-align: left; }
.b-ecommerce .fh-match__stage { position: sticky; top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; align-items: center; padding: 18px; border-radius: var(--r); background: var(--fh-kraft); }
.b-ecommerce .fh-match__stage .p3d { width: 100%; aspect-ratio: auto; height: min(50svh, 500px); border-radius: 14px; overflow: hidden; background: var(--fh-panel); }
.b-ecommerce .fh-match__stage .p3d__poster { object-fit: cover; height: 100%; }
.b-ecommerce .fh-match__stage .fh-label { width: 100%; max-width: 420px; }
.b-ecommerce .p3d__hint { white-space: nowrap; }
.b-ecommerce .fh-label { background: var(--fh-label); border-radius: 4px; padding: 0 18px 18px; color: var(--fh-ink); transition: transform 300ms var(--ease); }
.b-ecommerce .fh-label.is-print { animation: fhPrint 520ms var(--ease); }
@keyframes fhPrint { 0% { transform: translateY(0); } 30% { transform: translateY(-6px) rotate(-1deg); } 100% { transform: none; } }
.b-ecommerce .fh-label__band { margin: 0 -18px 14px; padding: 9px 18px; background: var(--lc, var(--fh-fir)); color: #fff; font-size: 14px; font-weight: 600; border-radius: 4px 4px 0 0; transition: background-color 400ms ease; }
.b-ecommerce .fh-label__name { font-size: var(--s-lead); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 6px; }
.b-ecommerce .fh-label__o { font-size: 14px; margin: 0 0 10px; color: var(--fh-muted); }
.b-ecommerce .fh-label__n { font-size: var(--s-small); font-weight: 500; margin: 0 0 12px; }
.b-ecommerce .fh-label__roast { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 10px; }
.b-ecommerce .fh-label__lvl { height: 8px; border-radius: 4px; background: var(--fh-panel); overflow: hidden; }
.b-ecommerce .fh-label__lvl i { display: block; height: 100%; width: var(--lvl, 50%); background: #6b4a33; border-radius: 4px; transition: width 500ms var(--ease); }
.b-ecommerce .fh-label__g { font-size: 14px; margin: 0 0 8px; }
.b-ecommerce .fh-label__d { margin: 0; font-size: 14px; } .b-ecommerce .fh-label__d .fh-hand { font-size: var(--s-lead); color: var(--fh-fir); line-height: 1; }
.b-ecommerce .fh-match__panel { padding: clamp(22px, 3.4vw, 52px); border-radius: var(--r); background: var(--fh-panel); min-height: 560px; }
.b-ecommerce .fh-match__fb { font-size: var(--s-lead); }
.b-ecommerce .fh-qz__top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-size: var(--s-small); color: var(--fh-muted); }
.b-ecommerce .fh-qz__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--fh-paper); overflow: hidden; }
.b-ecommerce .fh-qz__bar i { display: block; height: 100%; background: var(--fh-fir); transition: width 400ms var(--ease); }
.b-ecommerce .fh-qz__q { font-size: var(--s-head); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 22px; text-wrap: balance; }
.b-ecommerce .fh-qz__o { display: grid; gap: 8px; }
.b-ecommerce .fh-qz__opt { min-height: 56px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--fh-paper); color: var(--fh-ink); font: 500 var(--s-body) var(--b-t); text-align: left; cursor: pointer; transition: background-color 180ms ease, transform 160ms var(--ease); }
.b-ecommerce .fh-qz__opt:hover { background: var(--fh-label); transform: translateX(4px); }
.b-ecommerce .fh-qz__opt:active { transform: scale(.98); }
.b-ecommerce .fh-qz__opt[aria-pressed="true"] { background: var(--fh-fir); color: #fff; }
.b-ecommerce .fh-qz__step { animation: fhRise 360ms var(--ease); }
.b-ecommerce .fh-qz__back { margin-top: 10px; }
.b-ecommerce .fh-match__build .fh-chip { background: var(--fh-paper); } .b-ecommerce .fh-match__build .fh-chip:hover { background: var(--fh-label); } .b-ecommerce .fh-match__build .fh-chip[aria-pressed="true"] { background: var(--fh-fir); color: #fff; }
.b-ecommerce .fh-match__build .fh-step button { background: var(--fh-paper); }
.b-ecommerce .fh-match__build { animation: fhRise 420ms var(--ease); }
.b-ecommerce .fh-match__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin-bottom: 18px; }
.b-ecommerce .fh-match__res { margin: 0; font-size: var(--s-lead); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.b-ecommerce .fh-sum { display: grid; grid-template-columns: auto 1fr; gap: 20px 32px; align-items: center; padding: 22px 24px; margin: 4px 0 18px; border-radius: 14px; background: var(--fh-deep); color: var(--fh-on-deep); }
.b-ecommerce .fh-sum__cup p { margin: 0; }
.b-ecommerce .fh-sum__big { font-size: var(--s-disp); font-weight: 600; letter-spacing: -.045em; line-height: 1 !important; }
.b-ecommerce .fh-sum__dl { margin: 0; display: grid; gap: 8px; font-size: var(--s-small); }
.b-ecommerce .fh-sum__dl div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; }
.b-ecommerce .fh-sum__dl dt { color: var(--fh-on-deep-2); } .b-ecommerce .fh-sum__dl dd { margin: 0; font-weight: 500; }
.b-ecommerce .fh-consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: var(--s-small); line-height: 1.45; cursor: pointer; }
.b-ecommerce .fh-consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--fh-fir); cursor: pointer; }
.b-ecommerce .fh-match__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; }
.b-ecommerce .fh-match__done { margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--fh-paper); font-size: var(--s-small); }

/* cadence calculator (on the deep band) */
.b-ecommerce .fh-cad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.b-ecommerce .fh-cad__k { margin: 0 0 10px; font-weight: 600; }
.b-ecommerce .fh-cad__f { margin-bottom: 26px; }
.b-ecommerce .fh-cad .fh-chip, .b-ecommerce .fh-cad .fh-step button { background: #343d30; color: var(--fh-on-deep); }
.b-ecommerce .fh-cad .fh-chip:hover, .b-ecommerce .fh-cad .fh-step button:hover { background: #46513f; }
.b-ecommerce .fh-cad .fh-chip[aria-pressed="true"] { background: var(--fh-paper); color: var(--fh-ink); }
.b-ecommerce .fh-cad .fh-step output { color: var(--fh-on-deep); }
.b-ecommerce .fh-cad__out { padding: clamp(20px, 3vw, 36px); border-radius: var(--r); background: #2e372a; }
.b-ecommerce .fh-cad__big { font-size: var(--s-head); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 12px; color: #fff; }
.b-ecommerce .fh-cad__why { font-size: var(--s-body); color: var(--fh-on-deep); max-width: 46ch; }
.b-ecommerce .fh-cad__cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; max-width: 420px; margin: 20px 0 12px; }
.b-ecommerce .fh-cad__cal i { aspect-ratio: 1; border-radius: 5px; background: #46503f; transition: background-color 300ms ease, transform 300ms var(--ease); }
.b-ecommerce .fh-cad__cal i.on { background: #a9b897; }
.b-ecommerce .fh-cad__cal i.arr { background: var(--fh-paper); transform: scale(.86); border-radius: 50%; }
.b-ecommerce .fh-cad__leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--fh-on-deep-2); margin-bottom: 22px; }
.b-ecommerce .fh-cad__sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: #46503f; }
.b-ecommerce .fh-cad__sw--on { background: #a9b897; } .b-ecommerce .fh-cad__sw--a { background: var(--fh-paper); border-radius: 50%; }

/* brew guides page */
.b-ecommerce .fh-scaler { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-guides { padding: var(--gap) var(--m) 0; display: grid; gap: clamp(64px, 8vw, 128px); }
.b-ecommerce .fh-guide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; scroll-margin-top: 20px; }
.b-ecommerce .fh-guide:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.b-ecommerce .fh-guide:nth-child(even) img { order: 2; }
.b-ecommerce .fh-guide img { width: 100%; aspect-ratio: 4 / 5; max-height: 640px; object-fit: cover; border-radius: var(--r); }
.b-ecommerce .fh-guide__r { font-size: var(--s-disp); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--fh-fir); margin: 0 0 22px; }
.b-ecommerce .fh-guide ol { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; max-width: 48ch; }
.b-ecommerce .fh-guide li::marker { font-weight: 600; color: var(--fh-fir); }
.b-ecommerce .fh-grind { margin-top: var(--gap); padding: clamp(56px, 7vw, 112px) var(--m); background: var(--fh-kraft); }
.b-ecommerce .fh-grind__l { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.b-ecommerce .fh-grind__l svg { width: 100%; max-width: 140px; height: auto; fill: #5a3b2c; margin-bottom: 14px; }
.b-ecommerce .fh-grind__l b { display: block; font-size: var(--s-body); } .b-ecommerce .fh-grind__l span { font-size: var(--s-small); color: #4a433d; }
.b-ecommerce .fh-fix { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-fixt, .b-ecommerce .fh-wst, .b-ecommerce .fh-srctab { width: 100%; border-collapse: collapse; font-size: var(--s-body); }
.b-ecommerce .fh-fixt th, .b-ecommerce .fh-fixt td, .b-ecommerce .fh-wst th, .b-ecommerce .fh-wst td, .b-ecommerce .fh-srctab th, .b-ecommerce .fh-srctab td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; }
.b-ecommerce thead th { font-size: 14px; font-weight: 600; color: var(--fh-muted); }
.b-ecommerce tbody tr { border-top: 1px solid #d6cfc3; }
.b-ecommerce tbody th { font-weight: 600; }

/* wholesale */
.b-ecommerce .fh-ws { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; padding: 0 12px; }
.b-ecommerce .fh-ws__t { padding: clamp(40px, 5vw, 80px) clamp(16px, 3vw, 48px); border-radius: var(--r); background: var(--fh-panel); display: grid; align-content: end; }
.b-ecommerce .fh-ws__t p { font-size: var(--s-lead); line-height: 1.4; max-width: 40ch; }
.b-ecommerce .fh-ws > img { width: 100%; height: 100%; min-height: 380px; max-height: 76svh; object-fit: cover; border-radius: var(--r); }
.b-ecommerce .fh-wsprice { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-wst td { font-size: var(--s-lead); font-weight: 500; }
.b-ecommerce .fh-wsget { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: center; margin-top: var(--gap); padding: clamp(48px, 6vw, 96px) var(--m); background: var(--fh-mist); }
.b-ecommerce .fh-wsget img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.b-ecommerce .fh-wsget__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.b-ecommerce .fh-wsget__l b { display: block; font-size: var(--s-body); } .b-ecommerce .fh-wsget__l span { color: #4a4540; }
.b-ecommerce .fh-reorder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: center; padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-reorder__t p { max-width: 42ch; font-size: var(--s-lead); line-height: 1.4; }
.b-ecommerce .fh-portal { padding: 22px; border-radius: 14px; background: #fff; border: 1px solid #d6cfc3; font-size: var(--s-body); } /* taste-skill-ignore: data-ui interface fragment */
.b-ecommerce .fh-portal__h { font-weight: 600; margin: 0 0 12px; }
.b-ecommerce .fh-portal__r { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #e6e0d6; } /* taste-skill-ignore: data-ui interface fragment */
.b-ecommerce .fh-portal__r--t { font-weight: 600; border-top: 2px solid var(--fh-ink); }
.b-ecommerce .fh-portal__n { margin: 10px 0 0; font-size: 14px; color: var(--fh-muted); }
.b-ecommerce .fh-apply { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: clamp(22px, 3vw, 40px); border-radius: var(--r); background: var(--fh-panel); }
.b-ecommerce .fh-form label { display: grid; gap: 6px; font-weight: 600; font-size: var(--s-small); }
.b-ecommerce .fh-form input, .b-ecommerce .fh-form select { font: 400 var(--s-body) var(--b-t); min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #c4baa9; background: var(--fh-label); color: var(--fh-ink); }
.b-ecommerce .fh-form input:focus-visible, .b-ecommerce .fh-form select:focus-visible { border-color: var(--fh-fir); outline: 3px solid rgba(77, 92, 69, .35); outline-offset: 1px; }
.b-ecommerce .fh-form input[aria-invalid="true"] { border-color: #a8321e; }
.b-ecommerce .fh-form .fh-btn { align-self: end; }
.b-ecommerce .fh-form__s { grid-column: 1 / -1; margin: 0; font-weight: 500; }

/* sourcing report */
.b-ecommerce .fh-src { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 12px; padding: 0 12px; }
.b-ecommerce .fh-src__t { padding: clamp(40px, 5vw, 80px) clamp(16px, 3vw, 48px); border-radius: var(--r); background: var(--fh-panel); display: grid; align-content: end; }
.b-ecommerce .fh-src__t p { font-size: var(--s-lead); line-height: 1.4; max-width: 44ch; }
.b-ecommerce .fh-src > img { width: 100%; height: 100%; min-height: 380px; max-height: 72svh; object-fit: cover; border-radius: var(--r); }
.b-ecommerce .fh-src-sum { padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-src-sum__p { max-width: 34ch; font-size: var(--s-lead); line-height: 1.3; letter-spacing: -.02em; margin: 0 0 0 calc(100% / 12 * 4); }
.b-ecommerce .fh-srct { padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-srct__n { max-width: 70ch; font-size: var(--s-small); color: var(--fh-muted); margin-top: 18px; }
.b-ecommerce .fh-srctab td:nth-child(5), .b-ecommerce .fh-srctab td:nth-child(6) { white-space: nowrap; font-weight: 600; }
.b-ecommerce .fh-words { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: center; padding: var(--gap) var(--m) 0; }
.b-ecommerce .fh-words img { width: 100%; aspect-ratio: 4 / 5; max-height: 680px; object-fit: cover; border-radius: var(--r); }
.b-ecommerce .fh-words p { max-width: 50ch; }

/* shared engines inside this brand */
.b-ecommerce .dm-chatbtn > button { /* taste-skill-ignore: removes the kit shadow */ box-shadow: none; background: var(--fh-deep); color: var(--fh-on-deep); font-family: var(--b-t); min-height: 48px; transition: transform 140ms var(--ease); }
.b-ecommerce .dm-chatbtn > button:active { transform: scale(.95); }

/* case page wrapper */
.b-ecommerce.wk-sigwrap { background: transparent; }
.b-ecommerce.wk-sigwrap .fh-match__stage { position: static; }

/* reveal variants: pictures settle from scale */
.rv-on .b-ecommerce [data-rv] > img, .rv-on .b-ecommerce[data-rv] > img { transform: scale(1.04); }

/* tablet and phone */
@media (max-width: 1080px) {
  .b-ecommerce .fh-nav { gap: 18px; font-size: var(--s-small); }
  .b-ecommerce .fh-match { grid-template-columns: 1fr; }
  .b-ecommerce .fh-match__stage { position: relative; top: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .b-ecommerce .fh-match__stage .p3d { height: auto; aspect-ratio: 4 / 5; }
  .b-ecommerce .fh-subhead__p { grid-column: 1 / -1; }
  .b-ecommerce .fh-ship__dl { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .b-ecommerce .fh-stage__bar { display: none; }
  .b-ecommerce .fh-nav, .b-ecommerce .fh-bar__cta { display: none; }
  .b-ecommerce .fh-menu { display: block; }
  .b-ecommerce .fh-split, .b-ecommerce .fh-pdp, .b-ecommerce .fh-head, .b-ecommerce .fh-ws, .b-ecommerce .fh-src { grid-template-columns: minmax(0, 1fr); }
  .b-ecommerce .fh-split__stage, .b-ecommerce .fh-pdp__stage { position: relative; top: 0; order: -1; height: 56svh; }
  .b-ecommerce .fh-sheet { min-height: 0; padding: 40px 20px; }
  .b-ecommerce .fh-field { min-height: 0; padding: 64px 8px 0; }
  .b-ecommerce .fh-field__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); margin-bottom: 28px; }
  .b-ecommerce .fh-taste, .b-ecommerce .fh-shop, .b-ecommerce .fh-band, .b-ecommerce .fh-cadsec, .b-ecommerce .fh-cad, .b-ecommerce .fh-gift, .b-ecommerce .fh-terms, .b-ecommerce .fh-scaler, .b-ecommerce .fh-fix, .b-ecommerce .fh-wsprice, .b-ecommerce .fh-wsget, .b-ecommerce .fh-reorder, .b-ecommerce .fh-apply, .b-ecommerce .fh-words, .b-ecommerce .fh-subhead, .b-ecommerce .fh-ship, .b-ecommerce .fh-guide, .b-ecommerce .fh-guide:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .b-ecommerce .fh-guide:nth-child(even) img { order: 0; }
  .b-ecommerce .fh-shop__side { position: static; }
  .b-ecommerce .fh-shop__side .fh-wheel svg, .b-ecommerce .fh-taste .fh-wheel svg { max-width: 420px; }
  .b-ecommerce .fh-slipsec, .b-ecommerce .fh-al, .b-ecommerce .fh-menu-sec, .b-ecommerce .fh-faq { grid-template-columns: minmax(0, 1fr); }
  .b-ecommerce .fh-slipsec__h, .b-ecommerce .fh-slip, .b-ecommerce .fh-al__pic, .b-ecommerce .fh-al__t, .b-ecommerce .fh-menu-sec__h, .b-ecommerce .fh-menu-sec__l, .b-ecommerce .fh-faq__t, .b-ecommerce .fh-faq__pics { grid-column: 1 / -1; }
  .b-ecommerce .fh-slip { max-width: none; }
  .b-ecommerce .fh-al__pic { position: relative; top: 0; aspect-ratio: 4 / 3; }
  .b-ecommerce .fh-al__t { padding-top: 0; }
  .b-ecommerce .fh-menu-sec__h img { width: 60%; }
  .b-ecommerce .fh-faq { margin-top: var(--gap); padding-top: 24px; }
  .b-ecommerce .fh-faq__pics { order: -1; margin-top: 0; }
  .b-ecommerce .fh-faq__tall { aspect-ratio: 4 / 5; }
  .b-ecommerce .fh-faq__sq { left: auto; right: -8px; bottom: -32px; width: 38%; }
  .b-ecommerce .fh-faq__t { padding-top: 48px; }
  .b-ecommerce .fh-pdp-more__l { grid-template-columns: minmax(0, 1fr); }
  .b-ecommerce .fh-pdp-more .fh-prod { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; }
  .b-ecommerce .fh-pdp-more .fh-prod__p { text-align: right; }
  .b-ecommerce .fh-grind__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-ecommerce .fh-src-sum__p { margin-left: 0; }
  .b-ecommerce .fh-foot__line { grid-template-columns: 1fr; gap: 8px; }
  .b-ecommerce .fh-foot__line p:last-child { text-align: left; }
  .b-ecommerce .fh-foot__line nav { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .b-ecommerce { --r: 16px; }
  .b-ecommerce .fh-logo { font-size: 23px; }
  .b-ecommerce .fh-menu-sec__l { grid-template-columns: 1fr; gap: 40px; }
  .b-ecommerce .dm-chatbtn > button { padding: 10px 16px; font-size: var(--s-small); min-height: 44px; }
  .b-ecommerce .fh-menu__r { font-size: var(--s-body); }
  .b-ecommerce .fh-prod { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .b-ecommerce .fh-prod__p { grid-column: 2; text-align: left; display: flex; gap: 8px; align-items: baseline; }
  .b-ecommerce .fh-prod--c { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .b-ecommerce .fh-prod--c .fh-prod__p { grid-column: auto; display: grid; text-align: right; }
  .b-ecommerce .fh-pdp-more .fh-prod { grid-template-columns: 76px minmax(0, 1fr); }
  .b-ecommerce .fh-pdp-more .fh-prod__p { text-align: left; }
  .b-ecommerce .fh-slip { padding: 24px 20px 56px; font-size: var(--s-small); }
  .b-ecommerce .fh-slip__end { margin: 24px -20px 0; padding: 0 20px; }
  .b-ecommerce .fh-letter__sheet { padding: 36px 24px 48px; }
  .b-ecommerce .fh-letter__tear { margin: 26px -24px 0; padding: 26px 24px 0; }
  .b-ecommerce .fh-fv--rec { grid-template-columns: repeat(2, auto); }
  .b-ecommerce .fh-match__stage { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); padding: 12px; gap: 12px; }
  .b-ecommerce .fh-label { padding: 0 12px 12px; } .b-ecommerce .fh-label__band { margin: 0 -12px 10px; padding: 8px 12px; }
  .b-ecommerce .fh-label__o { display: none; } .b-ecommerce .fh-label__n { font-size: 14px; }
  .b-ecommerce .fh-match__panel { padding: 22px 16px; min-height: 0; }
  .b-ecommerce .fh-sum { grid-template-columns: 1fr; padding: 18px; }
  .b-ecommerce .fh-sum__dl div { grid-template-columns: 6.5em 1fr; }
  .b-ecommerce .fh-brew__dl2 { grid-template-columns: 1fr; }
  .b-ecommerce .fh-taste2 { grid-template-columns: 1fr; }
  .b-ecommerce .fh-form { grid-template-columns: 1fr; }
  .b-ecommerce .fh-ship__dl { grid-template-columns: 1fr; }
  .b-ecommerce .fh-grind__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-ecommerce .fh-wst, .b-ecommerce .fh-srctab, .b-ecommerce .fh-fixt, .b-ecommerce .fh-wst tbody, .b-ecommerce .fh-srctab tbody, .b-ecommerce .fh-fixt tbody { display: block; width: 100%; }
  .b-ecommerce .fh-wst thead { display: none; }
  .b-ecommerce .fh-wst tr, .b-ecommerce .fh-srctab tr, .b-ecommerce .fh-fixt tr { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 0; }
  .b-ecommerce .fh-wst th, .b-ecommerce .fh-srctab th, .b-ecommerce .fh-fixt th { grid-column: 1 / -1; padding: 0 0 6px; }
  .b-ecommerce .fh-wst td, .b-ecommerce .fh-srctab td, .b-ecommerce .fh-fixt td { padding: 4px 12px 4px 0; font-size: var(--s-body); white-space: normal !important; }
  .b-ecommerce .fh-wst td::before, .b-ecommerce .fh-srctab td::before, .b-ecommerce .fh-fixt td::before { content: attr(data-l); display: block; font-size: var(--s-small); font-weight: 500; color: var(--fh-muted); }
  .b-ecommerce .fh-srctab thead, .b-ecommerce .fh-fixt thead { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .b-ecommerce *, .b-ecommerce *::before, .b-ecommerce *::after { animation: none !important; transition-duration: 1ms !important; }
}