/** Shopify CDN: Minification failed

Line 1039:174 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:bb-category-trio (INDEX:1) */
/* The band was the worst case of the bug M4 exists to fix: min-height was
   calc(var(--bb-gutter) * 1.05), which is 21px at 360px, holding 20px text —
   and the ≤560 "fix" derived from the same collapsing token, so it was still
   broken at 28px. Both are gone. The band is 56px, full stop. */
.bb-category-trio{background:var(--bb-cream);padding-block:var(--bb-section-y);overflow:hidden;}
/* Rule 11: ONE page ceiling site-wide, --bb-max-content.

   This read Horizon's --page-width, which is `page_width` from theme settings
   plus two margins and resolved to 1360 — 200px wider than the PDP and the
   About page, so a shopper moving from the homepage to a product page watched
   the page narrow under them. --bb-max-content is the hard ceiling Rule 11
   names, and it is now the ceiling on every shell on the site: this section,
   the trust strip, the founder note, both rails, the FAQ, the hero copy, the
   header bar and the footer.

   --page-margin STAYS as the gutter. Only the ceiling changed. Every bb-
   section on the homepage reads the same gutter and they have to line up edge
   for edge; swapping one of them to --bb-gutter would break that. */
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.bb-category-trio__inner{max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);}
.bb-category-trio__heading{margin:0 0 var(--bb-space-lg);font-family:var(--bb-font-display);font-size:var(--bb-t-display-2);font-weight:500;line-height:var(--bb-lh-heading);letter-spacing:var(--bb-ls-tight);text-align:center;text-transform:uppercase;color:var(--bb-emerald);}
.bb-category-trio__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--bb-space-md);}
.bb-category-trio__card{display:block;min-width:0;border-radius:var(--bb-r-card);overflow:hidden;text-decoration:none;background:var(--bb-cream-2);box-shadow:0 var(--bb-space-2xs) var(--bb-space-md) color-mix(in srgb,var(--bb-emerald) 12%,transparent);transition:transform .2s ease,box-shadow .2s ease;}
.bb-category-trio__card:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;}
.bb-category-trio__media{aspect-ratio:4/5;overflow:hidden;background:var(--bb-cream-2);}
.bb-category-trio__image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.bb-category-trio__placeholder{width:100%;height:100%;background:linear-gradient(180deg,var(--bb-cream-2),var(--bb-cream));}
.bb-category-trio__band{position:relative;display:grid;place-items:center;min-height:56px;padding:var(--bb-space-xs) var(--bb-space-md);background:var(--bb-emerald-deep);color:var(--bb-accent-on-dark);}
.bb-category-trio__label{font-family:var(--bb-font-display);font-size:var(--bb-t-display-4);font-weight:500;line-height:var(--bb-lh-tight);text-align:center;color:var(--bb-accent-on-dark);}
.bb-category-trio__arrow{position:absolute;right:var(--bb-space-md);top:50%;transform:translateY(-50%) translateX(calc(var(--bb-space-2xs) * -1));font-family:var(--bb-font-body);font-size:var(--bb-t-body);line-height:1;color:var(--bb-accent-on-dark);opacity:0;transition:opacity .2s ease,transform .2s ease;}
.bb-category-trio__card:hover{transform:translateY(-4px);box-shadow:0 var(--bb-space-sm) var(--bb-space-xl) color-mix(in srgb,var(--bb-emerald) 18%,transparent);}
.bb-category-trio__card:hover .bb-category-trio__image{transform:scale(1.04);}
.bb-category-trio__card:hover .bb-category-trio__arrow{opacity:1;transform:translateY(-50%);}
@media(max-width:900px){.bb-category-trio__grid{grid-template-columns:1fr 1fr;}.bb-category-trio__card:last-child{grid-column:1 / -1;}}
@media(max-width:560px){.bb-category-trio__grid{grid-template-columns:1fr;}.bb-category-trio__card:last-child{grid-column:auto;}}
@media(prefers-reduced-motion:reduce){.bb-category-trio__card,.bb-category-trio__image,.bb-category-trio__arrow{transition:none;}.bb-category-trio__card:hover{transform:none;}.bb-category-trio__card:hover .bb-category-trio__image{transform:none;}}
/* END_SECTION:bb-category-trio */

/* START_SECTION:bb-faq (INDEX:2) */
/* Question padding was calc(var(--bb-gutter) / 2), which is 10px inline at
   360px — the questions were nearly touching the card edge. Everything here
   now comes off the spacing scale, and the answer's inline padding matches the
   question's exactly so the two columns of text line up. */
.bb-faq{background:var(--bb-cream-2);padding-block:var(--bb-section-y);}
/* The intro column was .72fr when it held a two-line heading and a 32rem
   subhead. It now holds an eyebrow and the word "FAQs" — about 120px of
   content in a 436px column at --page-width. Narrowed to .5fr, which gives
   the answers 909px instead of 776px. The 11rem floor still clears the
   heading at the 900px breakpoint, where this collapses to one column. */
/* Rule 11: one page ceiling site-wide — see bb-category-trio. The column note
   above was written against the old 1360 shell. At 1160 the two tracks resolve
   to roughly 337px and 679px, so the answers now read inside --bb-max-read
   rather than 60px past it — the cap made this column better, not tighter. */
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.bb-faq__inner{max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);display:grid;grid-template-columns:minmax(11rem,.5fr) minmax(0,1.5fr);gap:var(--bb-space-2xl);align-items:start;}
.bb-faq__intro{position:sticky;top:var(--bb-space-2xl);}
.bb-faq__eyebrow{margin-bottom:var(--bb-space-sm);font-family:var(--bb-font-body);font-size:var(--bb-t-eyebrow);font-weight:800;letter-spacing:var(--bb-ls-eyebrow);line-height:1;text-transform:uppercase;color:var(--bb-accent-on-light);}
.bb-faq__heading{margin:0;font-family:var(--bb-font-display);font-size:var(--bb-t-display-2);font-weight:500;letter-spacing:var(--bb-ls-tight);line-height:var(--bb-lh-heading);text-transform:uppercase;text-wrap:balance;color:var(--bb-emerald);}
.bb-faq__lead{max-width:32rem;margin-top:var(--bb-space-md);font-family:var(--bb-font-body);font-size:var(--bb-t-lead);line-height:var(--bb-lh-body);color:var(--bb-ink-soft);}
/* DENSITY, 2026-08-14. A closed row was 70px tall (24px of padding above and
   below a 22px line) sitting on a 12px gap, so a 390px phone showed two and a
   half questions. It is now 54px on an 8px gap — a 62px pitch against 82px,
   which is two more questions on the same screen.

   ONLY THE CLOSED ROW MOVED. The question stays at --bb-t-display-4 and the
   answer keeps --bb-t-body / --bb-lh-body: this is a density change, not a
   type change, and an FAQ that is harder to read has not been improved.

   The inline padding is untouched at --bb-space-md, because the answer's
   inline padding matches it exactly and the two columns of text have to stay
   lined up. Only the block padding came down, --bb-space-md to --bb-space-sm.

   min-height was max(64px, var(--bb-tap-min)), which is the one bare pixel
   value left in this file. The 44px floor now comes from the token alone; the
   row lands at 54px anyway, so the floor is a guarantee rather than the thing
   setting the height. */
.bb-faq__list{display:grid;gap:var(--bb-space-2xs);min-width:0;}
.bb-faq__item{overflow:hidden;border:1px solid var(--bb-line);border-radius:var(--bb-r-card);background:var(--bb-cream);color:var(--bb-ink);}
.bb-faq__question{display:grid;grid-template-columns:minmax(0,1fr) var(--bb-tap-min);gap:var(--bb-space-sm);align-items:center;min-height:var(--bb-tap-min);padding:var(--bb-space-sm) var(--bb-space-md);font-family:var(--bb-font-display);font-size:var(--bb-t-display-4);font-weight:500;line-height:var(--bb-lh-tight);color:var(--bb-emerald);cursor:pointer;list-style:none;transition:color .15s ease;}
.bb-faq__question::-webkit-details-marker{display:none;}
.bb-faq__question::marker{content:"";}
.bb-faq__question:hover{color:var(--bb-emerald-deep);}
.bb-faq__question:focus-visible{outline:2px solid var(--bb-gold);outline-offset:-4px;}
/* THE DRAWN CIRCLE SHRANK; THE TAP TARGET DID NOT. The circle was 44px, which
   is the WCAG floor being spent on decoration — at that size it read as a
   button competing with the question rather than as a state marker. It is now
   28px, centred in a grid track still reserved at --bb-tap-min.

   The target is the whole <summary>: full column width by at least 44px tall,
   and the reserved track means every pixel around the glyph is still inside
   it. Shrinking the circle costs nothing tappable. */
.bb-faq__icon{position:relative;display:grid;place-items:center;justify-self:center;width:28px;height:28px;border:1px solid var(--bb-emerald);border-radius:var(--bb-r-pill);}
.bb-faq__icon::before,.bb-faq__icon::after{content:"";position:absolute;width:10px;height:1px;background:var(--bb-emerald);}
.bb-faq__icon::after{transform:rotate(90deg);transition:transform .15s ease;}
.bb-faq__item[open] .bb-faq__icon{background:var(--bb-emerald);}
.bb-faq__item[open] .bb-faq__icon::before,.bb-faq__item[open] .bb-faq__icon::after{background:var(--bb-cream);}
.bb-faq__item[open] .bb-faq__icon::after{transform:rotate(90deg) scaleX(0);}
/* Capped at 66ch. Widening the column above took the answers to ~108
   characters a line, which is well past comfortable reading measure — the
   extra width belongs to the card, not to the line of text. */
.bb-faq__answer{max-width:66ch;padding:0 var(--bb-space-md) var(--bb-space-md);font-family:var(--bb-font-body);font-size:var(--bb-t-body);line-height:var(--bb-lh-body);color:var(--bb-ink-soft);}
/* --bb-space-lg, not -xl: stacked, the intro is now two short lines rather
   than a heading plus a paragraph, and 48px of air read as disconnected from
   the first question. 32px keeps them reading as one block. */
@media(max-width:900px){.bb-faq__inner{grid-template-columns:1fr;gap:var(--bb-space-lg);}.bb-faq__intro{position:static;}}
@media(prefers-reduced-motion:reduce){.bb-faq__question,.bb-faq__icon::after{transition:none;}}
/* END_SECTION:bb-faq */

/* START_SECTION:bb-footer (INDEX:3) */
/* SPACING COMES OFF THE SCALE, NOT --bb-section-y.
   The footer used to stack three section-sized gaps: --bb-section-y of
   padding, another on .bb-footer__brand, and half again on .bb-footer__menus.
   At the top of the clamp that is roughly 256px of empty green before the
   first menu link. --bb-section-y is a gap BETWEEN sections; inside one it is
   just a large number.

   The trailing pad carries the iOS home-indicator inset. The page now runs
   edge to edge under the Safari toolbar (viewport-fit=cover), so the last
   section is what owes that space back — nothing else is below it.

   OUTER PADDING IS DELIBERATELY UNTOUCHED by the 2026-08-14 density pass. The
   footer is meant to be TALLER now, not shorter: tightening the link pitch
   buys the room the socials and contact columns occupy. Compressing the
   section padding as well would have spent that room twice. */
/* The gap ABOVE the footer belongs to the footer, because the section before
   it changes per template — legal block on a PDP, a rail on the homepage — and
   each would otherwise have to remember to leave room. A negative-free margin
   here does it once for every page. */
/* HEIGHT, founder's call 2026-08-17. The footer measured 348px on a desktop
   monitor, which sat short under a full-screen hero and a 1160 page. It is
   roughly 445 now, and every one of those pixels is space rather than content:
   nothing was added, no type was resized, and the 28px link rows below are
   untouched.

   Where the ~96px comes from, so it can be walked back precisely:
     outer padding   40 -> 64 top, 32 -> 64 bottom   (+56)
     top row's foot  32 -> 48                        (+16)
     base row's head 24 -> 48                        (+24)

   The last two are the gap BETWEEN the two rows, which is the half of it worth
   having — a wider band of green between the columns and the rights line is
   what makes the extra height read as a closing rather than as padding.

   The phone keeps its own values, in the max-width:768px block at the foot of
   this file, which overrides all three. */
.bb-footer{margin-block-start:0;background:var(--bb-emerald);color:var(--bb-cream);padding-block:var(--bb-space-2xl) calc(var(--bb-space-2xl) + var(--bb-safe-bottom));}
/* Rule 11: one page ceiling site-wide, matching the header bar and every
   section between them. See bb-category-trio for the full note. */
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.bb-footer__inner{max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);}

/* Wordmark and the columns share one row on desktop. Stacking them put a
   full-width band of empty green between the logo and the first link, which is
   most of why the footer read as a section rather than as an ending.

   COLUMNS LEFT, WORDMARK RIGHT — founder's call 2026-08-17, and it is done by
   GRID PLACEMENT, NOT BY MOVING THE MARKUP. The wordmark is still the first
   thing in the DOM, so it is still the first thing a screen reader or a
   keyboard meets on entering the footer, and it is still the first thing in the
   stacked phone layout. Only the two tracks it and the menus occupy are
   swapped.

   The track sizes swap with them: the menus keep `auto` so four columns of
   different natural widths are not forced to match, and the wordmark's track
   takes the slack. `justify-self:end` is what actually pins the mark to the
   right edge of the shell — without it the brand box would sit at the left of
   a very wide track and the swap would be invisible.

   Both placements are explicit rather than relying on auto-flow: with only the
   brand given a column, the menus would be pushed to a second row. The phone
   block at the foot of this file resets both to `auto` so the stack is
   untouched. */
.bb-footer__top{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--bb-space-2xl);align-items:start;padding-block-end:var(--bb-space-xl);}
.bb-footer__brand{display:grid;gap:var(--bb-space-sm);align-content:start;justify-items:end;justify-self:end;text-align:end;max-width:26rem;grid-column:2;grid-row:1;}
.bb-footer__wordmark{width:max-content;max-width:100%;color:var(--bb-cream);text-decoration:none;}
.bb-footer__logo-svg{display:block;width:clamp(6.5rem,11vw,9rem);height:auto;}
.bb-footer__wordmark img{display:block;width:auto;max-width:100%;height:clamp(2.75rem,6vw,4rem);}
/* Quiet if it is used at all — one line of body copy, not a display heading. */
.bb-footer__tagline{margin:0;font-family:var(--bb-font-body);font-size:var(--bb-t-small);line-height:var(--bb-lh-body);color:color-mix(in srgb,var(--bb-cream) 76%,transparent);}

/* FOUR COLUMNS at >=1024: Brand, Support (+ licence), Socials, Contact.
   `auto` rather than `1fr` because the four have genuinely different natural
   widths — a column of two-word links and a row of six icons should not be
   forced to the same track. The column gap steps down from --bb-space-2xl to
   --bb-space-xl to pay for the two extra tracks. */
.bb-footer__menus{display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:var(--bb-space-lg) var(--bb-space-xl);grid-column:1;grid-row:1;}
.bb-footer__support{display:grid;align-content:start;justify-items:start;gap:var(--bb-space-sm);}
/* One heading treatment for all four columns. It used to be `.bb-footer__menu
   h2`, which only reached the two menu-backed ones. */
.bb-footer__col-title{margin:0 0 var(--bb-space-xs);font-family:var(--bb-font-body);font-size:var(--bb-t-eyebrow);font-weight:800;letter-spacing:var(--bb-ls-eyebrow);line-height:1;text-transform:uppercase;color:var(--bb-accent-on-dark);}

/* DENSITY: 28px rows, Fraunces at 1rem. Founder's design, matched against his
   reference twice.

   This is deliberately BELOW the 44px anchor the rest of the site uses. 44px is
   WCAG 2.5.5 (AAA); the binding minimum is 2.5.8 (AA) at 24x24, and a 28px row
   with 2px of padding clears it. The trade is real and was taken knowingly:
   these are low-frequency footer links, not buy controls, and the founder's
   design depends on the list reading as a compact block rather than four
   separately tappable buttons. Do not raise this back to 44 without checking
   the design first. */
.bb-footer__menu ul{display:grid;gap:0;margin:0;padding:0;list-style:none;}
.bb-footer__menu a{display:inline-flex;align-items:center;min-height:28px;padding-block:2px;font-family:var(--bb-font-display);font-size:1rem;font-weight:400;line-height:1.15;color:var(--bb-cream);text-decoration:none;transition:color .15s ease;}
.bb-footer__menu a:hover{color:var(--bb-accent-on-dark);}

/* ICON ROWS. Contact and Socials are the same component now -- a row of
   icon-only links -- so they share one rule rather than two that drift.

   The glyph is 18px and the anchor is the 44px tap floor around it. That gap
   is deliberate: the drawn shape is small, per the approved footer design, but
   shrinking the ANCHOR to match would put the hit area under WCAG 2.5.8. The
   row is laid out with a negative inline margin so the first glyph still reads
   as flush left despite its padded box. */
.bb-footer__icon-list{display:flex;flex-wrap:wrap;gap:var(--bb-space-2xs);margin:0 0 0 -7px;padding:0;list-style:none;}
.bb-footer__icon{display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:var(--bb-r-pill);color:var(--bb-cream);transition:color .15s ease,background-color .15s ease;}
.bb-footer__icon svg{display:block;inline-size:17px;block-size:17px;}
.bb-footer__icon:hover{background:color-mix(in srgb,var(--bb-cream) 12%,transparent);color:var(--bb-accent-on-dark);}

.bb-footer__contact{display:grid;align-content:start;justify-items:start;}

.bb-footer__wordmark:focus-visible,.bb-footer__menu a:focus-visible,.bb-footer__icon:focus-visible,.bb-footer__studio-link:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;}
.bb-footer__social:focus-visible{outline-offset:2px;}

/* Base row. Origin and credit stay parallel at every width. */
/* Three equal notes. flex-wrap so a long rights line drops rather than
   squeezing the other two; every child inherits the row's own type, so none
   of them declares a size or weight of its own. */
.bb-footer__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--bb-space-md);padding-block-start:var(--bb-space-xl);font-family:var(--bb-font-body);font-size:var(--bb-t-micro);font-weight:400;line-height:var(--bb-lh-tight);color:var(--bb-cream);}
.bb-footer__licence{box-sizing:border-box;display:inline-flex;flex-wrap:nowrap;align-items:center;justify-self:start;inline-size:max-content;block-size:auto;gap:var(--bb-space-3xs);padding:var(--bb-space-3xs) var(--bb-space-xs);border:1px solid color-mix(in srgb,var(--bb-cream) 28%,transparent);border-radius:var(--bb-r-btn);font-family:var(--bb-font-body);font-size:var(--bb-t-micro);line-height:var(--bb-lh-tight);white-space:nowrap;}
.bb-footer__licence-label{font-size:var(--bb-t-eyebrow);font-weight:800;letter-spacing:var(--bb-ls-eyebrow);text-transform:uppercase;color:var(--bb-accent-on-dark);}
/* Tabular figures so the number reads as an identifier rather than as prose. */
/* BOLD, which is the founder's instruction and also the correct treatment: a
   licence number is an identifier a reader may check against a register or
   copy into a form, not a line of prose. Tabular figures for the same reason —
   digits of even width read as a code rather than as words. */
.bb-footer__licence-no{min-inline-size:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.02em;color:var(--bb-cream);}

/* THE CREDENTIALS ROW takes its own full-width line ABOVE the rights line, so
   the base block reads top to bottom as: what we are licensed as, who owns the
   site, where it is made and who built it.

   order:-2 puts it ahead of .bb-footer__rights, which is already order:-1 for
   the same reason — the base row is `flex-wrap` and both of these want a line
   to themselves rather than a share of one. flex-basis 100% is what actually
   claims the line; order only decides which of the two claims it first.

   The chips wrap onto separate lines on a narrow phone rather than shrinking,
   because a licence number that has been squeezed to fit is worse than one on
   its own line. */
.bb-footer__credentials{order:-2;flex:1 0 100%;display:flex;flex-wrap:wrap;gap:var(--bb-space-2xs);margin:0;padding-block-end:var(--bb-space-md);}
.bb-footer__rights,.bb-footer__origin,.bb-footer__studio,.bb-footer__studio-link{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;}
/* Nothing here declares a size, weight or colour: all three take the row's.
   __studio keeps margin-inline-start:auto so the credit still closes the row
   on a wide screen; the rights line simply leads it. */
.bb-footer__rights{flex:1 0 100%;order:-1;padding-block-end:var(--bb-space-md);border-block-end:1px solid color-mix(in srgb,var(--bb-cream) 22%,transparent);color:color-mix(in srgb,var(--bb-cream) 55%,transparent);}
/* The drawn flag sits on this line, so the line becomes a flex row to control
   the gap rather than relying on a space character between text and an inline
   SVG box. nowrap keeps "Proudly Indian" and its flag together. */
.bb-footer__origin{display:inline-flex;align-items:center;gap:var(--bb-space-3xs);white-space:nowrap;}
.bb-footer__studio{margin-inline-start:auto;text-align:end;white-space:nowrap;}
.bb-footer__studio-link{position:relative;color:var(--bb-gold);text-decoration:underline;}
.bb-footer__studio-link:hover,.bb-footer__studio-link:focus{text-decoration:underline;}
/* THE ONLY CONTROL BELOW THE TAP FLOOR ON EVERY PAGE OF THE SITE. "B&B" is two
   characters of 13px type, so it hit-tested at 25 x 16 — wide enough, 8px short
   on height, in the footer of every template.

   The target is a pseudo-element rather than padding or a min-height, because
   this link sits inside a sentence: anything that changes its box changes the
   baseline the other two notes in the row are set on, and the three lines are
   deliberately one weight and one alignment. --bb-tap-aa (24px) rather than
   --bb-tap-min (44px) for the same reason — a 44px target on a 13px line would
   reach into the rights line above it, and overlapping targets are a worse
   failure than a small one. See the note on both tokens in bb-tokens.css.

   The row is flex with 8px of block gap at the narrow end, so 4px of overhang
   at each end stays inside its own line box. */
.bb-footer__studio-link::after{content:'';position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);min-block-size:var(--bb-tap-aa);block-size:100%;}

/* 768–1024: two columns of two. Four tracks plus the wordmark do not fit here,
   and the wordmark keeps its row — stacking it back on top is what the grid
   above was built to avoid. Only the two permitted breakpoints are used, and
   both are written as literals because a custom property is not valid in a
   media condition. */
@media(max-width:1024px){
  .bb-footer__menus{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Two columns hold on a phone — the whole point of dropping from three. Ten
   links at a 48px pitch across three cramped 96px columns was what forced
   Inter at --bb-t-small here in M5; seven links across two 150px columns fit
   the display face again.

   Socials and contact take a full-width row each rather than a half. Six 44px
   tap targets need 284px, which no half of a 390px phone has. */
@media(max-width:768px){
  .bb-footer{padding-block:calc(var(--bb-space-lg) + var(--bb-space-2xs)) calc(var(--bb-space-md) + var(--bb-safe-bottom));}
  .bb-footer__top{grid-template-columns:1fr;gap:var(--bb-space-lg);padding-block-end:var(--bb-space-md);}
  /* THE DESKTOP SWAP IS UNDONE HERE, and it has to be undone explicitly. The
     brand and the menus are both placed in row 1 by column above; left in place
     against a single-column grid they would sit on top of one another. Back on
     auto-flow they take the DOM order — wordmark, then the columns — which is
     the phone stack exactly as it shipped. */
  .bb-footer__brand{grid-column:auto;grid-row:auto;justify-items:start;justify-self:stretch;text-align:start;}
  .bb-footer__menus{grid-column:auto;grid-row:auto;grid-template-columns:minmax(0,1fr) max-content;gap:var(--bb-space-md) var(--bb-space-sm);}
  .bb-footer__socials,.bb-footer__contact{grid-column:1/-1;}
  .bb-footer__icon-list{gap:var(--bb-space-2xs);}
  .bb-footer__base{gap:var(--bb-space-2xs);padding-block-start:var(--bb-space-sm);}
}
@media(prefers-reduced-motion:reduce){.bb-footer__menu a,.bb-footer__icon{transition:none;}}
/* END_SECTION:bb-footer */

/* START_SECTION:bb-founder-note (INDEX:4) */
/* Section padding is off the spacing scale now. --bb-section-y put up to 128px
   above and below a section that also collapsed to a tall single column on a
   phone; the card's own padding does that job at a sane size. */
.bb-founder-note{background:var(--bb-cream);padding-block:var(--bb-space-2xl);}
/* Rule 11: one page ceiling site-wide. See the note in bb-category-trio for
   why --page-width came out; these two sections sit on top of each other and
   have to share an edge. */
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.bb-founder-note__inner{max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);}
.bb-founder-note__card{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:var(--bb-space-2xl);align-items:center;padding:var(--bb-space-xl);border-radius:var(--bb-r-card);background:var(--bb-emerald-deep);color:var(--bb-cream);}
.bb-founder-note__media{position:relative;min-width:0;}
.bb-founder-note__media::before{content:"";position:absolute;inset:var(--bb-space-sm) calc(var(--bb-space-xs) * -1) calc(var(--bb-space-xs) * -1) var(--bb-space-sm);border:1px solid color-mix(in srgb,var(--bb-cream) 24%,transparent);border-radius:var(--bb-r-card);pointer-events:none;}
.bb-founder-note__image{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:var(--bb-r-card);object-fit:cover;overflow:hidden;background:color-mix(in srgb,var(--bb-cream) 12%,transparent);}
.bb-founder-note__copy{min-width:0;display:grid;align-content:center;justify-items:start;}

/* Everything inverts onto the deep ground. Gold is the accent that clears AA
   there (6.2:1); sienna, which carries eyebrows on cream, does not. */
.bb-founder-note__heading{max-width:13ch;margin:0;font-family:var(--bb-font-display);font-size:var(--bb-t-display-2);font-weight:500;letter-spacing:var(--bb-ls-tight);line-height:var(--bb-lh-heading);text-transform:uppercase;color:var(--bb-cream);}
.bb-founder-note--compact .bb-founder-note__heading{max-width:32ch;font-size:var(--bb-t-display-3);line-height:var(--bb-lh-heading);}
.bb-founder-note__body{max-width:42rem;margin-top:var(--bb-space-md);font-family:var(--bb-font-body);font-size:var(--bb-t-lead);line-height:var(--bb-lh-body);color:color-mix(in srgb,var(--bb-cream) 86%,transparent);}
/* An emerald button on an emerald-deep card is invisible. Gold on deep is the
   same pairing the hero's primary CTA already uses. */
.bb-founder-note__button{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:var(--bb-control-h);margin-top:var(--bb-space-md);padding-inline:var(--bb-space-lg);border:1px solid var(--bb-accent-on-dark);border-radius:var(--bb-r-btn);background:var(--bb-accent-on-dark);color:var(--bb-emerald-deep);font-family:var(--bb-font-body);font-size:var(--bb-t-small);font-weight:600;letter-spacing:var(--bb-ls-tight);line-height:1;text-decoration:none;text-transform:uppercase;transition:background .2s ease,border-color .2s ease,color .2s ease;}
.bb-founder-note__button:hover{background:var(--bb-cream);border-color:var(--bb-cream);color:var(--bb-emerald-deep);}
.bb-founder-note__button:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;}

/* MOBILE: a 96px square portrait above the quote, not a tall 4:5 image.
   The 4:5 crop is right beside a column of text; stacked, it was a full
   screen of photograph before a word of the note. A small portrait reads as
   "this is a person" in a tenth of the height.

   IT WAS A CIRCLE (--bb-r-pill) UNTIL 2026-08-13. The founder asked for a
   square on the same footprint, so only the radius changed: 96 x 96 and the
   position in the card are exactly as they were. --bb-r-card is the shape the
   card itself and the desktop 4:5 crop already use, so the portrait now
   matches its own container instead of being the one round thing on the page. */
/* The 96px portrait alone lands at 954px against a 780px (100svh) target.
   The rest is type: --bb-t-lead and --bb-t-display-2 are sizes for copy
   sitting beside display type in a two-column composition, and this is a
   single narrow column. Body drops to --bb-t-body and the heading to
   --bb-t-display-3, which takes 112px off between them. NOT ONE WORD OF THE
   NOTE IS CUT — the founder's copy is the whole point of the section. */
@media(max-width:900px){
  /* --bb-space-lg, not -xl: the card carries its own ground, so this padding
     is only the gap between it and the cream sections either side. 32px is
     that gap; 48 left the section 26px over the one-screen target. */
  .bb-founder-note{padding-block:var(--bb-space-lg);}
  .bb-founder-note__card{grid-template-columns:1fr;gap:var(--bb-space-md);padding:var(--bb-space-md);}
  .bb-founder-note__media{justify-self:start;width:96px;}
  .bb-founder-note__media::before{display:none;}
  .bb-founder-note__image{width:96px;height:96px;aspect-ratio:1;border-radius:var(--bb-r-card);}
  /* EVERY TYPE ROLE HERE IS ONE RUNG DOWN THE SHARED SCALE, and the scale is
     the whole point — nothing below is a bare px value, so a later change to
     the scale still reaches this section.

       heading        display-3 -> display-4      24px -> 19px
       body           body      -> small          16px -> 15px
       button label   small     -> micro          15px -> 13px

     The eyebrow, the founder name and the role line used to step down here
     too. All three were deleted on 2026-08-14 along with their rules. */
  .bb-founder-note__heading{max-width:20ch;font-size:var(--bb-t-display-4);}
  .bb-founder-note--compact .bb-founder-note__heading{font-size:var(--bb-t-display-4);}
  .bb-founder-note__body{margin-top:var(--bb-space-sm);font-size:var(--bb-t-small);}

  /* The button steps to the next rung of the control scale too:
     --bb-control-h (48px) -> --bb-control-h-sm (40px). There is one more rung
     below, --bb-control-h-xs at 36px, but that one exists for the category
     chips and a primary CTA should not be the same height as a filter pill.

     40px is under WCAG 2.5.8's 44px, so the hit area is carried by the
     pseudo-element below and the visual height is unaffected — the same
     arrangement the chips use. */
  .bb-founder-note__button{min-height:var(--bb-control-h-sm);margin-top:var(--bb-space-sm);padding-inline:var(--bb-space-md);font-size:var(--bb-t-micro);}
  .bb-founder-note__button::after{content:'';position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);min-height:var(--bb-tap-min);height:100%;}
}
/* The 520px query that stacked the signature on a narrow phone went with the
   signature — it had nothing left to act on. The 900px query above is
   pre-existing and off the permitted 768/1024 pair; it was left alone because
   moving it changes the layout at widths this change does not touch. */
@media(prefers-reduced-motion:reduce){.bb-founder-note__button{transition:none;}}
/* END_SECTION:bb-founder-note */

