/* ═══════════════════════════════════════════════════════════════════════
   ShopProductBlocks — web (browser) port of the mini-app PRODUCT design-block
   renderer (miniapp/components/product-blocks/product-blocks.wxss · v1
   Editorial). Faithful per-type styling, scoped under .shop-product-blocks,
   all classes prefixed spb-.

   rpx -> responsive: every original Nrpx becomes calc(N * var(--u)).
     phones   : --u = 100vw / 750  (full-bleed phone canvas)
     ≥ 768px  : --u = 720px / 750   (host renders us in a ~720px column;
                we do NOT set max-width/margin — the host wraps us)
   Brand colour vars (--lime --forest --berry --oat --ink --carrot --papaya
   --corn --sky --pea --lotus --pink --citrus --olive …) and @font-face
   (--f-bear --f-toni --f-aleo --f-gothic) come from the host page (shop.html).
   --font-scale defaults to 1 if the host doesn't set it.
   ═══════════════════════════════════════════════════════════════════════ */

.shop-product-blocks {
  --u: calc(100vw / 750);
  --font-scale: 1;

  /* derived ink tints (host provides --ink) */
  --oat-deep: #E8D9CB;
  --ink-60: rgba(26, 26, 23, 0.6);
  --ink-30: rgba(26, 26, 23, 0.3);
  --ink-12: rgba(26, 26, 23, 0.12);

  display: block;
  width: 100%;
  background: var(--oat);
  color: var(--ink);
  box-sizing: border-box;
}
.shop-product-blocks *,
.shop-product-blocks *::before,
.shop-product-blocks *::after { box-sizing: border-box; }

@media (min-width: 768px) {
  .shop-product-blocks { --u: calc(720px / 750); }
}

/* Each block flush to width; divides with a 2rpx ink rule (v1 signature).
   The mini-app pulled past the parent's 44rpx body padding with a negative
   margin; on the web the host wraps us in a readable column, so we drop the
   bleed and keep block padding self-contained. */
.shop-product-blocks .spb {
  display: block;
  margin: 0;
  padding: 0;
  border-bottom: calc(2 * var(--u)) solid var(--ink);
}
.shop-product-blocks .spb:last-child { border-bottom: 0; }

