/** Shopify CDN: Minification failed

Line 238:0 Unexpected "}"

**/
/* sg-card.css · Stone Grindz theme. Ported from the approved prototype (pages/shop/common.css) by theme-tools/port_assets.py.
   Edit here from now on. Product card (jewel plate, name, notes, price, one stone button, live chip) + swipe row.
   */
.sgc-scope{--sgc-ground:var(--sg-cream);--sgc-slab:var(--btn-shadow);--sgc-plate-sh:0 24px 40px -26px rgba(28,12,18,.55),0 2px 4px rgba(28,12,18,.18)}
.sgc-scope.on-dark{--sgc-ground:var(--sg-plum);--sgc-slab:var(--btn-shadow-dark);--sgc-plate-sh:0 40px 60px -36px rgb(0 0 0 / .8),0 2px 4px rgb(0 0 0 / .25)}

/* ---------- plate: the homepage jewel gradient (04-box formula), never a frame ---------- */
.sgc-plate{--j:var(--j-stufft);position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:3px;isolation:isolate;overflow:hidden;
  background:linear-gradient(128deg,transparent 22%,rgb(255 244 222 / .16) 36%,transparent 50%,transparent 64%,rgb(255 244 222 / .07) 74%,transparent 84%),
    radial-gradient(70% 30% at 50% 100%,rgb(8 2 4 / .45),transparent 72%),
    radial-gradient(80% 58% at 50% 30%,color-mix(in oklab,var(--j) 62%,white 38%) 0%,transparent 70%),
    linear-gradient(165deg,color-mix(in oklab,var(--j) 78%,white 22%) 0%,var(--j) 46%,color-mix(in oklab,var(--j) 52%,black) 100%);
  box-shadow:var(--sgc-plate-sh);transition:transform var(--btn-release) var(--btn-spring),box-shadow var(--btn-release) var(--btn-spring)}
.sgc-plate::after{content:"";position:absolute;z-index:0;left:50%;top:var(--fy,88%);width:var(--fw,54%);height:5%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgb(6 1 3 / .6),transparent);pointer-events:none}
.sgc-plate img{position:absolute;z-index:1;left:50%;top:var(--py,48%);max-width:none;translate:-50% -50%;filter:drop-shadow(0 18px 16px rgb(8 2 4 / .45)) drop-shadow(0 3px 3px rgb(8 2 4 / .3))}
.sgc-plate.is-box img{width:var(--pw,86%);height:auto}
.sgc-plate.is-bar img{height:var(--ph,80%);width:auto}
.sgc-plate.is-wrap{--py:49%;--fy:88.5%;--fw:44%}
.sgc-plate.is-wrap img{height:80%;width:auto}
.sgc-plate.is-cut{--py:48%;--fy:87%;--fw:62%}
.sgc-plate.is-cut img{width:86%;height:84%;object-fit:contain}
/* plate geometry by pack (data-pack from snippets/sg-pack on the card, or on a bare plate such as the product page
   stage), the same for every product of a kind. Oct 11 (Steven: "the small truffle boxes just need to be bigger"): a
   4-pack stands 66% of the plate tall, so it covers about as much plate as the 8-pack does lying flat, and still
   reads as the smaller box by its shape. */
.sgc[data-pack="8"] .sgc-plate,.sgc-plate[data-pack="8"]{--pw:82%;--py:47%;--fy:73%;--fw:84%}
.sgc[data-pack="8"] .sgc-plate img,.sgc-plate[data-pack="8"] img{width:var(--pw);height:auto}
/* Oct 11 (Steven: an open 8-pack "should be vertical, not horizontal"): an open box photographed upright stands
   tall on the plate (the map marks it pi-tall), the truffles reading top to bottom like the box in the hand. */
.sgc[data-pack="8"] .sgc-plate:has(img.pi-tall),.sgc-plate[data-pack="8"]:has(img.pi-tall){--py:47%;--fy:91%;--fw:50%}
.sgc[data-pack="8"] .sgc-plate img.pi-tall,.sgc-plate[data-pack="8"] img.pi-tall{width:auto;height:86%}
.sgc[data-pack="4"] .sgc-plate,.sgc-plate[data-pack="4"]{--ph:66%;--py:46%;--fy:79.5%;--fw:52%}
.sgc[data-pack="4"] .sgc-plate img,.sgc-plate[data-pack="4"] img{width:auto;height:var(--ph)}
.sgc[data-pack="bar"] .sgc-plate.is-bar,.sgc-plate.is-bar[data-pack="bar"]{--ph:80%;--py:48.5%;--fy:85.9%;--fw:48%}