/* START_SECTION:bb-header (INDEX:5) */
/* Menu and cart are a matched pair of 48px circular icon buttons with the
   logo centred between them. Before M4 the bar carried three competing
   rounded shapes at three different border weights — an outlined cart pill
   holding a filled gold disc, beside a heavier outlined circle. Everything
   here now sits on one border weight and one control height.

   Bar height is fixed, not derived from --bb-gutter: at 360px the gutter
   collapses to 20px and took the header down with it. 72px mobile / 84px
   desktop are the heights the old formula happened to produce, so the 99px
   scroll-margin-top on the education chapters still clears the bar.

   TWO HEIGHT TOKENS, AND THE BAR TAKES THE SMALLER ONE.
   --bb-header-bar-h is the row itself. --bb-header-h is that plus the iOS
   status-bar inset, which the header now pads past so the page can run edge to
   edge underneath it. Everything downstream of the header — the overlay
   pull-up, the hero's scrim band, the panel's desktop offset — wants the
   composite value and reads --bb-header-h unchanged. */
/* NOTE: the rule that actually makes this header stick lives in
   assets/bb-horizon-overrides.css, not here. It has to target the Shopify
   section WRAPPER via :has(), and Shopify's section-stylesheet parser silently
   drops :has() rules — verified: the rule was absent from the CSSOM while
   every other rule in this block was present. Plain asset files keep it. */
.bb-header{position:sticky;top:0;z-index:60;background:var(--bb-cream);padding-block-start:var(--bb-safe-top);transition:background .25s ease,box-shadow .25s ease;}
.bb-header.is-scrolled{box-shadow:0 1px 0 var(--bb-line),0 var(--bb-space-sm) var(--bb-space-lg) calc(var(--bb-space-lg) * -1) color-mix(in srgb,var(--bb-emerald-deep) 50%,transparent);}
/* Rule 11: one page ceiling site-wide. The bar sat on Horizon's --page-width
   (1360) while the PDP, the About page and the Education page all sat on
   --bb-max-content (1160), so the logo and the two icon buttons stood 100px
   outside the content beneath them on every one of those templates. See
   bb-category-trio for the full note. */
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.bb-header__bar{box-sizing:border-box;max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);height:var(--bb-header-bar-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--bb-space-xs);}
.bb-header__left{display:flex;align-items:center;gap:var(--bb-space-xs);}

/* --bb-r-btn, not --bb-r-pill: founder's call 2026-08-27, squarer with a
   corner radius rather than circular. That token is documented in
   bb-tokens.css as "matches the fused Add to cart control, which is the
   founder's reference for correct roundness", so the two icon buttons now
   speak the same shape language as every real button on the site instead
   of their own. Size, border, colours and hover are untouched, so contrast
   and the 48px tap target are exactly as they were. */
.bb-header__iconbtn{box-sizing:border-box;flex:0 0 auto;width:var(--bb-control-h);height:var(--bb-control-h);display:grid;place-items:center;border:1px solid var(--bb-line);border-radius:var(--bb-r-btn);background:transparent;color:var(--bb-emerald);cursor:pointer;padding:0;text-decoration:none;transition:background .15s,color .15s,border-color .15s;}
.bb-header__iconbtn:hover{background:var(--bb-emerald);border-color:var(--bb-emerald);color:var(--bb-cream);}
.bb-header__iconbtn:focus-visible,.bb-header__cats a:focus-visible,.bb-header__logo:focus-visible,.bb-menu a:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;}

/* Category quick-links match the collection chips exactly — same face, size,
   weight and border weight — because they are the same navigation. */
.bb-header__cats{box-sizing:border-box;display:flex;align-items:center;gap:var(--bb-space-2xs);min-height:var(--bb-control-h);padding-inline:var(--bb-space-md);border:1px solid var(--bb-line);border-radius:var(--bb-r-btn);font-family:var(--bb-font-body);font-size:var(--bb-t-small);font-weight:600;letter-spacing:var(--bb-ls-tight);}
/* Stretch to the pill's full 48px so the tap target matches what the eye
   reads as the control. The text stays centred; only the box grows. */
.bb-header__cats a{display:inline-flex;align-items:center;align-self:stretch;color:var(--bb-emerald);text-decoration:none;transition:color .15s;}
.bb-header__cats a:hover{color:var(--bb-accent-on-light);}
.bb-header__cats span{color:var(--bb-emerald);opacity:.35;}


.bb-header__logo{justify-self:center;color:var(--bb-emerald);text-decoration:none;}
/* 10% up, founder's call. Both ends of the clamp move together so the logo
   grows by the same proportion at every width rather than only at one end. */
.bb-header__logo-svg{display:block;width:clamp(7.7rem,11vw,10.45rem);height:auto;}
.bb-header__wordmark{font-family:var(--bb-font-script);color:var(--bb-emerald);font-size:2rem;line-height:1;}
.bb-header__logo img{height:2.625rem;width:auto;display:block;}

.bb-header__right{justify-self:end;}
.bb-header__cart{position:relative;}
.bb-header__count{position:absolute;top:-1px;inset-inline-end:-1px;min-width:18px;height:18px;padding-inline:5px;box-sizing:border-box;border-radius:var(--bb-r-pill);background:var(--bb-gold);color:var(--bb-emerald);font-family:var(--bb-font-body);font-size:var(--bb-t-micro);font-weight:700;line-height:1;display:grid;place-items:center;}
.bb-header__iconbtn:hover .bb-header__count{background:var(--bb-gold);color:var(--bb-emerald);}
/* Always in the DOM so JS has something to write into; hidden at zero. */
.bb-header__count.is-empty{display:none;}

/* ---- overlay state --------------------------------------------------
   Applied by bb-header.js only, and only while the bar sits inside the
   opting-in section's guaranteed dark band. Everything here inverts to
   cream; gold stays gold because the badge carries its own ground.

   Contrast is measured on the composited pixels at review, not assumed —
   the section behind is a photograph, and every photograph on this site is
   still being replaced.

   EVERY SELECTOR HERE IS SCOPED TO .bb-header__bar, and that is not
   decoration. The nav panel lives inside .bb-header too, and its close button
   reuses .bb-header__iconbtn — an unscoped rule turned it cream-on-cream and
   made it invisible the moment the header was transparent. The overlay state
   describes the bar, so it may only reach the bar.

   THE INK IS A VARIABLE, NOT A COLOUR, since 2026-08-18. Everything below used
   to be --bb-cream outright, which is correct over the dark band the comment
   above assumes and wrong over the four untinted desktop banners: three of them
   are pale plaster and cream on them measured 1.41 to 3.20 across the whole
   bar. The logo, the category pill and both icon buttons were, in plain terms,
   not there.

   The banner decides, exactly as it already decides the headline's colour —
   same `heading_ink` setting on the same block, so one choice per photograph
   rather than two that can drift apart. bb-hero.liquid publishes it as
   `data-hero-ink` on the showing slide and the flip lives in
   assets/bb-horizon-overrides.css.

   WHY THE FLIP IS NOT IN THIS FILE: it needs :has() to reach the header from
   the hero, and Shopify's section-stylesheet parser silently drops :has() —
   the same trap already documented on the variant picker. Only the three
   custom properties are defaulted here; one selector overrides them from an
   asset stylesheet, where :has() survives.

   --bb-header-ink-on is what sits ON the ink once a control fills with it on
   hover, and --bb-header-ink-accent is the hover colour for a link that stays
   unfilled. Both have to flip with the ink or the hover state inverts into an
   unreadable pair. */
.bb-header--overlay{
  --bb-header-ink:var(--bb-cream);
  --bb-header-ink-on:var(--bb-emerald-deep);
  --bb-header-ink-accent:var(--bb-accent-on-dark);
  background:transparent;box-shadow:none;
}
.bb-header--overlay .bb-header__bar .bb-header__logo{color:var(--bb-header-ink);}
.bb-header--overlay .bb-header__bar .bb-header__iconbtn{color:var(--bb-header-ink);border-color:color-mix(in srgb,var(--bb-header-ink) 45%,transparent);}
.bb-header--overlay .bb-header__bar .bb-header__iconbtn:hover{background:var(--bb-header-ink);border-color:var(--bb-header-ink);color:var(--bb-header-ink-on);}
.bb-header--overlay .bb-header__bar .bb-header__cats{border-color:color-mix(in srgb,var(--bb-header-ink) 45%,transparent);}
.bb-header--overlay .bb-header__bar .bb-header__cats a{color:var(--bb-header-ink);}
.bb-header--overlay .bb-header__bar .bb-header__cats a:hover{color:var(--bb-header-ink-accent);}
.bb-header--overlay .bb-header__bar .bb-header__cats span{color:var(--bb-header-ink);}

/* ---- nav panel ------------------------------------------------------
   The outer element is the backdrop, the inner one is the panel.

   GEOMETRY IS NOT DEFINED HERE. Where the sheet sits, how wide and how tall it
   is, which edge it enters from, its radius and the blur on the ground are all
   in assets/bb-panel.css, shared with the cart and the collection filters —
   the three are one component with three contents, and the only way they stay
   one is by having a single place that decides the shape.

   Deliberately no `background` on .bb-menu either: the ground colour and its
   blur are part of that shared decision, and restating it here would fight the
   shared rule at equal specificity, where the winner depends on how Shopify
   happens to order the section-stylesheet bundle against a linked asset.

   What stays: the ground's fade, the hidden state, and the panel's own skin
   and scroll. */
.bb-menu{position:fixed;inset:0;z-index:100;opacity:0;transition:opacity .28s ease;display:flex;}
.bb-menu.is-open{opacity:1;}
.bb-menu[hidden]{display:none;}
.bb-menu__panel{box-sizing:border-box;display:flex;flex-direction:column;background:var(--bb-cream);overflow-y:auto;overscroll-behavior:contain;}
.bb-menu__top{display:flex;align-items:center;justify-content:flex-end;gap:var(--bb-space-xs);padding:var(--bb-space-sm) var(--bb-space-lg);min-height:var(--bb-header-bar-h);box-sizing:border-box;}
/* Panel padding comes off the spacing scale, not --bb-gutter: at 1280 the
   gutter is 64px a side, which would leave 256px of a 384px panel. */
.bb-menu__body{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:0 var(--bb-space-lg) var(--bb-space-lg);width:100%;box-sizing:border-box;}
.bb-menu__primary{display:flex;flex-direction:column;gap:0;}
/* 10% above --bb-t-display-4, founder's call. Written as a calc off the token
   rather than a new literal so it still tracks the type scale if that moves. */
.bb-menu__lvl1{display:flex;align-items:center;min-height:var(--bb-tap-min);font-family:var(--bb-font-display);font-weight:500;font-size:calc(var(--bb-t-display-4) * 1.1);line-height:var(--bb-lh-heading);letter-spacing:var(--bb-ls-tight);color:var(--bb-emerald);text-decoration:none;transition:color .15s;}
.bb-menu__lvl1:hover{color:var(--bb-accent-on-light);}
.bb-menu__children{display:flex;flex-wrap:wrap;gap:var(--bb-space-2xs) var(--bb-space-md);padding-block-end:var(--bb-space-sm);}
.bb-menu__lvl2{display:inline-flex;align-items:center;min-height:var(--bb-tap-min);font-family:var(--bb-font-body);font-size:var(--bb-t-body);color:var(--bb-ink-soft);text-decoration:none;transition:color .15s;}
.bb-menu__lvl2:hover{color:var(--bb-emerald);}
/* The account row. Separated from the nav by a rule rather than by space —
   it is a different KIND of destination from "Shop" or "About Us", and on a
   short panel pure whitespace reads as an accident. Sized off --bb-t-body, one
   step under .bb-menu__lvl1, for the same reason. */
.bb-menu__account{margin-block-start:var(--bb-space-md);padding-block-start:var(--bb-space-md);border-block-start:1px solid var(--bb-line);}
.bb-menu__accountlink{display:inline-flex;align-items:center;gap:var(--bb-space-2xs);min-height:44px;font-family:var(--bb-font-body);font-size:var(--bb-t-body);font-weight:600;line-height:var(--bb-lh-tight);color:var(--bb-emerald);text-decoration:none;}
.bb-menu__accountlink:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;border-radius:var(--bb-r-sm);}
@media(min-width:1024px){.bb-menu__accountlink:hover{color:var(--bb-emerald-deep);}}
.bb-menu__brandmark{width:var(--bb-space-3xl);margin-block-start:auto;padding-block-start:var(--bb-space-xl);padding-block-end:var(--bb-space-sm);color:var(--bb-emerald);}
.bb-menu__logo{display:block;width:100%;height:auto;}

@media(max-width:768px){.bb-header__cats{display:none;}.bb-header__logo-svg{width:8.25rem;}.bb-header__wordmark{font-size:1.87rem;}}

/* No slide, no fade — the panel is simply there. Kept in step with the 0ms
   unmount delay in bb-header.js so nothing waits on an animation that is
   never going to run. The panel's own transition is cancelled in
   assets/bb-panel.css, alongside the two drawers it shares its shape with. */
@media(prefers-reduced-motion:reduce){
  .bb-menu,.bb-header,.bb-header__iconbtn,.bb-header__cats a,.bb-menu a{transition:none;}
}
/* END_SECTION:bb-header */

/* START_SECTION:bb-hero (INDEX:6) */
/* MOBILE TAKES THE PICTURE'S OWN RATIO, so nothing is cropped.
 *
 * The banners are portrait 9:16. A min(90svh,48rem) box measured 375 x 731 on a
 * phone — a 0.513 ratio against the then-2:3 image's 0.667 — and `cover` was
 * scaling every banner to 488px wide inside a 375px frame and discarding the
 * difference: 113px, 56px off each side, 23.1% of the picture. That is where
 * the outer packs of the line-up went, measured live before this change.
 *
 * Box ratio == image ratio == zero crop.
 *
 * WHY 9:16 AND NOT 2:3. 2:3 fixed the crop but made the hero only 69% of the
 * viewport, and the founder wanted roughly four fifths with the marquee just
 * showing beneath. There is no way to have both on a 2:3 asset: a 4/5-height
 * box at 375px is a 0.577 ratio, and forcing that onto 0.667 puts a 15% side
 * crop straight back. 9:16 is the ratio that is BOTH — 667px tall at 375 wide,
 * 82% of an 812px viewport, and nothing cropped. The banners were re-shot for
 * it rather than the box being bent around them.
 *
 * This is a contract with the artwork: banners must be portrait 9:16. The
 * schema says so on the image picker. */
.bb-hero{position:relative;overflow:hidden;background:var(--bb-emerald-deep);color:var(--bb-cream);aspect-ratio:9 / 16;display:flex;}

.bb-hero__media{position:absolute;inset:0;}
/* Only present when a desktop file has been supplied. <picture> is inline by
   default, which would break the height:100% chain between .bb-hero__media and
   the image inside it — so it has to be a block that fills its parent. With no
   desktop file this element is never emitted and the rule matches nothing. */
.bb-hero__picture{display:block;width:100%;height:100%;}
.bb-hero__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}

/* ONE TOP-ANCHORED GRADIENT DOES BOTH JOBS.
 *
 * It holds cream type over the upper third, and it is the dark ground the
 * header overlay contract requires — so the separate three-bar-height band
 * that used to sit on ::before is gone. The copy moved to the top of the
 * frame, so a bottom-anchored scrim would have been protecting nothing.
 *
 * It reaches zero at 62%: the half of the picture carrying the product is
 * clear at every setting, which is the whole point of the new banners. */
.bb-hero__media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--bb-emerald-deep) calc(var(--bb-hero-scrim) * 100%),transparent) 0%,
    color-mix(in srgb,var(--bb-emerald-deep) calc(var(--bb-hero-scrim) * 74%),transparent) 30%,
    color-mix(in srgb,var(--bb-emerald-deep) calc(var(--bb-hero-scrim) * 32%),transparent) 48%,
    transparent 62%);
}

/* Copy sits in the UPPER THIRD and is centred. The banners are composed with a
   quiet top and the product low in the frame, so this puts the words where the
   picture is empty and leaves the product alone. It is the same arrangement at
   every width — Rule 11: desktop is this component at a different size, not a
   different component. */
/* Rule 11: one page ceiling site-wide — see bb-category-trio. This caps the
   COPY only. The photograph is .bb-hero__media, absolutely positioned on the
   section, so it still runs edge to edge and the desktop crop is untouched. */
.bb-hero__inner{position:relative;display:flex;align-items:flex-start;width:100%;max-width:var(--bb-max-content);margin-inline:auto;}
.bb-hero__copy{box-sizing:border-box;min-width:0;width:100%;padding:calc(var(--bb-header-h,64px) + var(--bb-space-xl)) var(--page-margin) var(--bb-space-lg);text-align:center;}

/* --bb-t-display-2, not display-1. display-1 is 40px at 375 and forced every
   headline onto three lines inside a frame that now has a product in it. */
.bb-hero__heading{margin:0;font-family:var(--bb-font-display);font-size:var(--bb-t-display-2);font-weight:500;line-height:var(--bb-lh-heading);letter-spacing:var(--bb-ls-display);text-wrap:balance;color:var(--bb-cream);}

/* Two buttons on one row at every width, sized to their words rather than to
   the column. Full-bleed stacked buttons were the single heaviest thing in the
   old frame. */
.bb-hero__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--bb-space-2xs);margin-top:var(--bb-space-md);}
.bb-hero__button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:var(--bb-control-h-sm);padding-inline:var(--bb-space-md);border:1px solid transparent;border-radius:var(--bb-r-btn);font-family:var(--bb-font-body);font-size:var(--bb-t-small);font-weight:600;letter-spacing:var(--bb-ls-tight);text-align:center;text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.bb-hero__button:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;}
.bb-hero__button--primary{background:var(--bb-accent-on-dark);border-color:var(--bb-accent-on-dark);color:var(--bb-emerald-deep);}
.bb-hero__button--secondary{background:color-mix(in srgb,var(--bb-cream) 90%,transparent);border-color:transparent;color:var(--bb-emerald-deep);}

@media screen and (min-width:768px){
  /* FULL SCREEN ON DESKTOP, founder's call. The box stops taking the image
     ratio and the type scales up on its own clamp.

     It was min(86svh,44rem), and 44rem was the binding term on every desktop
     monitor: measured 1920 x 704 against a 1080 viewport, 65% of the screen.

     `svh` rather than bare `vh`, with vh declared first as the fallback. On a
     desktop browser the two agree; svh is what keeps this honest if the section
     is ever shown on a tablet with collapsing browser chrome, which is the same
     reason the old value used svh.

     The copy block is NOT re-spaced to fill the extra height — same padding,
     same order, same proportions. It stays anchored to the top of the frame
     because the scrim is top-anchored and reaches zero at 62%; floating the
     copy down into the middle would take it off the darkened band. */
  /* THE OVERLAY CASE PAYS BACK NOTHING, AND THE SIGN GOES THE OTHER WAY.
     Corrected 2026-08-17 from measurement, against the reasoning that was here.

     The claim was that `header_overlay` pulls the wrapping .shopify-section up
     by --bb-header-h, so a flat 100svh would end one header-height ABOVE the
     fold and needed the height adding back. Measured on the live page at
     1920 x 1080: the hero's own margin-top is 0px and its top edge is at y=0.
     Whatever moves it, the box already STARTS at the top of the screen — so a
     pull-up moves the start, not the end, and 100svh from y=0 lands exactly on
     the fold with nothing to repay.

     Adding the header height made the section 1164px tall against a 1080px
     screen: an 84px overshoot that pushed the slideshow rail to y=1104, which
     is 68px BELOW the fold, so the control the founder asked to be made smaller
     could not be seen or reached at all.

     With the header NOT overlaid it sits in normal flow above the hero, so the
     screen left for the hero is the viewport minus the bar, and the header
     height is SUBTRACTED. Only the overlay branch is measured; the theme ships
     with overlay on. */
  .bb-hero{
    aspect-ratio:auto;
    min-height:calc(100vh - var(--bb-header-h));
    min-height:calc(100svh - var(--bb-header-h));
  }
  .bb-hero[data-bb-header-overlay]{
    min-height:100vh;
    min-height:100svh;
  }
  /* THE WORDS SIT IN THE MIDDLE OF A FULL-SCREEN BANNER, NOT THE TOP THIRD.
     Founder instruction 2026-08-17: "the tagline is getting pushed up".

     On a phone the copy is top-anchored and that is right — the frame is tall,
     the product sits low, and the words fill the empty top. A full-screen
     desktop banner is a different shape: the same top anchor leaves the
     headline riding high with most of a 1080px picture empty beneath it.

     THIS IS ONLY SAFE BECAUSE THE SCRIM MOVES WITH IT — see the rule below.
     The phone scrim is top-anchored and reaches zero at 62%, so centring the
     copy on its own would drop cream type onto bare photograph. The two are one
     change, and doing half of it is the legibility bug the last pass declined
     to risk.

     The header-height top padding goes with it. It existed to clear the
     overlaid bar; centred copy is nowhere near the bar, and keeping it would
     push the block below the true centre by half the header. */
  .bb-hero__inner{align-items:center;}
  .bb-hero__copy{padding-block:var(--bb-space-2xl);}
  .bb-hero__button{min-height:var(--bb-control-h);padding-inline:var(--bb-space-lg);}

  /* The desktop scrim is a BAND THROUGH THE MIDDLE, not a wash off the top.
     It holds its strength across 28–72% of the height, which is where the
     headline and buttons now are, and falls away at both ends so the wall above
     and the packs along the bottom third stay clear. The desktop artwork is
     composed to a matching brief: quiet centre, product low. */
  /* NO TINT ON DESKTOP. THE INK MOVES INSTEAD OF THE PICTURE.
     Founder instruction 2026-08-17: "I don't want this tint, keep the images as
     it is. Change the text colour to green if needed."

     A darkened band was tried first and rejected on looks. It was solving a real
     problem the wrong way round: cream type on the two pale plastered walls
     measured 1.32 and 1.59 median contrast against the 3:1 WCAG asks for 52px
     display type, failing across 88% and 96% of the area behind the words.

     Recolouring the headline fixes the same numbers without touching a pixel of
     the photograph. Measured untinted, worst case per banner:

       pale wall  (1 pantry, 2 shelf, 4 pour)   green 8.19 / 6.79 / 5.09  PASS
       dark stone (3 spice bowls)               green 1.29                FAIL
       dark stone (3 spice bowls)               cream 8.61                PASS

     So it is per banner, and it is a setting rather than a rule: the founder
     picks the ink when the photograph changes. Cream is the default, which is
     what every banner shipped with.

     DESKTOP ONLY, and that is the whole reason this lives in here. Below 768 the
     portrait banners still carry the top-anchored scrim and the words sit on a
     dark ground, where green would be the unreadable one. */
  .bb-hero__media::after{background:none;}
  .bb-hero__slide--ink-green .bb-hero__heading{color:var(--bb-emerald-deep);}
}

@media screen and (min-width:1024px){
  .bb-hero__button--primary:hover{background:var(--bb-cream);border-color:var(--bb-cream);color:var(--bb-emerald-deep);}
  .bb-hero__button--secondary:hover{background:var(--bb-cream);color:var(--bb-emerald-deep);}
}

/* With no photograph at all the section is a plain emerald ground; there is no
   scrim to draw and the copy centres rather than sitting at the foot. */
.bb-hero--plain .bb-hero__inner,
.bb-hero__slide--plain .bb-hero__inner{align-items:center;}

/* ---------------------------------------------------------------- *
 * Slideshow — only ever present from the second banner onwards
 *
 * The banners are STACKED IN A GRID, not absolutely positioned. Every banner
 * occupies the same cell, so the row is as tall as the tallest one and the
 * box is reserved before a single later image has loaded — nothing shifts as
 * they arrive, and a long heading on banner four cannot be clipped by a
 * height set by banner one.
 *
 * Hidden banners use `visibility:hidden` rather than opacity alone. That is
 * what takes their links out of the tab order and out of the accessibility
 * tree; `inert` on the element is the belt to that pair of braces. The
 * `transition ... visibility 0s linear 500ms` pattern is what lets the outgoing
 * banner finish fading before it is taken away.
 * ---------------------------------------------------------------- */
.bb-hero__slides{position:relative;display:grid;flex:1 1 auto;min-width:0;}
.bb-hero__slide{grid-area:1 / 1 / 2 / 2;position:relative;display:flex;min-width:0;opacity:0;visibility:hidden;transition:opacity 500ms ease,visibility 0s linear 500ms;}
.bb-hero__slide.is-active{opacity:1;visibility:visible;transition:opacity 500ms ease,visibility 0s;}

/* Same cap as .bb-hero__inner so the segmented rail stays under the copy.
   On a phone that cap never binds and the rail spans the gutters, which is
   correct there: four segments across 350px read as one divided line. */
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.bb-hero__ui{position:absolute;z-index:2;inset-inline:0;bottom:var(--bb-space-sm);box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);}
.bb-hero__ui[hidden]{display:none;}

/* A CONTROL, NOT A RULE ACROSS THE PAGE. At --bb-max-content the rail measured
   1160 wide on a desktop monitor, so four segments were ~280px each and the
   thing read as a hairline divider drawn under the hero rather than as
   something you can press.

   360px is the width four segments stay legible as segments at: 85px of bar
   each, which is about the width of the words on the buttons above them.

   THE WIDTH SHRINKS, THE TARGET DOES NOT. .bb-hero__seg is still 44px tall and
   still fills its share of the rail, so every segment is ~85 x 44 — comfortably
   past the 44px anchor, let alone the 24px AA floor. The visible bar inside it
   is still 2px. Padding comes off because the cap is now the whole width; with
   the gutter still in place the bar inside 360 would be 232.

   Left at the mobile behaviour below 768: on a phone the rail already spans a
   350px content column, which is this width in all but name. */
@media screen and (min-width:768px){
  .bb-hero__ui{max-width:360px;padding-inline:0;}
}

/* THE SEGMENTED RAIL. Segments share the width equally, so the rail reads as
   one divided line rather than a row of marks. */
.bb-hero__rail{display:flex;align-items:center;gap:6px;width:100%;}

/* 2px of visible bar inside a 44px target. The button carries the tap area and
   nothing else — no background, no border, no radius. */
.bb-hero__seg{box-sizing:border-box;flex:1 1 0;display:flex;align-items:center;min-width:0;height:44px;padding:0;border:0;background:none;cursor:pointer;}
.bb-hero__seg-track{position:relative;display:block;width:100%;height:2px;overflow:hidden;background:color-mix(in srgb,var(--bb-cream) 28%,transparent);}
.bb-hero__seg-fill{display:block;width:100%;height:100%;background:var(--bb-accent-on-dark);transform:scaleX(0);transform-origin:left center;}
.bb-hero__seg[aria-current] .bb-hero__seg-fill{transform:scaleX(1);}
.bb-hero__seg:focus-visible{outline:2px solid var(--bb-gold);outline-offset:-8px;}

/* While the timer is genuinely running, the live segment fills across the
   interval — so the mark that says WHERE you are also says how long you have.
   `is-timing` is owned by sync(), the one predicate that decides whether the
   timer runs at all, so the bar cannot disagree with the slideshow. Under
   reduced motion autoplay never runs, the class is never set, and the live
   segment is simply solid gold. */
.bb-hero__slides.is-timing .bb-hero__seg[aria-current] .bb-hero__seg-fill{
  animation:bb-hero-fill var(--bb-hero-interval,6000ms) linear forwards;
}
@keyframes bb-hero-fill{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* Live region for the announcement. Defined here rather than borrowed from
   base.css so the section carries its own contract. */
.bb-hero__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}

@media screen and (min-width:1024px){
  .bb-hero__seg:hover .bb-hero__seg-track{background:color-mix(in srgb,var(--bb-cream) 46%,transparent);}
}

/* Answers the "static" note: the picture settles and the copy rises once, on
   load. Not a loop — a permanently moving background is a battery cost and a
   distraction. Nothing moves at all under reduced-motion.
   Two children now, not four: the eyebrow and the subheading are gone. */
@media(prefers-reduced-motion:no-preference){
  .bb-hero__image{animation:bb-hero-settle 1400ms cubic-bezier(.2,.7,.3,1) both;}
  .bb-hero__copy > *{animation:bb-hero-rise 700ms cubic-bezier(.2,.7,.3,1) both;}
  .bb-hero__copy > *:nth-child(1){animation-delay:120ms;}
  .bb-hero__copy > *:nth-child(2){animation-delay:220ms;}
}
@keyframes bb-hero-settle{from{transform:scale(1.06);}to{transform:scale(1);}}
@keyframes bb-hero-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

@media(prefers-reduced-motion:reduce){
  .bb-hero__button{transition:none;}
  .bb-hero__slide,
  .bb-hero__slide.is-active{transition:none;}
  .bb-hero__seg-track{transition:none;}
}
/* END_SECTION:bb-hero */

/* START_SECTION:bb-marquee (INDEX:7) */
.bb-marquee{overflow:hidden;background:var(--bb-emerald-deep);color:var(--bb-cream);}
.bb-marquee__viewport{display:flex;width:100%;overflow:hidden;}
.bb-marquee__track{display:flex;flex:0 0 auto;min-width:100%;animation:bb-marquee-scroll var(--bb-marquee-duration) linear infinite;}
.bb-marquee__viewport:hover .bb-marquee__track{animation-play-state:paused;}
.bb-marquee__item{display:inline-flex;align-items:center;gap:var(--bb-space-xs);padding:var(--bb-space-2xs) var(--bb-space-md);font-family:var(--bb-font-body);font-size:var(--bb-t-micro);font-weight:700;letter-spacing:var(--bb-ls-eyebrow);line-height:var(--bb-lh-tight);text-transform:uppercase;white-space:nowrap;}
/* THE BAND SITS AT THE TOP OF THE PAGE NOW, so it is a utility bar and not a
   divider. It runs directly beneath a sticky header on both surfaces it
   appears on, and 12px block padding drew a 40px band that read as a second
   header and pushed the hero down. 8px draws 32px, which sits under the header
   as trim. Founder's call to make it, 2026-09-03: "see if you need to change
   the spacing or length because it's coming on top now, take that call."
   Inline padding is unchanged — the gap BETWEEN pointers is what makes a
   scrolling line readable, and shortening it would crowd the words. */
/* One pointer, one colour. The item used to mix cream body text with a gold
   accent and a gold dot, so a single pointer carried two brand colours at
   once. Colour now alternates BETWEEN pointers instead, and the dot inherits
   via currentColor so it can never disagree with the words beside it.
   Keep the block count EVEN: the track is duplicated for the loop, so an odd
   count puts two same-coloured pointers together at the seam. */
.bb-marquee__item:nth-child(odd){color:var(--bb-gold);}
.bb-marquee__item:nth-child(even){color:var(--bb-cream);}
.bb-marquee__item::after{content:"";width:var(--bb-space-2xs);height:var(--bb-space-2xs);border-radius:var(--bb-r-pill);background:currentColor;}
.bb-marquee__item strong{font:inherit;color:inherit;}
@keyframes bb-marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media(prefers-reduced-motion:reduce){.bb-marquee__viewport{overflow:auto;}.bb-marquee__track{animation:none;}.bb-marquee__track[aria-hidden="true"]{display:none;}}
/* END_SECTION:bb-marquee */