/* ───────── 01 · SPEC STRIP ───────── */
.shop-product-blocks .spb-spec {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.shop-product-blocks .spb-spec-cell {
  padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(32 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  border-right: calc(2 * var(--u)) solid var(--ink-12);
}
.shop-product-blocks .spb-spec-cell:last-child { border-right: 0; }
.shop-product-blocks .spb-spec-k {
  font-family: var(--f-toni);
  font-size: calc(22 * var(--u) * var(--font-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pa-accent, var(--ink-60));
}
.shop-product-blocks .spb-spec-v {
  font-family: var(--f-bear);
  font-size: calc(30 * var(--u) * var(--font-scale));
  line-height: 1.1;
  color: var(--pa-fg, var(--ink));
}

/* ───────── 02 · HERO INTRO ───────── */
.shop-product-blocks .spb-hero {
  padding: calc(64 * var(--u)) calc(44 * var(--u)) calc(60 * var(--u));
}
.shop-product-blocks .spb-hero-kicker {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  margin-bottom: calc(28 * var(--u));
  font-family: var(--f-toni);
  font-size: calc(22 * var(--u) * var(--font-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pa-accent, var(--forest));
}
.shop-product-blocks .spb-hero-kicker::before {
  content: "";
  display: inline-block;
  width: calc(36 * var(--u));
  height: calc(2 * var(--u));
  background: var(--pa-accent, var(--forest));
  flex: none;
}
.shop-product-blocks .spb-hero-body {
  font-family: var(--f-aleo);
  font-size: calc(30 * var(--u) * var(--font-scale));
  line-height: 1.55;
  color: var(--pa-fg, var(--ink));
  white-space: pre-line;
}
.shop-product-blocks .spb-ink-pull {
  font-family: var(--f-bear);
  font-style: normal;
  font-size: calc(34 * var(--u) * var(--font-scale));
  line-height: 1;
  letter-spacing: -0.005em;
  background: var(--lime);
  padding: 0.06em 0.18em;
  color: var(--ink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ───────── 03 · WHY PEOPLE CHOOSE IT ───────── */
.shop-product-blocks .spb-why {
  padding: calc(12 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u));
}
.shop-product-blocks .spb-why-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: calc(40 * var(--u)) 0 calc(28 * var(--u));
}
.shop-product-blocks .spb-why-head-l {
  font-family: var(--f-bear);
  font-size: calc(22 * var(--u) * var(--font-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pa-accent, var(--olive));
}
.shop-product-blocks .spb-why-row {
  display: grid;
  grid-template-columns: calc(72 * var(--u)) 1fr;
  gap: calc(28 * var(--u));
  align-items: baseline;
  padding: calc(28 * var(--u)) 0;
  border-top: calc(2 * var(--u)) solid var(--ink-12);
}
.shop-product-blocks .spb-why-row.first { border-top: calc(2 * var(--u)) solid var(--ink); }
.shop-product-blocks .spb-why-n {
  font-family: var(--f-gothic);
  font-size: calc(68 * var(--u) * var(--font-scale));
  line-height: 0.85;
  color: var(--pa-accent, var(--ink));
}
.shop-product-blocks .spb-why-claim {
  font-family: var(--f-toni);
  font-size: calc(32 * var(--u) * var(--font-scale));
  line-height: 1.35;
  font-weight: 400;
  color: var(--pa-fg, var(--ink));
}

/* ───────── Shared section heading (blocks 4/6/7/recipe/faq) ───────── */
.shop-product-blocks .spb-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: calc(36 * var(--u));
}
.shop-product-blocks .spb-section-h3 {
  font-family: var(--f-bear);
  font-weight: 400;
  font-size: calc(52 * var(--u) * var(--font-scale));
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ───────── 04a · INGREDIENTS · CHIP CLOUD ───────── */
.shop-product-blocks .spb-ing {
  padding: calc(60 * var(--u)) calc(44 * var(--u)) calc(60 * var(--u));
}
.shop-product-blocks .spb-ing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--u));
  align-items: flex-start;
}
.shop-product-blocks .spb-chip {
  display: inline-flex;
  align-items: baseline;
  gap: calc(12 * var(--u));
  padding: calc(18 * var(--u)) calc(26 * var(--u)) calc(16 * var(--u));
  border: calc(2 * var(--u)) solid var(--ink);
  border-radius: calc(999 * var(--u));
  background: transparent;
  font-family: var(--f-toni);
  font-size: calc(26 * var(--u) * var(--font-scale));
  line-height: 1;
  color: var(--pa-fg, var(--ink));
}
.shop-product-blocks .spb-chip-lead {
  background: var(--pa-accent, var(--ink));
  color: var(--oat);
  font-family: var(--f-bear);
  font-size: calc(36 * var(--u) * var(--font-scale));
  padding: calc(22 * var(--u)) calc(32 * var(--u)) calc(20 * var(--u));
}
.shop-product-blocks .spb-chip-pct {
  font-family: var(--f-gothic);
  font-size: calc(28 * var(--u) * var(--font-scale));
  letter-spacing: 0.02em;
  color: var(--pa-accent, var(--berry));
}
.shop-product-blocks .spb-chip-lead .spb-chip-pct { color: var(--lime); }

/* ───────── 04b · INGREDIENTS · EDITORIAL LINE ───────── */
.shop-product-blocks .spb-ing-line {
  font-family: var(--f-bear);
  font-weight: 400;
  font-size: calc(44 * var(--u) * var(--font-scale));
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--pa-fg, var(--ink));
}
.shop-product-blocks .spb-ing-line-pct {
  font-family: var(--f-gothic);
  color: var(--pa-accent, var(--berry));
  font-size: 0.85em;
  margin-left: 0.05em;
}
.shop-product-blocks .spb-ing-line-sep {
  display: inline-block;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  background: var(--pa-accent, var(--lime));
  border-radius: 50%;
  margin: 0 0.35em 0.12em;
  vertical-align: middle;
}

/* ───────── 05 · ALLERGEN CARD ───────── */
.shop-product-blocks .spb-allergen {
  padding: calc(60 * var(--u)) calc(44 * var(--u)) calc(60 * var(--u));
}
.shop-product-blocks .spb-allergen-card {
  border: calc(2 * var(--u)) solid var(--ink);
  background: #FAF1E8;
  padding: calc(36 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));
}
.shop-product-blocks .spb-allergen-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: calc(24 * var(--u));
  margin-bottom: calc(24 * var(--u));
  border-bottom: calc(2 * var(--u)) solid var(--ink);
}
.shop-product-blocks .spb-allergen-ttl {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  font-family: var(--f-bear);
  font-size: calc(36 * var(--u) * var(--font-scale));
  line-height: 1;
  color: var(--pa-fg, var(--ink));
}
.shop-product-blocks .spb-allergen-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  background: var(--pa-accent, var(--berry));
  color: var(--oat);
  border-radius: calc(8 * var(--u));
  font-family: var(--f-toni);
  font-size: calc(26 * var(--u) * var(--font-scale));
  font-weight: 700;
  flex: none;
}
.shop-product-blocks .spb-allergen-row {
  display: flex;
  align-items: baseline;
  gap: calc(20 * var(--u));
  padding: calc(16 * var(--u)) 0;
}
.shop-product-blocks .spb-allergen-row + .spb-allergen-row {
  border-top: calc(2 * var(--u)) dashed var(--ink-30);
}
.shop-product-blocks .spb-allergen-lbl {
  font-family: var(--f-toni);
  font-size: calc(22 * var(--u) * var(--font-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  flex: 0 0 calc(176 * var(--u));
  line-height: 1.4;
}
.shop-product-blocks .spb-allergen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
  flex: 1;
}
.shop-product-blocks .spb-al-chip {
  display: inline-block;
  padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u));
  border-radius: calc(999 * var(--u));
  font-family: var(--f-toni);
  font-size: calc(25 * var(--u) * var(--font-scale));
  line-height: 1;
}
.shop-product-blocks .spb-al-chip-strong {
  background: var(--berry);
  color: var(--ink);
  font-weight: 700;
}
.shop-product-blocks .spb-al-chip-soft {
  background: var(--corn);
  color: var(--ink);
}
.shop-product-blocks .spb-allergen-empty {
  font-family: var(--f-aleo);
  font-style: italic;
  font-size: calc(26 * var(--u) * var(--font-scale));
  color: var(--ink-60);
}