/* ---------- card ---------- */
.sgc{position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}
.sgc-pw{position:relative;margin-bottom:22px}
.sgc-plate-link{display:block;border-radius:3px;color:inherit;-webkit-tap-highlight-color:transparent}
.sgc-left{position:absolute;z-index:3;left:8px;bottom:0;transform:translateY(50%);display:inline-flex;align-items:center;max-width:calc(100% - 16px);padding:4px 11px;border-radius:999px;background:var(--sg-cham);box-shadow:0 0 0 2px var(--sgc-ground);color:var(--sg-ink);font:700 13px/1.2 var(--f-ui);letter-spacing:.02em;font-variant-numeric:tabular-nums lining-nums;white-space:normal}
.sgc-name{margin:0;font-size:clamp(16px,calc((100vw - 68px) * .052),18px);line-height:1.08;text-wrap:balance}
.sgc-name a{display:block;margin-block:-8px;padding-block:8px;color:inherit;text-decoration:none;border-radius:4px}
.sgc-name a:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.sgc-notes{margin:5px 0 0;font-size:14px;line-height:1.32;text-transform:none;color:var(--c-text-2);opacity:.85;text-wrap:balance}
.on-dark .sgc-notes{color:var(--sg-notes)}
.sgc-buy{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-top:12px;margin-bottom:34px}
.sgc-price{margin:0;line-height:1.3;white-space:nowrap}
.sgc-unit{font-size:14px;font-weight:700;color:var(--c-text-2)}
.sgc-add .pop-face{padding:0 10px}
/* alternate river-stone shapes, like the homepage cards */
.sgc:nth-child(2n) .pop:not(.pop-circle),.sgc-li:nth-child(2n) .pop:not(.pop-circle){--peb:var(--peb-b);--face:var(--face-b-esp)}
.on-dark .sgc .pop:not(.pop-circle){--face:var(--face-a-gold)}
.on-dark .sgc:nth-child(2n) .pop:not(.pop-circle),.on-dark .sgc-li:nth-child(2n) .pop:not(.pop-circle){--face:var(--face-b-gold)}

/* the whole card opens the product; photo and button stay on top */
.sgc-name a::after{content:"";position:absolute;inset:0;z-index:1}
.sgc-add,.sgc-plate-link{position:relative;z-index:2}

/* press: the photo pops up-right off a slab (gold on dark, espresso on light) */
.sgc-plate-link.is-pressed .sgc-plate,.sgc-plate-link:active .sgc-plate,.sgc:has(.sgc-name a.is-pressed) .sgc-plate{transform:translate(5px,-5px);box-shadow:-5px 5px 0 0 var(--sgc-slab);transition:transform .1s ease-out,box-shadow .1s ease-out}
.sgc-name a.is-pressed{opacity:.75}
@media (hover:hover) and (pointer:fine){
  .sgc:hover .sgc-plate{transform:translate(5px,-5px);box-shadow:-5px 5px 0 0 var(--sgc-slab)}
  .sgc-name a:hover{text-decoration:underline;text-decoration-color:var(--c-rule);text-decoration-thickness:1.5px;text-underline-offset:.16em}
}

/* sold out online: a calm, flat stone (no dashed outline, no shadow); the photo is never dimmed */
.pop.sg-flat[disabled] .pop-face,.pop.sgc-add[disabled] .pop-face{border:0!important;border-radius:0;background:color-mix(in oklab,var(--c-text) 10%,transparent)!important;color:var(--c-text-2);-webkit-mask:var(--peb) center/100% 100% no-repeat;mask:var(--peb) center/100% 100% no-repeat}
.pop.sg-flat[disabled]::before,.pop.sgc-add[disabled]::before{opacity:0}

/* ---------- grid of cards (2 up on phones) ---------- */
.sgc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin-bottom:-34px}
.sgc-grid>.sgc-feature{grid-column:1 / -1}
.sgc-grid>.sgc-odd:last-child{grid-column:1 / -1}
@supports not (grid-template-rows:subgrid){.sgc{display:flex;flex-direction:column}.sgc-buy{margin-top:auto}}