/* START_SECTION:bb-product-rail (INDEX:8) */
.bb-product-rail{background:var(--bb-cream);padding-block:var(--bb-section-y);overflow:hidden;}
/* Rule 11: one page ceiling site-wide — see bb-category-trio. */
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.bb-product-rail__inner{max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);}
.bb-product-rail__header{display:grid;grid-template-columns:1fr auto;gap:var(--bb-space-md);align-items:end;margin-bottom:var(--bb-space-xl);}
.bb-product-rail__ribbon{display:inline-flex;grid-column:1 / -1;align-items:center;gap:var(--bb-space-2xs);width:max-content;font-family:var(--bb-font-body);font-size:var(--bb-t-eyebrow);font-weight:800;letter-spacing:var(--bb-ls-eyebrow);line-height:1;text-transform:uppercase;color:var(--bb-emerald);}
.bb-product-rail__ribbon span{width:var(--bb-space-2xs);height:var(--bb-space-2xs);border-radius:var(--bb-r-pill);background:var(--bb-emerald);}
.bb-product-rail__heading{margin:0;font-family:var(--bb-font-display);font-size:var(--bb-t-display-2);font-weight:500;line-height:var(--bb-lh-heading);letter-spacing:var(--bb-ls-tight);text-transform:uppercase;color:var(--bb-emerald);}
.bb-product-rail__controls{display:flex;gap:var(--bb-space-2xs);}
.bb-product-rail__arrow{box-sizing:border-box;width:var(--bb-control-h);height:var(--bb-control-h);border:1px solid var(--bb-line);border-radius:var(--bb-r-pill);background:transparent;color:var(--bb-emerald);font-family:var(--bb-font-body);font-size:1rem;cursor:pointer;transition:background .2s ease,color .2s ease,opacity .2s ease;}
.bb-product-rail__arrow:hover:not(:disabled){background:var(--bb-emerald);color:var(--bb-cream);}
.bb-product-rail__arrow:disabled{opacity:.35;cursor:default;}
.bb-product-rail__arrow:focus-visible,.bb-product-rail__image-link:focus-visible,.bb-product-rail__title:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;}
.bb-product-rail__shell{position:relative;}

/* SCROLLING IS NOT DEFINED HERE. The lane's overflow, snap, bleed, drag,
   progress bar and arrow visibility are all in assets/bb-rail.css, driven by
   assets/bb-rail.js, shared with the recipe rail. This section sets only how
   wide a card is, which is a decision about the content. */
.bb-product-rail__scroller{grid-auto-columns:minmax(16rem,24%);gap:var(--bb-space-md);}

/* CARD PRESENTATION IS NOT DEFINED HERE EITHER — media, title, price, gaps and
   the quick-add disc are in assets/bb-product-card.css, which names Horizon's
   card selectors in the same rules. Only the card's own box is local. */
.bb-product-rail__card{display:grid;grid-template-rows:auto 1fr;min-width:0;color:var(--bb-emerald);text-decoration:none;}
/* A card holding the real _product-card block is a flex column, not a two-row
   grid: it mirrors .product-grid--grid > .product-grid__item > .product-card
   in bb-product-card.css so every price in the lane lands on one baseline
   however many lines a title took. The empty-state branch above still uses
   the grid rules, which is why both survive. */
.bb-product-rail__card--product{display:flex;}
.bb-product-rail__card--product > .product-card{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;}
.bb-product-rail__card--product > .product-card > .product-card__content{flex:1 1 auto;}
.bb-product-rail__image-link{display:block;text-decoration:none;color:inherit;}
.bb-product-rail__meta{display:grid;align-content:start;}
.bb-product-rail__title{position:relative;}
/* A one-line title link is 25px tall — past WCAG 2.5.8's 24px, short of the
   44px this project holds itself to. The hit area is widened without moving
   anything; it may overlap the price, which is a span, not a second link. */
.bb-product-rail__title::after{content:'';position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);min-height:var(--bb-tap-min);height:100%;}
.bb-product-rail__progress{margin-top:var(--bb-space-md);}
@media(max-width:900px){.bb-product-rail__scroller{grid-auto-columns:minmax(15rem,42%);}.bb-product-rail__header{grid-template-columns:1fr;}.bb-product-rail__controls{justify-self:start;}}
/* bb-rail.css hides the arrows themselves below 900px; the container has to go
   too or its empty grid row still spends a --bb-space-md gap under the
   heading. Matched to the same breakpoint. */
@media(max-width:899px){.bb-product-rail__controls{display:none;}}
@media(max-width:520px){.bb-product-rail__scroller{grid-auto-columns:minmax(14rem,72%);gap:var(--bb-space-sm);}}
@media(prefers-reduced-motion:reduce){.bb-product-rail__arrow{transition:none;}}
/* END_SECTION:bb-product-rail */

/* START_SECTION:bb-recipe-grid (INDEX:9) */
.bb-recipe-grid{background:var(--bb-cream-2);padding-block:var(--bb-section-y);overflow:hidden;}
/* Rule 11: one page ceiling site-wide — see bb-category-trio. */
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.bb-recipe-grid__inner{max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);}
.bb-recipe-grid__header{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,.64fr);gap:var(--bb-space-md) var(--bb-space-2xl);align-items:end;margin-bottom:var(--bb-space-xl);}
.bb-recipe-grid--with-illustrations .bb-recipe-grid__header{position:relative;isolation:isolate;grid-template-columns:minmax(19rem,.58fr) minmax(28rem,1fr);align-items:center;min-height:0;padding-block:0;}
.bb-recipe-grid__eyebrow{grid-column:1 / -1;font-family:var(--bb-font-body);font-size:var(--bb-t-eyebrow);font-weight:800;letter-spacing:var(--bb-ls-eyebrow);line-height:1;text-transform:uppercase;color:var(--bb-accent-on-light);}
.bb-recipe-grid--with-illustrations .bb-recipe-grid__eyebrow,.bb-recipe-grid--with-illustrations .bb-recipe-grid__heading{position:relative;z-index:2;}
.bb-recipe-grid__heading{margin:0;max-width:14ch;font-family:var(--bb-font-display);font-size:var(--bb-t-display-2);font-weight:500;letter-spacing:var(--bb-ls-tight);line-height:var(--bb-lh-heading);text-transform:uppercase;color:var(--bb-emerald);}
.bb-recipe-grid__subheading{font-family:var(--bb-font-body);font-size:var(--bb-t-lead);line-height:var(--bb-lh-body);color:var(--bb-ink-soft);}
.bb-recipe-grid--split-heading .bb-recipe-grid__header{align-items:center;}
.bb-recipe-grid--split-heading .bb-recipe-grid__subheading{align-self:center;max-width:34rem;}
.bb-recipe-grid__floaters{grid-column:2;position:relative;z-index:1;justify-self:end;width:min(100%,48rem);min-height:clamp(14rem,20vw,18rem);overflow:hidden;border-radius:var(--bb-r-card);pointer-events:none;}
.bb-recipe-grid__floater{position:absolute;width:clamp(2.75rem,4.15vw,4.75rem);filter:drop-shadow(0 .55rem .75rem color-mix(in srgb,var(--bb-emerald-deep) 12%,transparent));animation:bb-recipe-float 7s ease-in-out infinite;transform:rotate(var(--bb-tilt,0deg));}
.bb-recipe-grid__floater--egg{left:18%;top:18%;--bb-tilt:-8deg;animation-delay:-1.2s;}
.bb-recipe-grid__floater--dal{right:4%;top:15%;width:clamp(3.2rem,4.8vw,5.4rem);--bb-tilt:7deg;animation-delay:-2.6s;}
.bb-recipe-grid__floater--ghee{left:16%;bottom:12%;width:clamp(3.1rem,4.65vw,5.2rem);--bb-tilt:9deg;animation-delay:-3.8s;}
.bb-recipe-grid__floater--spice{right:18%;bottom:12%;width:clamp(2.85rem,4.25vw,4.8rem);--bb-tilt:-10deg;animation-delay:-.4s;}
.bb-recipe-grid__floater--roti{left:41%;top:6%;width:clamp(2.95rem,4.45vw,5rem);--bb-tilt:12deg;animation-delay:-4.5s;}
.bb-recipe-grid__floater--pickle{left:2%;top:42%;width:clamp(2.9rem,4.35vw,4.9rem);--bb-tilt:-5deg;animation-delay:-5.1s;}
.bb-recipe-grid__floater--kheer{right:3%;top:45%;width:clamp(3.25rem,4.8vw,5.35rem);--bb-tilt:-6deg;animation-delay:-2s;}
.bb-recipe-grid__floater--oil{left:61%;top:31%;width:clamp(2.85rem,4.2vw,4.7rem);--bb-tilt:6deg;animation-delay:-.9s;}
.bb-recipe-grid__floater--pan{left:36%;bottom:8%;width:clamp(3.15rem,4.7vw,5.25rem);--bb-tilt:-8deg;animation-delay:-6s;}
.bb-recipe-grid__svg{display:block;width:100%;height:auto;overflow:visible;}
.bb-recipe-grid__yolk,.bb-recipe-grid__yolk-shine{animation:bb-recipe-yolk 3.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.bb-recipe-grid__steam{animation:bb-recipe-steam 3.1s ease-in-out infinite;opacity:.34;}
.bb-recipe-grid__steam--two{animation-delay:.45s;}
.bb-recipe-grid__steam--three{animation-delay:.9s;}
.bb-recipe-grid__ghee-drop{animation:bb-recipe-drop 2.7s ease-in-out infinite;transform-box:fill-box;transform-origin:center top;}
.bb-recipe-grid__spice-grain{animation:bb-recipe-sprinkle 2.9s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.bb-recipe-grid__spice-grain--two{animation-delay:.35s;}
.bb-recipe-grid__spice-grain--three{animation-delay:.7s;}
.bb-recipe-grid__roti-puff{animation:bb-recipe-pulse 4.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.bb-recipe-grid__pickle-piece,.bb-recipe-grid__oil-drop,.bb-recipe-grid__pan-flame{animation:bb-recipe-drop 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.bb-recipe-grid__seed{animation:bb-recipe-sprinkle 3.1s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
.bb-recipe-grid__seed--two{animation-delay:.3s;}
.bb-recipe-grid__seed--three{animation-delay:.6s;}
/* auto-fit keeps a partial row (fewer than four recipes) centred rather than
   stranded against the left edge. Tracks cap at the four-up card width. */
.bb-recipe-grid__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,16.5rem));justify-content:center;gap:var(--bb-space-md);}
.bb-recipe-grid__empty{margin:0;padding:var(--bb-space-lg);border:1px dashed var(--bb-line);border-radius:var(--bb-r-card);font-family:var(--bb-font-body);font-size:var(--bb-t-body);line-height:var(--bb-lh-body);text-align:center;text-wrap:balance;color:var(--bb-ink-soft);}
/* Card presentation lives in assets/bb-recipe-card.css, linked above, because
   snippets/bb-recipe-card.liquid is shared with the product page and section
   stylesheets are only emitted on pages where their section renders. */
.bb-recipe-grid__footer{display:flex;justify-content:center;margin-top:var(--bb-space-xl);}
.bb-recipe-grid__view-all{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--bb-control-h);padding-inline:var(--bb-space-lg);border:1px solid var(--bb-emerald);border-radius:var(--bb-r-btn);font-family:var(--bb-font-body);font-size:var(--bb-t-small);font-weight:600;letter-spacing:var(--bb-ls-tight);color:var(--bb-emerald);text-decoration:none;transition:background .2s ease,color .2s ease;}
.bb-recipe-grid__view-all:hover{background:var(--bb-emerald);color:var(--bb-cream);}
.bb-recipe-grid__view-all:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;}
@media(max-width:1100px){.bb-recipe-grid__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:900px){.bb-recipe-grid--with-illustrations .bb-recipe-grid__header{grid-template-columns:minmax(18rem,.72fr) minmax(0,1fr);}.bb-recipe-grid__floater--pickle,}
@media(max-width:760px){.bb-recipe-grid__header{grid-template-columns:1fr;}.bb-recipe-grid__heading{max-width:none;}.bb-recipe-grid--with-illustrations .bb-recipe-grid__header{grid-template-columns:1fr;min-height:0;padding-block:0;}.bb-recipe-grid__floaters{display:none;}.bb-recipe-grid__grid{gap:var(--bb-space-md);}}
@media(max-width:560px){.bb-recipe-grid__grid{grid-template-columns:1fr;}}
@keyframes bb-recipe-float{0%,100%{transform:translate3d(0,0,0) rotate(var(--bb-tilt,0deg));}50%{transform:translate3d(0,-.45rem,0) rotate(var(--bb-tilt,0deg));}}
@keyframes bb-recipe-yolk{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(1px,-2px) scale(1.04,.97);}}
@keyframes bb-recipe-steam{0%,100%{opacity:.18;transform:translateY(.25rem);}50%{opacity:.55;transform:translateY(-.45rem);}}
@keyframes bb-recipe-drop{0%,100%{transform:translateY(-.18rem) scale(.98);}50%{transform:translateY(.55rem) scale(1.04);}}
@keyframes bb-recipe-sprinkle{0%,100%{opacity:.48;transform:translateY(-.35rem) scale(.9);}50%{opacity:1;transform:translateY(.45rem) scale(1.08);}}
@keyframes bb-recipe-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.04,.97);}}
/* Card-level reduced-motion resets live in assets/bb-recipe-card.css. */
@media(prefers-reduced-motion:reduce){.bb-recipe-grid__floater,.bb-recipe-grid__yolk,.bb-recipe-grid__yolk-shine,.bb-recipe-grid__steam,.bb-recipe-grid__ghee-drop,.bb-recipe-grid__spice-grain,.bb-recipe-grid__roti-puff,.bb-recipe-grid__pickle-piece,.bb-recipe-grid__oil-drop,.bb-recipe-grid__pan-flame,.bb-recipe-grid__seed{animation:none;}}

/* ---- horizontal rail (layout: rail) ------------------------------------
   The lane itself — overflow, snap, bleed, drag, progress and arrow
   visibility — is assets/bb-rail.css, driven by assets/bb-rail.js. Identical
   to the product rail because it is literally the same stylesheet. What is
   left here is how wide a recipe card is and how the arrows look. */
/* The rail's frame, arrows, progress bar and hide-on-mobile rule now live in
   assets/bb-rail.css, keyed off the data-attributes this markup already
   carries. A third rail (the PDP's "Cook with it") cannot read a section
   stylesheet, so a shared component could not keep its presentation here.
   What stays is card width and lane spacing — decisions about the content. */
/* Rule 4: --bb-card is the shared rail width, so the homepage recipe rail, the
   PDP's "Cook with it" and the pairs rail all put their columns on the same
   grid. 280/360px was sized for the landscape card that no longer ships. */
.bb-recipe-grid__scroller{
  grid-auto-columns:var(--bb-card);
  gap:var(--bb-space-sm);
  padding-block:var(--bb-space-lg);
  margin-block:calc(var(--bb-space-lg) * -1);
}
/* END_SECTION:bb-recipe-grid */

/* START_SECTION:bb-trust (INDEX:10) */
/* The strip sits on the page ground with nothing but its own padding holding
   the modules above and below off it, so that padding is the separation. */
.bb-trust{padding-block:var(--bb-space-xl);}
/* --bb-max-content with --page-margin as the gutter. The reason the note here
   used to say --page-width was that the pillars must line up edge for edge
   with the category trio above and the founder note below — that still holds,
   and both of those moved to the same cap in the same pass. Rule 11: one page
   ceiling site-wide. See bb-category-trio for the full note. */
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.bb-trust__inner{max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);}

/* The optional anchor. Same eyebrow and heading treatment the FAQ block uses,
   so a filled-in trust strip reads as a sibling of the other homepage modules
   rather than a fifth way of setting a section heading. Its bottom margin is
   the only thing it adds when empty — and when empty it is not rendered, so
   it adds nothing at all. */
.bb-trust__intro{margin-block-end:var(--bb-space-lg);}
.bb-trust__eyebrow{margin-block-end:var(--bb-space-xs);font-family:var(--bb-font-body);font-size:var(--bb-t-eyebrow);font-weight:800;letter-spacing:var(--bb-ls-eyebrow);line-height:1;text-transform:uppercase;color:var(--bb-accent-on-light);}
.bb-trust__heading{margin:0;max-inline-size:var(--bb-max-read);font-family:var(--bb-font-display);font-size:var(--bb-t-display-3);font-weight:500;letter-spacing:var(--bb-ls-tight);line-height:var(--bb-lh-heading);text-wrap:balance;color:var(--bb-emerald);}

/* 2x2 ON MOBILE, NEVER ONE COLUMN. Four pillars stacked single-file ran to
   702px at 360px — most of a phone screen for four short claims, and the
   fourth was never on screen with the first. */

/* ROW-GAP IS ZERO, AND THAT IS THE BUG FIX. Corrected 2026-08-21.

   Every pillar spans all three rows, so a single row-gap on this grid cannot
   mean two different things — and it was being asked to. It was set to
   --bb-space-2xl to separate the two rows of pillars on a phone, but at four
   across there is only ONE row of pillars, so all three grid rows belong to
   one pillar and that 64px landed INSIDE it. Measured live at 1280: 42px of
   dead air between every heading and its own sentence, where the design calls
   for 8. That is most of why the founder said this section reads as empty —
   each pillar was being pulled apart into three unrelated pieces.

   `row-gap:0` on the item was written to prevent exactly this and does not:
   the parent's tracks resolved to 16px/0/0 with 64px gaps between them, so the
   gap survived the override. Rather than fight the subgrid gap-inheritance
   rules, the gap is removed at the source and the pillar-to-pillar separation
   is put where it actually belongs — on the two pillars that have another
   pillar underneath them. See the nth-child rule in the mobile block.

   The subgrid itself STAYS. It is what keeps the sentences aligned across the
   row when one heading wraps and its neighbours do not. */
.bb-trust__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--bb-space-md);row-gap:0;}

/* Three tracks: disc, heading, body. Shared across the row — see the note at
   the top of the file for why row-gap:0 is not tidiness. */
.bb-trust__item{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;}

/* THE PILLAR-TO-PILLAR GAP, now that the grid's own row-gap cannot carry it.
   Only the top two pillars have anything beneath them at 2-across, so only
   they pay for the separation. Reset at 768 where the row is four wide and
   nothing is stacked. */
.bb-trust__item:nth-child(-n+2){margin-block-end:var(--bb-space-xl);}

/* align-self:start on all three, so a pillar whose heading is one line keeps
   its heading at the top of a track sized by a pillar whose heading is two. */
/* THE DISC GOES 32 -> 48 AND THE GLYPH 16 -> 24. The founder's note was that
   this strip reads visually incomplete; a 16px mark inside a 32px disc, set
   against 96px of padding above and below, is a small thing in a large empty
   field. At 48 the four discs carry the row, which is the job they were always
   meant to do — they are the only non-type element in the module. */
.bb-trust__badge{align-self:start;inline-size:var(--bb-space-xl);block-size:var(--bb-space-xl);margin-block-end:var(--bb-space-sm);border-radius:var(--bb-r-pill);background:var(--bb-emerald);color:var(--bb-cream);display:inline-grid;place-items:center;}
/* --bb-t-body -> --bb-t-lead (16.8 to 20px fluid). Still Inter 700, still a
   label rather than display type: the note at the top of this file explains
   why the heading left the display band, and that reasoning is unchanged.
   This is the same decision one step louder, not a reversal of it. */
.bb-trust__title{align-self:start;margin-block-end:var(--bb-space-2xs);font-family:var(--bb-font-body);font-size:var(--bb-t-lead);font-weight:700;line-height:var(--bb-lh-tight);color:var(--bb-emerald);text-wrap:balance;}
.bb-trust__body{align-self:start;font-family:var(--bb-font-body);font-size:var(--bb-t-body);line-height:var(--bb-lh-body);color:var(--bb-ink-soft);text-wrap:pretty;}

/* Rule 11: exactly two breakpoints, and they change column count, container
   and scale — nothing else. No component appears here that is not on mobile. */
/* PADDING COMES DOWN AS THE CONTENT COMES UP. 96px above and below a 144px
   block is what "empty" looked like; 64 around a denser block reads as a
   module. The separation from the sections either side is unchanged in kind,
   only in amount. */
@media(min-width:768px){
  .bb-trust{padding-block:var(--bb-space-2xl);}
  .bb-trust__grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--bb-space-lg);}
  /* Nothing is stacked at four across, so nobody owes a bottom margin. */
  .bb-trust__item:nth-child(-n+2){margin-block-end:0;}
}

@media(min-width:1024px){
  .bb-trust{padding-block:var(--bb-space-2xl);}
  .bb-trust__grid{column-gap:var(--bb-space-xl);}
}
/* END_SECTION:bb-trust */