/* ───────── 06 · HOW TO USE GRID ───────── */
.shop-product-blocks .spb-how {
  padding: calc(60 * var(--u)) calc(44 * var(--u)) calc(60 * var(--u));
}
.shop-product-blocks .spb-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(2 * var(--u));
  background: var(--ink-12);
  border: calc(2 * var(--u)) solid var(--ink-12);
}
.shop-product-blocks .spb-how-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.shop-product-blocks .spb-how-tile {
  background: var(--oat);
  padding: calc(36 * var(--u)) calc(12 * var(--u)) calc(32 * var(--u));
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  align-items: center;
  min-height: calc(152 * var(--u));
  justify-content: center;
}
.shop-product-blocks .spb-how-ic {
  font-size: calc(48 * var(--u) * var(--font-scale));
  line-height: 1;
}
.shop-product-blocks .spb-how-lbl {
  font-family: var(--f-toni);
  font-size: calc(24 * var(--u) * var(--font-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-fg, var(--ink));
}
.shop-product-blocks .spb-how-sub {
  font-family: var(--f-aleo);
  font-style: italic;
  font-size: calc(24 * var(--u) * var(--font-scale));
  color: var(--ink-60);
  margin-top: calc(-8 * var(--u));
}

/* ───────── 07 · STORAGE BOX ───────── */
.shop-product-blocks .spb-storage {
  padding: calc(60 * var(--u)) calc(44 * var(--u)) calc(60 * var(--u));
}
.shop-product-blocks .spb-storage-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--u));
}
.shop-product-blocks .spb-storage-card {
  border: calc(2 * var(--u)) solid var(--ink);
  padding: calc(36 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
  min-height: calc(280 * var(--u));
  min-width: 0;
  overflow: hidden;
}
.shop-product-blocks .spb-storage-card.alt {
  background: var(--ink);
  color: var(--oat);
}
.shop-product-blocks .spb-storage-ic {
  position: absolute;
  top: calc(24 * var(--u));
  right: calc(24 * var(--u));
  font-size: calc(36 * var(--u) * var(--font-scale));
  line-height: 1;
}
.shop-product-blocks .spb-storage-head {
  font-family: var(--f-toni);
  font-size: calc(22 * var(--u) * var(--font-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.shop-product-blocks .spb-storage-num {
  font-family: var(--f-gothic);
  font-size: calc(96 * var(--u) * var(--font-scale));
  line-height: 0.95;
  margin-top: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shop-product-blocks .spb-storage-num.long {
  font-family: var(--f-bear);
  font-size: calc(46 * var(--u) * var(--font-scale));
  line-height: 1.1;
}
.shop-product-blocks .spb-storage-unit {
  font-family: var(--f-toni);
  font-size: calc(24 * var(--u) * var(--font-scale));
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}
.shop-product-blocks .spb-storage-note {
  margin-top: calc(24 * var(--u));
  font-family: var(--f-aleo);
  font-style: italic;
  font-size: calc(24 * var(--u) * var(--font-scale));
  color: var(--ink-60);
  text-align: right;
}

/* ───────── 09 · NOTES CALLOUT ───────── */
.shop-product-blocks .spb-notes {
  padding: calc(48 * var(--u)) calc(44 * var(--u)) calc(56 * var(--u));
}
.shop-product-blocks .spb-notes-p {
  font-family: var(--f-aleo);
  font-style: italic;
  font-size: calc(25 * var(--u) * var(--font-scale));
  line-height: 1.55;
  color: var(--pa-fg, var(--ink-60));
  position: relative;
  padding-left: calc(28 * var(--u));
}
.shop-product-blocks .spb-notes-p::before {
  content: "✱";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pa-accent, var(--olive));
  font-style: normal;
}

/* ───────── +1 · BIG STAT CALLOUT ───────── */
.shop-product-blocks .spb-bigstat {
  background: var(--lime);
  color: var(--ink);
  text-align: center;
  padding: calc(76 * var(--u)) calc(44 * var(--u)) calc(80 * var(--u));
  position: relative;
  overflow: hidden;
}
.shop-product-blocks .spb-bigstat-num {
  font-family: var(--f-bear);
  font-weight: 400;
  font-size: calc(220 * var(--u) * var(--font-scale));
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.shop-product-blocks .spb-bigstat-what {
  font-family: var(--f-toni);
  font-size: calc(22 * var(--u) * var(--font-scale));
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-top: calc(20 * var(--u));
  color: var(--ink);
}
.shop-product-blocks .spb-bigstat-claim {
  font-family: var(--f-aleo);
  font-style: italic;
  font-size: calc(28 * var(--u) * var(--font-scale));
  margin-top: calc(12 * var(--u));
  color: var(--ink);
}
.shop-product-blocks .spb-bigstat::before,
.shop-product-blocks .spb-bigstat::after {
  content: "·";
  position: absolute;
  font-family: var(--f-bear);
  font-size: calc(120 * var(--u) * var(--font-scale));
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink);
}
.shop-product-blocks .spb-bigstat::before { left: calc(28 * var(--u)); }
.shop-product-blocks .spb-bigstat::after  { right: calc(28 * var(--u)); }

/* ───────── +3 · CALLOUT BANNER ───────── */
.shop-product-blocks .spb-cbanner {
  background: var(--forest);
  color: var(--oat);
  text-align: center;
  padding: calc(40 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u));
}
.shop-product-blocks .spb-cbanner-icon {
  font-size: calc(46 * var(--u) * var(--font-scale));
  line-height: 1;
  margin-bottom: calc(10 * var(--u));
}
.shop-product-blocks .spb-cbanner-text {
  font-family: var(--f-bear);
  font-weight: 400;
  font-size: calc(52 * var(--u) * var(--font-scale));
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--oat);
}
.shop-product-blocks .spb-cbanner-sub {
  font-family: var(--f-toni);
  font-size: calc(23 * var(--u) * var(--font-scale));
  letter-spacing: 0.06em;
  margin-top: calc(12 * var(--u));
  color: var(--oat);
  opacity: 0.82;
}

/* ───────── +2 · PULL QUOTE / ORIGIN NOTE ───────── */
.shop-product-blocks .spb-pullquote {
  padding: calc(48 * var(--u)) calc(44 * var(--u)) calc(52 * var(--u));
  background: var(--oat-deep);
}
.shop-product-blocks .spb-pullquote-p {
  font-family: var(--f-aleo);
  font-style: italic;
  font-size: calc(30 * var(--u) * var(--font-scale));
  line-height: 1.5;
  color: var(--pa-fg, var(--ink));
}
.shop-product-blocks .spb-pullquote-who {
  margin-top: calc(20 * var(--u));
  font-family: var(--f-toni);
  font-size: calc(20 * var(--u) * var(--font-scale));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* ───────── +3 · IMAGE / LIFESTYLE BAND ───────── */
.shop-product-blocks .spb-image { padding: 0; }
.shop-product-blocks .spb-image-img {
  display: block;
  width: 100%;
}
.shop-product-blocks .spb-image-img.spb-image-fill { object-fit: cover; }
.shop-product-blocks .spb-image-wide   .spb-image-img { height: calc(422 * var(--u)); }
.shop-product-blocks .spb-image-square .spb-image-img { height: calc(750 * var(--u)); }
.shop-product-blocks .spb-image-tall   .spb-image-img { height: calc(938 * var(--u)); }
.shop-product-blocks .spb-image-natural .spb-image-img { height: auto; }
.shop-product-blocks .spb-image-cap {
  padding: calc(16 * var(--u)) calc(44 * var(--u)) calc(28 * var(--u));
  font-family: var(--f-aleo);
  font-style: italic;
  font-size: calc(24 * var(--u) * var(--font-scale));
  line-height: 1.5;
  color: var(--ink-60);
}

/* ───────── +4 · RECIPE STEPS ───────── */
.shop-product-blocks .spb-recipe {
  padding: calc(60 * var(--u)) calc(44 * var(--u)) calc(60 * var(--u));
}
.shop-product-blocks .spb-recipe-step {
  display: grid;
  grid-template-columns: calc(72 * var(--u)) 1fr;
  gap: calc(28 * var(--u));
  padding: calc(28 * var(--u)) 0;
  border-top: calc(2 * var(--u)) solid var(--ink-12);
}
.shop-product-blocks .spb-recipe-step:first-of-type { border-top: calc(2 * var(--u)) solid var(--ink); }
.shop-product-blocks .spb-recipe-n {
  font-family: var(--f-gothic);
  font-size: calc(56 * var(--u) * var(--font-scale));
  line-height: 0.9;
  color: var(--pa-accent, var(--olive));
}
.shop-product-blocks .spb-recipe-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--u));
}
.shop-product-blocks .spb-recipe-text {
  font-family: var(--f-aleo);
  font-size: calc(28 * var(--u) * var(--font-scale));
  line-height: 1.5;
  color: var(--pa-fg, var(--ink));
}
.shop-product-blocks .spb-recipe-time {
  font-family: var(--f-toni);
  font-size: calc(22 * var(--u) * var(--font-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  background: #E9ECC9;
  padding: calc(6 * var(--u)) calc(18 * var(--u));
  border-radius: calc(999 * var(--u));
  line-height: 1;
}

/* ───────── +6 · FAQ ACCORDION (native <details>) ───────── */
.shop-product-blocks .spb-faq {
  padding: calc(60 * var(--u)) calc(44 * var(--u)) calc(60 * var(--u));
}
.shop-product-blocks .spb-faq-item {
  border-top: calc(2 * var(--u)) solid var(--ink-12);
}
.shop-product-blocks .spb-faq-item:first-of-type { border-top: calc(2 * var(--u)) solid var(--ink); }
.shop-product-blocks .spb-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(24 * var(--u));
  padding: calc(30 * var(--u)) 0;
  cursor: pointer;
  list-style: none;
}
.shop-product-blocks .spb-faq-q::-webkit-details-marker { display: none; }
.shop-product-blocks .spb-faq-q-txt {
  font-family: var(--f-toni);
  font-size: calc(27 * var(--u) * var(--font-scale));
  line-height: 1.35;
  color: var(--pa-fg, var(--ink));
  flex: 1;
}
.shop-product-blocks .spb-faq-mark {
  font-family: var(--f-bear);
  font-size: calc(44 * var(--u) * var(--font-scale));
  line-height: 1;
  color: var(--pa-accent, var(--olive));
  flex: none;
}
.shop-product-blocks .spb-faq-mark::before { content: "+"; }
.shop-product-blocks .spb-faq-item[open] .spb-faq-mark::before { content: "–"; }
.shop-product-blocks .spb-faq-a {
  padding: 0 0 calc(30 * var(--u));
  font-family: var(--f-aleo);
  font-size: calc(27 * var(--u) * var(--font-scale));
  line-height: 1.55;
  color: var(--pa-fg, var(--ink-60));
}

/* ───────── +7 · NUTRITION FACTS ───────── */
.shop-product-blocks .spb-nutrition { padding: calc(24 * var(--u)) calc(44 * var(--u)) calc(40 * var(--u)); }
.shop-product-blocks .spb-nut-card {
  border: calc(2 * var(--u)) solid var(--ink);
  padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(18 * var(--u));
}
.shop-product-blocks .spb-nut-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: calc(18 * var(--u));
  margin-bottom: calc(8 * var(--u));
  border-bottom: calc(4 * var(--u)) solid var(--ink);
}
.shop-product-blocks .spb-nut-ttl {
  font-family: var(--f-bear);
  font-size: calc(40 * var(--u) * var(--font-scale));
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}
.shop-product-blocks .spb-nut-basis {
  font-family: var(--f-aleo);
  font-style: italic;
  font-size: calc(22 * var(--u) * var(--font-scale));
  color: var(--ink-60);
  text-align: right;
  line-height: 1.3;
}
.shop-product-blocks .spb-nrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: calc(16 * var(--u)) 0;
  border-bottom: calc(2 * var(--u)) solid var(--ink-12);
}
.shop-product-blocks .spb-nrow:last-child { border-bottom: 0; }
.shop-product-blocks .spb-nrow-l {
  font-family: var(--f-toni);
  font-size: calc(27 * var(--u) * var(--font-scale));
  letter-spacing: 0.01em;
  color: var(--ink);
}
.shop-product-blocks .spb-nrow-r {
  font-family: var(--f-gothic);
  font-size: calc(40 * var(--u) * var(--font-scale));
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.shop-product-blocks .spb-nrow.bold .spb-nrow-l { font-weight: 700; }
.shop-product-blocks .spb-nrow.child {
  padding: calc(10 * var(--u)) 0 calc(10 * var(--u)) calc(44 * var(--u));
  border-bottom: calc(2 * var(--u)) dashed var(--ink-12);
}
.shop-product-blocks .spb-nrow.child .spb-nrow-l {
  font-family: var(--f-aleo);
  font-style: italic;
  font-size: calc(25 * var(--u) * var(--font-scale));
  color: var(--ink-60);
  position: relative;
}
.shop-product-blocks .spb-nrow.child .spb-nrow-l::before {
  content: "—";
  margin-right: calc(12 * var(--u));
  color: var(--ink-30);
  font-style: normal;
}
.shop-product-blocks .spb-nrow.child .spb-nrow-r { font-size: calc(32 * var(--u) * var(--font-scale)); }