/* ---------- swipe row: the next card peeks in; a progress track under it ---------- */
.sgc-rowwrap{margin-top:28px}
.sgc-rowwrap .sgc-row{display:grid;grid-auto-flow:column;grid-auto-columns:64%;gap:16px;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 4px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.sgc-row::-webkit-scrollbar{display:none}
.sgc-row:focus-visible{outline:3px solid var(--c-focus);outline-offset:-3px;border-radius:12px}
.sgc-li{scroll-snap-align:start;display:grid;min-width:0}
.sgc-li>.sgc{grid-row:auto;grid-template-rows:auto auto 1fr auto}
.sgc-li .sgc-buy{margin-bottom:0}
.sgc-track{position:relative;height:6px;margin-top:22px;border-radius:999px;background:color-mix(in oklab,var(--c-text) 16%,transparent);overflow:hidden}
.sgc-track-t{position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:inherit;background:var(--c-text);transition:transform .12s linear}

/* ---------- section head used on Shop + product pages: big heading, 1–3 lines ---------- */
.sg-hd .t-h2{font-size:clamp(30px,calc((100vw - 32px) * .094),40px)}
.sg-hd .t-body{margin-top:10px;color:var(--c-text-2)}
.sg-ship{display:flex;align-items:flex-start;gap:10px;margin:0;color:var(--c-text-2)}
.sg-ship .icon{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--sg-cham-2);stroke-width:1.8;stroke-linejoin:round}
.on-dark .sg-ship .icon{stroke:var(--sg-cham)}
.sg-ship a{color:var(--c-text);text-decoration:underline;text-decoration-color:var(--c-rule);text-decoration-thickness:1.5px;text-underline-offset:.2em;padding-block:10px}
.arw-ic{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:374px){.sgc-grid{column-gap:12px}.sgc-unit{display:block;line-height:1.25}}
@media (min-width:640px){
  .sgc-grid{column-gap:24px}
  .sgc-name{font-size:22px}
  .sgc-notes{font-size:16px}
  .sgc-buy{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
  .sgc-add{width:auto}
  .sgc-add .pop-face{min-width:132px;padding:0 18px}
  .sgc-rowwrap .sgc-row{grid-auto-columns:calc((100% - 2 * var(--gutter) - 32px) / 2.4)}
}
@media (min-width:900px){
  .sgc-rowwrap .sgc-row{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:0;gap:28px}
  .sgc-rowwrap .sgc-row.sgc-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sgc-track{display:none}
}
@media (prefers-reduced-motion:reduce){.sgc-plate,.sgc-track-t{transition:none}.sgc-plate-link.is-pressed .sgc-plate,.sgc:has(.sgc-name a.is-pressed) .sgc-plate{transform:none}}

/* theme: the Add form wraps only the button, so it must not change the card's layout */
.sgc-form{display:contents}
.sgc-add[aria-busy="true"]{cursor:progress}
/* no cutout yet (a brand-new product): the photo fills the plate edge to edge, never a photo inside a frame */
.sgc-plate img.pi-photo{left:0;top:0;translate:none;width:100%!important;height:100%!important;object-fit:cover;filter:none}
.sgc-plate:has(img.pi-photo)::after{display:none}
/* the official World Gold badge, top right of the plate (snippets/sg-world-gold, Oct 11) */
.sgc-plate .sgc-medal{position:absolute;z-index:2;top:6%;right:5%;width:22%;max-width:84px;min-width:38px;pointer-events:none;filter:drop-shadow(0 4px 6px rgb(8 2 4 / .4))}
.sgc .sgc-plate .sgc-medal img.sgc-medal-img,.sgc-plate .sgc-medal img.sgc-medal-img{position:static;display:block;width:100%;height:auto;max-width:100%;translate:none;filter:none;object-fit:contain}

/* "box of 8 / 4" seal over the plate's top-left corner; follows the plate's lift on hover and press */
.sgc-pack{position:absolute;z-index:3;top:-6px;left:-6px;display:grid;place-items:center;width:clamp(56px,25%,80px);aspect-ratio:1/1;rotate:-12deg;pointer-events:none;filter:drop-shadow(0 3px 4px rgb(8 2 4 / .35));transition:transform .1s ease-out}
.sgc-pack svg{position:absolute;inset:0;width:100%;height:100%}
.sgc-pack path{fill:var(--sg-cream);stroke:var(--sg-plum);stroke-width:3.2;stroke-linejoin:round}
.sgc-pack-t{position:relative;display:grid;justify-items:center;line-height:1;color:var(--sg-plum)}
@supports (width:1cqw){.sgc-pack{container-type:inline-size}.sgc-pack .sgc-pack-t small{font-size:14.5cqw;margin-top:0}.sgc-pack .sgc-pack-t b{font-size:44cqw}}
.sgc-pack-t small{font:800 clamp(7px,1.7vw,9.5px)/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.sgc-pack-t b{font:700 clamp(21px,5.6vw,31px)/.9 var(--f-display);margin-top:1px}
.sgc-plate-link.is-pressed .sgc-pack,.sgc-plate-link:active .sgc-pack,.sgc:has(.sgc-name a.is-pressed) .sgc-pack{transform:translate(5px,-5px)}
@media (hover:hover) and (pointer:fine){.sgc:hover .sgc-pack{transform:translate(5px,-5px)}}
@media (prefers-reduced-motion:reduce){.sgc-pack{transition:none}}

/* every product grid (Shop all, the release / limited-batch page, collections, search), Oct 11: portrait 4:5 photos
   instead of squares, and the chocolate fills more of each one (Steven: "make the bars bigger and the truffles bigger,
   use the space better", without crowding the edges; Raaka's tiles are portrait too). Bars stand 84% of the photo tall,
   8-packs span 92% of its width, 4-packs stand 66% tall (so the small box still reads smaller); each floor shadow sits just under its piece. The big
   feature card on the release page keeps its own 5:4 shape (shop-main.css). */
.sgc-grid .sgc-plate{aspect-ratio:4/5}
.sgc-grid .sgc-plate.is-bar,.sgc-grid .sgc[data-pack="bar"] .sgc-plate.is-bar{--ph:86%;--py:48%;--fy:90%;--fw:54%}
.sgc-grid .sgc-plate.is-wrap{--py:48%;--fy:90%;--fw:52%}
.sgc-grid .sgc-plate.is-wrap img{height:84%}
.sgc-grid .sgc-plate.is-cut{--py:48%;--fy:90%;--fw:70%}
.sgc-grid .sgc-plate.is-cut img{width:86%;height:84%}
.sgc-grid .sgc[data-pack="8"] .sgc-plate{--pw:92%;--py:47%;--fy:68%;--fw:94%}
.sgc-grid .sgc[data-pack="4"] .sgc-plate{--ph:66%;--py:47%;--fy:80%;--fw:54%}
.sgc-grid .sgc[data-pack="8"] .sgc-plate img{width:var(--pw);height:auto}
.sgc-grid .sgc[data-pack="8"] .sgc-plate:has(img.pi-tall){--py:47%;--fy:90%;--fw:56%}
.sgc-grid .sgc[data-pack="8"] .sgc-plate img.pi-tall{width:auto;height:84%}
.sgc-grid .sgc[data-pack="4"] .sgc-plate img{width:auto;height:var(--ph)}

/* phones, every product grid (Shop all, the release / limited-batch page, collections, search), Oct 11 trial:
   edge to edge. Photos run to both screen edges and touch each other (no gap, no rounded corners), so the jewel
   plates read as one big mosaic; the name, notes, price and button sit 12px in from each tile's edge. The box-of
   seal moves inside the photo so the screen edge never cuts it. Pressing a tile still pops it out. Tablets and desktop are unchanged. */
@media (max-width:699px){
  .sgc-grid{column-gap:0;margin-inline:calc(-1 * var(--gutter))}
  .sgc-grid .sgc-plate,.sgc-grid .sgc-plate-link{border-radius:0}
  .sgc-grid .sgc-name,.sgc-grid .sgc-notes,.sgc-grid .sgc-buy{padding-inline:12px}
  .sgc-grid .sgc-name{font-size:clamp(17px,4.8vw,19.5px);line-height:1.1;letter-spacing:-.005em;margin-top:2px}
  .sgc-grid .sgc-notes{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px}
  .sgc-grid .sgc-pack{top:8px;left:8px;width:clamp(50px,24%,64px)}
  .sgc-grid .sgc-left{left:12px}
  /* the press pop stays (photo lifts up-right onto its dark slab while the finger is down); the pressed tile rises
     above its neighbours so the lift isn't hidden under the next photo */
  .sgc-grid .sgc:has(.is-pressed),.sgc-grid .sgc:has(.sgc-plate-link:active){z-index:3}
}
/* Oct 11 (snippets/sg-jewel-neighbors): a lone card at the end of a two-across grid takes the whole row on a wider
   plate, so no row is left half empty. */
.sgc.sgc-lone{grid-column:1 / -1}

/* Oct 11: an award logo never sits on the product. With a medal, the logo is a little smaller and tucked into the
   corner, and the product steps down and in a touch so the two never overlap. */
.sgc-plate .sgc-medal{top:4%;right:4%;width:17%;max-width:72px}
.sgc-plate.is-wrap:has(.sgc-medal),.sgc-grid .sgc-plate.is-wrap:has(.sgc-medal){--py:51%;--fy:90%}
.sgc-plate.is-wrap:has(.sgc-medal) img:not(.sgc-medal-img),.sgc-grid .sgc-plate.is-wrap:has(.sgc-medal) img:not(.sgc-medal-img){height:76%}
.sgc-plate.is-bar:has(.sgc-medal),.sgc-grid .sgc-plate.is-bar:has(.sgc-medal){--py:51%}
.sgc-plate.is-bar:has(.sgc-medal) img:not(.sgc-medal-img),.sgc-grid .sgc-plate.is-bar:has(.sgc-medal) img:not(.sgc-medal-img){height:78%}
.sgc[data-pack="4"] .sgc-plate:has(.sgc-medal),.sgc-grid .sgc[data-pack="4"] .sgc-plate:has(.sgc-medal){--py:51%;--fy:84%}
.sgc[data-pack="4"] .sgc-plate:has(.sgc-medal) img:not(.sgc-medal-img),.sgc-grid .sgc[data-pack="4"] .sgc-plate:has(.sgc-medal) img:not(.sgc-medal-img){height:62%}
.sgc[data-pack="8"] .sgc-plate:has(.sgc-medal):not(:has(img.pi-tall)),.sgc-grid .sgc[data-pack="8"] .sgc-plate:has(.sgc-medal):not(:has(img.pi-tall)){--py:53%}
.sgc[data-pack="8"] .sgc-plate:has(.sgc-medal) img.pi-tall,.sgc-grid .sgc[data-pack="8"] .sgc-plate:has(.sgc-medal) img.pi-tall{height:80%}
.sgc[data-pack="8"] .sgc-plate:has(.sgc-medal):has(img.pi-tall),.sgc-grid .sgc[data-pack="8"] .sgc-plate:has(.sgc-medal):has(img.pi-tall){--py:50%;--fy:91%}
/* Oct 11 (Steven): the flavor tag on bare-bar tiles (snippets/sg-flavor-tag) */
/* Oct 12 (Steven: "it covers the whole product"): the flavor tag gets its own corner and the bare bar steps aside to
   make room for it, smaller and right of centre, so the tag never touches the bar */
/* Oct 12 (Steven: "the bars should be centered and the notes should come off the rectangle"): the bar sits centred
   again, a touch smaller, and the note is pinned over the plate's top-left corner, hanging off it */
.sgc-plate:has(.sgc-ftag){overflow:visible}
.sgc-plate:has(.sgc-ftag) img:not(.sgc-medal-img){height:80%;width:auto;top:50%}
.sgc-plate:has(.sgc-ftag)::after{top:89%}
.sgc-ftag{position:absolute;z-index:3;left:-10px;top:-12px;rotate:-5deg;display:grid;gap:1px;width:max-content;max-width:min(44%,150px);padding:6px 10px 7px 14px;border-radius:3px 8px 8px 3px;background:var(--sg-cream);color:var(--sg-plum);box-shadow:0 3px 6px rgb(8 2 4 / .28);text-align:left;pointer-events:none}
.sgc-ftag::before{content:"";position:absolute;left:5.5px;top:50%;width:4.5px;height:4.5px;margin-top:-2.25px;border-radius:50%;background:var(--sg-plum)}
.sgc-ftag small{font:700 7.5px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.sgc-ftag b{font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(10.5px,.95vw,13px);line-height:1.1;text-wrap:balance}

/* Oct 11: the release feature's story line (snippets/sg-product-card blurb) shows only where home-release.css asks for it */
.sgc-blurb{display:none}

/* Oct 11 desktop pass: the gap-filler card at the end of a short last row (snippets/sg-jewel-neighbors) */
.sgc-fill{display:grid;place-items:center;min-height:240px;margin-bottom:28px;border:0;border-radius:12px;background:color-mix(in oklab,var(--c-text) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-text) 18%,transparent);padding:28px 24px;text-align:center}
.sgc-fill-in{display:grid;justify-items:center;gap:8px;max-width:30ch}
.sgc-fill-ll{display:block;width:42px;height:64px;margin-bottom:6px;background:currentColor;opacity:.85;-webkit-mask:var(--ll) center/contain no-repeat;mask:var(--ll) center/contain no-repeat}
.sgc-fill-h{margin:0;font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(22px,1.8vw,28px);line-height:1.1;text-wrap:balance}
.sgc-fill-p{margin:0;font-size:15.5px;line-height:1.45;opacity:.8;text-wrap:pretty}
.sgc-fill-a{margin-top:6px;font-weight:700;font-size:15px;color:inherit;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1.5px}

/* ===== Oct 12 (Steven): every award a bar has won, as a column of small medals at the right of its plate, gold first
   and Good Food Awards at the bottom (snippets/sg-award-column). The bar keeps its own size and stays centred; the
   column lives in the space beside it. Sizes come from the plate itself (size container), so 1 medal or 7 always fit. */
.sgc-plate:has(.sgc-awc){container-type:size}
.sgc-awc{position:absolute;z-index:2;right:2.6cqw;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:min(2.2cqh,8px);
  width:min(12cqw,calc((84cqh - (var(--n) - 1) * min(2.2cqh,8px)) / var(--n) * .92));pointer-events:none}
.sgc .sgc-plate .sgc-awc img.sgc-aw-img,.sgc-plate .sgc-awc img.sgc-aw-img{position:static;display:block;width:100%;height:auto;max-width:100%;translate:none;
  filter:drop-shadow(0 3px 4px rgb(8 2 4 / .35))}
/* wide plates (the release feature, lone cards): a little more room from the edge */
.sgc.sgc-lone .sgc-awc,.sgc-feature .sgc-awc{right:5cqw;width:min(9cqw,calc((84cqh - (var(--n) - 1) * min(2.2cqh,8px)) / var(--n) * .92))}

/* ===== Oct 12 laptop/tablet/phone pass ===== */
/* A lone card ending a two-across grid, and the big release card on utility pages: a horizontal card. The plate is
   the same 4:5 as every other card (left half), the name, notes and price sit beside it, centred. No more stretched
   landscape or skyscraper plates. */
.sgc.sgc-lone{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(16px,3vw,40px);align-content:stretch}
.sgc.sgc-lone>.sgc-pw{grid-column:1;grid-row:1 / -1;align-self:start;margin-bottom:34px}
.sgc.sgc-lone>.sgc-name{grid-column:2;grid-row:2;font-size:clamp(20px,4.6vw,30px)}
.sgc.sgc-lone>.sgc-notes{grid-column:2;grid-row:3}
.sgc.sgc-lone>.sgc-blurb{display:none}
.sgc.sgc-lone>.sgc-buy{grid-column:2;grid-row:4;margin-bottom:34px}
.sgc.sgc-lone .sgc-plate{aspect-ratio:4 / 5}
@media (max-width:699px){.sgc-grid .sgc.sgc-lone>.sgc-name,.sgc-grid .sgc.sgc-lone>.sgc-notes,.sgc-grid .sgc.sgc-lone>.sgc-buy{padding-inline:0 16px}}
}
/* swipe rows (gifts, product pages): the same 4:5 plates and bar size as the grids */
.sgc-row .sgc-plate{aspect-ratio:4 / 5}
.sgc-row .sgc-plate.is-bar,.sgc-row .sgc[data-pack="bar"] .sgc-plate.is-bar{--ph:86%;--py:48%;--fy:90%;--fw:54%}
.sgc-row .sgc-plate.is-wrap{--py:48%;--fy:90%;--fw:52%}
.sgc-row .sgc-plate.is-wrap img{height:84%}
.sgc-row .sgc-plate.is-cut{--py:48%;--fy:90%;--fw:70%}
.sgc-row .sgc-plate.is-cut img{width:86%;height:84%}
.sgc-row .sgc[data-pack="8"] .sgc-plate{--pw:92%;--py:47%;--fy:68%;--fw:94%}
.sgc-row .sgc[data-pack="8"] .sgc-plate img{width:var(--pw);height:auto}
.sgc-row .sgc[data-pack="4"] .sgc-plate{--ph:66%;--py:47%;--fy:80%;--fw:54%}
.sgc-row .sgc[data-pack="4"] .sgc-plate img{width:auto;height:var(--ph)}
/* the flavor note hangs off the plate: room for it above a swipe row (which clips), and inside the screen edge on
   phones where the grid runs edge to edge */
.sgc-rowwrap .sgc-row{padding-top:18px}
@media (max-width:699px){.sgc-grid .sgc-ftag{left:8px;top:-12px}}
.sgc-ftag b{overflow-wrap:normal;hyphens:none}
/* sold-out cards keep the same price row as their neighbours (the flat "Sold out" stone is smaller) */
@media (min-width:640px){.sgc-buy:has(.sgc-add[disabled]){flex-wrap:nowrap}.sgc-add[disabled] .pop-face{min-width:0;padding:0 12px;font-size:14px}}
/* award medals never shrink past legibility */
.sgc-awc{min-width:20px}
/* Oct 14 (Steven: "the titles still don't look like titles"): every product name in the H1's serif at its bold weight
   (the face the page already loads for headings), a touch tighter */
.sgc-name{font-weight:700;letter-spacing:-.008em}
/* Oct 14 (Steven: each flavor's 8-pack, then its 4-pack): the label that opens the truffles in a grid
   (snippets/sg-pack-label). A slim full-width label when the row above is full; a tile filling the leftover cells otherwise. */
.sa-sec{grid-column:1 / -1;margin:2px 0 22px;padding-top:18px;border-top:1px solid color-mix(in oklab,var(--c-text) 16%,transparent)}
.sa-sec-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.sgc-grid>.sa-sec:first-child{border-top:0;padding-top:4px}
.sa-sec-h{margin:0;font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(24px,5.6vw,32px);line-height:1.05;color:var(--c-text);text-wrap:balance}
.sa-sec-p{margin:0;font:700 14px/1.35 var(--f-ui);color:var(--c-label)}
/* ===== Oct 14 (Steven picked "Porcelain"): grids with .sgc-porcelain (Shop all, collections, This week's release) =====
   one cool white plate for every product, light from above; the product's own colours do the talking */
/* Oct 15 (Steven: "porcelain looks cold"): the warm stone plate from the Background Lab ("Neutral plates on plum") */
.sgc-porcelain .sgc-plate{background:radial-gradient(70% 30% at 50% 100%,rgb(60 40 30 / .16),transparent 72%),radial-gradient(85% 70% at 40% 28%,#fbf8f3 0%,#efe8de 55%,#e2d9cd 100%);border-radius:12px;
  box-shadow:inset 0 0 0 1px rgb(60 40 30 / .07),0 16px 28px -24px rgb(0 0 0 / .55)}
.sgc-porcelain .sgc-plate-link{border-radius:12px}
.sgc-porcelain .sgc[data-key*="cacao"] .sgc-plate img:not(.sgc-medal-img){scale:.86}
/* the flavor note: the approved cream note hanging off the corner, with a firmer shadow on porcelain */
.sgc-porcelain .sgc-ftag{box-shadow:0 3px 8px rgb(8 2 4 / .34),inset 0 0 0 1px rgb(36 21 57 / .1)}
.sgc-porcelain .sgc-pack{rotate:0deg;top:10px;left:10px;width:clamp(56px,22%,74px)}

/* cards as columns: the line over the name, the name, its notes right under it; price and button on the bottom line */
.sgc-porcelain>.sgc:not(.sgc-lone){display:flex;flex-direction:column}
.sgc-porcelain>.sgc:not(.sgc-lone)>.sgc-buy{margin-top:auto;padding-top:14px}
.sgc-porcelain>.sgc>.sgc-notes{margin-top:5px}
.sgc-kick{margin:0 0 6px;min-height:21px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:700 12.5px/1.25 var(--f-ui);letter-spacing:.02em;color:var(--kick,var(--c-label))}
.sgc-kick b{padding:3px 8px 2px;border-radius:999px;background:var(--kick-pill,var(--sg-lilac));color:var(--sg-plum);font-size:11.5px;font-weight:700}
.sgc-kick em{font:italic 500 15px/1.1 var(--f-display);letter-spacing:0;color:inherit}
.sgc-kick span+em::before{content:"·";margin-right:8px;font-style:normal;font-family:var(--f-ui)}
.sgc.sgc-lone>.sgc-kick{grid-column:2;grid-row:1;align-self:end}
.pop.sgc-next .pop-face{white-space:nowrap}
@media (max-width:699px){.pop.sgc-next .pop-face{font-size:14px;padding-inline:6px}}
/* titles that read as titles: the H1's serif, bold and a touch tighter */
.sgc-porcelain .sgc-name{letter-spacing:-.012em}
@media (min-width:1100px){.sgc-porcelain .sgc-name{font-size:clamp(20px,.6vw + 13px,26px)}}

/* phones: plates with a slim gap and soft corners (no edge-to-edge mosaic on porcelain) */
@media (max-width:699px){
  .sgc-porcelain.sgc-grid{column-gap:10px;margin-inline:0}
  .sgc-porcelain .sgc-plate,.sgc-porcelain .sgc-plate-link{border-radius:10px}
  .sgc-porcelain .sgc-name,.sgc-porcelain .sgc-notes,.sgc-porcelain .sgc-buy,.sgc-porcelain .sgc-kick{padding-inline:2px}
  .sgc-kick{font-size:11.5px;row-gap:2px}
  .sgc-kick em{flex-basis:100%;font-size:14px}
  .sgc-kick span+em::before{content:none}
}
@media (max-width:599px){.sgc-porcelain .sgc-awc{right:6px}}
/* each box of 4 reads smaller than its box of 8 when they sit side by side */
.sgc-porcelain .sgc[data-pack="4"] .sgc-plate img:not(.sgc-medal-img),.sgc-porcelain .sgc[data-pack="4"] .sgc-plate:has(.sgc-medal) img:not(.sgc-medal-img){height:56%}
/* Oct 15: in porcelain grids the box size sits under the price, so price and stone always share one line */
@media (min-width:640px){.sgc-porcelain .sgc-buy{flex-wrap:nowrap}.sgc-porcelain .sgc-price{line-height:1.1}.sgc-porcelain .sgc-unit{display:block;margin-top:2px}.sgc-porcelain .sgc-dot{display:none}}
/* the box-of seal reads cleanly on phones */
@media (max-width:699px){.sgc-porcelain .sgc-pack{width:clamp(54px,27%,66px)}}
@supports (width:1cqw){.sgc-porcelain .sgc-pack .sgc-pack-t small{font-size:13.5cqw;letter-spacing:.03em}}
.sgc-porcelain .sgc[data-pack="4"] .sgc-plate{--py:51%}
/* collection grids: the same card footer as Shop all (price left, stone right) */
@media (min-width:640px){.sgc-porcelain.coll-grid .sgc-buy{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}.sgc-porcelain.coll-grid .sgc-add{width:auto}}
/* Oct 15: sold out online, the "Text me next drop" stone is the quiet one: plum with a gold rim and cream words, same shape,
   same size, so it still lines up with Add to bag but nobody mistakes it for a buy button */
.sgc-porcelain .sgc .pop.sgc-next.sgc-add:not(.pop-circle){--peb:var(--peb-a);--face:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 204 60' preserveAspectRatio='none'%3E%3Cpath d='M14 9C40 1 82 4 118 2C150 0 182 3 194 14C201 22 199 38 192 46C180 56 146 54 110 55C72 56 34 57 14 50C3 45 0 36 1 27C2 18 5 12 14 9Z' fill='%233d2560' stroke='%23ead2a0' stroke-width='2.4' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");--pop-ink:#fff4de}
/* Oct 15: the lilac tile that fills a group's empty slots on porcelain collection grids (snippets/sg-grid-gaps): a small
   piece of the hero band. Words top-left, presents standing on a floor line at the bottom, like the hero. */
.sgc-gap{grid-row:span 4;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:18px;margin-bottom:34px;padding:30px 28px 26px;border-radius:12px;background:var(--sg-lilac-wash,#ece1fb);color:var(--sg-plum,#241539);--c-text:var(--sg-plum,#241539)}
.sgc-gap-t{display:grid;gap:12px;justify-items:start}
.sgc-gap-h{margin:0;font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(26px,1.6vw + 12px,36px);line-height:1.02;text-wrap:balance}
.sgc-gap-p{margin:0;font-size:16px;line-height:1.45;max-width:34ch;color:var(--sg-plum,#241539);opacity:.85}
.sgc-gap-link{font-weight:700;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.sgc-gap .pop:not(.pop-circle){--face:var(--face-a-esp)}
/* Oct 15: tile drawings (snippets/sg-tile-art) in the hero's hand; they draw in when they scroll into view */
.hgt{display:block;color:#1c0c12}.hgt .hxg{height:auto;animation-duration:3.6s;animation-delay:.05s}.hgt.go .hxg{animation-play-state:running}
.sgc-gap,.sa-main .sa-tile{--band:var(--sg-lilac-wash,#ece1fb)}
.sgc-gap .sgc-gap-p{text-wrap:pretty}
.sgc-gap .hgt{align-self:flex-end;width:min(100%,250px)}
.sgc-gap.is-wide{flex-direction:row;align-items:center;gap:clamp(24px,3vw,56px);padding:36px clamp(30px,3.6vw,64px) 30px}
.sgc-gap.is-wide .sgc-gap-t{align-self:center;gap:14px}
.sgc-gap.is-wide .sgc-gap-h{font-size:clamp(36px,2vw + 16px,50px)}
.sgc-gap.is-wide .sgc-gap-p{font-size:18px}
.sgc-gap.is-wide .sgc-gap-t{flex:1 1 0;min-width:0;max-width:440px}
.sgc-gap.is-wide .hgt{flex:none;align-self:flex-end;width:auto;height:min(100%,230px);aspect-ratio:216/160}.sgc-gap.is-wide .hgt .hxg{width:100%;height:100%}
/* phones: a card's line over the name can run to two lines; every card keeps room for two so titles line up */
.sgc-porcelain .sgc-kick{align-content:flex-end}
@media (max-width:699px){.sgc-porcelain .sgc-ftag{left:-4px;top:-14px}}

/* Oct 15 (review: "sold out and 'Last 3' look the same at a glance"): on porcelain grids the sold-out chip matches the
   sold-out stone below it (plum, gold rim, cream words); low-stock chips stay champagne */
.sgc-porcelain .sgc-left.is-out,.sgc-porcelain .sgc-left.is-outq{background:#3d2560;color:#fff4de;box-shadow:0 0 0 1.5px #ead2a0,0 0 0 3.5px var(--sg-plum,#241539)}
/* Oct 15: "Can't decide?" tile: the homepage margin vines hang in from its top edge, words beside or under them */
.sgc-gap{position:relative;overflow:hidden}
.sgc-gap.is-stash .hgt{position:absolute;top:-6px;right:clamp(14px,9%,120px);width:auto;height:calc(100% + 6px);aspect-ratio:auto}
.sgc-gap.is-stash .hgt .hxg{width:auto;height:100%}
.sgc-gap.is-stash.is-wide .hgt{height:calc(100% + 6px)}
.sgc-gap.is-stash.is-wide .sgc-gap-t{max-width:min(440px,50%)}
.sgc-gap.is-stash:not(.is-wide){justify-content:flex-end}
.sgc-gap.is-stash:not(.is-wide) .hgt{right:2px;height:56%}
/* phones (two across): a half-width tile like Shop all's, words on top, the drawing at the foot */
@media (max-width:699px){
  .sgc-gap{padding:18px 14px 16px;gap:12px}
  .sgc-gap .sgc-gap-h{font-size:clamp(21px,5.6vw,26px)}
  .sgc-gap .sgc-gap-p{font-size:14px}
  .sgc-gap .sgc-gap-link{font-size:15px}
  .sgc-gap.is-gifts .hgt{width:100%;align-self:center}
  .sgc-gap.is-gifts{justify-content:center;gap:26px}
}
/* Oct 15 (review: "at four across nothing ties each box of 8 to its box of 4"): a flavor's two boxes sit a little
   closer together (sg-jewel-neighbors marks pairs that share a row) */
@media (min-width:900px){.sgc-porcelain>.sgc[style*="--shift"]{translate:var(--shift,0px) 0}.sgc-porcelain>.sgc-gap[style*="--ml"]{margin-left:var(--ml,0px);margin-right:var(--mr,0px)}}
/* Oct 15 (review: "on a phone the products come late"): tighter group labels on phones */
@media (max-width:699px){.sa-sec{margin-bottom:14px}}
/* Oct 15: the Judge.me rating on the line over the name (same star as the homepage staples) */
.sgc-kick .sgc-rate{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font:600 12.5px/1 var(--f-ui);font-style:normal;letter-spacing:.01em;font-variant-numeric:lining-nums;color:inherit;white-space:nowrap}
.sgc-kick .sgc-rate::before{content:"";width:13px;height:13px;flex:none;background:var(--sg-cham,#e9d29f);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.5 5.2 5.7.7-4.2 3.9 1.1 5.7L10 14.3l-5.1 2.8 1.1-5.7L1.8 7.5l5.7-.7z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.5 5.2 5.7.7-4.2 3.9 1.1 5.7L10 14.3l-5.1 2.8 1.1-5.7L1.8 7.5l5.7-.7z'/%3E%3C/svg%3E") center / contain no-repeat}
@media (max-width:699px){.sgc-kick .sgc-rate{font-size:11.5px}}
/* Oct 15 (review: "Cappuccino's note is cut to 'chocolate...' on a phone"): porcelain grids show the whole note, up to three lines */
.sgc-porcelain.sgc-grid .sgc-notes{-webkit-line-clamp:3}
/* Oct 15 (review: "the wide gifts tile is words in the middle-left and presents pinned bottom-right"): like the hero,
   words and presents form one group, centred in the tile, the words sitting on the presents' floor */
.sgc-gap.is-wide.is-gifts{display:grid;grid-template-columns:minmax(0,440px) auto;justify-content:center;align-content:center;align-items:end;column-gap:clamp(36px,4.5vw,72px)}
.sgc-gap.is-wide.is-gifts .sgc-gap-t{align-self:end;padding-bottom:6px}
.sgc-gap.is-wide.is-gifts .hgt{height:clamp(170px,19vw,250px);width:auto;aspect-ratio:216/160}
/* a pair's two titles are identical: both get the same measure (so they always break alike), and the box of 8's
   title keeps clear of its neighbour's */
@media (min-width:900px){.sgc-porcelain .sgc.sgc-pair-a .sgc-name,.sgc-porcelain .sgc.sgc-pair-b .sgc-name{padding-right:18px;text-wrap:balance}}