/* START_SECTION:collection-links (INDEX:13) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media screen and (min-width: 750px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media screen and (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media screen and (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:featured-product (INDEX:19) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

    @media screen and (min-width: 750px) {
      --padding-block: 40px;
      --padding-inline: 40px;
    }
  }

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-utilities (INDEX:20) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--divider-color, var(--color-border));
    color: var(--color-foreground-muted);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      text-align: left;
    }
  }

  .utilities a,
  .utilities button {
    color: var(--color-utilities, var(--color-foreground-muted));
  }

  .utilities > * {
    text-align: center;

    @media screen and (min-width: 750px) {
      text-align: left;
      justify-self: start;
    }
  }

  /* Dynamic positioning based on number of blocks */
  @media screen and (min-width: 750px) {
    /* 1 block: Single column, left aligned */
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

    /* 2 blocks: Two equal columns, start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }

    /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:21) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

  .footer-content .menu__heading__default {
    font-weight: var(--font-heading--weight);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }

    .footer-content[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:gp-about-story (INDEX:22) */
/* MOBILE FIRST. Rule 11 allows exactly two breakpoints, 768 and 1024, and
     they are written as literals: --bb-bp-md and --bb-bp-lg are custom
     properties, and a custom property inside a media condition never matches.
     The tokens remain the written record of the two permitted values. */

  /* Bands, not sections. The page is one section so the founder can reorder the
     whole story by dragging blocks; each block paints its own ground and its own
     vertical rhythm so the order can change without the colours going wrong. */
  .gp-about__band {
    padding-block: var(--bb-space-xl);
  }

  .gp-about__band--cream {
    background: var(--bb-cream);
    color: var(--bb-ink);
  }

  .gp-about__band--cream2 {
    background: var(--bb-cream-2);
    color: var(--bb-ink);
  }

  .gp-about__band--deep {
    background: var(--bb-emerald-deep);
    color: var(--bb-cream);
  }

  /* Two bands of the same ground meeting would read as one very tall band, so
     the second one drops its top padding and the pair share a single rhythm.
     This is what pairs a group heading with the grid underneath it. */
  .gp-about__band--cream + .gp-about__band--cream,
  .gp-about__band--cream2 + .gp-about__band--cream2 {
    padding-block-start: 0;
  }

/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
  .gp-about__inner {
    box-sizing: border-box;
    max-width: calc(var(--bb-max-content) + var(--bb-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--bb-gutter);
  }

  .gp-about__eyebrow {
    margin: 0 0 var(--bb-space-2xs);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 800;
    letter-spacing: var(--bb-ls-eyebrow);
    line-height: 1;
    text-transform: uppercase;
    color: var(--bb-accent-on-light);
  }

  /* Sienna clears AA on cream and does not on the deep ground; gold is the
     other way round. Same pairing the founder note uses. */
  .gp-about__eyebrow--dark {
    color: var(--bb-accent-on-dark);
  }

  /* THE SWAP IS DRIVEN BY THE GROUND, NOT BY A CLASS ON THE ELEMENT.

     `--dark` above was only ever added by hand, in the one block that
     hardcodes a deep band (origins). Every other block takes its ground from a
     setting, so the moment a founder switched a chapter to deep emerald in the
     theme editor its eyebrow stayed sienna — measured at 1.86:1 against
     #013D24, which is not a near miss, it is unreadable. That is exactly what
     happened when "Our promise" moved to the deep ground on 2026-08-21.

     A descendant rule fixes it for every block type at once and cannot be
     forgotten by the next block that gets a ground setting. The modifier class
     is kept because it resolves to the same colour and existing markup uses
     it. */
  .gp-about__band--deep .gp-about__eyebrow {
    color: var(--bb-accent-on-dark);
  }

  /* The group intro is the one remaining ink on a deep band with no rule of
     its own. Matched to the prose so a deep `heading` block cannot ship a
     dark-on-dark paragraph the way the eyebrow just did. */
  .gp-about__band--deep .gp-about__groupintro {
    color: color-mix(in srgb, var(--bb-cream) 88%, transparent);
  }

  /* ---- group heading ---- */

  .gp-about__grouphead {
    max-width: var(--bb-max-read);
  }

  .gp-about__grouptitle {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-2);
    font-weight: 500;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-display);
    text-wrap: balance;
    overflow-wrap: break-word;
    color: var(--bb-emerald-deep);
  }

  .gp-about__groupintro {
    margin: var(--bb-space-sm) 0 0;
    max-width: var(--bb-max-read);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-lead);
    line-height: var(--bb-lh-body);
    color: var(--bb-ink-soft);
  }

  /* ---- chapter ---- */

  .gp-about__chapter {
    display: grid;
    gap: var(--bb-space-md);
  }

  .gp-about__chaptercopy {
    min-width: 0;
    max-width: var(--bb-max-read);
  }

  .gp-about__chaptertitle {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-3);
    font-weight: 500;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-tight);
    text-wrap: balance;
    overflow-wrap: break-word;
    color: var(--bb-emerald-deep);
  }

  /* THE MEASURE IS THE POINT, and Rule 11 makes it a token rather than a
     judgement: --bb-max-read is binding on every block of running prose on the
     site, at every viewport. A 1160px-wide paragraph is the most common way a
     good mobile design dies on desktop. */
  .gp-about__prose {
    margin-block-start: var(--bb-space-md);
    max-width: var(--bb-max-read);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-body);
    line-height: var(--bb-lh-body);
    overflow-wrap: break-word;
    color: var(--bb-ink);
  }

  /* Reset the browser's default paragraph margins so the owl selector below is
     the single source of vertical rhythm in the founder's rich text.

     ORDER WILL NOT SAVE YOU HERE, SPECIFICITY DECIDES. `.gp-about__prose p` is
     (0,1,1) and plain `> * + *` is (0,1,0), so the reset beat the rhythm rule
     and every chapter rendered as one unbroken wall of text -- the rich text is
     all <p>, so nothing ever got a gap. The `> p + p` half raises the rhythm
     rule to (0,1,2) so it wins; the `> * + *` half still covers lists and
     headings, which the reset does not touch. Keep both. */
  .gp-about__prose p {
    margin: 0;
  }

  .gp-about__prose > * + *,
  .gp-about__prose > p + p {
    margin-block-start: var(--bb-space-sm);
  }

  .gp-about__prose strong {
    font-weight: 600;
    color: var(--bb-emerald-deep);
  }

  /* THE SIGNATURE SITS UNDER THE MEASURE, NOT BESIDE IT. It is capped at the
     same reading width as the prose above so it stays visually attached to the
     paragraph it signs, and it reads at small size because the promise is the
     loud part, not the name. */
  /* Portrait and signature on one row. The ROW owns the top margin the
     attribution used to own, so a chapter with no portrait sits exactly where
     it always did. */
  .gp-about__sign {
    display: flex;
    align-items: center;
    gap: var(--bb-space-sm);
    margin: var(--bb-space-md) 0 0;
    max-width: var(--bb-max-read);
  }

  .gp-about__portrait {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--bb-r-pill);
    object-fit: cover;
    /* The headshot stands on a cool grey studio ground and this page is cream,
       so without an edge it reads as a hole punched in the band. A hairline in
       the page's own line colour is enough. */
    border: 1px solid var(--bb-line);
  }

  .gp-about__band--deep .gp-about__portrait {
    border-color: color-mix(in srgb, var(--bb-cream) 35%, transparent);
  }

  .gp-about__attribution {
    margin: 0;
    max-width: var(--bb-max-read);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 600;
    line-height: var(--bb-lh-body);
    overflow-wrap: break-word;
    color: var(--bb-ink-soft);
  }

  /* A link inside the founder's own prose still has to be reachable and
     visible, so it gets the same underline and the same focus ring as the
     chapter link below rather than the browser default blue. */
  .gp-about__prose a {
    color: var(--bb-emerald);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .gp-about__prose a:focus-visible,
  .gp-about__link:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 3px;
  }

  .gp-about__band--deep .gp-about__chaptertitle,
  .gp-about__band--deep .gp-about__grouptitle {
    color: var(--bb-cream);
  }

  .gp-about__band--deep .gp-about__prose {
    color: color-mix(in srgb, var(--bb-cream) 88%, transparent);
  }

  .gp-about__band--deep .gp-about__attribution {
    color: color-mix(in srgb, var(--bb-cream) 72%, transparent);
  }

  .gp-about__band--deep .gp-about__prose strong,
  .gp-about__band--deep .gp-about__prose a {
    color: var(--bb-cream);
  }

  /* 44px minimum tap target at every width, desktop included. */
  .gp-about__link {
    display: inline-flex;
    align-items: center;
    gap: var(--bb-space-2xs);
    min-height: var(--bb-tap-min);
    margin-block-start: var(--bb-space-sm);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 600;
    color: var(--bb-emerald);
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition: border-color 0.15s ease;
  }

  .gp-about__band--deep .gp-about__link {
    color: var(--bb-accent-on-dark);
  }

  /* ---- media ---- */

  /* Rule 11: an aspect ratio never changes with the viewport. The frame is 4:5
     at 390 and at 1440; only its width moves. The cap is doing real work on
     desktop — a 4:5 frame at the full column is ~640px tall beside a chapter
     that is three paragraphs of type, so the band read as a large empty
     rectangle with words next to it.

     `width: 100%` is load-bearing next to the auto margin, not belt and braces.
     An auto inline margin makes a grid item shrink-to-fit rather than stretch,
     and the frame inside is sized in percent — so the pair resolved circularly
     and the picture collapsed to its intrinsic 173px. Width first, then cap. */
  .gp-about__figure {
    margin: 0;
    min-width: 0;
    width: 100%;
  }

  .gp-about__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--bb-r-card);
  }

  /* Rule 4: a card in a grid that is not buyable is editorial, and editorial
     is 1:1. The method cards are the only cards on this page. */
  .gp-about__image--square {
    aspect-ratio: 1 / 1;
  }

  /* ---- methods ---- */

  .gp-about__methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bb-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gp-about__method {
    min-width: 0;
  }

  .gp-about__methodmedia {
    margin-block-end: var(--bb-space-sm);
  }

  .gp-about__methodlabel {
    margin: 0 0 var(--bb-space-3xs);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 800;
    letter-spacing: var(--bb-ls-eyebrow);
    line-height: 1;
    text-transform: uppercase;
    color: var(--bb-accent-on-light);
  }

  .gp-about__methodtitle {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-4);
    font-weight: 500;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-tight);
    overflow-wrap: break-word;
    color: var(--bb-emerald-deep);
  }

  .gp-about__methodbody {
    margin: var(--bb-space-2xs) 0 0;
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-body);
    color: var(--bb-ink-soft);
  }

  /* ---- origins: the roll-call ---- */

  .gp-about__originhead {
    margin: 0 0 var(--bb-space-lg);
    max-width: var(--bb-max-read);
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-3);
    font-weight: 500;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-tight);
    text-wrap: balance;
    overflow-wrap: break-word;
    color: var(--bb-cream);
  }

  .gp-about__origins {
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid color-mix(in srgb, var(--bb-cream) 22%, transparent);
  }

  /* A ruled ledger, not a bulleted list: the place is the claim and the rule
     under it is what makes a set of them read as a record.

     The place stacks above what comes from it on a phone. The roll-call is the
     one place the display face is allowed to stay large on a small screen — it
     is the argument, not a heading over one — and stacking is what keeps it
     large without wrapping into the column beside it. */
  .gp-about__origin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bb-space-2xs);
    padding-block: var(--bb-space-sm);
    border-block-end: 1px solid color-mix(in srgb, var(--bb-cream) 22%, transparent);
  }

  .gp-about__originplace {
    min-width: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-3);
    font-weight: 500;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-tight);
    overflow-wrap: break-word;
    color: var(--bb-cream);
  }

  .gp-about__originwhat {
    min-width: 0;
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-tight);
    overflow-wrap: break-word;
    text-align: start;
    color: color-mix(in srgb, var(--bb-cream) 74%, transparent);
  }

  .gp-about__originnote {
    margin: var(--bb-space-md) 0 0;
    max-width: var(--bb-max-read);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-body);
    color: color-mix(in srgb, var(--bb-cream) 74%, transparent);
  }

  /* ---- values ---- */

  .gp-about__values {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bb-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gp-about__value {
    min-width: 0;
    padding-block-start: var(--bb-space-sm);
    border-block-start: 2px solid var(--bb-emerald);
  }

  .gp-about__valuename {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-4);
    font-weight: 500;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-tight);
    overflow-wrap: break-word;
    color: var(--bb-emerald-deep);
  }

  .gp-about__valuebody {
    margin: var(--bb-space-2xs) 0 0;
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-body);
    color: var(--bb-ink-soft);
  }

  /* ---- closing ---- */

  .gp-about__close {
    max-width: var(--bb-max-read);
  }

  .gp-about__closetitle {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-2);
    font-weight: 500;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-display);
    text-wrap: balance;
    overflow-wrap: break-word;
    color: var(--bb-emerald-deep);
  }

  .gp-about__closebody {
    margin: var(--bb-space-sm) 0 0;
    max-width: var(--bb-max-read);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-lead);
    line-height: var(--bb-lh-body);
    color: var(--bb-ink-soft);
  }

  .gp-about__button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bb-control-h);
    margin-block-start: var(--bb-space-md);
    padding-inline: var(--bb-space-lg);
    border: 1px solid var(--bb-emerald);
    border-radius: var(--bb-r-btn);
    background: var(--bb-emerald);
    color: var(--bb-cream);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 600;
    letter-spacing: var(--bb-ls-tight);
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .gp-about__button:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 4px;
  }

  .gp-about__band--deep .gp-about__closetitle {
    color: var(--bb-cream);
  }

  .gp-about__band--deep .gp-about__closebody {
    color: color-mix(in srgb, var(--bb-cream) 82%, transparent);
  }

  .gp-about__band--deep .gp-about__button {
    background: var(--bb-accent-on-dark);
    border-color: var(--bb-accent-on-dark);
    color: var(--bb-emerald-deep);
  }

  /* ---- 768: column count, container width, image scale. Nothing else. ---- */

  @media (min-width: 768px) {
    .gp-about__band {
      padding-block: var(--bb-space-2xl);
    }

    /* Copy left, picture right. The picture column is capped so a 4:5 frame
       does not out-weigh three paragraphs of type beside it. */
    .gp-about__chapter--media {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      gap: var(--bb-space-2xl);
      align-items: center;
    }

    .gp-about__chapter--media .gp-about__figure {
      max-width: 22rem;
      margin-inline-start: auto;
    }

    /* Two methods sit at the reading measure so they line up with the group
       heading above them; three take the full content width. */
    .gp-about__methods--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: var(--bb-max-read);
    }

    .gp-about__methods--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gp-about__methods,
    .gp-about__values {
      gap: var(--bb-space-lg);
    }

    .gp-about__values {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* The ledger opens out into two columns once there is room for the place
       and what comes from it on one line. */
    .gp-about__origin {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--bb-space-2xs) var(--bb-space-md);
    }

    .gp-about__originwhat {
      text-align: end;
    }
  }

  /* ---- 1024: hover only, per Rule 11 ---- */

  @media (min-width: 1024px) {
    .gp-about__link:hover {
      border-block-end-color: currentcolor;
    }

    .gp-about__button:hover {
      background: var(--bb-emerald-deep);
      border-color: var(--bb-emerald-deep);
    }

    .gp-about__band--deep .gp-about__button:hover {
      background: var(--bb-cream);
      border-color: var(--bb-cream);
      color: var(--bb-emerald-deep);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gp-about__link,
    .gp-about__button {
      transition: none;
    }
  }
/* END_SECTION:gp-about-story */

/* START_SECTION:gp-collection-chips (INDEX:26) */
/* ONE GUTTER FOR THE WHOLE COLLECTION PAGE, NAMED ONCE. The chip bar, the
   filter bar, the item count, the sort control and the product cards all
   derive their edge from this, so there is one number to change and no way for
   two of them to end up on different lines.

   IT IS --page-margin ON A PHONE AND --bb-gutter FROM 768 UP, deliberately,
   and it is the same split sections/gp-sibling-tiles.liquid took in 0507e96.
   The 390 layout was fixed and pushed on 2026-08-18 at Horizon's 16px page
   margin and is not being moved again in this bucket; from 768 up the page
   joins the --bb-gutter lane the PDP, the footer and the education page all
   run on. Below 768 the two numbers are the same 40px anyway from 750 up, so
   the switch is invisible where it happens.

   Declared on BOTH sections because they are siblings with no shared wrapper
   of ours — the collection section is Horizon's and is off limits. Same
   selector pair the grid padding already uses. */
.gp-collection-chips-section,
.gp-collection-chips-section + .shopify-section{--gp-lane-gutter:var(--page-margin);}

.gp-chips{padding-block:var(--bb-space-sm) var(--bb-space-md);}

/* Rule 11: one page ceiling site-wide, and THE CAP CARRIES ITS OWN GUTTER.
   This used to cap at --bb-max-content and pad inside that, which stacks the
   two: the box stopped at 1160 and the first chip then started one gutter
   further in again. Measured at 1440 the grid box ran 140 -> 1300, correctly
   on the lane, while the first product card sat on 180 and the chips with it —
   the whole page one gutter inside the page it belongs to.

   max-width: cap + two gutters, with the padding inside, resolves to the
   gutter below 1160 + 2g and to the cap above it. 140 at 1440, 64 at 1280,
   which is what the PDP measures. */
.gp-chips__inner{box-sizing:border-box;max-width:calc(var(--bb-max-content) + var(--gp-lane-gutter) * 2);margin-inline:auto;padding-inline:var(--gp-lane-gutter);}

/* Mobile: one full-bleed scroll lane. The negative margin matches the inner
   padding exactly, so the lane spans the viewport without overflowing it, and
   the mask fades over the same distance — at rest the fade sits on the padding
   rather than on a chip.

   The block padding is load-bearing, not decoration. `overflow-x:auto` forces
   `overflow-y` to compute to `auto` as well, so ANY vertical overflow makes the
   lane scroll up and down — and the 44px tap target below overflows its 40px
   chip by 2px at each end. Without this padding the chip bar scrolls
   vertically. It also leaves room for the focus ring, which sits 5px proud. */
.gp-chips__scroller{
  display:flex;
  gap:var(--bb-space-2xs);
  margin:0 calc(var(--gp-lane-gutter) * -1);
  padding:var(--bb-space-2xs) var(--gp-lane-gutter);
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--gp-lane-gutter);
  scrollbar-width:none;
  /* A gradient mask reads its alpha channel, so `currentColor` here means
     "fully opaque" rather than any particular colour — it keeps the rule
     free of a hardcoded hex. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,currentColor var(--gp-lane-gutter),currentColor calc(100% - var(--gp-lane-gutter)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,currentColor var(--gp-lane-gutter),currentColor calc(100% - var(--gp-lane-gutter)),transparent 100%);
}
.gp-chips__scroller::-webkit-scrollbar{display:none;}
.gp-chips__item{flex:0 0 auto;scroll-snap-align:start;}

.gp-chips__chip{
  position:relative;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--bb-control-h-xs);
  padding-inline:var(--bb-space-md);
  border:1px solid var(--bb-line);
  border-radius:var(--bb-r-btn);
  background:var(--bb-cream-2);
  color:var(--bb-emerald);
  font-family:var(--bb-font-body);
  font-size:var(--bb-t-small);
  font-weight:600;
  line-height:var(--bb-lh-tight);
  letter-spacing:var(--bb-ls-tight);
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}

/* The chip reads at --bb-control-h-xs (36px) but has to be tappable at 44px
   (WCAG 2.5.8). The pseudo-element carries the extra 8px without changing the
   visual height: 4px proud at each end, still inside the lane's 8px of block
   padding, so the bar does not gain a vertical scroll. */
.gp-chips__chip::after{
  content:'';
  position:absolute;
  inset-inline:0;
  top:50%;
  transform:translateY(-50%);
  min-height:var(--bb-tap-min);
  height:100%;
}
.gp-chips__chip:hover{background:var(--bb-cream);border-color:var(--bb-emerald);}
.gp-chips__chip:focus-visible{outline:2px solid var(--bb-gold);outline-offset:3px;}
.gp-chips__chip--active,
.gp-chips__chip--active:hover{background:var(--bb-emerald);border-color:var(--bb-emerald);color:var(--bb-cream);}

/* The custom chips section is immediately before the native collection
   section in templates/collection.json. Scope the container inset through
   that stable wrapper relationship so search grids are not affected.

   THE GUTTER IS --gp-lane-gutter, THE SAME ONE THE CHIP BAR AND THE FILTER BAR
   READ. It was --page-margin here and --bb-gutter everywhere else on the site,
   which is a different number at every width — 20 vs 16 on a phone, 64 vs 40
   on a desktop — so the collection page and the product page it links to sat
   on two different left edges. One variable now feeds all three bars and the
   cards, and it resolves to --page-margin below 768 so the signed-off 390
   layout does not move.

   The caps are in assets/bb-horizon-overrides.css, not here: they need to load
   after Horizon's own grid rules, and this stays the single owner of the
   inline padding so the two properties never fight. */
.gp-collection-chips-section + .shopify-section .main-collection-grid{
  box-sizing:border-box;
  padding-inline:var(--gp-lane-gutter);
}

@media screen and (min-width:768px){
  /* From here up the whole page runs on --bb-gutter. See the note at the top
     of this stylesheet for why the phone keeps Horizon's page margin. */
  .gp-collection-chips-section,
  .gp-collection-chips-section + .shopify-section{--gp-lane-gutter:var(--bb-gutter);}

  .gp-chips__scroller{
    flex-wrap:wrap;
    gap:var(--bb-space-2xs) var(--bb-space-xs);
    margin-inline:0;
    padding-inline:0;
    overflow-x:visible;
    -webkit-mask-image:none;
    mask-image:none;
  }
}

@media(prefers-reduced-motion:reduce){.gp-chips__chip{transition:none;}}
/* END_SECTION:gp-collection-chips */

/* START_SECTION:gp-contact-page (INDEX:27) */
.gp-contact { background: var(--bb-cream); color: var(--bb-ink); padding-block: var(--bb-section-y); }
  /* Rule 11: --bb-max-content, not --bb-container. --bb-container is 1340 and
     predates the rule; it is retained in bb-tokens.css only so nothing breaks
     while shipped sections are moved off it, and this was one of the last
     three reading it. */
  /* THE CAP INCLUDES THE GUTTER. This read `max-width: --bb-max-content` and
     THEN padded inside it, so the lane measured 1160 but the content sat at
     204 -> 1236 at 1440 — a full gutter narrower on each side than every
     other section on the site, which all land on 140 -> 1300. That is the
     "width is too short compared to everything else".

     Every lane owner on this site resolves its left edge from the same piece
     of arithmetic: cap = content + two gutters, padding = one gutter. Written
     any other way a section is off the lane by exactly however much padding
     it added. */
  .gp-contact__inner { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: var(--bb-space-3xl); row-gap: var(--bb-space-2xl); max-width: calc(var(--bb-max-content) + var(--bb-gutter) * 2); margin-inline: auto; padding-inline: var(--bb-gutter); }
  .gp-contact__intro { align-self: start; }
  .gp-contact__eyebrow { margin: 0 0 1rem; color: var(--bb-emerald); font-family: var(--bb-font-body); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  /* SCOPED TO THE TWO HEADINGS THAT WANT DISPLAY TYPE, NOT EVERY h1 AND h2.

     This was `.gp-contact h1, .gp-contact h2`, which caught the COMPANY
     DETAILS heading too — and at 0,1,1 it outranked the 0,1,0 rule written
     for that heading, so a line meant to be 11px uppercase Inter rendered as
     54px Fraunces and pushed the label/value rows out of line. That is the
     "company details alignment is messed up" the founder saw, on both
     desktop and phone. It was never an alignment rule; it was this.

     SIZES COME OFF THE SCALE NOW. The page carried its own clamps —
     3rem to 6.5rem on the h1, which tops out at 104px, roughly twice the
     largest heading anywhere else on the site. --bb-t-display-2 is what the
     other page titles use. */
  .gp-contact__intro h1,
  .gp-contact__form-wrap h2 { margin: 0; color: var(--bb-emerald-deep); font-family: var(--bb-font-display); font-weight: 500; letter-spacing: var(--bb-ls-tight); text-wrap: balance; }
  .gp-contact__intro h1 { font-size: var(--bb-t-display-2); line-height: var(--bb-lh-heading); }
  .gp-contact__form-wrap h2 { font-size: var(--bb-t-display-3); line-height: var(--bb-lh-heading); }
  .gp-contact__lede, .gp-contact__form-wrap > p { max-width: 38rem; color: var(--bb-ink-soft); font-family: var(--bb-font-body); font-size: 1rem; line-height: 1.7; }
  .gp-contact__lede { margin: 1.5rem 0 0; }
  .gp-contact__methods { display: grid; gap: 1rem; margin-top: 2.25rem; font-style: normal; }
  .gp-contact__method { display: grid; gap: .35rem; padding: 1.15rem 1.25rem; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); background: var(--bb-cream-2); }
  .gp-contact__method-label { color: var(--bb-ink-soft); font-family: var(--bb-font-body); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  /* WCAG 2.5.8. The phone, email and WhatsApp links measured 17–23px tall: they
     are grid items in .gp-contact__method, so their box was exactly the height
     of one line of type. These are the three ways a customer reaches a food
     business about an order, on a page that exists for nothing else, so they
     are the last links on the site that should be hard to hit.

     display:flex + min-block-size raises the box without touching the type —
     the font sizes below are unchanged. `width: fit-content` is kept so the
     underline still stops at the end of the number rather than running the
     width of the card; flex does not change that.

     --bb-tap-aa, not --bb-tap-min: these are text links stacked .35rem apart
     inside a card, and 44px boxes would overlap each other. See bb-tokens.css. */
  .gp-contact__method a { display: flex; align-items: center; min-block-size: var(--bb-tap-aa); width: fit-content; color: var(--bb-emerald-deep); font-family: var(--bb-font-display); font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 600; line-height: 1.2; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .gp-contact__method .gp-contact__secondary-link { color: var(--bb-emerald); font-family: var(--bb-font-body); font-size: .9rem; font-weight: 700; }
  .gp-contact__form-wrap { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); background: color-mix(in srgb, var(--bb-cream-2) 56%, white); }
  .gp-contact__form-wrap > p { margin: .8rem 0 1.75rem; }
  .gp-contact__form { display: grid; gap: 1.15rem; }
  .gp-contact__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .gp-contact__field { display: grid; gap: .45rem; }
  .gp-contact__field label { color: var(--bb-ink); font-family: var(--bb-font-body); font-size: .82rem; font-weight: 800; }
  .gp-contact__field :is(input, textarea) { width: 100%; min-height: 3.25rem; padding: .8rem .9rem; border: 1px solid color-mix(in srgb, var(--bb-emerald) 32%, transparent); border-radius: var(--bb-r-md); background: var(--bb-cream); color: var(--bb-ink); font: inherit; }
  .gp-contact__field textarea { min-height: 10rem; resize: vertical; }
  .gp-contact__field :is(input, textarea):focus-visible, .gp-contact__method a:focus-visible, .gp-contact__submit:focus-visible { outline: 3px solid var(--bb-gold); outline-offset: 3px; }
  .gp-contact__submit { min-height: 3.25rem; width: fit-content; padding: .85rem 1.5rem; border: 1px solid var(--bb-emerald); border-radius: var(--bb-r-btn); background: var(--bb-emerald); color: var(--bb-cream); font-family: var(--bb-font-body); font-size: .85rem; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
  .gp-contact__submit:hover { background: var(--bb-emerald-deep); }
  .gp-contact__status { margin: 0 0 .5rem; padding: .9rem 1rem; border-radius: var(--bb-r-md); font-family: var(--bb-font-body); line-height: 1.5; }
  .gp-contact__status--success { background: color-mix(in srgb, var(--bb-emerald) 12%, white); color: var(--bb-emerald-deep); }
  .gp-contact__status--error { background: color-mix(in srgb, var(--bb-scarlet) 10%, white); color: var(--bb-scarlet); }
  @media (max-width: 768px) { .gp-contact__inner { grid-template-columns: 1fr; } .gp-contact__row { grid-template-columns: 1fr; } .gp-contact__submit { width: 100%; } }
  @media (prefers-reduced-motion: reduce) { .gp-contact__submit { transition: none; } }
/* END_SECTION:gp-contact-page */

/* START_SECTION:gp-education-chapters (INDEX:28) */
@media (prefers-reduced-motion: reduce) {
    html,
    .page-wrapper {
      scroll-behavior: auto !important;
    }
  }

  .ed-page {
    background: var(--bb-cream);
    color: var(--bb-ink);
  }

  .ed-page .is-filtered-out {
    display: none;
  }

  /* ---------------------------------------------------------------------
     THE CHAPTER AS AN OVERLAY.

     Only applies once the script has wrapped the chapters, because the class
     is added by that same function. With JavaScript off none of this matches
     and the page is the long scrolling one it has always been — which is the
     point: the markup is identical either way, so a crawler is unaffected.

     `.ed-chapters` keeps no height of its own in this mode. Every chapter is
     inside a closed dialog, so the container would otherwise hold whatever
     padding it was given and leave a gap under the index.
  --------------------------------------------------------------------- */
  .ed-page--modal .ed-chapters {
    padding-block: 0;
  }

  .ed-modal {
    box-sizing: border-box;
    inline-size: min(920px, calc(100vw - var(--bb-gutter) * 2));
    max-inline-size: none;
    /* svh, not vh: on iOS Safari vh is the tallest the viewport ever gets, so
       a 90vh dialog is taller than the screen while the toolbar is showing and
       the close button sits under it. */
    max-block-size: 88svh;
    padding: 0;
    border: 0;
    border-radius: var(--bb-r-card);
    background: var(--bb-cream);
    color: var(--bb-ink);
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* THE ONLY HARDCODED COLOUR IN THIS FILE. DO NOT "FIX" IT TO A TOKEN.

     rgba(1, 61, 36) IS --bb-emerald-deep, #013D24. It is written out because
     ::backdrop is not a descendant of the dialog in the box tree and the
     custom property does not reach it — verified live, not assumed: with
     `color-mix(in srgb, var(--bb-emerald-deep) 72%, transparent)` the rule
     was present in the CSSOM and painted nothing, leaving the site header at
     full strength behind an open chapter.

     A second declaration underneath does NOT rescue it, which is the part
     worth remembering. A var() that fails is invalid at COMPUTED-VALUE time,
     not at parse time, so the browser has already discarded the earlier
     declaration by the time it finds out — the property falls back to its
     initial value, never to the line above. Fallback-by-duplicate-declaration
     only works for syntax the parser rejects outright.

     AND DO NOT RAISE THE ALPHA TO MAKE IT SHOW IN A SCREENSHOT. The in-app
     browser pane under-renders a top-layer backdrop's alpha: at 0.72 it
     captures as almost nothing, at 0.95 as roughly half strength, and an
     opaque colour captures correctly. Proved by injecting magenta, then the
     real value, then 0.95, and comparing. 0.72 is an ordinary scrim and is
     correct in a real browser — check it in one before changing it. */
  .ed-modal::backdrop {
    background: rgba(1, 61, 36, 0.72);
  }

  /* The chapter was built to sit on a page with its own rhythm above and
     below it. Inside the dialog the dialog owns that, so the chapter gives up
     its outer spacing and its lane cap — the dialog IS the lane here. */
  /* The chapter's own top spacing was drawn for a chapter sitting in a long
     scrolling page, where it separates one ingredient from the last. In a
     sheet there is nothing above it but the close button, and stacking the
     two put 132px of nothing between the top of the panel and the ingredient's
     name — measured at 375. The dialog owns the vertical rhythm here. */
  .ed-modal .ed-chapter {
    margin: 0;
    padding-block: var(--bb-space-2xs) var(--bb-space-lg);
  }

  .ed-modal .ed-chapter__inner {
    max-inline-size: none;
    padding-block-start: 0;
    padding-inline: var(--bb-space-lg);
  }

  .ed-modal .ed-chapter__q:focus-visible,
  .ed-modal .ed-chapter__q:focus {
    outline: none;
  }

  /* ═══ THE CHAPTER, RE-SET AS A RECORD CARD ═══════════════════════════════

     What was wrong, in the founder's words: "odd spacing and too much empty
     space". Three separate causes, all of them layout rather than content.

     ONE — the chapter was built for a wide page and inherited its two-column
     split into a dialog. "What gets added" is three pills; the panel beside it
     is two paragraphs. Side by side that is a short tinted box next to a long
     one, and the difference reads as a hole. In here it is one column.

     TWO — three tinted boxes in a row (added, good, test) plus a dark card,
     each a different width, gave four competing containers and no hierarchy.
     Only ONE tint survives, on the test, because the at-home test is the thing
     this brand is actually known for and the only block that should look like
     a panel. The others are separated by hairline rules instead — cheaper,
     quieter, and it makes the card read as a record sheet, which is what it is.

     THREE — a 320px product card floating in a 920px dialog left 600px of dead
     cream beside it. The dialog is narrower now and the card spans it.

     THE DIALOG IS 680, NOT 920. A single column at 920 sets prose about 100
     characters to the line, which is unreadable; 680 lands near 75. The measure
     is the reason for the width, not the other way round. */

  .ed-modal {
    inline-size: min(680px, calc(100vw - var(--bb-gutter) * 2));
  }

  /* Beats the 768 media query on specificity, so order does not matter. */
  .ed-modal .ed-chapter__qualities,
  .ed-modal .ed-chapter__qualities--single {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ed-modal .ed-added {
    padding: 0 0 var(--bb-space-md);
    border-radius: 0;
    background: none;
    border-block-end: 1px solid var(--bb-line-soft);
  }

  .ed-modal .ed-good {
    padding-block: var(--bb-space-md);
    border-block-end: 1px solid var(--bb-line-soft);
  }

  /* The one panel. Full width of the measure so it reads as the card's spine
     rather than as another floating box. */
  .ed-modal .ed-test {
    max-width: none;
  }

  /* THE PRODUCT BAND. The founder asked for the pack visible in full and said
     to go vertical only if a landscape card could not manage it. At this width
     it can: a 4:5 media column at 150px with `contain` shows the whole pouch,
     and the band fills the measure instead of a 320px card sitting in a corner
     of it. Still one link, still the whole thing clickable. */
  .ed-modal .ed-buy {
    max-width: none;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .ed-modal .ed-buy__content {
    align-content: center;
    padding: var(--bb-space-md);
  }

  @media (max-width: 768px) {
    /* Below the fold of a phone a 150px column starves the title, so the band
       becomes the stacked card the founder described as the fallback. */
    .ed-modal .ed-buy {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
    }
  }

  /* Sticky so it is reachable from the bottom of a long chapter without
     scrolling back. Sits above the content on its own cream pad rather than
     floating over the words. */
  .ed-modal__close {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: var(--bb-tap-min);
    block-size: var(--bb-tap-min);
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    border-radius: var(--bb-r-pill);
    background: var(--bb-cream);
    color: var(--bb-emerald);
    cursor: pointer;
  }

  .ed-modal__close svg {
    inline-size: 22px;
    block-size: 22px;
  }

  .ed-modal__close:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: -4px;
  }

  @media (min-width: 1024px) {
    .ed-modal__close:hover {
      background: var(--bb-cream-2);
    }
  }

  /* A dialog that appears instantly reads as a page change rather than as a
     layer over the one you were on. Two frames of fade and lift is enough to
     say which it is; allow-discrete is what lets it run on an element going
     from display:none. */
  @media (prefers-reduced-motion: no-preference) {
    .ed-modal {
      opacity: 0;
      translate: 0 8px;
      transition: opacity .18s ease, translate .18s ease, overlay .18s allow-discrete, display .18s allow-discrete;
    }

    .ed-modal[open] {
      opacity: 1;
      translate: 0 0;
    }

    @starting-style {
      .ed-modal[open] {
        opacity: 0;
        translate: 0 8px;
      }
    }
  }

  @media (max-width: 768px) {
    .ed-modal {
      inline-size: 100vw;
      max-block-size: 92svh;
      margin-block-end: 0;
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }

    .ed-modal .ed-chapter__inner {
      padding-inline: var(--bb-gutter);
    }
  }

  .ed-nav {
    position: sticky;
    /* Follows the bar rather than holding a fixed distance from where the bar
       used to be. --bb-header-visible is the bar height while it is on screen
       and 0px once it slides away, rewritten on the root by bb-header.js, so
       the lane sits under the bar when the bar is there and takes the top of
       the screen when it goes. --bb-header-move matches the bar's own timing
       so the two travel together instead of one snapping and one sliding.

       This replaced a cream band drawn above the lane to cover the strip of
       raw page that a fixed offset left behind. There is no strip now. */
    top: var(--bb-header-visible);
    transition: top var(--bb-header-move);
    z-index: 50;
    /* Was --bb-space-xs (12px). The chip is now 36px tall and carries its 44px
       tap target on a pseudo-element that stands 4px proud at each end, so the
       lane itself has to hold that overhang — see .ed-nav__track. The 4px here
       plus the track's 8px keeps the lane's outer padding close to what it was
       while giving the pseudo-element and the focus ring room to sit inside a
       scroller whose overflow-y computes to auto. */
    padding-block: var(--bb-space-3xs);
    border-block-end: 1px solid var(--bb-line-soft);
    background: var(--bb-cream);
  }

  /* ONE LANE, AND THE CAP CARRIES ITS OWN GUTTER — see .ed-hero__inner in
     sections/gp-education-hero.liquid for the full note. Every lane owner on
     this page took the same correction in the same pass, so the hero, this
     bar, the index and every chapter resolve their left edge from one piece of
     arithmetic instead of four. */
  .ed-nav__track {
    box-sizing: border-box;
    display: flex;
    gap: var(--bb-space-2xs);
    max-width: calc(var(--bb-max-content) + var(--bb-gutter) * 2);
    margin-inline: auto;
    /* The block padding is load-bearing, not spacing. `overflow-x: auto` forces
       `overflow-y` to compute to auto as well, so the chip's 44px tap pseudo-
       element overflowing its 36px box by 4px at each end would make this lane
       scroll vertically without it. */
    padding-block: var(--bb-space-2xs);
    padding-inline: var(--bb-gutter);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--bb-gutter);
    scrollbar-width: none;
  }

  .ed-nav__track::-webkit-scrollbar {
    display: none;
  }

  /* ONE chip, two sections. Every value below is copied from
     .gp-chips__chip in sections/gp-collection-chips.liquid so the education
     filter and the collection navigation are visually the same component:
     36px tall, 24px inline padding, --bb-r-btn, --bb-t-small at 600,
     --bb-ls-tight, cream-2 resting on emerald ink, emerald when selected.

     Copied rather than shared. The two sections own their own stylesheets and
     the container around the lane differs — gp-collection-chips sits on
     Horizon's --page-width / --page-margin, this lane keeps --bb-max-content
     and --bb-gutter. If one changes, change the other by hand.

     These stay <button>s. The collection chips are links because they navigate
     between collections; these filter the page in place, and the markup, the
     data-cat attribute and aria-pressed are unchanged. */
  .ed-chip {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bb-control-h-xs);
    padding-inline: var(--bb-space-md);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-btn);
    background: var(--bb-cream-2);
    color: var(--bb-emerald);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 600;
    line-height: var(--bb-lh-tight);
    letter-spacing: var(--bb-ls-tight);
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
  }

  /* The chip reads at 36px but has to be tappable at 44px (WCAG 2.5.8). The
     pseudo-element carries the extra 8px without changing the visual height. */
  .ed-chip::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 50%;
    transform: translateY(-50%);
    min-height: var(--bb-tap-min);
    height: 100%;
  }

  .ed-chip.is-active {
    border-color: var(--bb-emerald);
    background: var(--bb-emerald);
    color: var(--bb-cream);
  }

  /* 3px, not the page's --bb-space-3xs, because that is what gp-collection-chips
     uses and the ring is part of the component being matched. */
  .ed-chip:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 3px;
  }

  .ed-index__row:focus-visible,
  .ed-buy__cta:focus-visible,
  .ed-bundle__cta:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: var(--bb-space-3xs);
  }

  @media (prefers-reduced-motion: reduce) {
    .ed-chip {
      transition: none;
    }
  }

  .ed-index__inner {
    box-sizing: border-box;
    max-width: calc(var(--bb-max-content) + var(--bb-gutter) * 2);
    margin-inline: auto;
    padding: var(--bb-space-lg) var(--bb-gutter) 0;
  }

  .ed-sectionhead {
    margin: 0 0 var(--bb-space-sm);
    color: var(--bb-emerald);
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-4);
    font-weight: 600;
    letter-spacing: var(--bb-ls-tight);
    line-height: var(--bb-lh-heading);
  }

  .ed-index__groups {
    display: grid;
  }

  .ed-index__group {
    margin-block-end: var(--bb-space-md);
  }

  /* ONE COLUMN PER GROUP ONLY MAKES SENSE WHEN EVERY GROUP IS SHOWING.

     The index is a three-column grid of GROUPS — Spices, Oils, Ghee. Tap a
     category chip and two of the three are display:none, so the survivor sat
     in column one with two empty columns beside it and the rows stacked in a
     narrow strip. That is the founder's "all left aligned, empty space on
     right".

     Filtered, the groups grid collapses to a single column and the surviving
     group columns its own ROWS instead, so the same list fills the same lane.
     data-ed-filter is written by selectCategory; see the note there. */
  .ed-page[data-ed-filter]:not([data-ed-filter='all']) .ed-index__groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .ed-page[data-ed-filter]:not([data-ed-filter='all']) .ed-index__group {
    display: grid;
    column-gap: var(--bb-space-xl);
  }

  /* The group's own label has to clear the columns it sits above, at every
     column count, so it is pinned to the full row rather than to a number. */
  .ed-page[data-ed-filter]:not([data-ed-filter='all']) .ed-index__label {
    grid-column: 1 / -1;
  }

  .ed-index__label,
  .ed-chapter__num,
  .ed-added__label,
  .ed-good__label,
  .ed-test__label {
    margin: 0;
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 600;
    letter-spacing: var(--bb-ls-eyebrow);
    line-height: var(--bb-lh-tight);
    text-transform: uppercase;
  }

  .ed-index__label,
  .ed-chapter__num,
  .ed-added__label {
    color: var(--bb-accent-on-light);
  }

  .ed-index__label {
    margin-block-end: var(--bb-space-3xs);
  }

  .ed-index__row {
    display: flex;
    align-items: center;
    gap: var(--bb-space-xs);
    min-height: var(--bb-tap-min);
    padding-block: var(--bb-space-xs);
    border-block-end: 1px solid var(--bb-line-soft);
    color: inherit;
    text-decoration: none;
  }

  .ed-index__name {
    flex: 1;
    min-width: 0;
    color: var(--bb-ink);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 500;
    line-height: var(--bb-lh-tight);
  }

  .ed-index__arrow {
    flex: 0 0 auto;
    width: var(--bb-space-sm);
    height: var(--bb-space-sm);
    color: var(--bb-emerald);
    opacity: 0.45;
  }

  .ed-chapter {
    scroll-margin-top: calc(var(--bb-header-h) + var(--bb-tap-min) + var(--bb-space-lg));
  }

  .ed-chapter__inner {
    box-sizing: border-box;
    max-width: calc(var(--bb-max-content) + var(--bb-gutter) * 2);
    margin-inline: auto;
    padding: calc(var(--bb-space-xl) + var(--bb-space-2xs)) var(--bb-gutter) 0;
  }

  .ed-chapter__head {
    max-width: var(--bb-max-read);
  }

  .ed-chapter__num {
    margin-block-end: var(--bb-space-2xs);
  }

  .ed-chapter__q {
    margin: 0 0 var(--bb-space-md);
    color: var(--bb-emerald);
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-3);
    font-weight: 600;
    letter-spacing: var(--bb-ls-display);
    line-height: var(--bb-lh-heading);
    text-wrap: balance;
  }

  .ed-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: var(--bb-max-read);
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--bb-r-md);
  }

  .ed-compare__half {
    position: relative;
    aspect-ratio: 1;
    background: var(--bb-cream-2);
  }

  .ed-compare__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ed-compare__tag {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--bb-space-3xs);
    padding: var(--bb-space-md) var(--bb-space-xs) var(--bb-space-xs);
    background: linear-gradient(to top, color-mix(in srgb, var(--bb-emerald-deep) 88%, transparent), transparent);
    color: var(--bb-paper);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 600;
  }

  .ed-compare__tag--alt {
    background: linear-gradient(to top, color-mix(in srgb, var(--bb-sienna) 88%, transparent), transparent);
  }

  .ed-compare__caption {
    max-width: var(--bb-max-read);
    margin: var(--bb-space-xs) auto 0;
    color: var(--bb-ink-soft);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    line-height: var(--bb-lh-tight);
    text-align: center;
  }

  /* Missing-image placeholder. An empty frame reads as a design choice; a
     dashed panel naming the photograph that belongs in it reads as a gap, and
     the founder can audit what is still owed by scrolling the page. The block
     fills a slot that already holds its ratio, so nothing moves when the real
     image lands. Images only — text modules still self-hide. */
  .ed-ph {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--bb-space-2xs);
    overflow: hidden;
    border: 1px dashed var(--bb-line);
    background: var(--bb-cream-2);
  }

  .ed-ph--1x1 {
    aspect-ratio: 1;
  }

  /* The tag sits over the bottom of its frame on a gradient. Clear it, so the
     placeholder line is never read through the tag. */
  .ed-compare__half .ed-ph {
    padding-block-end: var(--bb-space-xl);
  }

  .ed-ph--4x5 {
    aspect-ratio: 4 / 5;
  }

  .ed-ph__text {
    max-width: 28ch;
    color: var(--bb-ink-soft);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    font-weight: 500;
    line-height: var(--bb-lh-tight);
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }

  /* The five-product strip is five columns of roughly 54px at 390px. The 13px
     line that reads correctly in a half-width comparison frame does not fit
     there, so it steps down and is allowed to clip. A clipped label still says
     "a photograph is missing here", which is the whole job of this block. */
  .ed-ph--tight {
    padding: var(--bb-space-3xs);
  }

  .ed-ph--tight .ed-ph__text {
    font-size: var(--bb-t-eyebrow);
  }

  /* `align-items: start` is the fix for "what gets added is a big empty
     block". These two panels sit side by side from 768 up, and a grid
     stretches its items to the tallest in the row — so a panel holding three
     pills was drawn as tall as two paragraphs of sourcing prose beside it,
     with the difference showing as empty tinted space. Each panel now takes
     its own height. */
  .ed-chapter__qualities {
    display: grid;
    align-items: start;
    gap: var(--bb-space-md);
    max-width: var(--bb-max-content);
    margin-block-start: var(--bb-space-md);
  }

  .ed-added,
  .ed-good {
    min-width: 0;
  }

  .ed-added {
    padding: var(--bb-space-md);
    border-radius: var(--bb-r-md);
    background: color-mix(in srgb, var(--bb-gold) 11%, transparent);
  }

  .ed-added__label {
    margin-block-end: var(--bb-space-xs);
  }

  .ed-added__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ed-added__tags li {
    padding: var(--bb-space-3xs) var(--bb-space-xs);
    border: 1px solid color-mix(in srgb, var(--bb-sienna) 18%, transparent);
    border-radius: var(--bb-r-pill);
    background: var(--bb-paper);
    color: var(--bb-ink);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    font-weight: 500;
    line-height: var(--bb-lh-tight);
  }

  .ed-added__why {
    max-width: var(--bb-max-read);
    margin-block-start: var(--bb-space-sm);
    color: var(--bb-ink);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-body);
  }

  .ed-added__why > :first-child,
  .ed-added__why .metafield-rich_text_field > :first-child {
    margin-block-start: 0;
  }

  .ed-added__why > :last-child,
  .ed-added__why .metafield-rich_text_field > :last-child {
    margin-block-end: 0;
  }

  .ed-good__label {
    margin-block-end: var(--bb-space-2xs);
    color: var(--bb-emerald);
  }

  .ed-good__list {
    max-width: var(--bb-max-read);
    color: var(--bb-ink);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-body);
  }

  .ed-good__list ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ed-good__list li {
    position: relative;
    padding: var(--bb-space-xs) 0 var(--bb-space-xs) var(--bb-space-lg);
    border-block-end: 1px solid var(--bb-line-soft);
  }

  .ed-good__list li:last-child {
    border-block-end: 0;
  }

  .ed-good__list li::before {
    content: '\2713';
    position: absolute;
    inset-inline-start: 0;
    color: var(--bb-olive);
    font-weight: 700;
  }

  .ed-good__list > :first-child,
  .ed-good__list .metafield-rich_text_field > :first-child {
    margin-block-start: 0;
  }

  .ed-good__list > :last-child,
  .ed-good__list .metafield-rich_text_field > :last-child {
    margin-block-end: 0;
  }

  /* LEFT ON THE LANE, NOT CENTRED IN IT. Rule 11 caps this at --bb-max-read
     and says nothing about centring it; `auto` margins put it on 360 at 1440
     while the chapter heading above it sat on 204 and the bundle below it on
     64. Reading measure is a width, not a position. */
  .ed-test {
    max-width: var(--bb-max-read);
    margin: var(--bb-space-md) 0 0;
    padding: var(--bb-space-md);
    border-radius: var(--bb-r-md);
    background: var(--bb-cream-2);
  }

  .ed-test__label {
    display: flex;
    align-items: center;
    gap: var(--bb-space-2xs);
    margin-block-end: var(--bb-space-xs);
    color: var(--bb-emerald);
  }

  .ed-test__icon {
    flex: 0 0 auto;
    width: var(--bb-space-sm);
    height: var(--bb-space-sm);
  }

  /* THE DURATION IS A FACT ABOUT THE TEST, NOT PART OF ITS NAME.
     It used to be a middle dot and bare text after the label out on the index,
     where it read as a delivery or cooking time. Same gold-at-22% recipe the
     index pill used, moved in here beside the heading it belongs to.

     `text-transform` and `letter-spacing` are reset because the label above it
     is uppercase eyebrow type: inherited, "2 min" renders as "2 M I N". */
  .ed-test__pill {
    flex: 0 0 auto;
    padding: var(--bb-space-3xs) var(--bb-space-xs);
    border-radius: var(--bb-r-pill);
    background: color-mix(in srgb, var(--bb-gold) 22%, transparent);
    color: var(--bb-accent-on-light);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: normal;
    line-height: var(--bb-lh-tight);
    text-transform: none;
    white-space: nowrap;
  }

  .ed-test__body {
    max-width: var(--bb-max-read);
    margin: 0;
    color: var(--bb-ink);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-body);
  }

  /* The chapter's closing product card. Every value in this block is the same
     as .bb-recipe__product in sections/main-recipe.liquid, including the 1.1fr
     / 2fr split and the stepped-down type: the two cards are meant to read as
     one component across the site. Change one, change the other.

     Capped at --bb-max-read so it sits on the same measure as the test and
     quality modules above it rather than at chapter width, and left on the
     chapter's own edge like every other block in it. */
  /* THE CARD IS VERTICAL AND THE WHOLE OF IT IS THE LINK.

     It was a landscape two-column card with the pack in a narrow left
     column at `object-fit: cover`, which cropped the pack down to a strip —
     the founder's "the product card is broken, the image should be visible in
     full". A pack is a tall object and this card is the last thing a reader
     sees before deciding to buy, so it gets a 4:5 frame (Rule 4: 4:5 means
     buyable) and `contain`, which shows the whole pack and never crops it.

     `position: relative` here plus the stretched pseudo-element on the CTA is
     what makes the entire card clickable while keeping exactly ONE link in
     the accessibility tree. Wrapping the card in a second anchor would give a
     screen reader two links to the same place and read the whole card out as
     the link text. */
  .ed-buy {
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    max-width: var(--bb-card-lg, 320px);
    margin: var(--bb-space-md) 0 0;
    overflow: hidden;
    border-radius: var(--bb-r-card);
    background: var(--bb-emerald-deep);
    color: var(--bb-cream);
    transition: transform .15s ease;
  }

  .ed-buy__media {
    position: relative;
    min-width: 0;
    aspect-ratio: 4 / 5;
    background: var(--bb-cream);
  }

  .ed-buy__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bb-cream);
  }

  /* The hit area. inset:0 on the card, not on the media, so the text half is
     clickable too. Hover and focus are taken from the anchor and drawn on the
     card, because the anchor itself is now only a label. */
  .ed-buy__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  /* focus-within and a plain hover, NOT :has(). Shopify's section-stylesheet
     parser silently drops every rule containing :has() — verified on this page,
     zero survive into the CSSOM. The card holds exactly one focusable child,
     so focus-within is equivalent here and actually reaches the browser. */
  .ed-buy:focus-within {
    outline: 2px solid var(--bb-gold);
    outline-offset: 3px;
  }

  @media (min-width: 1024px) {
    .ed-buy:hover {
      transform: translateY(-2px);
    }
  }

  .ed-buy__content {
    display: grid;
    align-content: start;
    gap: var(--bb-space-2xs);
    min-width: 0;
    padding: var(--bb-space-sm);
    text-align: start;
  }

  .ed-buy__eyebrow {
    margin: 0;
    color: var(--bb-accent-on-dark);
    font-family: var(--bb-font-body);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: var(--bb-lh-tight);
    text-transform: uppercase;
  }

  /* An h3, not the recipe card's h2: this sits inside a chapter that already
     owns an h2, and the heading order has to stay walkable. Styled identically. */
  .ed-buy__title {
    margin: 0;
    color: var(--bb-cream);
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-3);
    font-weight: 500;
    line-height: 1;
  }

  .ed-buy__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-space-2xs);
    width: 100%;
    min-height: var(--bb-tap-min);
    /* The panel is centred and still read as top-heavy, because centring works
       on boxes and the eye reads ink. This link is a 44px tap target around a
       15px line, so it carried ~14px of invisible height below the last words:
       measured 12px of space above the eyebrow against 27px below the link's
       text. Pulling the box's bottom edge back up centres the ink instead of
       the boxes. The tap target keeps its full 44px — it now overlaps the
       panel's own padding, which costs nothing and is still inside the card. */
    margin: 0 0 calc((var(--bb-tap-min) - 1.5rem) / -2);
    color: var(--bb-cream);
    font-family: var(--bb-font-body);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: var(--bb-lh-tight);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
  }

  /* A CARD ON THE LANE. This is the shape sections/gp-purity-test.liquid took
     in 0507e96: a box that needs its own BACKGROUND on the lane rather than
     just its text, so the size and the cap are written on one element instead
     of a wrapper and an inner.

     It used to be `margin-inline: var(--bb-gutter)` with no auto, so above
     1160 + 2 gutters it stopped centring and pinned itself one gutter from the
     viewport: at 1440 the cream panel ran 64 -> 1224 while the chapter above
     it ran 204 -> 1236 and the footer below ran 140 -> 1300. Three edges, one
     column of content.

       inline-size      100% minus a gutter each side   the sub-cap behaviour
       max-inline-size  the 1160 ceiling                the cap
       margin-inline    auto                            centring above the cap

     Arithmetically identical to .ed-chapter__inner at every width. */
  .ed-bundle {
    box-sizing: border-box;
    display: grid;
    inline-size: calc(100% - var(--bb-gutter) * 2);
    max-inline-size: var(--bb-max-content);
    margin: calc(var(--bb-space-xl) + var(--bb-space-2xs)) auto 0;
    padding: var(--bb-space-md);
    border-radius: var(--bb-r-lg);
    background: var(--bb-cream-2);
  }

  .ed-bundle__strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--bb-space-2xs);
    margin-block-end: var(--bb-space-md);
  }

  .ed-bundle__item {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--bb-r-sm);
    background: var(--bb-paper);
  }

  .ed-bundle__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ed-bundle__title {
    margin: 0 0 var(--bb-space-2xs);
    color: var(--bb-emerald);
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-4);
    font-weight: 600;
    letter-spacing: var(--bb-ls-tight);
    line-height: var(--bb-lh-heading);
  }

  .ed-bundle__body {
    max-width: var(--bb-max-read);
    margin: 0 0 var(--bb-space-md);
    color: var(--bb-ink-soft);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-body);
  }

  .ed-bundle__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-space-xs);
    min-height: var(--bb-control-h);
    padding-inline: var(--bb-space-md);
    border-radius: var(--bb-r-md);
    background: var(--bb-emerald);
    color: var(--bb-paper);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 600;
    line-height: var(--bb-lh-tight);
    text-decoration: none;
  }

  .ed-bundle__arrow {
    flex: 0 0 auto;
    width: var(--bb-space-sm);
    height: var(--bb-space-sm);
  }

  .ed-close {
    margin-block-start: calc(var(--bb-space-xl) + var(--bb-space-2xs));
    padding: var(--bb-space-xl) var(--bb-gutter);
    background: var(--bb-emerald-deep);
    color: var(--bb-cream);
  }

  .ed-close__inner {
    max-width: var(--bb-max-read);
    margin-inline: auto;
  }

  .ed-close__title {
    margin: 0 0 var(--bb-space-sm);
    color: var(--bb-cream);
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-3);
    font-weight: 600;
    letter-spacing: var(--bb-ls-tight);
    line-height: var(--bb-lh-heading);
  }

  .ed-close__body {
    max-width: var(--bb-max-read);
    color: color-mix(in srgb, var(--bb-cream) 72%, transparent);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-body);
  }

  .ed-close__body > :first-child {
    margin-block-start: 0;
  }

  .ed-close__body > :last-child {
    margin-block-end: 0;
  }

  .ed-close__body strong {
    color: var(--bb-gold);
    font-weight: 600;
  }

  @media (min-width: 768px) {
    /* THE CHIPS LEFT-ALIGN WITH EVERYTHING ELSE. Founder's call 2026-08-18,
       and it overrides the "centred" this bar has in Rule 11's Education
       table. It was the one band on the page whose left edge moved with the
       number of chips: with "All 15" plus three categories it started around
       570 at 1440, and adding a fourth collection would have moved it again.
       Now the first chip sits on the lane and stays there. */
    .ed-nav__track {
      flex-wrap: wrap;
      row-gap: var(--bb-space-2xs);
      overflow-x: visible;
    }

    /* Matches main-recipe's card at the same two breakpoints. */
    .ed-buy__content {
      padding-block: var(--bb-space-sm);
      padding-inline: var(--bb-space-md);
    }

    .ed-index__groups {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--bb-space-lg);
    }

    /* Filtered: the groups grid is one column, so the surviving group takes
       the column count instead. Same number of columns either way, so the row
       width does not change when a chip is tapped. */
    .ed-page[data-ed-filter]:not([data-ed-filter='all']) .ed-index__group {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ed-chapter__inner {
      padding-block-start: var(--bb-section-y);
    }

    /* .ed-chapter__head used to take `margin-inline: auto` here, which centred
       the 720px heading block inside the 1160 chapter and put every question
       on 360 at 1440. The cap is the reading measure; the position is the
       lane. */

    .ed-chapter__qualities {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ed-chapter__qualities--single {
      grid-template-columns: minmax(0, var(--bb-max-read));
      justify-content: start;
    }

  }

  @media (min-width: 1024px) {
    .ed-index__groups {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--bb-space-xl);
    }

    .ed-page[data-ed-filter]:not([data-ed-filter='all']) .ed-index__group {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ed-buy__content {
      padding-inline: var(--bb-space-lg);
    }

    .ed-chip:hover {
      border-color: var(--bb-emerald);
      background: var(--bb-cream);
    }

    .ed-chip.is-active:hover {
      border-color: var(--bb-emerald);
      background: var(--bb-emerald);
      color: var(--bb-cream);
    }

    .ed-index__row:hover .ed-index__name {
      color: var(--bb-accent-on-light);
    }

    .ed-bundle {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--bb-space-xl);
      align-items: center;
    }

    .ed-bundle__strip {
      margin-block-end: 0;
    }

    .ed-bundle__cta:hover {
      background: var(--bb-emerald-deep);
    }
  }
/* END_SECTION:gp-education-chapters */

/* START_SECTION:gp-education-hero (INDEX:29) */
.ed-hero {
    background: var(--bb-cream);
    color: var(--bb-ink);
  }

  /* THE CAP CARRIES ITS OWN GUTTER. Corrected 2026-08-18, the same one-line
     shape sections/gp-sibling-tiles.liquid took in 0507e96 and for the same
     reason: this used to cap at --bb-max-content AND pad inside that, which
     stacks the two. The box stopped at 1160 and the heading then started one
     gutter further in again, so at 1440 the hero title sat on 204 while the
     PDP, the collection grid and the footer all start on 140.

     max-width: cap + two gutters, with the padding inside it, resolves to the
     gutter below 1160 + 2g and to the cap above it — one lane, one number, and
     the same arithmetic every other section on the site now uses. */
  .ed-hero__inner {
    box-sizing: border-box;
    display: grid;
    max-width: calc(var(--bb-max-content) + var(--bb-gutter) * 2);
    margin-inline: auto;
    padding: var(--bb-space-lg) var(--bb-gutter) var(--bb-space-md);
  }

  /* With no tile column the 55/45 split below has nothing to split, so the
     copy takes the lane.

     A MODIFIER CLASS, NOT `:has()`. Shopify's section-stylesheet parser drops
     any rule containing :has() — silently, so it looks fine in the file and
     never reaches the page. Verified on this very page: zero :has() rules
     survive into the CSSOM. CLAUDE.md records the same trap costing a
     variant-picker fix, which is why bb-horizon-overrides.css exists. If a
     rule here genuinely needs :has(), it has to live in that stylesheet. */
  .ed-hero__inner--solo {
    grid-template-columns: minmax(0, 1fr);
  }

  .ed-hero__copy,
  .ed-hero__visual {
    min-width: 0;
  }

  .ed-hero__eyebrow {
    margin: 0 0 var(--bb-space-xs);
    color: var(--bb-accent-on-light);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 600;
    letter-spacing: var(--bb-ls-eyebrow);
    line-height: var(--bb-lh-tight);
    text-transform: uppercase;
  }

  .ed-hero__title {
    max-width: var(--bb-max-read);
    margin: 0 0 var(--bb-space-sm);
    color: var(--bb-emerald);
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-2);
    font-weight: 600;
    letter-spacing: var(--bb-ls-display);
    line-height: var(--bb-lh-heading);
    text-wrap: balance;
  }

  .ed-hero__body {
    max-width: var(--bb-max-read);
    color: var(--bb-ink-soft);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-body);
  }

  .ed-hero__body > :first-child {
    margin-block-start: 0;
  }

  .ed-hero__body > :last-child {
    margin-block-end: 0;
  }

  .ed-hero__body strong {
    color: var(--bb-ink);
    font-weight: 600;
  }

  .ed-hero__visual {
    margin-block-start: var(--bb-space-md);
  }

  .ed-hero__grid,
  .ed-hero__cap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--bb-space-2xs);
  }

  .ed-hero__tile {
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: var(--bb-r-sm);
    background: var(--bb-cream-2);
  }

  .ed-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ed-hero__cap {
    margin-block-start: var(--bb-space-2xs);
    color: var(--bb-ink-soft);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 600;
    letter-spacing: var(--bb-ls-tight);
    line-height: var(--bb-lh-tight);
    text-align: center;
    text-transform: uppercase;
  }

  .ed-hero__cap span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ed-hero__source {
    display: flex;
    align-items: flex-start;
    gap: var(--bb-space-xs);
    max-width: var(--bb-max-read);
    margin: var(--bb-space-md) 0 0;
    padding: var(--bb-space-sm);
    border-radius: var(--bb-r-sm);
    background: var(--bb-cream-2);
    color: var(--bb-ink-soft);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    line-height: var(--bb-lh-body);
  }

  .ed-hero__source-icon {
    flex: 0 0 auto;
    width: var(--bb-space-sm);
    height: var(--bb-space-sm);
    margin-block-start: var(--bb-space-3xs);
    color: var(--bb-emerald);
  }

  @media (min-width: 768px) {
    .ed-hero__inner {
      grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
      grid-template-rows: auto auto;
      column-gap: var(--bb-space-xl);
      align-items: center;
      padding-block: var(--bb-space-xl);
    }

    /* Sits AFTER the split it overrides. Both selectors are one class, so
       specificity ties and source order decides — declared before it, the solo
       rule lost and the hero kept a 55/45 grid with an empty second column. */
    .ed-hero__inner--solo {
      grid-template-columns: minmax(0, 1fr);
    }

    .ed-hero__copy {
      grid-column: 1;
      grid-row: 1;
    }

    .ed-hero__visual {
      grid-column: 2;
      grid-row: 1 / span 2;
      margin-block-start: 0;
    }

    .ed-hero__source {
      grid-column: 1;
      grid-row: 2;
    }
  }

  @media (min-width: 1024px) {
    .ed-hero__inner {
      column-gap: var(--bb-space-2xl);
      padding-block: var(--bb-space-2xl);
    }
  }
/* END_SECTION:gp-education-hero */

/* START_SECTION:gp-pairs-rail (INDEX:30) */
/* --bb-space-2xl, not --bb-space-lg. The recipes rail now ends in a progress
     bar rather than a row of cards, and 32px between that bar and the next
     heading read as one rail with a stray line under it instead of two
     separate destinations. */
  .gp-pairs-wrap { padding-block-start: var(--bb-space-2xl); }

  /* The cap carries its own gutter. Capping at --bb-max-content AND padding by
     the gutter inside it stacked the two, so at 1440 this heading sat 64px to
     the right of "The details" and the legal block.

     A DESTINATION HEADING. On this page colour says what a heading is for: ink
     means the reader operates it here (the spec table and the accordion),
     emerald means it takes them somewhere else. "Pairs with" and "Cook with it"
     are the two emerald ones and they are typographically IDENTICAL — same
     face, same size token, same weight, same letter-spacing, same line-height,
     same gap beneath. The matching block is `.gp-cook__heading` in
     sections/gp-product-recipes.liquid; change one and change the other. A
     difference between two siblings reads as an accident, not a distinction.

     Was ink at weight 600, which is why it read as one more collapsible row
     with the + missing. Colour is still the differentiator and still must not
     change.

     SIZE, founder's call 2026-08-14: --bb-t-display-4 read as a label rather
     than a section heading, so both rails stepped up one level to
     --bb-t-display-3 (24 -> 36px) and the gap beneath went 16px -> 24px with
     it. The reasoning is written out once, on `.gp-cook__heading`. */
  .gp-pairs__head {
    max-inline-size: calc(var(--bb-max-content) + var(--bb-gutter) * 2);
    margin: 0 auto var(--bb-space-md);
    padding-inline: var(--bb-gutter);
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-3);
    font-weight: 500;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-tight);
    text-wrap: balance;
    color: var(--bb-emerald);
  }

  /* The lane bleeds to the viewport edge so a card is visibly cut off and the
     rail reads as scrollable without an arrow or a scrollbar. Padding rather
     than margin, so the first card still lines up with the page gutter. */
  .gp-pairs__lane {
    display: flex;
    gap: var(--bb-space-xs);
    margin: 0;
    padding: 0 var(--bb-gutter) var(--bb-space-2xs);
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    /* Without this the snap port starts at the padding box, so the first card
       snaps flush to the viewport edge and stops lining up with the heading.
       Measured: scrollLeft settled at 20px at rest, cancelling the gutter. */
    scroll-padding-inline-start: var(--bb-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  /* THE RULE ABOVE WAS BEING OVERRULED AT EVERY WIDTH BELOW 1024, AND IT PUT
     REAL HORIZONTAL OVERFLOW ON EVERY PRODUCT PAGE. Found by measurement
     2026-08-18; the same collision is written up at the 1024 block below, where
     it had already been fixed for that one breakpoint only.

     assets/bb-rail.css styles `[data-bb-rail-scroller]`, this lane carries that
     attribute so bb-rail.js can find it, and the stylesheet is not opt-in the
     way the script is. It sets `margin-inline: calc(var(--page-margin) * -1)`
     to borrow back a page shell that THIS section does not have: .gp-cook__inner
     insets the recipes rail before its scroller borrows, and .gp-pairs does not
     inset anything. So the borrow came out of the viewport instead.

     One attribute and one class weigh the same and bb-rail.css lands later, so
     the `margin: 0` above lost. Measured: the lane sat at -40 -> 808 inside a
     768 viewport and at -16 -> 406 inside a 390 one.

     THAT IS THE 16px "SCROLLBAR ARTEFACT" AT 390 IN HANDOFF-NEXT, and it is not
     an artefact. Proved by elimination on the live page: hiding the sticky
     add-to-cart bar left scrollWidth at 406; setting this lane's margin to 0
     dropped it to 390 = clientWidth. The lane was the whole of it.

     Two classes beat one attribute. The gutter is --bb-gutter, matching
     .gp-pairs__head directly above it, not --page-margin, which is a different
     number at every width and is what put the first card on the viewport edge
     at 0 while the heading sat on 20. */
  .gp-pairs__lane[data-bb-rail-scroller] {
    margin-inline: 0;
    padding-inline: var(--bb-gutter);
    scroll-padding-inline-start: var(--bb-gutter);
  }

  .gp-pairs__lane::-webkit-scrollbar { display: none; }

  .gp-pair {
    flex: 0 0 var(--bb-card);
    inline-size: var(--bb-card);
    scroll-snap-align: start;
  }

  .gp-pair__link {
    display: grid;
    gap: var(--bb-space-3xs);
    text-decoration: none;
    color: inherit;
  }

  .gp-pair__link:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 3px;
    border-radius: var(--bb-r-md);
  }

  /* Rule 4: 4:5 means buyable. Holds at every width. */
  .gp-pair__media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--bb-r-card);
    background: var(--bb-paper);
  }

  .gp-pair__img,
  .gp-pair__ph {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Same bar as the recipes rail: 2px, capped at 12rem, centred, emerald fill
     scaled from scroll position by bb-rail.js. Values copied from
     assets/bb-rail.css rather than imported — see the note at the top of the
     file for why this one stylesheet is not shared. A lane that does not
     overflow has nothing to indicate, so `is-static` hides it. */
  .gp-pairs__progress {
    width: 100%;
    max-width: 12rem;
    height: 2px;
    margin: var(--bb-space-md) auto 0;
    border-radius: var(--bb-r-pill);
    background: var(--bb-line);
    overflow: hidden;
  }

  .gp-pairs__progress [data-bb-rail-thumb] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--bb-emerald);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.12s linear;
  }

  .gp-pairs.is-static .gp-pairs__progress {
    display: none;
  }

  .gp-pairs__lane:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    .gp-pairs__progress [data-bb-rail-thumb] {
      transition: none;
    }
  }

  .gp-pair__name {
    margin-block-start: var(--bb-space-xs);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 500;
    line-height: var(--bb-lh-tight);
    color: var(--bb-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .gp-pair__price {
    margin-block-start: var(--bb-space-3xs);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 600;
    color: var(--bb-emerald);
    font-variant-numeric: tabular-nums;
  }

  /* Rule 11: same --bb-card width, more cards visible, no layout change. The
     lane simply stops bleeding once the content fits inside the container. */
  @media (min-width: 768px) {
    .gp-pairs-wrap { padding-block-start: var(--bb-space-xl); }
    /* Attribute qualified for the same reason as the base rule above:
       `margin-inline: auto` here has to outweigh bb-rail.css's negative margin,
       and a bare class does not. */
    .gp-pairs__lane[data-bb-rail-scroller] {
      max-inline-size: calc(var(--bb-max-content) + var(--bb-gutter) * 2);
      margin-inline: auto;
      gap: var(--bb-space-sm);
    }
  }

  /* ONE SHELL FOR THE WHOLE SECTION, ONCE, INSTEAD OF TWO COPIES OF IT.
     Reported at 1920: the heading box and the lane were each carrying their own
     `max-inline-size + margin-inline: auto`, and the lane came out at left -40
     with its first card at 0 — off the left edge of the viewport — while the
     heading sat somewhere else again. Two elements deriving the same edge
     separately is how they end up disagreeing.

     So above 1024 the CAP MOVES ONTO THE SECTION and the two children stop
     declaring one. They then inherit a single containing block, and their own
     --bb-gutter padding puts the heading's first letter and the first card's
     left edge on the same 380px line as every other section on the page. There
     is one number to change if the shell ever moves, and no way for the head
     and the lane to drift apart again.

     This is the shape gp-product-recipes.liquid already has — .gp-cook__inner
     is the shell and .gp-cook__scroller simply sits inside it, which is why
     that rail's first card measures 380 and this one did not.

     BELOW 1024 NOTHING CHANGES. The lane keeps bleeding to the viewport edge so
     a card is visibly cut off and the rail reads as scrollable without an arrow.
     That is deliberate on a phone and is not a desktop pattern.

     Above 1024 the lane still scrolls — six 240px cards do not fit 1160 — but
     it now clips at the shell edge rather than the screen edge, and the progress
     bar under it is what says so. Same as the recipes rail directly above. */
  @media (min-width: 1024px) {
    .gp-pairs {
      max-inline-size: calc(var(--bb-max-content) + var(--bb-gutter) * 2);
      margin-inline: auto;
    }
    .gp-pairs__head,
    .gp-pairs__lane {
      max-inline-size: none;
      margin-inline: 0;
    }

    /* THE LANE IS ALSO STYLED BY assets/bb-rail.css, WHICH THIS FILE SAYS IT IS
       NOT. Corrected 2026-08-17 from measurement.

       The note above the markup says the pairs rail reuses bb-rail.js but not
       bb-rail.css. The script is opt-in; the stylesheet is not. bb-rail.css
       styles `[data-bb-rail-scroller]`, the lane carries that attribute so the
       script can find it, and the stylesheet therefore applies whether or not
       this section intended it. It sets margin-inline to minus --page-margin,
       padding-inline to --page-margin and the same again on the snap port.

       Attribute and class weigh the same, and bb-rail.css lands after this
       section's stylesheet, so it won: the rule directly above set
       margin-inline: 0 and the lane still measured -40px. That left the first
       card on the section's BORDER edge at 316 while the heading's text sat on
       its CONTENT edge at 380 — 64px out, on a page where the spec table, the
       accordions and the recipes rail all line up at 380.

       Two classes beat one attribute, which is all this needs. The gutter is
       --bb-gutter to match .gp-pairs__head directly above, not --page-margin,
       which is a different number at every width. */
    .gp-pairs__lane[data-bb-rail-scroller] {
      margin-inline: 0;
      padding-inline: var(--bb-gutter) 0;
      scroll-padding-inline-start: var(--bb-gutter);
    }

    .gp-pair__link { transition: opacity 0.16s ease; }
    .gp-pair__link:hover { opacity: 0.78; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gp-pairs__lane { scroll-behavior: auto; }
    .gp-pair__link { transition: none; }
  }
/* END_SECTION:gp-pairs-rail */

/* START_SECTION:gp-product-accordions (INDEX:31) */
/* NO TOP PADDING, deliberately. "The details" sits directly above this row
     and gp-product-spec.liquid is explicit that the two are one family — same
     rule, same tap height, same + sign. They are two rows of one
     hairline-separated list that happen to live in two sections.

     32px here put a gap under "The details" that only showed when it was
     CLOSED: open, the spec table filled the space, so the row looked correctly
     spaced; closed, the row was followed by 32px of nothing while the row below
     it sat flush against it. The space the open state needs now belongs to the
     open panel, in gp-product-spec.liquid, where it can only appear when there
     is something to separate. */
  .gp-acc-wrap {
    padding-inline: var(--bb-gutter);
  }

  /* Rule 11 caps running PROSE at --bb-max-read, and that cap moved onto
     .gp-acc__inner below, where the paragraphs actually are.

     It used to sit here, on the block. That indented the whole control: at 1440
     the summary row started 220px to the right of the spec table directly above
     it, so "The details" and "How to use it" — which gp-product-spec.liquid is
     explicit about being one family, same rule, same tap height, same + sign —
     sat on two different left edges. A summary row is a control, not a
     paragraph. The row spans the shell; its answer reads at 720. */
  .gp-acc {
    max-inline-size: var(--bb-max-content);
    margin-inline: auto;
  }

  /* THESE TWO RULES ARE UNCHANGED BY THE DROP TO ONE ITEM, and that is worth
     saying out loud rather than re-deriving. The lone item is both :first-child
     and :last-child, so it takes a hairline above AND below and the list still
     closes — the same shape it had when it was the second of two. There is no
     stray rule at either end: the rule above it is its own, and the rule below
     it is the one that used to close "Shipping & returns". */
  .gp-acc__item { border-block-start: 1px solid var(--bb-line-soft); }
  .gp-acc__item:last-child { border-block-end: 1px solid var(--bb-line-soft); }

  .gp-acc__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-space-sm);
    min-block-size: var(--bb-tap-min);
    padding-block: var(--bb-space-xs);
    cursor: pointer;
    list-style: none;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-4);
    font-weight: 500;
    line-height: var(--bb-lh-tight);
    color: var(--bb-ink);
  }

  /* Safari still paints its own disclosure triangle without this. */
  .gp-acc__btn::-webkit-details-marker { display: none; }

  .gp-acc__btn:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 2px;
    border-radius: var(--bb-r-sm);
  }

  .gp-acc__sign {
    inline-size: 17px;
    block-size: 17px;
    flex: none;
    color: var(--bb-emerald);
    transition: transform 0.2s ease;
  }

  .gp-acc__item[open] .gp-acc__sign { transform: rotate(45deg); }

  .gp-acc__panel { overflow: hidden; }

  /* THE ANSWER STARTS WHERE THE QUESTION STARTS. Reversed 2026-08-18 on the
     founder's own look at it, and the reasoning it replaces is kept below
     because it was not wrong about the whitespace, only about the cure.

     It used to be `margin-inline: auto`, centring the 720 measure inside the
     1160 lane. That balanced the whitespace — 220px down each side instead of
     440 down one — but it bought the balance by moving the copy 220px to the
     right of its own heading, so "How to use it" and the sentence answering it
     sat on two different left edges with an empty column between them. A
     centred paragraph under a left-aligned heading reads as a caption that has
     come loose, not as an answer.

     Left is where an answer goes. The heading, the + and the first word of the
     copy now all start on the lane edge, which is the same edge the spec table
     above and the legal block below start on.

     WHAT IT COSTS, stated plainly: at 1440 there is roughly 440px of empty
     page to the right of this paragraph and none to its left. That is the
     asymmetry the previous pass objected to and it is real. It is the cheaper
     of the two, because it is only whitespace, whereas the centred version cost
     the reader the connection between a question and its answer.

     720 IS NOT THE PROBLEM AND MUST NOT BE WIDENED. Rule 11 caps running prose
     at --bb-max-read at every viewport, and this is the only block of running
     prose on the page. The fix is where the whitespace goes, not how much of it
     there is.

     No breakpoint, because there is nothing to switch: below roughly a 790px
     viewport the shell is already narrower than 720 and `auto` had resolved to
     0 on both sides anyway. The phone layout is byte-for-byte what it was. */
  .gp-acc__inner {
    max-inline-size: var(--bb-max-read);
    margin-inline: 0;
    padding-block-end: var(--bb-space-sm);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    line-height: var(--bb-lh-body);
    color: var(--bb-ink-soft);
  }

  .gp-acc__inner p { margin: 0 0 var(--bb-space-2xs); }
  .gp-acc__inner p:last-child { margin-block-end: 0; }

  .gp-acc__meta {
    margin: var(--bb-space-2xs) 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--bb-space-3xs) var(--bb-space-sm);
  }

  .gp-acc__meta dt { color: var(--bb-ink-soft); }
  .gp-acc__meta dd { margin: 0; color: var(--bb-ink); }

  /* Rule 7: the panel opens rather than appearing. `interpolate-size` is what
     makes a height transition to `auto` animate; browsers without it get an
     instant open, which is correct behaviour rather than a broken one. */
  @supports (interpolate-size: allow-keywords) {
    .gp-acc__panel {
      block-size: 0;
      transition: block-size 0.24s ease;
    }
    .gp-acc__item[open] .gp-acc__panel { block-size: auto; }
  }

  @media (min-width: 768px) {
    /* The gap between "The details" and these rows is still not here — see the
       .gp-acc-wrap note above; it belongs to the spec panel, at every width.

       THE + JOINS ITS OWN HEADING. Identical rule and identical reasoning to
       .gp-spec__btn in gp-product-spec.liquid, which is the point: these two
       summary rows are one family and the sign has to sit in the same place in
       both. `space-between` is right at 350px wide and reads as an unrelated ×
       floating in the margin at 1160. The row still spans the lane, so the
       hairline and the whole 56px hit area are unchanged. */
    .gp-acc__btn { justify-content: flex-start; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gp-acc__sign, .gp-acc__panel { transition: none; }
  }
/* END_SECTION:gp-product-accordions */

/* START_SECTION:gp-product-legal (INDEX:32) */
.gp-legal-wrap {
    padding-inline: var(--bb-gutter);
    padding-block-start: var(--bb-space-lg);
  }

  .gp-legal {
    max-inline-size: var(--bb-max-content);
    margin-inline: auto;
    padding-block: var(--bb-space-md);
    border-block-start: 1px solid var(--bb-line-soft);
  }

  .gp-legal__title {
    margin: 0 0 var(--bb-space-xs);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 600;
    letter-spacing: var(--bb-ls-eyebrow);
    line-height: 1;
    text-transform: uppercase;
    color: var(--bb-ink-soft);
  }

  /* `auto 1fr` so the label column is exactly as wide as its longest label and
     the value column takes the rest. A fixed label width either truncates
     "Country of origin" or wastes a third of a 390px screen. */
  .gp-legal__list {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--bb-space-3xs) var(--bb-space-sm);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    line-height: var(--bb-lh-tight);
  }

  .gp-legal__list dt { color: var(--bb-ink-soft); }
  .gp-legal__list dd { margin: 0; color: var(--bb-ink); }

  /* Rule 11: two columns of rows at 768, three at 1024. Same rows, more
     columns. `grid-auto-flow: row dense` is deliberately NOT used — the
     label/value pairs must stay adjacent, so each column is its own auto/1fr
     pair rather than one grid reflowed. */
  @media (min-width: 768px) {
    .gp-legal-wrap { padding-block-start: var(--bb-space-xl); }
    .gp-legal { padding-block: var(--bb-space-lg); }
    .gp-legal__list {
      grid-template-columns: auto 1fr auto 1fr;
      gap: var(--bb-space-2xs) var(--bb-space-sm);
      column-gap: var(--bb-space-md);
    }
  }

  @media (min-width: 1024px) {
    .gp-legal__list { grid-template-columns: auto 1fr auto 1fr auto 1fr; }
  }
/* END_SECTION:gp-product-legal */

/* START_SECTION:gp-product-recipes (INDEX:33) */
/* LEADING SPACE ONLY, ON THE SHARED SCALE. This was
     `padding-block: clamp(36px, 5vw, 76px)` — the one section below the buy
     column setting its own rhythm, symmetrically, off a one-off clamp that
     matched nothing else on the page. Every other section down here
     (gp-purity-test, gp-product-spec, gp-product-accordions, gp-pairs-rail,
     gp-product-legal) opens with --bb-space-lg and pays for its own top gap
     only, letting the next section supply the space beneath it. This now does
     the same, so the six read as one stack rather than six decisions.

     No padding-block-end: the rail's own progress bar sits 24px below the last
     card, so the scroller's ring gutter (the padding-block/margin-block pair
     below) is still inside this box and nothing is clipped by `overflow`. */
  .gp-cook {
    background: var(--bb-cream);
    padding-block-start: var(--bb-space-lg);
    overflow: hidden;
  }

  /* The page shell, same as every other section below the buy column. This read
     Horizon's --page-width (1520) and --page-margin, which put "Cook with it" on
     a left edge 100px outside the spec table, the purity test, the legal block
     and the pairs rail — one section wider than the page it sits in.
     The cap carries its own gutter so the edge holds at every width: below the
     cap the gutter does the work, above it the content lands on --bb-max-content. */
  .gp-cook__inner {
    max-width: calc(var(--bb-max-content) + var(--bb-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--bb-gutter);
  }

  /* Rule 11: the same step every other section below the buy column takes at
     768. Column count, container width and image scale only — no new
     component, and the same two breakpoints as the rest of the site. */
  @media (min-width: 768px) {
    .gp-cook { padding-block-start: var(--bb-space-xl); }
  }

  /* The 46rem cap was a reading measure for the lead paragraph, which has gone;
     a two-word heading does not need one, and gp-pairs-rail's heading has none.

     The gap beneath is --bb-space-md, and it must stay identical to the one on
     `.gp-pairs__head`: the two destination rails are one pair and their
     heading-to-cards distance is part of that.

     It was --bb-space-sm (16px) under a 19px heading. The heading is now 24px
     at 390 and 16px under it is 0.67em of air, tighter than it was before the
     step-up, which is the wrong direction — a bigger heading wants more room
     beneath it, not the same. 24px restores roughly the optical gap the smaller
     heading had. Nothing overlaps at either value; this is crowding, not
     collision. There is no 20px token, so the choice is 16 or 24. */
  .gp-cook__header {
    margin-block-end: var(--bb-space-md);
  }

  .gp-cook__eyebrow {
    margin: 0 0 var(--bb-space-2xs);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 800;
    letter-spacing: var(--bb-ls-eyebrow, 0.16em);
    line-height: 1;
    text-transform: uppercase;
    color: var(--bb-accent-on-light);
  }

  /* A DESTINATION HEADING. On this page colour says what a heading is for:
     ink means the reader operates it here (the spec table and the accordion),
     emerald means it takes them somewhere else. "Cook with it" and "Pairs with"
     are the two emerald ones and they are typographically IDENTICAL — same
     face, same size token, same weight, same letter-spacing, same line-height.
     The matching block is `.gp-pairs__head` in sections/gp-pairs-rail.liquid;
     change one and change the other. A difference between two siblings reads as
     an accident, not as a distinction.

     SIZE HISTORY, so it does not get walked back a third time. It was
     --bb-t-display-3, was dropped to --bb-t-display-4 to match the collapsible
     rows, and is back at --bb-t-display-3 (24 -> 36px) on the founder's call
     2026-08-14: at display-4 both rails read as labels rather than as section
     headings. The two rails are now the only display-3 on the PDP below the buy
     column, which is the point — they are the page's two exits.

     Colour did not change and must not. Emerald is the signal. */
  .gp-cook__heading {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-3);
    font-weight: 500;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-tight);
    text-wrap: balance;
    color: var(--bb-emerald);
  }

  /* Card width and lane spacing only. The frame, the arrows and the progress
     bar are in assets/bb-rail.css, shared with the homepage rail. Values match
     bb-recipe-grid deliberately: a recipe card should be the same object on
     both surfaces. */
  /* --bb-card, the shared rail width, so the recipe lane and the pairs lane
     below it line up column for column. Only the media ratio differs: 1:1
     editorial here, 4:5 buyable there. Rule 4. */
  .gp-cook__scroller {
    grid-auto-columns: var(--bb-card);
    gap: var(--bb-space-xs);
    padding-block: var(--bb-space-md);
    margin-block: calc(var(--bb-space-md) * -1);
  }

  /* THERE WAS A `@media (min-width: 900px)` HERE SETTING 360px, AND IT IS GONE.
     Three things were wrong with it and only the last one is cosmetic.

     900 is not a breakpoint. Rule 11 allows exactly two, 768 and 1024, so that
     the whole site steps at the same two widths; a third one here meant this
     rail changed shape at a width where nothing around it did.

     360px is not --bb-card. The comment directly above says these values match
     bb-recipe-grid deliberately, "a recipe card should be the same object on
     both surfaces" — and then this rule made it a different object on exactly
     the surfaces where anybody could see both. The pairs rail sitting under
     this one stayed at 152, so two lanes that Rule 4 says share a column grid
     were 208px apart on the same screen.

     --bb-card now steps to 240 at 1024 in bb-tokens.css, so all three rails
     grow together and the ratios are untouched. A PDP recipe card is smaller
     than it was between 900 and 1440; it is also the same card the homepage
     shows, which is what the rule was supposed to be for. */

  .gp-cook__crosssell {
    margin-block-start: var(--bb-space-xl);
    padding-block-start: var(--bb-space-md);
    border-block-start: 1px solid var(--bb-line);
  }

  /* STAYS AT --bb-t-display-4 while the two rail h2s moved to display-3. This
     is an h3 nested under "Cook with it", inside the same section, on a rail
     that is off by default. Matching the h2 would flatten the hierarchy it
     exists to express. It is not one of the two sibling rail headings. */
  .gp-cook__subheading {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-4);
    font-weight: 500;
    line-height: var(--bb-lh-heading);
    color: var(--bb-emerald);
  }

  .gp-cook__crosssell-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bb-space-md);
    margin-block-end: var(--bb-space-sm);
  }

  /* Card widths only. Every card rule — media, title, price, the white-matte
     treatment — comes from assets/bb-product-card.css, which the tiles share
     with the homepage rail and Horizon's collection grid. Widths match
     bb-product-rail exactly so a packshot is the same size on both surfaces. */
  .gp-cook__products {
    grid-auto-columns: minmax(16rem, 24%);
    gap: var(--bb-space-md);
  }

  @media (max-width: 900px) {
    .gp-cook__products {
      grid-auto-columns: minmax(15rem, 42%);
    }
  }

  @media (max-width: 520px) {
    .gp-cook__products {
      grid-auto-columns: minmax(14rem, 72%);
      gap: var(--bb-space-sm);
    }
  }
/* END_SECTION:gp-product-recipes */

/* START_SECTION:gp-product-reviews (INDEX:34) */
.gp-reviews{background:var(--bb-cream);padding-block:var(--bb-section-y);}
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.gp-reviews__inner{max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);}
.gp-reviews__head{display:grid;gap:var(--bb-space-sm);margin-bottom:var(--bb-space-xl);}
.gp-reviews__heading{margin:0;font-family:var(--bb-font-display);font-size:var(--bb-t-display-2);font-weight:500;line-height:var(--bb-lh-heading);letter-spacing:var(--bb-ls-tight);text-transform:uppercase;color:var(--bb-emerald);}
.gp-reviews__summary{display:flex;align-items:center;gap:var(--bb-space-sm);flex-wrap:wrap;}
.gp-reviews__score{margin:0;font-family:var(--bb-font-body);font-size:var(--bb-t-body);color:var(--bb-ink);}
.gp-reviews__score strong{font-weight:700;}
.gp-reviews__from{color:var(--bb-ink-soft);}
.gp-reviews__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--bb-space-md);}
.gp-reviews__item{background:var(--bb-cream-2);border-radius:var(--bb-r-card);padding:var(--bb-space-md);}
.gp-reviews__title{margin:var(--bb-space-2xs) 0 0;font-family:var(--bb-font-body);font-size:var(--bb-t-body);font-weight:700;color:var(--bb-emerald);}
/* Rule 11: every block of running prose is capped at the reading width, at
   every viewport. A review is prose. */
.gp-reviews__body{margin:var(--bb-space-2xs) 0 0;max-width:var(--bb-max-read);font-family:var(--bb-font-body);font-size:var(--bb-t-body);line-height:var(--bb-lh-body);color:var(--bb-ink);}
.gp-reviews__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--bb-space-xs);margin:var(--bb-space-sm) 0 0;font-family:var(--bb-font-body);font-size:var(--bb-t-micro);color:var(--bb-ink-soft);}
.gp-reviews__author{font-weight:700;color:var(--bb-ink);}
.gp-reviews__verified{display:inline-flex;align-items:center;padding:2px var(--bb-space-2xs);border-radius:var(--bb-r-pill);background:color-mix(in srgb,var(--bb-emerald) 12%,transparent);color:var(--bb-emerald);font-weight:700;}
/* Rule 11: two columns from the medium breakpoint, same component, more of it.
   The literal is written out because a custom property is not valid inside a
   media condition — see the note in bb-tokens.css. */
@media(min-width:768px){
  .gp-reviews__list{grid-template-columns:1fr 1fr;}
  .gp-reviews__head{grid-template-columns:1fr auto;align-items:end;}
}
/* END_SECTION:gp-product-reviews */

/* START_SECTION:gp-product-spec (INDEX:35) */
.gp-spec-wrap {
    padding-inline: var(--bb-gutter);
    padding-block-start: var(--bb-space-lg);
  }

  .gp-spec {
    max-inline-size: var(--bb-max-content);
    margin-inline: auto;
  }

  /* The disclosure. Every value below is copied from gp-product-accordions so
     that "The details" and the two accordions under it are one family — the
     rule above the summary, the tap height, the padding, the + sign, the
     rotation and the height transition are all the same declarations. */
  .gp-spec__item { border-block-start: 1px solid var(--bb-line-soft); }

  .gp-spec__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-space-sm);
    min-block-size: var(--bb-tap-min);
    padding-block: var(--bb-space-xs);
    cursor: pointer;
    list-style: none;
  }

  /* Safari still paints its own disclosure triangle without this. */
  .gp-spec__btn::-webkit-details-marker { display: none; }

  .gp-spec__btn:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 2px;
    border-radius: var(--bb-r-sm);
  }

  /* The h2 stays. It is the section's accessible name via aria-labelledby and
     the page's outline entry; <summary> takes heading content, so nothing is
     lost by putting it inside. Its typography is the accordion summary's. */
  .gp-spec__head {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-4);
    font-weight: 500;
    line-height: var(--bb-lh-tight);
    color: var(--bb-ink);
  }

  .gp-spec__sign {
    inline-size: 17px;
    block-size: 17px;
    flex: none;
    color: var(--bb-emerald);
    transition: transform 0.2s ease;
  }

  .gp-spec__item[open] .gp-spec__sign { transform: rotate(45deg); }

  .gp-spec__panel { overflow: hidden; }

  /* This carries the whole gap between the spec table and the accordion rows
     beneath it, because it is inside the panel and therefore only exists while
     the panel is open. gp-product-accordions.liquid used to hold it as top
     padding, which meant a closed "The details" was followed by 32px of nothing
     while the two rows below it sat flush. */
  .gp-spec__inner { padding-block-end: var(--bb-space-lg); }

  /* Rule 7: the panel opens rather than appearing. `interpolate-size` is what
     makes a height transition to `auto` animate; browsers without it get an
     instant open, which is correct behaviour rather than a broken one. */
  @supports (interpolate-size: allow-keywords) {
    .gp-spec__panel {
      block-size: 0;
      transition: block-size 0.24s ease;
    }
    .gp-spec__item[open] .gp-spec__panel { block-size: auto; }
  }

  .gp-spec__table {
    inline-size: 100%;
    border-collapse: collapse;
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    line-height: var(--bb-lh-tight);
  }

  /* A hairline per row rather than a boxed table: the page is a cream sheet and
     a ruled box reads as a component dropped onto it. */
  .gp-spec__table th,
  .gp-spec__table td {
    padding-block: var(--bb-space-2xs);
    border-block-end: 1px solid var(--bb-line-soft);
    text-align: start;
    vertical-align: top;
  }

  .gp-spec__table tr:last-child th,
  .gp-spec__table tr:last-child td { border-block-end: 0; }

  .gp-spec__table th {
    inline-size: 38%;
    font-weight: 400;
    color: var(--bb-ink-soft);
    padding-inline-end: var(--bb-space-sm);
  }

  .gp-spec__table td { color: var(--bb-ink); }

  /* Rule 11: two columns of rows. Two independent tables would need the row
     list split in Liquid; instead the single table becomes a two-column grid,
     so the rows stay one list and reflow. */
  @media (min-width: 768px) {
    .gp-spec-wrap { padding-block-start: var(--bb-space-xl); }

    /* THE + JOINS ITS OWN HEADING. `justify-content: space-between` is right on
       a phone, where the row is 350px wide and the sign is plainly the control
       for the words beside it. On the 1160 lane it threw the sign 950px away,
       where it read as a stray × floating in the margin with nothing to do with
       the heading at all.

       The row still spans the full lane — the hairline above it and the whole
       56px hit area are unchanged, and the summary is still the click target
       edge to edge. Only the two things inside it stop being pushed apart.

       gp-product-accordions.liquid carries the identical rule. The two blocks
       are one family; change one and change the other. */
    .gp-spec__btn { justify-content: flex-start; }
    /* The heading kept its extra breathing room here before it became a
       summary; the summary's own padding is that space now. */
    .gp-spec__inner { padding-block-start: var(--bb-space-2xs); }
    .gp-spec__table,
    .gp-spec__table tbody { display: block; }

    /* FOUR TRACKS, NOT TWO, so the labels share a column instead of each row
       inventing one. Corrected 2026-08-18.

       This was `tbody: 1fr 1fr` holding rows, and each row `38% 1fr` holding a
       label and a value. 38% of a 570px half is 217px, so "Origin" — 40px of
       word — pushed its value most of a fifth of the table away and left a
       trench down the middle of each column, while "Net quantity" nearly filled
       its share. Every row measured its own indent and none of them agreed.

       The tbody now owns all four columns and each row SUBGRIDS onto two of
       them, so the two `auto` label tracks size once, to the longest label in
       that column, and every value in a column starts on the same pixel.
       Measured at 1440: labels on 140 and 766, values on 232 and 830, where
       they used to start on 357 and 983.

       This is the shape .gp-legal__list already has — `auto 1fr auto 1fr` over
       one flat list — which is what the two blocks should have had in common
       from the start.

       THE ROW KEEPS ITS BOX. `display: contents` on the <tr> would reach the
       same grid and would also drop the row out of the accessibility tree;
       subgrid gets the alignment without spending the semantics.

       THE DOUBLE `grid-template-columns` IS THE FALLBACK, not a leftover. A
       browser without subgrid drops the second declaration and keeps `auto 1fr`
       — labels still hug, they just size per row rather than per column, which
       is the old behaviour minus the 38% trench. */
    .gp-spec__table tbody {
      display: grid;
      grid-template-columns: auto 1fr auto 1fr;
      column-gap: var(--bb-space-2xl);
    }
    .gp-spec__table tr {
      display: grid;
      grid-column: span 2;
      grid-template-columns: auto 1fr;
      grid-template-columns: subgrid;
      column-gap: var(--bb-space-sm);
    }
    /* The last row in each column loses its rule, not just the last overall. */
    .gp-spec__table tr:nth-last-child(-n + 2) th,
    .gp-spec__table tr:nth-last-child(-n + 2) td { border-block-end: 0; }
    .gp-spec__table th { inline-size: auto; padding-inline-end: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gp-spec__sign, .gp-spec__panel { transition: none; }
  }
/* END_SECTION:gp-product-spec */

/* START_SECTION:gp-purity-test (INDEX:36) */
/* EVERY VALUE HERE IS FROM getpured-pdp-mobile-v3.html's .bb-test rules.
     The three that have no site-wide token are declared once, locally, rather
     than snapped to the nearest scale step and drifting from the design. */
  /* A CARD ON THE LANE, NOT A BAND BEHIND IT. Corrected 2026-08-18.

     The dark box used to be `margin-inline: var(--bb-gutter)`, so it ran the
     full viewport minus one gutter — 64 -> 1376 at 1440 — while only the text
     inside it was capped at 1160. The emerald edge was therefore the one edge
     on the page that did not line up with anything: the spec table, the
     accordions, the legal block and both rails all ran 140 -> 1300 and this
     ran 76px wider on each side. Read down the page it was a full-bleed band
     with the copy floating in the middle of it, rather than a card.

     The three declarations below are the same shell every other section under
     the buy column resolves to, written as one box instead of a wrapper and an
     inner, because this box needs the BACKGROUND on the lane and not just the
     text:

       inline-size    100% minus a gutter each side   — the sub-cap behaviour
       max-inline-size  the 1160 ceiling              — the cap
       margin-inline    auto                          — centring above the cap

     It is arithmetically identical to `.gp-spec-wrap` + `.gp-spec` at every
     width: below 1160 + 2 gutters the gutter sets the edge, above it the cap
     does. Verified live at 390 / 768 / 1024 / 1280 / 1440 rather than reasoned
     about.

     THE MOBILE BOX IS UNCHANGED. At 390 this resolves to 350px wide on a 20px
     inset, which is exactly what `margin: lg var(--bb-gutter)` produced. */
  .gp-purity {
    --gp-test-pad: 20px;          /* design --bb-s5                        */
    --gp-test-rule: rgba(240, 233, 218, 0.15);
    --gp-test-dim: rgba(240, 233, 218, 0.72);

    box-sizing: border-box;
    inline-size: calc(100% - var(--bb-gutter) * 2);
    max-inline-size: var(--bb-max-content);
    margin: var(--bb-space-lg) auto;
    padding: var(--bb-space-md) var(--gp-test-pad) var(--gp-test-pad);
    background: var(--bb-emerald-deep);
    border-radius: var(--bb-r-md);
    color: var(--bb-cream);
  }

  /* NO CAP HERE ANY MORE. The card is the 1160 lane now, so a second ceiling
     on its contents could only ever be a narrower one, and a card whose text
     stops short of its own padding reads as a mistake. This element is the
     45/55 grid at 768 and nothing else. */

  .gp-purity__eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--bb-space-xs);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 600;
    letter-spacing: var(--bb-ls-eyebrow);
    line-height: 1;
    text-transform: uppercase;
    color: var(--bb-accent-on-dark);
  }

  .gp-purity__badge { flex: 0 0 auto; inline-size: 15px; block-size: 15px; }

  .gp-purity__heading {
    margin: 0 0 var(--gp-test-pad);
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-3);
    font-weight: 600;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-tight);
    color: var(--bb-cream);
  }

  .gp-purity__figure { margin: 0 0 var(--gp-test-pad); }

  /* ONE BOX, TWO FILLINGS. The placeholder carries `gp-purity__image` as well
     as its own modifier, so ratio, radius and size cannot drift apart — they
     are declared once, here, and the empty state only ever adds paint.

     box-sizing is spelled out because the empty state is the only one of the
     two with a border. Horizon's reset already sets border-box on `*`, so this
     changes nothing today; it is here so the "same box" guarantee is asserted
     in the file that depends on it rather than inherited from a core reset. */
  .gp-purity__image,
  .gp-purity__image--empty {
    box-sizing: border-box;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--bb-r-sm);
    object-fit: cover;
  }

  /* The empty slot is drawn, not collapsed: an invisible empty state cannot be
     told apart from a broken setting, and the reserved space stops the section
     reflowing when the photograph lands. */
  .gp-purity__image--empty {
    display: grid;
    place-items: center;
    background:
      repeating-linear-gradient(45deg, transparent 0 9px, rgba(240, 233, 218, 0.05) 9px 10px),
      rgba(240, 233, 218, 0.05);
    border: 1px dashed rgba(240, 233, 218, 0.28);
  }

  .gp-purity__image--empty span {
    padding-inline: var(--bb-space-sm);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1.6;
    text-transform: uppercase;
    text-align: center;
    color: rgba(240, 233, 218, 0.45);
  }

  .gp-purity__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: gp-step;
  }

  .gp-purity__steps li {
    counter-increment: gp-step;
    display: flex;
    gap: var(--bb-space-sm);
    padding-block: var(--bb-space-xs);
    border-block-start: 1px solid var(--gp-test-rule);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: 1.5;
    color: var(--gp-test-dim);
  }

  /* Drawn rather than the list marker so the counter can take gold and sit on
     its own baseline. The <ol> keeps real list semantics either way. */
  .gp-purity__steps li::before {
    content: counter(gp-step);
    flex: 0 0 auto;
    inline-size: 14px;
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-small);
    font-weight: 600;
    color: var(--bb-accent-on-dark);
  }

  .gp-purity__verdict {
    margin: var(--gp-test-pad) 0 0;
    padding-block-start: var(--bb-space-sm);
    border-block-start: 1px solid var(--gp-test-rule);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: 1.55;
    color: var(--bb-cream);
  }

  .gp-purity__verdict strong { color: var(--bb-accent-on-dark); font-weight: 600; }

  /* Prose fallback, for a product whose steps have not been written yet. */
  .gp-purity__body {
    margin: 0 0 var(--bb-space-xs);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: 1.55;
    color: var(--gp-test-dim);
  }

  .gp-purity__note {
    margin: var(--bb-space-sm) 0 0;
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    line-height: var(--bb-lh-tight);
    color: var(--gp-test-dim);
  }

  /* WCAG 2.5.8: this measured 117.1 x 23.8 at 390 — 0.2px under the floor,
     which is a fail on the standard and invisible to the eye, so it is exactly
     the kind of thing that only ever turns up in a measurement. It was not in
     the A4 audit's tap-target table; it was found sweeping every control on the
     page afterwards. min-block-size on a box that is already inline-flex, the
     same fix as .bb-recipe__back, so the 11px type is untouched. --bb-tap-aa is
     the 24px AA floor; see bb-tokens.css for why this is not --bb-tap-min. */
  .gp-purity__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--bb-tap-aa);
    gap: 6px;
    margin-block-start: var(--bb-space-sm);
    padding-block-end: 2px;
    border-block-end: 1px solid rgba(243, 168, 2, 0.35);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    font-weight: 600;
    color: var(--bb-accent-on-dark);
    text-decoration: none;
  }

  .gp-purity__link:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 3px;
    border-radius: var(--bb-r-sm);
  }

  /* Rule 11: image left 45% / steps right 55%, capped at --bb-max-content. */
  @media (min-width: 768px) {
    .gp-purity {
      margin-block: var(--bb-space-xl);
      padding: var(--bb-space-lg);
    }
    .gp-purity__inner {
      display: grid;
      grid-template-columns: 45fr 55fr;
      gap: var(--bb-space-lg);
      align-items: start;
    }
    .gp-purity__figure { margin-block-end: 0; }
  }
/* END_SECTION:gp-purity-test */

/* START_SECTION:gp-recipe-index (INDEX:37) */
.gp-rindex {
    padding-block: var(--bb-space-lg) var(--bb-section-y);
    background: var(--bb-cream);
  }

  .gp-rindex__inner {
    /* The ceiling is a CONTENT width. Capping the box at it and then padding
       inside spent the gutter out of the 1160 and left this lane at 1032 —
       measured 128px narrower and 64px inboard of the header above it and the
       footer below. The gutter goes outside the cap, as it now does everywhere.
       Cards are the exception and stay as they are: .gp-purity and .ed-bundle
       both paint a background, so their BOX edge is the visual edge and belongs
       on the 1160 line, with the padding as the card's own inset. */
    max-inline-size: calc(var(--bb-max-content) + var(--bb-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--bb-gutter);
  }

  /* A page label, not a hero. --bb-t-display-4 is the smallest step the
     display face holds (19 -> 24); anything above it turns the word "Recipes"
     into the loudest thing on a page whose subject is the photographs. */
  .gp-rindex__title {
    margin: 0 0 var(--bb-space-lg);
    font-family: var(--bb-font-display);
    font-size: var(--bb-t-display-4);
    font-weight: 600;
    line-height: var(--bb-lh-heading);
    letter-spacing: var(--bb-ls-tight);
    color: var(--bb-ink);
  }

  .gp-rindex__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bb-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gp-rindex__item { min-inline-size: 0; }

  .gp-rindex__link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .gp-rindex__link:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 4px;
    border-radius: var(--bb-r-card);
  }

  /* Rule 4: 1:1 means editorial. Holds at every width.
     The --bb-cream-2 ground IS the placeholder — with no image the panel is all
     there is to see, and it reads as a flat editorial tile rather than a hole. */
  .gp-rindex__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--bb-r-card);
    background: var(--bb-cream-2);
  }

  .gp-rindex__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Body scale, not display scale. The founder's complaint about the stock
     listing was the size of the headings, and the photograph is the subject. */
  .gp-rindex__name {
    margin: var(--bb-space-xs) 0 0;
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-body);
    font-weight: 500;
    line-height: var(--bb-lh-tight);
    letter-spacing: normal;
    color: var(--bb-ink);
    text-align: start;
  }

  .gp-rindex__empty {
    margin: 0;
    max-inline-size: var(--bb-max-read);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-body);
    line-height: var(--bb-lh-body);
    color: var(--bb-ink-soft);
  }

  .gp-rindex__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bb-space-sm);
    margin-block-start: var(--bb-space-xl);
  }

  .gp-rindex__pagelink {
    display: inline-flex;
    align-items: center;
    gap: var(--bb-space-2xs);
    min-block-size: var(--bb-tap-min);
    padding-inline: var(--bb-space-sm);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-pill);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 500;
    color: var(--bb-ink);
    text-decoration: none;
  }

  .gp-rindex__pagelink:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: 3px;
  }

  .gp-rindex__pagecount {
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    color: var(--bb-ink-soft);
    font-variant-numeric: tabular-nums;
  }

  /* Rule 11: the same card at a different column count. Nothing new appears. */
  @media (min-width: 768px) {
    .gp-rindex { padding-block-start: var(--bb-space-xl); }
    .gp-rindex__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1024px) {
    .gp-rindex__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .gp-rindex__media { transition: opacity 0.16s ease; }
    .gp-rindex__link:hover .gp-rindex__media { opacity: 0.86; }
    .gp-rindex__link:hover .gp-rindex__name { text-decoration: underline; text-underline-offset: 3px; }
    .gp-rindex__pagelink { transition: border-color 0.16s ease; }
    .gp-rindex__pagelink:hover { border-color: var(--bb-emerald); }
  }

  @media (prefers-reduced-motion: reduce) {
    .gp-rindex__media,
    .gp-rindex__pagelink { transition: none; }
  }
/* END_SECTION:gp-recipe-index */

/* START_SECTION:gp-sibling-tiles (INDEX:39) */
/* ONE GUTTER FOR THE WHOLE SECTION, NAMED ONCE. Every edge below — the
   heading's, the row's negative bleed, the padding that pays it back and the
   snap port — derives from this, so there is one number to change and no way
   for the heading and the tiles to end up on different lines.

   IT IS --page-margin ON A PHONE AND --bb-gutter ON A DESKTOP, deliberately.
   The 390 layout is signed off at Horizon's 16px page margin and is not being
   moved for this bucket; from 768 up the row joins the --bb-gutter lane that
   the spec table, the accordions, the legal block and both rails all run on. */
.gp-tiles{--gp-tiles-gutter:var(--page-margin,var(--bb-gutter));background:var(--bb-cream);padding-block:var(--bb-space-xl);}

/* Rule 11: one page ceiling site-wide. This read --page-width falling back to
   --bb-container (1340), so the row sat 180px wider than the spec table and the
   legal block it appears between on a PDP. --bb-max-content has no fallback to
   write because bb-tokens.css is loaded globally from layout/theme.liquid.

   THE CAP CARRIES ITS OWN GUTTER — `max-width: cap + 2 gutters` with the
   padding inside it, which is the shape .gp-cook__inner already has. It used to
   cap at --bb-max-content AND pad inside that, which stacked the two: the box
   stopped at 1160 and then the heading started 40px further in again, so at
   1440 "More in this range" sat on 180 while every other heading on the page
   sat on 140. Same cap, same gutter, one lane. */
.gp-tiles__inner{box-sizing:border-box;max-width:calc(var(--bb-max-content) + var(--gp-tiles-gutter) * 2);margin-inline:auto;padding-inline:var(--gp-tiles-gutter);}
.gp-tiles__heading{margin:0 0 var(--bb-space-md);font-family:var(--bb-font-display);font-size:var(--bb-t-display-4);font-weight:500;line-height:var(--bb-lh-tight);letter-spacing:var(--bb-ls-tight);color:var(--bb-emerald);}

/* Full-bleed lane on mobile, matching the collection chips and the recipe
   rail. Bounded to below the container width: at exactly the container width
   there is no auto margin for a negative margin to borrow from. */
.gp-tiles__row{
  display:flex;
  gap:var(--bb-space-sm);
  margin:0 calc(var(--gp-tiles-gutter) * -1);
  padding:var(--bb-space-3xs) var(--gp-tiles-gutter);
  list-style:none;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--gp-tiles-gutter);
  scrollbar-width:none;
}
.gp-tiles__row::-webkit-scrollbar{display:none;}
.gp-tiles__item{flex:0 0 auto;scroll-snap-align:start;}

.gp-tile{
  display:grid;
  gap:var(--bb-space-2xs);
  width:72px;
  text-decoration:none;
  color:var(--bb-ink-soft);
}

/* The frame does the selecting. Every tile image carries the same cream-2
   ground, so a background change would be invisible — the border and the
   wash are what separate current from not. */
.gp-tile__media{
  display:block;
  aspect-ratio:1;
  overflow:hidden;
  border:1.5px solid var(--bb-line);
  border-radius:calc(var(--bb-r-card) * 0.6);
  background:var(--bb-cream-2);
  transition:border-color .18s ease,opacity .18s ease;
}
.gp-tile__image{display:block;width:100%;height:100%;object-fit:cover;}

/* EVERY TILE RENDERS AT FULL STRENGTH. The first build dimmed the non-current
   ones to 0.72 to make the current one lead; on the live page that read as the
   whole row being blurred rather than as one tile being picked out. These are
   fifteen small photographs a customer is meant to read at a glance — dimming
   any of them fights the one job the row has. Selection is the frame's work
   alone, exactly as it is on the variant rows in the buy block. */
.gp-tile:hover .gp-tile__media{border-color:var(--bb-emerald);}

.gp-tile--current .gp-tile__media{
  border-color:var(--bb-emerald);
  box-shadow:0 0 0 1.5px var(--bb-emerald);
}

.gp-tile__label{
  font-family:var(--bb-font-body);
  font-size:var(--bb-t-micro);
  font-weight:600;
  line-height:var(--bb-lh-tight);
  letter-spacing:var(--bb-ls-tight);
  text-wrap:balance;
}
.gp-tile--current .gp-tile__label{color:var(--bb-emerald);}
.gp-tile:focus-visible{outline:2px solid var(--bb-gold);outline-offset:3px;border-radius:4px;}

/* From here up the row runs on --bb-gutter, the same lane as every other
   section on the PDP. Below it the signed-off 390 layout keeps Horizon's 16px
   page margin. See the note on .gp-tiles. */
@media screen and (min-width:768px){
  .gp-tiles{--gp-tiles-gutter:var(--bb-gutter);}
}

/* The tile reads at 72px but the link must hit-test at 44px minimum in both
   axes; the label already carries it past that vertically. */
@media screen and (min-width:900px){
  .gp-tiles__row{margin-inline:0;padding-inline:0;flex-wrap:wrap;overflow-x:visible;gap:var(--bb-space-md);}
  .gp-tile{width:80px;}
}

@media(prefers-reduced-motion:reduce){.gp-tile__media{transition:none;}}
/* END_SECTION:gp-sibling-tiles */

/* START_SECTION:gp-ugc-rail (INDEX:40) */
/* The lane — overflow, snap, bleed, drag, progress, arrow visibility — is
   assets/bb-rail.css, shared with the product and recipe rails. Only the card
   is local. */
.gp-ugc{background:var(--bb-cream-2);padding-block:var(--bb-space-2xl);overflow:hidden;}
/* Rule 11: one page ceiling site-wide — see bb-category-trio. */
/* Rule 11's ceiling is a CONTENT width, not a box width. This rule used to
   cap the box at --bb-max-content and then pad inside it, which spent the
   gutter out of the 1160 and left the content at 1080 — 80px narrower than
   the collection grid and the spec table, which cap the content itself.
   Measured at 1440 on 2026-08-27: three different content edges across the
   site. The gutter now sits OUTSIDE the ceiling, so content is 1160 here and
   everywhere. */
.gp-ugc__inner{max-width:calc(var(--bb-max-content) + var(--page-margin) * 2);margin-inline:auto;padding-inline:var(--page-margin);}
.gp-ugc__header{display:grid;grid-template-columns:1fr auto;gap:var(--bb-space-md);align-items:end;margin-bottom:var(--bb-space-lg);}
.gp-ugc__eyebrow{grid-column:1 / -1;font-family:var(--bb-font-body);font-size:var(--bb-t-eyebrow);font-weight:800;letter-spacing:var(--bb-ls-eyebrow);line-height:1;text-transform:uppercase;color:var(--bb-accent-on-light);}
.gp-ugc__heading{margin:0;font-family:var(--bb-font-display);font-size:var(--bb-t-display-2);font-weight:500;letter-spacing:var(--bb-ls-tight);line-height:var(--bb-lh-heading);text-transform:uppercase;color:var(--bb-emerald);}
.gp-ugc__controls{display:flex;gap:var(--bb-space-2xs);}
.gp-ugc__arrow{box-sizing:border-box;width:var(--bb-control-h);height:var(--bb-control-h);display:grid;place-items:center;border:1px solid var(--bb-line);border-radius:var(--bb-r-pill);background:transparent;color:var(--bb-emerald);font-family:var(--bb-font-body);font-size:var(--bb-t-body);cursor:pointer;transition:background .2s ease,color .2s ease,opacity .2s ease;}
.gp-ugc__arrow:hover:not(:disabled){background:var(--bb-emerald);border-color:var(--bb-emerald);color:var(--bb-cream);}
.gp-ugc__arrow:disabled{opacity:.35;cursor:default;}
.gp-ugc__arrow:focus-visible,.gp-ugc__play:focus-visible,.gp-ugc__product:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;}

.gp-ugc__scroller{grid-auto-columns:minmax(0,62%);gap:var(--bb-space-sm);}
.gp-ugc__card{display:grid;grid-template-rows:auto 1fr;gap:var(--bb-space-xs);min-width:0;}
/* 9:16, the shape the clips are actually shot in. */
.gp-ugc__frame{position:relative;aspect-ratio:9/16;border-radius:var(--bb-r-card);overflow:hidden;background:var(--bb-emerald-deep);}
.gp-ugc__poster,.gp-ugc__video,.gp-ugc__embed{display:block;width:100%;height:100%;object-fit:cover;border:0;}
.gp-ugc__video,.gp-ugc__embed{position:absolute;inset:0;background:#000;}
.gp-ugc__embed iframe{display:block;width:100%;height:100%;border:0;}
.gp-ugc__video[hidden],.gp-ugc__embed[hidden]{display:none;}
/* The whole frame is the target — a 40px disc on a phone is a small thing to
   hit, and there is nothing else in the frame to press. */
.gp-ugc__play{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:linear-gradient(to top,color-mix(in srgb,var(--bb-emerald-deep) 55%,transparent),transparent 55%);color:var(--bb-cream);cursor:pointer;}
.gp-ugc__play-disc{display:grid;place-items:center;width:var(--bb-control-h);height:var(--bb-control-h);border-radius:var(--bb-r-pill);background:color-mix(in srgb,var(--bb-cream) 92%,transparent);color:var(--bb-emerald-deep);transition:transform .2s ease,background .2s ease;}
.gp-ugc__play:hover .gp-ugc__play-disc{transform:scale(1.06);background:var(--bb-cream);}
.gp-ugc__play[hidden]{display:none;}

.gp-ugc__meta{display:grid;align-content:start;gap:var(--bb-space-3xs);}
.gp-ugc__name{margin:0;font-family:var(--bb-font-body);font-size:var(--bb-t-small);font-weight:600;line-height:var(--bb-lh-tight);color:var(--bb-ink);}
.gp-ugc__handle{font-weight:400;color:var(--bb-ink-soft);}
.gp-ugc__quote{margin:0;font-family:var(--bb-font-body);font-size:var(--bb-t-small);line-height:var(--bb-lh-body);color:var(--bb-ink-soft);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
.gp-ugc__product{display:inline-flex;align-items:center;gap:var(--bb-space-3xs);min-height:var(--bb-tap-min);font-family:var(--bb-font-body);font-size:var(--bb-t-micro);font-weight:600;letter-spacing:var(--bb-ls-tight);color:var(--bb-emerald);text-decoration:none;}
.gp-ugc__product:hover{color:var(--bb-accent-on-light);}

@media(min-width:900px){.gp-ugc__scroller{grid-auto-columns:minmax(0,22%);gap:var(--bb-space-md);}}
@media(max-width:899px){.gp-ugc__controls{display:none;}.gp-ugc__header{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.gp-ugc__arrow,.gp-ugc__play-disc{transition:none;}}
/* END_SECTION:gp-ugc-rail */

/* START_SECTION:header-announcements (INDEX:41) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:42) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__link:not([aria-haspopup]):hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /** For transparent header, apply transparent text color to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
      --color-foreground: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(
        :has(.menu-list__link:is(:hover, [aria-expanded='true']))
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-background='top']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-background='bottom']:hover .header__row--bottom,
  [data-transparent-background='bottom']:focus-within .header__row--bottom,
  [data-transparent-background='both']:hover .header__row--bottom,
  [data-transparent-background='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-menu-drawer);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-menu-drawer);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* When top row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-background-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component uses a different background color, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--border-bottom-color, var(--color-border));
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
      border-bottom-color: var(--border-bottom-color-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
    border-bottom-color: var(--border-bottom-color-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:43) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(#header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-grid {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

  .hero__media {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__media-wrapper--desktop {
      display: none;
    }

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-grid,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select, details, summary) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

    @media screen and (min-width: 750px) {
      display: block;
    }
  }

  .hero__blurred-image--mobile {
    display: block;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:44) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:45) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:47) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:48) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
    background-color: var(--color-background);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:49) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-recipe (INDEX:53) */
.bb-recipe{background:var(--bb-cream);color:var(--bb-ink);}

  /* TWO HEIGHTS, ONE VARIABLE EACH, so the no-photograph case is a value swap
     rather than a second set of rules. Twenty-one of twenty-three recipes have
     no hero image, and at 32rem the dashed panel that names the missing
     photograph was the tallest thing on the page. It still renders — it is how
     the founder audits what is owed — at a size that reads as a note rather
     than as the article.

     Declared with two classes so it outweighs the single-class rules in the
     media queries at the foot of this file, whatever the source order. */
  .bb-recipe__hero{--bb-recipe-hero-min:min(76vh,52rem);--bb-recipe-media-min:32rem;background:var(--bb-cream-2);border-bottom:1px solid var(--bb-line);}
  .bb-recipe__hero.bb-recipe__hero--no-media{--bb-recipe-hero-min:0px;--bb-recipe-media-min:14rem;}

  /* Rule 11: --bb-max-content, not --bb-container (1340, pre-Rule-11 and
     retained only as a migration crutch). The recipe article now opens on the
     same measure as every other template.

     THE GUTTER MOVES FROM THE COLUMN TO THE SHELL AT 1024 — see the media
     query at the foot of this file. Below that the hero is one column and the
     photograph is full-bleed, which is the signed-off 390 layout; above it the
     photograph is an island on the lane and the copy starts on the lane's own
     left edge, 140 at 1440, the same number the PDP and the footer measure. */
  .bb-recipe__hero-inner{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);max-width:var(--bb-max-content);min-height:var(--bb-recipe-hero-min);margin-inline:auto;}
  .bb-recipe__intro{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,7vw,7rem) var(--bb-gutter);}
  /* WCAG 2.5.8: this measured 111 x 19. It is the only way back to the recipe
     index from an article, and it is 11.8px type, so the height comes from a
     min-block-size on a box that is already inline-flex rather than from a
     larger font. --bb-tap-aa is the 24px AA floor; see bb-tokens.css for why
     this one is not --bb-tap-min. The 48px margin below it means the extra 5px
     changes nothing in the layout. */
  .bb-recipe__back{display:inline-flex;align-items:center;gap:.5rem;min-block-size:var(--bb-tap-aa);width:max-content;margin-bottom:var(--bb-space-xl);font-family:var(--bb-font-body);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bb-emerald);text-decoration:none;}
  .bb-recipe__back:hover{color:var(--bb-accent-on-light);}
  .bb-recipe__back:focus-visible,.bb-recipe__product a:focus-visible,.bb-recipe__navigation a:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;}
  .bb-recipe__eyebrow{margin:0 0 var(--bb-space-xs);font-family:var(--bb-font-body);font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--bb-accent-on-light);}
  /* Heading scale, corrected. The title used to render at --bb-t-display-4,
     which is the token for FAQ questions and small heads, while the section
     headings beneath it ran at 32-54px — the page title was the smallest
     heading on its own page. The scale now steps display-1 -> display-2 ->
     display-3 -> display-4 and every step is a real token, so it stays fluid
     off the mobile values with no per-breakpoint redeclaration.
     Every selector here is inside .bb-recipe, which exists only in this file. */
  .bb-recipe__title{max-width:16ch;margin:0;font-family:var(--bb-font-display);font-size:var(--bb-t-display-1);font-weight:500;letter-spacing:var(--bb-ls-tight);line-height:var(--bb-lh-heading);color:var(--bb-emerald);text-wrap:balance;}
  .bb-recipe__summary{max-width:40rem;margin-top:var(--bb-space-sm);font-family:var(--bb-font-body);font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.65;color:var(--bb-ink-soft);}
  .bb-recipe__summary p{margin:0;}
  .bb-recipe__facts{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin:var(--bb-space-lg) 0 0;padding:0;}
  .bb-recipe__fact{display:grid;gap:.3rem;}
  .bb-recipe__fact dt{font-family:var(--bb-font-body);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bb-ink-soft);}
  .bb-recipe__fact dd{margin:0;font-family:var(--bb-font-display);font-size:1.15rem;font-weight:600;color:var(--bb-emerald);}
  .bb-recipe__media{min-height:var(--bb-recipe-media-min);overflow:hidden;}
  .bb-recipe__image,.bb-recipe__image-placeholder{display:block;width:100%;height:100%;min-height:var(--bb-recipe-media-min);object-fit:cover;background:linear-gradient(145deg,var(--bb-cream),var(--bb-cream-2));}

  /* Missing-image placeholders. An empty frame reads as a design choice; a
     dashed panel naming the photograph that belongs there reads as a gap, and
     the founder can audit what is still owed by scrolling the page. The block
     holds the slot's ratio so the page's rhythm does not move when the real
     image lands. Text modules still self-hide — this is for images only. */
  .bb-recipe__image-placeholder,.bb-recipe__ph{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:var(--bb-space-sm);border:1px dashed var(--bb-line);background:var(--bb-cream-2);}
  .bb-recipe__ph{width:100%;padding:var(--bb-space-2xs);overflow:hidden;}
  .bb-recipe__ph--4x5{aspect-ratio:4 / 5;}
  .bb-recipe__ph--1x1{aspect-ratio:1;}
  .bb-recipe__ph-text{max-width:28ch;font-family:var(--bb-font-body);font-size:var(--bb-t-micro);font-weight:500;line-height:var(--bb-lh-tight);color:var(--bb-ink-soft);text-align:center;text-wrap:balance;overflow-wrap:anywhere;}
  /* The card's media column is a third of a card, so the same 13px line that
     reads correctly in the full-bleed hero has to step down inside it. */
  .bb-recipe__ph .bb-recipe__ph-text{font-size:var(--bb-t-eyebrow);}
  /* THE CAP CARRIES ITS OWN GUTTER, the shape settled across the site in
     0507e96. This was 70rem (1120) capped and then padded inside that, so the
     body started on 224 at 1440 while the hero above it started on 204 and
     every other template started on 140. One lane now: 140 at 1440, 64 at
     1280. */
  .bb-recipe__main{box-sizing:border-box;max-width:calc(var(--bb-max-content) + var(--bb-gutter) * 2);margin-inline:auto;padding:clamp(3rem,7vw,7rem) var(--bb-gutter);}
  /* Rule 11: running prose is --bb-max-read at every viewport. It was 48rem
     (768) and centred, which put the article body on its own third edge. The
     cap is the reading measure; the position is the lane. */
  .bb-recipe__content{max-width:var(--bb-max-read);font-family:var(--bb-font-body);font-size:1.05rem;line-height:1.75;color:var(--bb-ink);}
  .bb-recipe__content h2,.bb-recipe__content h3,.bb-recipe__method h2,.bb-recipe__notes h2{font-family:var(--bb-font-display);font-weight:500;line-height:1;color:var(--bb-emerald);}
  .bb-recipe__content h2{margin-top:2.5em;font-size:var(--bb-t-display-2);}
  .bb-recipe__content h3{margin-top:2em;font-size:var(--bb-t-display-3);}
  .bb-recipe__content img{max-width:100%;height:auto;border-radius:var(--bb-r-card);}
  .bb-recipe__content a{color:var(--bb-emerald);text-underline-offset:.2em;}
  /* The gap was clamp(2.5rem, 7vw, 7rem) — 101px at 1440 between two columns
     that are meant to be read together. 4vw tops out at --bb-space-2xl, which
     is the widest gap this design system uses anywhere. */
  .bb-recipe__method{display:grid;grid-template-columns:minmax(16rem,.7fr) minmax(0,1.3fr);gap:clamp(var(--bb-space-lg),4vw,var(--bb-space-2xl));margin-top:clamp(3rem,7vw,6rem);padding-top:clamp(2.5rem,5vw,4.5rem);border-top:1px solid var(--bb-line);}

  /* COLUMN HEADS, NOT SECTION HEADS. --bb-t-display-2 tops out at 52px, which
     is 310px of Fraunces sitting in a 252px column at 1024 — "Ingredients"
     wrapped onto two lines inside its own card. display-3 tops out at 36px and
     fits at every width. The article body's own h2/h3, which run full measure
     rather than in a column, keep the scale the file already documents. */
  .bb-recipe__method h2,.bb-recipe__notes h2,.bb-recipe__products h2{margin:0 0 var(--bb-space-md);font-family:var(--bb-font-display);font-weight:500;line-height:var(--bb-lh-heading);color:var(--bb-emerald);font-size:var(--bb-t-display-3);}
  .bb-recipe__instructions ol{display:grid;gap:0;margin:0;padding:0;list-style:none;}
  .bb-recipe__instructions{max-width:var(--bb-max-read);}

  /* THE SHOPPING LIST IS A CARD, THE METHOD IS A COLUMN, and that is the whole
     structural idea of this page. A recipe is two documents welded together: a
     list you take to the shop and a sequence you follow at the hob. The list is
     short and static, so it gets a surface and stays put; the sequence is long
     and ordered, so it scrolls past. The card is what stops a three-line column
     reading as an empty half of the page.

     Ruled rows rather than bullets: an ingredient line is a row of a list you
     tick off, and the hairline is the same --bb-line-soft the education page's
     "what good looks like" list uses. */
  .bb-recipe__ingredients-card{padding:var(--bb-space-md);border:1px solid var(--bb-line);border-radius:var(--bb-r-card);background:var(--bb-cream-2);}
  .bb-recipe__ingredient-list{margin:0;padding:0;list-style:none;font-family:var(--bb-font-body);font-size:var(--bb-t-small);line-height:var(--bb-lh-body);color:var(--bb-ink);}
  .bb-recipe__ingredient{border-block-end:1px solid var(--bb-line-soft);}
  .bb-recipe__ingredient:last-child{border-block-end:0;}
  /* The padding is on the ROW rather than on the list item, so that when the
     row is a link the padding is inside the link box: 12 + 25 + 12 = 49px of
     target on a 15px line. */
  .bb-recipe__ingredient-row{display:block;padding-block:var(--bb-space-xs);}

  /* A row that names one of the jars this recipe links to becomes a link to it
     — see the markup for why the match is data against data. It is emerald and
     underlined because it has to read as a link inside a list of plain lines;
     that contrast IS the information. Its target size comes from the row box
     above, which is the anchor itself. */
  .bb-recipe__ingredient-link{color:var(--bb-emerald);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;}
  .bb-recipe__ingredient-link:hover{color:var(--bb-accent-on-light);}
  .bb-recipe__ingredient-link:focus-visible{outline:2px solid var(--bb-gold);outline-offset:4px;border-radius:var(--bb-r-sm);}
  .bb-recipe__instructions ol{gap:1.6rem;counter-reset:recipe-step;}
  /* The marker column and the disc are the SAME token, so the disc can never
     drift from the column that reserves its space and every step's text keeps
     one left edge down the list. Width and height are both --bb-space-lg, so
     the marker stays a circle at --bb-r-pill rather than becoming a lozenge. */
  .bb-recipe__instructions li{display:grid;grid-template-columns:var(--bb-space-lg) 1fr;gap:var(--bb-space-sm);align-items:start;font-family:var(--bb-font-body);font-size:1.05rem;line-height:1.65;}
  .bb-recipe__step-number{display:grid;place-items:center;width:var(--bb-space-lg);height:var(--bb-space-lg);border-radius:var(--bb-r-pill);background:var(--bb-emerald);font-family:var(--bb-font-body);font-size:var(--bb-t-eyebrow);font-weight:800;font-variant-numeric:tabular-nums;color:var(--bb-cream);}
  .bb-recipe__notes{margin-top:clamp(3rem,7vw,6rem);padding:clamp(1.5rem,4vw,3rem);border:1px solid var(--bb-line);border-radius:var(--bb-r-card);background:var(--bb-cream-2);font-family:var(--bb-font-body);line-height:1.65;}
  .bb-recipe__notes .metafield-rich_text_field>*:last-child{margin-bottom:0;}
  /* Capped at --bb-max-read and left on the lane, which is where
     gp-education-chapters puts the same card. The section owns the space above
     the group; the card no longer carries a top margin of its own, because
     there can now be more than one of them and the second would have pushed
     itself half a section away from the first. */
  .bb-recipe__products{margin-top:calc(var(--bb-section-y) * .75);}
  .bb-recipe__product-list{display:grid;gap:var(--bb-space-sm);max-width:var(--bb-max-read);margin:0;padding:0;list-style:none;}
  /* Image panel widened and the text panel's type stepped down, both by ~6%.
     The columns were 1fr / 2fr (image 33.33%); 1.1fr / 2fr puts the image at
     35.48%. The link drops by the same proportion, and the title moves onto
     --bb-t-display-3, the next token down.
     gp-education-chapters carries these same numbers so the two cards read as
     one component. Change one, change the other. */
  .bb-recipe__product{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);align-items:stretch;padding:0;overflow:hidden;border-radius:var(--bb-r-card);background:var(--bb-emerald-deep);color:var(--bb-cream);}
  .bb-recipe__product-media{position:relative;min-width:0;background:var(--bb-cream);}
  /* Must come AFTER .bb-recipe__product-media: same specificity, and that rule
     sets the cream ground this one has to replace. The media column stretches
     to the row height, so the dashed ground goes on the PANEL and the inner
     block only holds the 4:5 ratio that stops the panel collapsing. Without
     that split the placeholder would sit inside a taller cream strip whenever
     the text panel is the taller of the two. */
  .bb-recipe__product-media--empty{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:var(--bb-space-2xs);overflow:hidden;border:1px dashed var(--bb-line);background:var(--bb-cream-2);}
  .bb-recipe__product-media--empty .bb-recipe__ph{padding:0;border:0;background:none;}
  .bb-recipe__product-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:var(--bb-cream);}
  .bb-recipe__product-content{display:grid;align-content:center;gap:var(--bb-space-2xs);min-width:0;padding:var(--bb-space-xs);text-align:start;}
  /* An h3, not the h2 this used to be: the group's own "Made with" heading is
     the h2, and the heading order has to stay walkable. Styled identically —
     see gp-education-chapters, where the same card makes the same swap for the
     same reason. */
  .bb-recipe__product h3{margin:0;font-family:var(--bb-font-display);font-size:var(--bb-t-display-3);font-weight:500;line-height:1;color:var(--bb-cream);}
  .bb-recipe__product a{display:flex;align-items:center;justify-content:space-between;gap:var(--bb-space-2xs);width:100%;min-height:var(--bb-tap-min);margin:0;font-family:var(--bb-font-body);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--bb-cream);text-decoration:none;}
  .bb-recipe__navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:clamp(3rem,7vw,6rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--bb-line);}
  .bb-recipe__navigation a{display:flex;align-items:center;gap:1rem;min-height:5rem;padding:1rem;border:1px solid var(--bb-line);border-radius:var(--bb-r-card);font-family:var(--bb-font-display);font-size:1.15rem;line-height:1.1;color:var(--bb-emerald);text-decoration:none;}
  .bb-recipe__navigation a:last-child{justify-content:flex-end;text-align:right;}
  .bb-recipe__navigation small{display:block;margin-bottom:.35rem;font-family:var(--bb-font-body);font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bb-ink-soft);}
  @media (min-width:768px){.bb-recipe__product-content{padding-block:var(--bb-space-sm);padding-inline:var(--bb-space-md);}}

  @media (min-width:1024px){
    .bb-recipe__product-content{padding-inline:var(--bb-space-lg);}

    /* THE GUTTER MOVES FROM THE COLUMN TO THE SHELL. Below this width the hero
       is one column and the photograph runs edge to edge, so the copy column
       carries the inset. From here up the two sit side by side, so the SHELL
       carries it — which puts the copy's left edge and the photograph's right
       edge on the same 1160 lane as everything else, 140 -> 1300 at 1440. The
       copy keeps an inline-end gutter, and that is the gap between the two
       columns; there is no separate column-gap to keep in step with it. */
    .bb-recipe__hero-inner{max-width:calc(var(--bb-max-content) + var(--bb-gutter) * 2);padding-inline:var(--bb-gutter);}
    .bb-recipe__intro{padding-inline:0 var(--bb-gutter);}

    /* THE LIST STAYS ON THE COUNTER WHILE THE METHOD SCROLLS PAST IT. This is
       the two-column body doing what the two documents actually do, and it is
       also what fixes the tall empty column: the card cannot run out before the
       method does if it does not move.

       --bb-header-visible is the height of the bar RIGHT NOW — bb-header.js
       rewrites it on the root when the bar hides — so the card tucks under the
       bar while it is there and takes the top of the screen once it goes. Same
       pinning the education chip bar uses. `align-self:start` is what stops the
       grid stretching the item to the row height, which would make `position:
       sticky` do nothing at all. */
    .bb-recipe__ingredients{position:sticky;top:calc(var(--bb-header-visible) + var(--bb-space-md));align-self:start;transition:top var(--bb-header-move);}
  }

  /* 1023.98 AND 767.98, NOT 1024 AND 768. Rule 11's breakpoints are min-width
     768 and min-width 1024, so a max-width query written at the same number
     matches at that exact width too and both sides apply: at precisely 1024
     this page stacked its hero while the shell around it had already switched
     to its desktop layout. */
  @media (max-width:1023.98px){.bb-recipe__hero-inner{grid-template-columns:1fr;}.bb-recipe__intro{order:2;}.bb-recipe__media{order:1;min-height:min(var(--bb-recipe-media-min),50vw);}.bb-recipe__image,.bb-recipe__image-placeholder{min-height:min(var(--bb-recipe-media-min),50vw);max-height:40rem;}.bb-recipe__method{grid-template-columns:1fr;}}
  @media (max-width:767.98px){.bb-recipe__media,.bb-recipe__image,.bb-recipe__image-placeholder{min-height:min(var(--bb-recipe-media-min),72vw);}.bb-recipe__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}.bb-recipe__navigation{grid-template-columns:1fr;}.bb-recipe__navigation a:last-child{justify-content:flex-start;text-align:left;}}

  /* Rule 7. The only motion on this page is the sticky card following the
     header, and it stops following when the header stops sliding. */
  @media (prefers-reduced-motion:reduce){.bb-recipe__ingredients{transition:none;}}
/* END_SECTION:main-recipe */

/* START_SECTION:marquee (INDEX:54) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:55) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

      @media screen and (min-width: 750px) {
        padding-block: var(--page-margin);
      }
    }

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:56) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:57) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-hotspots (INDEX:60) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:61) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-paragraph--line-height);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:64) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:69) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:70) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:71) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:72) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:73) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:74) */
.blog-post-card__content-text a {
    color: currentcolor;
  }

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:75) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:76) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:77) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:79) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:80) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:81) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:82) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(#header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    @media screen and (min-width: 750px) {
      height: 100%;
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:83) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:86) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:88) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:92) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:93) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:95) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:98) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:99) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:100) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:101) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.background-matches-parent,
    .overflow-menu.background-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:104) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:108) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-details (INDEX:113) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:118) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:119) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:120) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accordion (INDEX:122) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not(.accordion--custom-background)[style*='--border-width: 0'],
  .accordion--dividers:not(.accordion--custom-background)[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:bb-claim-grid (INDEX:124) */
/* Component-local tokens. Rule 6 is satisfied by resolving to a --bb-*
     custom property; these are the two values the design specifies that have
     no site-wide equivalent, declared once here rather than repeated inline. */
  .bb-claims-wrap {
    --bb-claim-icon-size: 26px;
    --bb-claim-float: 3px;
  }

  /* No max-inline-size: inside the buy column the grid is already constrained
     by the column, so the only thing this block has to declare is how many
     columns the four slots sit in. That IS a breakpoint — an earlier note here
     claimed the column width would do it on its own, which is not true of a
     grid with a fixed two-track template. See the 768 rule at the foot. */
  .bb-claims {
    padding: var(--bb-space-md) var(--bb-space-sm);
    list-style: none;
    background: var(--bb-cream-2);
    border-radius: var(--bb-r-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bb-space-md) var(--bb-space-xs);
  }

  .bb-claim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bb-space-xs);
    text-align: center;
  }

  .bb-claim__icon {
    inline-size: var(--bb-claim-icon-size);
    block-size: var(--bb-claim-icon-size);
    flex: none;
    color: var(--bb-emerald);
    animation: bb-claim-float 5s ease-in-out infinite;
  }

  /* Rule 7: 3px, 5s, staggered 0.8s. Ambient — it never delays reading the
     claim, and nothing moves on the text itself. */
  .bb-claim:nth-child(2) .bb-claim__icon { animation-delay: 0.8s; }
  .bb-claim:nth-child(3) .bb-claim__icon { animation-delay: 1.6s; }
  .bb-claim:nth-child(4) .bb-claim__icon { animation-delay: 2.4s; }

  @keyframes bb-claim-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(-1 * var(--bb-claim-float))); }
  }

  .bb-claim__label {
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-eyebrow);
    font-weight: 500;
    line-height: var(--bb-lh-tight);
    color: var(--bb-ink);
    text-wrap: balance;
  }

  /* Rule 11: four across in one row, no new component and no third breakpoint.
     Column count is the only thing that changes — the icon size, the label
     type, the ground and the padding are all identical to mobile.

     THE ROW IS TIGHTEST AT THE 768 FLOOR, NOT AT THE TOP. This block sits
     inside the buy column, and Rule 11 puts that column at 45% of the shell.
     At a 768 viewport the shell is 688px, so the column is ~286px and each of
     the four slots is ~62px — NARROWER than the same slot at 390, where the
     column is the full 358px and the grid is 2 x 2. The row only gets
     comfortable once the shell reaches its 1160 cap, at ~120px a slot.
     `text-wrap: balance` keeps the wrapped lines even and the row height is
     set by the longest claim, so all four boxes stay level whatever happens.

     There is deliberately no third breakpoint and no reflow to 3-up: Rule 11
     says four across from 768 up, and a grid that changes its slot count to
     suit a string is the "reflows to fit the data" failure the doc comment at
     the top of this file forbids. If the tablet wrapping is judged
     unacceptable, that is a decision about the 45% column or about claim
     wording, not a breakpoint to add here. */
  @media (min-width: 768px) {
    .bb-claims {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .bb-claim__icon { animation: none; }
  }
/* END_BLOCK:bb-claim-grid */

/* START_BLOCK:comparison-slider (INDEX:129) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    color: var(--handle-color, var(--color-foreground));
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:130) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:131) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:133) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    color: var(--color, inherit);
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:135) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-subdued);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--theme-drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets--drawer .theme-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

    @media screen and (min-width: 990px) {
      display: none;
    }
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-copyright (INDEX:137) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:138) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:gp-cart-empty (INDEX:139) */
/* Horizon's .cart-page--empty is a centred flex column and gives
     .cart-page__more-blocks its own top margin, so the only thing wanted here
     is breathing room before the product rail in the section below. */
  .gp-cart-empty {
    padding-block-end: var(--bb-space-lg);
  }
/* END_BLOCK:gp-cart-empty */

/* START_BLOCK:gp-delivery-check (INDEX:140) */
/* Values from getpured-pdp-mobile-v3.html's .bb-pin rules. Two separate
     controls with a gap and matching small radii -- NOT the fused segmented
     shape this used to have, which borrowed the quantity + add-to-cart
     treatment from a control that does a different job. */
  .gp-delivery {
    display: block;
    padding-block-start: var(--bb-space-md);
    font-family: var(--bb-font-body);
  }

  /* The design has no label above the input; the placeholder carries it. */
  .gp-delivery__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .gp-delivery__row { display: flex; gap: var(--bb-space-2xs); }

  /* Scoped under .gp-delivery__row on purpose. Horizon's base.css carries
     `textarea, input:not([type="checkbox"], [type="radio"]) { border-color:
     var(--color-input-border) }` — :not() takes the specificity of its
     argument, so that selector is (0,1,1) and beats a single class (0,1,0).
     It overrode only the colour out of the shorthand below, which is why the
     field kept its 1.5px width and its radius but stayed ink while the button
     beside it was emerald. Two classes is (0,2,0) and wins without !important. */
  .gp-delivery__row .gp-delivery__input {
    flex: 1 1 auto;
    min-inline-size: 0;
    block-size: 46px;
    padding-inline: var(--bb-space-sm);
    /* The field and the Check button are one control row: same height, touching,
       read as a pair. They were not matched — the field took --bb-r-sm (8px) and
       a stroke that resolved to ink, beside a button at --bb-r-btn (14px) in
       emerald, so the two corners and the two stroke weights disagreed on screen.
       Both now carry the button radius and the emerald stroke; the field is still
       distinguished from the button by its fill, which is the right differentiator. */
    border: 1.5px solid var(--bb-emerald);
    border-radius: var(--bb-r-btn);
    background: var(--bb-paper);
    font-family: inherit;
    /* Below 16px Safari zooms the viewport on focus, so the design's 14.5px
       is kept for the button and the input holds at 16px. */
    font-size: var(--bb-t-body);
    color: var(--bb-ink);
  }

  .gp-delivery__input::placeholder { color: var(--bb-ink-soft); opacity: 1; }

  .gp-delivery__input:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: -2px;
  }

  .gp-delivery__button {
    flex: 0 0 88px;
    block-size: 46px;
    border: 1.5px solid var(--bb-emerald);
    border-radius: var(--bb-r-btn);
    background: transparent;
    font-family: inherit;
    font-size: var(--bb-t-small);
    font-weight: 600;
    color: var(--bb-emerald);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .gp-delivery__button:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }

  .gp-delivery__result {
    margin: 0;
    font-family: inherit;
    font-size: var(--bb-t-micro);
    font-weight: 500;
    line-height: var(--bb-lh-tight);
    color: var(--bb-emerald);
  }

  .gp-delivery__result:not(:empty) { margin-block-start: var(--bb-space-xs); }
  /* Both misses read as "look again", so both take sienna. NOT --bb-scarlet,
     which bb-tokens.css reserves for sale and alert. A PIN code the set does
     not carry is a correction, not an error state. */
  .gp-delivery__result[data-state='checking'] { color: var(--bb-ink-soft); }
  .gp-delivery__result[data-state='invalid'],
  .gp-delivery__result[data-state='unknown'] { color: var(--bb-sienna); }

  .gp-delivery__note {
    margin: var(--bb-space-xs) 0 0;
    font-family: inherit;
    font-size: var(--bb-t-micro);
    line-height: var(--bb-lh-tight);
    color: var(--bb-ink-soft);
  }

  @media (min-width: 1024px) {
    .gp-delivery__button:hover {
      background: var(--bb-emerald);
      color: var(--bb-cream);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gp-delivery__button { transition: none; }
  }
/* END_BLOCK:gp-delivery-check */

/* START_BLOCK:gp-product-assurances (INDEX:142) */
/* A footer to the buy group, not a floating strip.
     This was a bordered, filled card of three equal columns that collapsed to
     three stacked rows below 420px — about 110px spent on three claims the
     purity test proves properly further down. Making it a bare inline strip
     fixed the height and created a worse problem: it then belonged to nothing,
     sitting between the buy buttons above and a spec table below with equal
     space on each side.

     It is now visibly attached to the button it reassures — pulled up tight
     against the buy row, centred on the same axis, with the rule reading as
     the bottom edge of that group rather than as a separator between two
     unrelated things. */
  .gp-product-assurances {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem var(--bb-space-sm);
    padding: var(--bb-space-xs) var(--bb-space-2xs) 0;
    border-block-start: 1px solid var(--bb-line);
    color: var(--bb-emerald-deep);
    text-align: center;
  }

  .gp-product-assurances__item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    font-weight: 600;
    line-height: var(--bb-lh-tight);
  }

  .gp-product-assurances__icon {
    display: grid;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    place-items: center;
    border-radius: var(--bb-r-pill);
    background: var(--bb-emerald);
    color: var(--bb-cream);
  }

  .gp-product-assurances__icon svg {
    width: 11px;
    height: 11px;
  }
/* END_BLOCK:gp-product-assurances */

/* START_BLOCK:gp-product-essentials (INDEX:143) */
.gp-product-essentials {
    padding-block-start: var(--padding-sm);
    border-block-start: 1px solid var(--bb-line);
    color: var(--bb-ink);
  }

  .gp-product-essentials__content {
    font-family: var(--bb-font-body);
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .gp-product-essentials__content > :first-child {
    margin-block-start: 0;
  }

  .gp-product-essentials__content > p:first-child {
    color: var(--bb-ink-soft);
    font-size: 1.02rem;
    line-height: 1.6;
  }

  .gp-product-essentials__content :is(h2, h3) {
    margin-block: 1.6rem 0.55rem;
    font-family: var(--bb-font-display);
    font-weight: 500;
    line-height: 1.1;
    color: var(--bb-emerald-deep);
  }

  .gp-product-essentials__content h2 {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
  }

  .gp-product-essentials__content h3 {
    font-size: 1.1rem;
  }

  .gp-product-essentials__content ul {
    display: grid;
    gap: 0.45rem;
    margin-block: 0.6rem 0;
    padding-inline-start: 1.2rem;
  }

  .gp-product-essentials__content li::marker {
    color: var(--bb-accent-on-light);
  }
/* END_BLOCK:gp-product-essentials */

/* START_BLOCK:gp-product-facts (INDEX:144) */
.gp-product-facts {
    font-family: var(--bb-font-body);
    color: var(--bb-ink);
  }

  .gp-product-facts__eyebrow {
    margin: 0 0 0.7rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bb-accent-on-light);
  }

  .gp-product-facts__list {
    display: grid;
    margin: 0;
  }

  /* A provenance stamp, not a spec sheet.
     Two rows, label inline, no rules, no fill. Three layouts have now been
     tried here and the failure mode was the same each time: four facts at one
     visual weight, directly under the price, taking more vertical space than
     the buy action itself. A 2x2 grid did not fix that — it only made the
     ragged wrap worse, because a one-line value ("North East India") sat
     beside a three-line one and neither column resolved.

     Two rows is the answer, not a better arrangement of four. Flavour and
     Best for move into the "What to expect" disclosure, which is where their
     long-form versions already live, so nothing is lost and the two facts
     that actually answer "is this real" get the space to themselves.

     Values are ink, not emerald. Emerald is the button, the selected size and
     the disclosure headings; a fifth emerald element here flattened the whole
     column into one colour. */
  .gp-product-facts__list {
    display: grid;
    gap: 0.35rem var(--bb-space-sm);
    margin: 0;
  }

  .gp-product-facts__row {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.15rem var(--bb-space-sm);
    min-width: 0;
  }

  .gp-product-facts__row dt {
    min-width: 0;
    font-size: var(--bb-t-eyebrow);
    font-weight: 600;
    line-height: var(--bb-lh-tight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-ink-soft);
  }

  .gp-product-facts__row dd {
    min-width: 0;
    margin: 0;
    font-size: var(--bb-t-small);
    line-height: 1.45;
    color: var(--bb-ink);
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  /* Below 340px the label column leaves under 150px of measure for the longer
     origins ("Sahiwal cows from indigenous Indian dairy farms"). */
  @media screen and (max-width: 340px) {
    .gp-product-facts__row {
      grid-template-columns: 1fr;
    }
  }
/* END_BLOCK:gp-product-facts */

/* START_BLOCK:gp-product-sourcing (INDEX:145) */
.gp-disclosures {
    display: grid;
    gap: 0.5rem;
    font-family: var(--bb-font-body);
  }

  .gp-disclosures__item {
    overflow: hidden;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r-card);
    background: var(--bb-cream);
    color: var(--bb-ink);
  }

  .gp-disclosures__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 0.9rem;
    align-items: center;
    min-height: 56px;
    padding: 0.85rem 1.1rem;
    font-family: var(--bb-font-display);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--bb-emerald);
    cursor: pointer;
    list-style: none;
    transition: color 0.15s ease;
  }

  .gp-disclosures__summary::-webkit-details-marker {
    display: none;
  }

  .gp-disclosures__summary::marker {
    content: '';
  }

  .gp-disclosures__summary:hover {
    color: var(--bb-emerald-deep);
  }

  .gp-disclosures__summary:focus-visible {
    outline: 2px solid var(--bb-gold);
    outline-offset: -4px;
  }

  .gp-disclosures__icon {
    position: relative;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--bb-emerald);
    border-radius: var(--bb-r-pill);
  }

  .gp-disclosures__icon::before,
  .gp-disclosures__icon::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 1px;
    background: var(--bb-emerald);
  }

  .gp-disclosures__icon::after {
    transform: rotate(90deg);
    transition: transform 0.15s ease;
  }

  .gp-disclosures__item[open] .gp-disclosures__icon {
    background: var(--bb-emerald);
  }

  .gp-disclosures__item[open] .gp-disclosures__icon::before,
  .gp-disclosures__item[open] .gp-disclosures__icon::after {
    background: var(--bb-cream);
  }

  .gp-disclosures__item[open] .gp-disclosures__icon::after {
    transform: rotate(90deg) scaleX(0);
  }

  .gp-disclosures__body {
    padding: 0 1.1rem 1.1rem;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--bb-ink-soft);
  }

  .gp-disclosures__body > p {
    margin: 0;
  }

  /* The one-line summary above its own prose. Same label treatment as the
     provenance stamp in gp-product-facts, so a shopper reads the two as the
     same kind of fact rather than as two unrelated conventions. */
  .gp-disclosures__spec {
    display: grid;
    gap: 0.35rem var(--bb-space-sm);
    margin: 0 0 var(--bb-space-sm);
    padding-block-end: var(--bb-space-sm);
    border-block-end: 1px solid var(--bb-line);
  }

  .gp-disclosures__spec > div {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.15rem var(--bb-space-sm);
    min-width: 0;
  }

  .gp-disclosures__spec dt {
    min-width: 0;
    font-size: var(--bb-t-eyebrow);
    font-weight: 600;
    line-height: var(--bb-lh-tight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-ink-soft);
  }

  .gp-disclosures__spec dd {
    min-width: 0;
    margin: 0;
    font-size: var(--bb-t-small);
    line-height: 1.45;
    color: var(--bb-ink);
  }

  @media screen and (max-width: 340px) {
    .gp-disclosures__spec > div {
      grid-template-columns: 1fr;
    }
  }

  .gp-disclosures__body--rte :is(h2, h3) {
    margin-block: 1.3rem 0.45rem;
    font-family: var(--bb-font-display);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bb-emerald-deep);
  }

  .gp-disclosures__body--rte > :first-child {
    margin-block-start: 0;
  }

  .gp-disclosures__body--rte ul {
    display: grid;
    gap: 0.35rem;
    margin-block: 0.5rem 0;
    padding-inline-start: 1.15rem;
  }

  .gp-disclosures__body--rte li::marker {
    color: var(--bb-accent-on-light);
  }

  @media screen and (max-width: 400px) {
    .gp-disclosures__summary {
      padding: 0.8rem 0.9rem;
      font-size: 1rem;
    }

    .gp-disclosures__body {
      padding: 0 0.9rem 1rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gp-disclosures__summary,
    .gp-disclosures__icon::after {
      transition: none;
    }
  }
/* END_BLOCK:gp-product-sourcing */

/* START_BLOCK:gp-product-subtitle (INDEX:146) */
.gp-subtitle {
    max-inline-size: var(--bb-max-read);
    margin: 0;
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    line-height: var(--bb-lh-body);
    color: var(--bb-ink-soft);
    text-wrap: pretty;
  }
/* END_BLOCK:gp-product-subtitle */

/* START_BLOCK:gp-variant-rows (INDEX:147) */
.gp-vrows {
    --gp-vrow-gap: var(--bb-space-2xs);
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: var(--gp-vrow-gap);
  }

  /* The group needs a name for assistive tech, but the design has no visible
     label above the sizes — the sizes read as their own thing. */
  .gp-vrows__legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .gp-vrow {
    display: block;
    cursor: pointer;
  }

  /* The input is the real control and stays in the accessibility tree and the
     tab order; it is only visually replaced by the box. Never display:none —
     that would remove it from the tab order and from the radio group. */
  .gp-vrow__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* `inline-size: 100%` is load-bearing, not belt-and-braces. Horizon styles
     `label` inside the product details as flex at a higher specificity than a
     single class, so `.gp-vrow` renders as a flex container whatever it is told
     here — and a grid child of a flex parent shrinks to its content. Measured:
     the two rows came out 207px and 259px inside a 358px column. Sizing the box
     from its own inline-size makes the row independent of what the label
     resolves to. */
  .gp-vrow__box {
    display: grid;
    inline-size: 100%;
    min-inline-size: 0;
    gap: var(--bb-space-3xs);
    min-block-size: var(--bb-tap-min);
    padding: var(--bb-space-xs) var(--bb-space-sm);
    border: 1.5px solid var(--bb-line);
    border-radius: var(--bb-r-md);
    background: transparent;
    transition: border-color 0.16s ease, background-color 0.16s ease;
  }

  .gp-vrow__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--bb-space-2xs);
  }

  .gp-vrow__dot {
    inline-size: 17px;
    block-size: 17px;
    border: 1.5px solid var(--bb-line);
    border-radius: var(--bb-r-pill);
    display: grid;
    place-items: center;
  }

  .gp-vrow__dot::after {
    content: "";
    inline-size: 9px;
    block-size: 9px;
    border-radius: var(--bb-r-pill);
    background: var(--bb-emerald);
    transform: scale(0);
    transition: transform 0.16s ease;
  }

  .gp-vrow__size {
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 600;
    color: var(--bb-ink);
  }

  .gp-vrow__price {
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-small);
    font-weight: 600;
    color: var(--bb-ink);
    font-variant-numeric: tabular-nums;
  }

  .gp-vrow__bot {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--bb-space-2xs);
    /* Line the unit rate up under the size, clearing the radio and its gap. */
    padding-inline-start: calc(17px + var(--bb-space-2xs));
  }

  .gp-vrow__unit {
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    color: var(--bb-ink-soft);
    font-variant-numeric: tabular-nums;
  }

  /* Sienna, not gold: gold does not clear AA on cream (1.76:1). This is the
     documented accent for a light surface. */
  /* A pill, not loose text -- the design gives the saving a filled chip so it
     reads as a badge on the row rather than as another line of copy. Sienna,
     not gold: gold does not clear AA on cream (1.76:1). */
  .gp-vrow__flag {
    justify-self: end;
    padding: 2px var(--bb-space-2xs);
    border-radius: var(--bb-r-sm);
    background: color-mix(in srgb, var(--bb-accent-on-light) 12%, transparent);
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    font-weight: 600;
    letter-spacing: var(--bb-ls-eyebrow);
    text-transform: uppercase;
    color: var(--bb-accent-on-light);
  }

  .gp-vrow__flag--out { background: none; color: var(--bb-ink-soft); font-weight: 500; }

  /* Selected */
  .gp-vrow__input:checked ~ .gp-vrow__box {
    border-color: var(--bb-emerald);
    background: var(--bb-cream-2);
  }
  .gp-vrow__input:checked ~ .gp-vrow__box .gp-vrow__dot {
    border-color: var(--bb-emerald);
  }
  .gp-vrow__input:checked ~ .gp-vrow__box .gp-vrow__dot::after {
    transform: scale(1);
  }

  .gp-vrow__input:focus-visible ~ .gp-vrow__box {
    outline: 2px solid var(--bb-gold);
    outline-offset: 2px;
  }

  .gp-vrow.is-unavailable { cursor: default; }
  .gp-vrow.is-unavailable .gp-vrow__box { opacity: 0.55; }

  @media (min-width: 1024px) {
    .gp-vrow:not(.is-unavailable):hover .gp-vrow__box { border-color: var(--bb-emerald); }
  }

  .gp-vrows__hint {
    display: flex;
    align-items: center;
    gap: var(--bb-space-2xs);
    margin: var(--bb-space-2xs) 0 0;
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    color: var(--bb-ink-soft);
  }

  .gp-vrows__hint svg { inline-size: 14px; block-size: 14px; flex: none; }
  .gp-vrows__hint strong { color: var(--bb-ink); font-weight: 600; }

  @media (prefers-reduced-motion: reduce) {
    .gp-vrow__box, .gp-vrow__dot::after { transition: none; }
  }
/* END_BLOCK:gp-variant-rows */

/* START_BLOCK:gp-variant-value (INDEX:148) */
/* The grid inherits the variant picker's own column gap so each cell lands
     directly under its button. Horizon lays the buttons out with `gap` from
     `--gap-sm`; matching it here is what keeps the two rows aligned without
     measuring anything. */
  .gp-variant-value {
    display: grid;
    grid-template-columns: repeat(var(--gp-variant-count, 2), minmax(0, 1fr));
    gap: calc(var(--gap-sm) / 2);
    font-family: var(--bb-font-body);

    /* Cancel the details column's own block gap so the shelf sits flush under
       the buttons. This is a sibling block, and the column spaces every block
       apart by `gap` from templates/product.json — which is exactly what must
       NOT happen between these two, because they are one tile.
       KEEP THIS IN STEP with `product-details` -> settings -> gap. */
    margin-block-start: calc(var(--bb-space-2xs) * -1);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  /* The shelf of the tile, not a caption under it.
     The button above carries a 1px border on all four sides and has had its
     bottom corners squared in bb-horizon-overrides.css. This cell takes the
     same border on three sides and none on top, so the button's own bottom
     edge becomes the divider inside a single rectangle rather than two
     rectangles stacked with a seam between them.

     THE SHELF CARRIES ITS OWN TOP HAIRLINE, and that is what makes the tile
     hold together in both states. Two earlier attempts failed here and both
     failures are worth keeping written down:

       - shelf on `--color-variant-background`: identical to the unselected
         button face, and Horizon zeroes the button's bottom border, so an
         unselected tile rendered as one flat cream block with no division at
         all while the selected tile rendered emerald-over-cream. One
         component, two appearances.
       - shelf on `--bb-cream`: that is the page colour, so the shelf simply
         disappeared into the background and the rate floated under a button.

     Matching the tile face and drawing the divider explicitly gives the same
     object either way: a face, a hairline, a shelf. */
  .gp-variant-value__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    /* Two lines of content, so a cell carrying the flag is the same height as
       one that does not and the tiles stay level. */
    min-height: 2.25rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--bb-line);
    border-end-start-radius: var(--options-border-radius, var(--bb-r-md));
    border-end-end-radius: var(--options-border-radius, var(--bb-r-md));
    background: var(--bb-cream-2);
    text-align: center;
  }

  .gp-variant-value__rate {
    font-size: var(--bb-t-micro);
    font-weight: 500;
    line-height: var(--bb-lh-tight);
    color: var(--bb-ink-soft);
    font-variant-numeric: tabular-nums;
  }

  /* Gold, not emerald. Emerald is the selected-variant colour directly above,
     and a second emerald marker under an unselected button reads as a second
     selection. */
  .gp-variant-value__flag {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bb-sienna);
  }
/* END_BLOCK:gp-variant-value */

/* START_BLOCK:icon (INDEX:150) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:151) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:153) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:154) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page-content (INDEX:155) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:156) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:157) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:158) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:161) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:163) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:164) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:167) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:169) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:170) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:171) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:174) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:175) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:background-media (INDEX:177) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:187) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:188) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:buy-buttons-styles (INDEX:193) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    padding-inline: var(--theme-drawer-padding);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color, var(--color-foreground));
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
       where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:194) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:195) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-drawer (INDEX:196) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:197) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:198) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:199) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:chat-drawer (INDEX:200) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:collection-card (INDEX:202) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:205) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:206) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:207) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:208) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:209) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:214) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:gp-about-placeholder (INDEX:216) */
.gp-about__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: var(--gp-about-ph-ratio, 4 / 5);
    padding: var(--bb-space-sm);
    box-sizing: border-box;
    border: 1px dashed var(--bb-line);
    border-radius: var(--bb-r-card);
    background: color-mix(in srgb, var(--bb-emerald) 4%, transparent);
    text-align: center;
  }

  /* The frames sit on three different grounds. On the deep plate the emerald
     wash and the emerald rule both disappear, so both are restated in cream. */
  .gp-about__band--deep .gp-about__placeholder {
    border-color: color-mix(in srgb, var(--bb-cream) 34%, transparent);
    background: color-mix(in srgb, var(--bb-cream) 6%, transparent);
  }

  .gp-about__placeholderlabel {
    font-family: var(--bb-font-body);
    font-size: var(--bb-t-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: var(--bb-lh-tight);
    text-transform: uppercase;
    color: var(--bb-ink-soft);
  }

  .gp-about__band--deep .gp-about__placeholderlabel {
    color: color-mix(in srgb, var(--bb-cream) 62%, transparent);
  }
/* END_SNIPPET:gp-about-placeholder */

/* START_SNIPPET:grid-density-controls (INDEX:229) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:230) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:231) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:232) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-overlay);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    outline-color: var(--color-foreground-subdued);
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:238) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:241) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:242) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-foreground);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:243) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:248) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:249) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
    isolation: isolate;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:250) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:254) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:255) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    color: var(--color-foreground-muted);
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:257) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card (INDEX:258) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:259) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:260) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:261) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:262) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:263) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:264) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:265) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:267) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    background-color: var(--quick-add-background, var(--color-background));
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--quick-add-background, var(--color-background));
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:271) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:272) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:273) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:search-modal (INDEX:276) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:277) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:278) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(#header-group > .header-section > #header-component[transparent]):not(
      :has(#header-group > .header-section + .shopify-section)
    )
    #MainContent
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:280) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:282) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:283) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:284) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

    &:hover {
      color: var(--color-hover);
    }

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:286) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover)
    > slideshow-container
    > slideshow-slides
    > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:288) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:296) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:298) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:311) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    background-color: var(--color-variant-background);
    color: inherit;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:312) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:313) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:314) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */