/* ShopBlocks — responsive web port of the mini-app block-renderer.wxss.
 *
 * Everything is scoped under .shop-blocks; every own class is sb-prefixed.
 * rpx -> responsive unit: 1rpx == 1*var(--u). On phones --u = 100vw/750 so the
 * column is screen-width-faithful to the 750rpx mini-app. On desktop the column
 * caps to a centered 560px (app-faithful), while grid-like blocks break out to
 * a wider centered band with more columns to use the PC screen.
 *
 * Brand color vars (--forest --lime --berry --oat --ink …) and @font-face
 * (--f-toni --f-bear --f-aleo --f-gothic --f-yuan --f-sans) come from the host
 * page (shop.html). --font-scale defaults to 1 here if the host doesn't set it.
 */

.shop-blocks {
  --u: calc(100vw / 750);
  --font-scale: 1;
  /* brand color fallbacks (host may already define these) */
  --forest: #365329; --lime: #CCD900; --berry: #E96174; --oat: #F2E7DF;
  --ink: #1a1a17; --olive: #6A6E2D; --corn: #F2CA6C; --pink: #F4B8CB;
  --sky: #B2CFED; --lotus: #EEB8E4; --citrus: #E7E74C; --pea: #7BBD3B;
  --carrot: #FF6B0C; --papaya: #FFAF60; --almond: #C37F4E;
  box-sizing: border-box;
  width: 100%;
}
.shop-blocks *,
.shop-blocks *::before,
.shop-blocks *::after { box-sizing: border-box; }
.shop-blocks img { max-width: 100%; }

/* ── Block-outer chrome ──────────────────────────────────────────────────── */
.shop-blocks .sb-blk-outer { position: relative; }
.shop-blocks .sb-blk-outer.framed {
  margin: calc(16 * var(--u)) calc(24 * var(--u));
  border: calc(3 * var(--u)) solid;
  border-radius: calc(28 * var(--u));
  padding: calc(18 * var(--u)) 0;
  overflow: hidden;
}
.shop-blocks .sb-blk-outer.framed.sb-corner-sharp { border-radius: 0; }
.shop-blocks .sb-blk-outer.framed.sb-corner-bold { border-radius: calc(40 * var(--u)); }
.shop-blocks .sb-blk-outer.framed.fill { padding: 0; }

/* CTA targets: pointer + remove default link chrome */
.shop-blocks [data-cta-target] { cursor: pointer; }
.shop-blocks [data-cta-target]:focus-visible { outline: calc(3 * var(--u)) solid var(--forest); outline-offset: calc(2 * var(--u)); }

/* shared image fill */
.shop-blocks .sb-img-full { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Hero banner ─────────────────────────────────────────────────────────── */
.shop-blocks .sb-hero {
  position: relative; width: 100%;
  background: linear-gradient(135deg, #c4c4c4, #a8a8a8);
  overflow: hidden;
}
.shop-blocks .sb-hero-img,
.shop-blocks .sb-hero-video { width: 100%; height: 100%; display: block; object-fit: cover; }
.shop-blocks .sb-hero-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: calc(400 * var(--u));
  color: rgba(0,0,0,0.3); font-size: calc(24 * var(--u) * var(--font-scale));
}
.shop-blocks .sb-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0) 55%);
}
.shop-blocks .sb-scrim-light .sb-hero-scrim { background: linear-gradient(to top, rgba(0,0,0,.3), rgba(0,0,0,0) 50%); }
.shop-blocks .sb-scrim-strong .sb-hero-scrim { background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 70%); }
.shop-blocks .sb-cta-stack {
  position: absolute; bottom: calc(56 * var(--u)); left: calc(44 * var(--u)); right: calc(44 * var(--u));
  display: flex; flex-direction: column; gap: calc(16 * var(--u)); z-index: 2;
}
.shop-blocks .sb-cta-btn {
  padding: calc(28 * var(--u)) 0; text-align: center;
  font-family: var(--f-toni); font-size: calc(24 * var(--u) * var(--font-scale));
  font-weight: 600; letter-spacing: 0.16em; border-radius: calc(999 * var(--u));
  text-transform: uppercase; border: 0; cursor: pointer; width: 100%;
}
.shop-blocks .sb-cta-primary { background: var(--ink); color: var(--oat); }
.shop-blocks .sb-cta-secondary { background: rgba(255,255,255,0.92); color: var(--ink); border: calc(3 * var(--u)) solid var(--ink); }
.shop-blocks .sb-cta-link { background: transparent; color: var(--ink); text-decoration: underline; padding: calc(12 * var(--u)) 0; border-radius: 0; }

.shop-blocks .sb-hero-split { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(480 * var(--u)); position: relative; }
.shop-blocks .sb-split-img { position: relative; overflow: hidden; background: #ddd; }
.shop-blocks .sb-split-img .sb-hero-img, .shop-blocks .sb-split-img .sb-hero-video { width: 100%; height: 100%; }
.shop-blocks .sb-split-panel { padding: calc(36 * var(--u)) calc(32 * var(--u)); display: flex; flex-direction: column; justify-content: center; gap: calc(12 * var(--u)); }
.shop-blocks .sb-split-panel .sb-headline { font-family: var(--f-bear); font-weight: 500; font-size: calc(42 * var(--u) * var(--font-scale)); line-height: 1.1; }
.shop-blocks .sb-split-panel .sb-subtitle { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); opacity: 0.8; line-height: 1.4; }
.shop-blocks .sb-split-panel .sb-cta-stack { position: static; padding: 0; left: auto; right: auto; bottom: auto; margin-top: calc(16 * var(--u)); }
.shop-blocks .sb-split-panel .sb-cta-btn { padding: calc(20 * var(--u)) calc(28 * var(--u)); font-weight: 700; font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.14em; }

/* ── Greeting ────────────────────────────────────────────────────────────── */
.shop-blocks .sb-greet { margin: 0 calc(44 * var(--u)); padding: calc(32 * var(--u)) calc(36 * var(--u)) calc(28 * var(--u)); position: relative; }
.shop-blocks .sb-gr-kicker { font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); }
.shop-blocks .sb-gr-headline { font-family: var(--f-bear); font-size: calc(64 * var(--u) * var(--font-scale)); line-height: 1.0; padding-top: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
.shop-blocks .sb-gr-headline-sm { font-size: calc(38 * var(--u) * var(--font-scale)); line-height: 1.05; }
.shop-blocks .sb-gr-headline-lg { font-size: calc(88 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-gr-points { margin-top: calc(14 * var(--u)); font-family: var(--f-gothic); font-size: calc(28 * var(--u) * var(--font-scale)); letter-spacing: 0.06em; }
.shop-blocks .sb-gr-cta { margin-top: calc(14 * var(--u)); font-family: var(--f-toni); font-size: calc(22 * var(--u) * var(--font-scale)); letter-spacing: 0.16em; text-decoration: underline; text-transform: uppercase; }
.shop-blocks .sb-greet-inline { padding: calc(22 * var(--u)) calc(28 * var(--u)); }
.shop-blocks .sb-gr-inline-row { display: flex; align-items: center; gap: calc(18 * var(--u)); }
.shop-blocks .sb-gr-inline-copy { flex: 1; min-width: 0; }
.shop-blocks .sb-gr-pts-pill { flex-shrink: 0; padding: calc(10 * var(--u)) calc(18 * var(--u)); border: calc(2 * var(--u)) solid currentColor; border-radius: calc(999 * var(--u)); font-family: var(--f-gothic); font-size: calc(22 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-greet-split, .shop-blocks .sb-greet-banner { margin: 0; }
.shop-blocks .sb-gr-split-row { display: flex; align-items: stretch; gap: calc(20 * var(--u)); }
.shop-blocks .sb-gr-split-left { flex: 1; min-width: 0; }
.shop-blocks .sb-gr-split-wallet { flex-shrink: 0; min-width: calc(160 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)); border: calc(3 * var(--u)) solid currentColor; border-radius: calc(14 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.shop-blocks .sb-gr-wallet-num { font-family: var(--f-bear); font-size: calc(56 * var(--u) * var(--font-scale)); line-height: 1; }
.shop-blocks .sb-gr-wallet-lbl { margin-top: calc(8 * var(--u)); font-family: var(--f-gothic); font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.06em; opacity: 0.85; text-align: center; }

/* greeting design directions (classic / wallet / coin) */
.shop-blocks .sb-greet-classic, .shop-blocks .sb-greet-wallet, .shop-blocks .sb-greet-coin {
  margin: 0; padding: calc(56 * var(--u)) calc(44 * var(--u)); border: 0; position: relative; overflow: hidden;
}
.shop-blocks .sb-greet-classic .sb-grd-kicker, .shop-blocks .sb-greet-wallet .sb-grd-kicker, .shop-blocks .sb-greet-coin .sb-grd-kicker {
  font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gr-kicker);
}
.shop-blocks .sb-grd-top { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.shop-blocks .sb-grd-icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); background-color: var(--gr-kicker); flex: none; }
.shop-blocks .sb-grd-top-accent .sb-grd-icon { background-color: var(--gr-accent); }
/* Time-of-day glyph beside the kicker. Monochrome SVG painted via mask so it
   inherits the kicker colour (accent on the coin view). Mirrors the mini-app. */
.shop-blocks .sb-grd-icon-sun {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.4M12 19.1v2.4M4.2 4.2l1.7 1.7M18.1 18.1l1.7 1.7M2.5 12h2.4M19.1 12h2.4M4.2 19.8l1.7-1.7M18.1 5.9l1.7-1.7'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.4M12 19.1v2.4M4.2 4.2l1.7 1.7M18.1 18.1l1.7 1.7M2.5 12h2.4M19.1 12h2.4M4.2 19.8l1.7-1.7M18.1 5.9l1.7-1.7'/%3E%3C/svg%3E") no-repeat center / contain;
}
.shop-blocks .sb-grd-icon-moon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a7 7 0 1 0 10.5 10.5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a7 7 0 1 0 10.5 10.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.shop-blocks .sb-grd-row { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(32 * var(--u)); }
.shop-blocks .sb-grd-col { flex: 1; min-width: 0; }
.shop-blocks .sb-grd-head { font-family: var(--f-bear); font-size: calc(64 * var(--gr-head, 1) * var(--u) * var(--font-scale)); line-height: 1; color: var(--gr-ink); margin-top: calc(20 * var(--u)); }
.shop-blocks .sb-grd-name-br { display: block; }
.shop-blocks .sb-greet-classic .sb-grd-head { font-size: calc(56 * var(--gr-head, 1) * var(--u) * var(--font-scale)); line-height: 1.04; }
.shop-blocks .sb-grd-link { display: inline-flex; align-items: center; margin-top: calc(32 * var(--u)); padding-bottom: calc(6 * var(--u)); border-bottom: var(--gr-border) solid var(--gr-ink); }
.shop-blocks .sb-grd-link-lbl, .shop-blocks .sb-grd-link-ar { font-family: var(--f-gothic); font-size: calc(32 * var(--u) * var(--font-scale)); letter-spacing: 0.08em; color: var(--gr-ink); }
.shop-blocks .sb-grd-pts-card { flex: none; text-align: right; }
.shop-blocks .sb-grd-pts-num { font-family: var(--f-bear); font-size: calc(88 * var(--gr-head, 1) * var(--u) * var(--font-scale)); line-height: 1; color: var(--gr-accent); }
.shop-blocks .sb-grd-pts-unit { font-family: var(--f-gothic); font-size: calc(26 * var(--u) * var(--font-scale)); letter-spacing: 0.06em; color: var(--gr-accent); margin-top: calc(12 * var(--u)); }
.shop-blocks .sb-grd-bar { display: flex; align-items: stretch; border: var(--gr-border) solid var(--gr-accent); border-radius: var(--gr-radius); margin-top: calc(36 * var(--u)); overflow: hidden; }
.shop-blocks .sb-grd-seg { flex: 1; padding: calc(24 * var(--u)) calc(32 * var(--u)); }
.shop-blocks .sb-grd-seg-lbl { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gr-kicker); }
.shop-blocks .sb-grd-seg-val, .shop-blocks .sb-grd-seg-num { font-family: var(--f-bear); font-size: calc(48 * var(--gr-head, 1) * var(--u) * var(--font-scale)); line-height: 1; color: var(--gr-accent); margin-top: calc(8 * var(--u)); }
.shop-blocks .sb-grd-seg-pts { display: flex; align-items: baseline; gap: calc(12 * var(--u)); margin-top: calc(8 * var(--u)); }
.shop-blocks .sb-grd-seg-unit { font-family: var(--f-gothic); font-size: calc(24 * var(--u) * var(--font-scale)); letter-spacing: 0.05em; color: var(--gr-kicker); margin-top: 0; }
.shop-blocks .sb-grd-bar-div { width: calc(4 * var(--u)); background: var(--gr-accent); opacity: 0.5; margin: calc(20 * var(--u)) 0; }
.shop-blocks .sb-grd-bar-arrow { background: var(--gr-accent); color: var(--gr-ink); display: flex; align-items: center; padding: 0 calc(32 * var(--u)); font-family: var(--f-gothic); font-size: calc(40 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-grd-halftone { position: absolute; top: 0; right: 0; width: calc(300 * var(--u)); height: calc(300 * var(--u)); opacity: var(--gr-halftone); pointer-events: none; background-image: radial-gradient(var(--gr-ink) calc(3 * var(--u)), transparent calc(3.4 * var(--u))); background-size: calc(20 * var(--u)) calc(20 * var(--u)); }
.shop-blocks .sb-grd-pill { display: inline-flex; margin-top: calc(28 * var(--u)); padding: calc(14 * var(--u)) calc(26 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--gr-accent); color: var(--gr-ink); font-family: var(--f-gothic); font-size: calc(26 * var(--u) * var(--font-scale)); letter-spacing: 0.06em; }
.shop-blocks .sb-grd-coin-wrap { flex: none; text-align: center; }
.shop-blocks .sb-grd-coin { width: calc(150 * var(--u)); height: calc(150 * var(--u)); border-radius: 50%; background: var(--gr-accent); border: var(--gr-border) solid var(--gr-ink); display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); }
.shop-blocks .sb-grd-coin-num { font-family: var(--f-bear); font-size: calc(56 * var(--gr-head, 1) * var(--u) * var(--font-scale)); color: var(--gr-ink); line-height: 1; }
.shop-blocks .sb-grd-coin-star { font-size: calc(26 * var(--u)); color: var(--gr-ink); }
.shop-blocks .sb-grd-coin-unit { margin-top: calc(12 * var(--u)); font-family: var(--f-gothic); font-size: calc(22 * var(--u) * var(--font-scale)); color: var(--gr-ink); opacity: 0.85; }

/* ── Notification bar ────────────────────────────────────────────────────── */
.shop-blocks .sb-nbar-row { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(18 * var(--u)) calc(36 * var(--u)); }
.shop-blocks .sb-nbar-icon { font-size: calc(28 * var(--u) * var(--font-scale)); line-height: 1; flex-shrink: 0; }
.shop-blocks .sb-nbar-text { flex: 1; min-width: 0; font-family: var(--f-toni); font-size: calc(22 * var(--u) * var(--font-scale)); letter-spacing: 0.04em; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shop-blocks .sb-nbar-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(999 * var(--u)); font-family: var(--f-bear); font-size: calc(24 * var(--u) * var(--font-scale)); line-height: 1; background: transparent; }
.shop-blocks .sb-nbar-card { padding: 0 calc(22 * var(--u)); }
.shop-blocks .sb-nbar-card .sb-nbar-row { border-radius: calc(24 * var(--u)); padding: calc(22 * var(--u)) calc(32 * var(--u)); }
.shop-blocks .sb-nbar-pill { padding: 0 calc(22 * var(--u)); display: flex; justify-content: center; }
.shop-blocks .sb-nbar-pill .sb-nbar-row { border-radius: calc(999 * var(--u)); padding: calc(14 * var(--u)) calc(28 * var(--u)); display: inline-flex; max-width: 100%; }
.shop-blocks .sb-nbar-pill .sb-nbar-text { flex: 0 1 auto; }
.shop-blocks .sb-nbar-banner .sb-nbar-row { padding: calc(30 * var(--u)) calc(40 * var(--u)); gap: calc(18 * var(--u)); }
.shop-blocks .sb-nbar-banner .sb-nbar-icon { font-size: calc(40 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-nbar-banner .sb-nbar-text { font-size: calc(26 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-nbar-banner .sb-nbar-btn { width: calc(52 * var(--u)); height: calc(52 * var(--u)); font-size: calc(30 * var(--u) * var(--font-scale)); }

/* ── Spacer ──────────────────────────────────────────────────────────────── */
.shop-blocks .sb-spacer { display: flex; align-items: center; justify-content: center; }
.shop-blocks .sb-spacer-divider { width: 50%; }
.shop-blocks .sb-divider-line .sb-spacer-divider { height: calc(2 * var(--u)); }
.shop-blocks .sb-divider-dashes .sb-spacer-divider { height: 0; border-top-width: calc(3 * var(--u)); border-top-style: dashed; }
.shop-blocks .sb-divider-dots .sb-spacer-divider { height: 0; border-top-width: calc(4 * var(--u)); border-top-style: dotted; }

/* ── Order tracker ───────────────────────────────────────────────────────── */
.shop-blocks .sb-ot-wrap { padding: 0 calc(44 * var(--u)); }
.shop-blocks .sb-ot-card { background: var(--ot-card-bg, #fff); border: var(--ot-card-border, calc(3 * var(--u)) solid var(--ink)); border-radius: calc(12 * var(--u)); padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u)); }
.shop-blocks .sb-ot-head { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); }
.shop-blocks .sb-ot-title { font-family: var(--f-bear); font-size: calc(30 * var(--u) * var(--font-scale)); font-weight: 600; }
.shop-blocks .sb-ot-status { flex: 0 0 auto; font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ot-cta-text, var(--oat)); background: var(--ot-accent, var(--forest)); padding: calc(8 * var(--u)) calc(22 * var(--u)); border-radius: calc(999 * var(--u)); white-space: nowrap; }
.shop-blocks .sb-ot-status.unpaid { background: #E96174; color: #fff; }
.shop-blocks .sb-ot-body { display: flex; align-items: center; gap: calc(20 * var(--u)); margin-top: calc(22 * var(--u)); }
.shop-blocks .sb-ot-thumbs { display: flex; flex: none; }
.shop-blocks .sb-ot-th { width: calc(88 * var(--u)); height: calc(88 * var(--u)); border-radius: calc(18 * var(--u)); background: #e3ddcf; border: calc(4 * var(--u)) solid var(--ot-card-bg, #fff); margin-left: calc(-24 * var(--u)); box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,0.15); overflow: hidden; position: relative; }
.shop-blocks .sb-ot-th:first-child { margin-left: 0; }
.shop-blocks .sb-ot-th-img { width: 100%; height: 100%; }
.shop-blocks .sb-ot-info { flex: 1; min-width: 0; }
.shop-blocks .sb-ot-no, .shop-blocks .sb-ot-count { font-family: var(--f-gothic); font-size: calc(26 * var(--u) * var(--font-scale)); font-weight: 600; }
.shop-blocks .sb-ot-sub, .shop-blocks .sb-ot-eta { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); color: rgba(0,0,0,0.55); margin-top: calc(4 * var(--u)); }
.shop-blocks .sb-ot-cta { flex: 0 0 auto; color: var(--ot-cta-text, #fff); background: var(--ot-accent, var(--forest)); font-family: var(--f-gothic); font-size: calc(24 * var(--u) * var(--font-scale)); font-weight: 700; padding: calc(14 * var(--u)) calc(28 * var(--u)); border-radius: calc(999 * var(--u)); white-space: nowrap; }
.shop-blocks .sb-ot-track { display: flex; justify-content: space-between; margin-top: calc(26 * var(--u)); padding-top: calc(26 * var(--u)); border-top: calc(2 * var(--u)) solid rgba(0,0,0,0.08); }
.shop-blocks .sb-ot-node { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--u)); }
.shop-blocks .sb-ot-bar { position: absolute; top: calc(43 * var(--u)); left: -50%; width: 100%; height: calc(6 * var(--u)); background: var(--ot-rail, #D3D1C7); border-radius: calc(999 * var(--u)); z-index: 0; }
.shop-blocks .sb-ot-bar.on { background: var(--ot-accent, var(--forest)); }
.shop-blocks .sb-ot-circle { position: relative; z-index: 1; width: calc(92 * var(--u)); height: calc(92 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--ot-rail, #D3D1C7); border: calc(2 * var(--u)) solid #9A988E; display: flex; align-items: center; justify-content: center; }
.shop-blocks .sb-ot-node.filled .sb-ot-circle { border-color: var(--ink); }
.shop-blocks .sb-ot-dot { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: rgba(0,0,0,0.32); }
.shop-blocks .sb-ot-node.filled .sb-ot-dot { background: var(--ink); }
.shop-blocks .sb-ot-node-label { font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #9A988E; }
.shop-blocks .sb-ot-node.filled .sb-ot-node-label { color: var(--ink); }
/* truck */
.shop-blocks .sb-ot-truck .sb-ot-tk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(24 * var(--u)); }
.shop-blocks .sb-ot-kicker { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ot-accent, var(--forest)); }
.shop-blocks .sb-ot-bighead { font-family: var(--f-bear); font-size: calc(38 * var(--ot-h, 1) * var(--u) * var(--font-scale)); font-weight: 600; line-height: 1; margin-top: calc(6 * var(--u)); }
.shop-blocks .sb-ot-tk-sub { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); color: rgba(0,0,0,0.55); margin-top: calc(8 * var(--u)); }
.shop-blocks .sb-ot-tk-sub .sb-b { font-weight: 700; }
.shop-blocks .sb-ot-rail { position: relative; height: calc(64 * var(--u)); margin-top: calc(20 * var(--u)); }
.shop-blocks .sb-ot-rail-base { position: absolute; top: 50%; left: 0; right: 0; height: calc(10 * var(--u)); transform: translateY(-50%); background: var(--ot-rail, #D3D1C7); border-radius: calc(999 * var(--u)); }
.shop-blocks .sb-ot-rail-fill { position: absolute; top: 50%; left: 0; height: calc(10 * var(--u)); transform: translateY(-50%); background: var(--ot-bright, var(--lime)); border-radius: calc(999 * var(--u)); }
.shop-blocks .sb-ot-rail-dot { position: absolute; top: 50%; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; transform: translate(-50%, -50%); }
.shop-blocks .sb-ot-truck-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; background: var(--ot-marker, var(--pink)); display: flex; align-items: center; justify-content: center; }
.shop-blocks .sb-ot-mk-ic { font-size: calc(34 * var(--u)); line-height: 1; }
.shop-blocks .sb-ot-tk-labels { display: flex; justify-content: space-between; margin-top: calc(20 * var(--u)); }
.shop-blocks .sb-ot-tl { flex: 1; }
.shop-blocks .sb-ot-tl-en { font-family: var(--f-gothic); font-size: calc(22 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.05em; color: #9A988E; }
.shop-blocks .sb-ot-tl.on .sb-ot-tl-en { color: var(--ink); }
.shop-blocks .sb-ot-tl.current .sb-ot-tl-en { color: var(--ot-accent, var(--forest)); }
.shop-blocks .sb-ot-tk-cta { margin-top: calc(32 * var(--u)); text-align: center; border-radius: calc(24 * var(--u)); padding: calc(24 * var(--u)) 0; font-family: var(--f-gothic); font-size: calc(28 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.06em; color: var(--ot-cta-text, #fff); background: var(--ot-accent, var(--forest)); }
/* banner */
.shop-blocks .sb-ot-banner { border-radius: var(--ot-radius, calc(32 * var(--u))); overflow: hidden; border: var(--ot-bw, calc(4 * var(--u))) solid var(--ink); }
.shop-blocks .sb-ot-bn-head { display: flex; align-items: center; gap: calc(22 * var(--u)); padding: calc(26 * var(--u)) calc(30 * var(--u)); background: var(--ot-accent, var(--forest)); color: var(--ot-cta-text, #fff); }
.shop-blocks .sb-ot-bn-marker { width: calc(84 * var(--u)); height: calc(84 * var(--u)); border-radius: calc(999 * var(--u)); flex: none; background: var(--ot-marker, var(--pink)); display: flex; align-items: center; justify-content: center; }
.shop-blocks .sb-ot-bn-headtext { flex: 1; min-width: 0; }
.shop-blocks .sb-ot-bn-kicker { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ot-bright, var(--lime)); }
.shop-blocks .sb-ot-bn-eta { font-family: var(--f-bear); font-size: calc(38 * var(--ot-h, 1) * var(--u) * var(--font-scale)); font-weight: 600; line-height: 1; margin-top: calc(6 * var(--u)); }
.shop-blocks .sb-ot-bn-body { background: var(--ot-card-bg, #FFFCF7); padding: calc(26 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)); }
.shop-blocks .sb-ot-bn-row { display: flex; align-items: center; gap: calc(22 * var(--u)); }
.shop-blocks .sb-ot-segs { display: flex; gap: calc(10 * var(--u)); margin-top: calc(30 * var(--u)); }
.shop-blocks .sb-ot-seg { flex: 1; text-align: center; }
.shop-blocks .sb-ot-seg-bar { height: calc(14 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--ot-rail, #D3D1C7); }
.shop-blocks .sb-ot-seg.done .sb-ot-seg-bar { background: var(--ot-bright, var(--lime)); }
.shop-blocks .sb-ot-seg.current .sb-ot-seg-bar { background: var(--ot-marker, var(--pink)); border: calc(3 * var(--u)) solid var(--ink); }
.shop-blocks .sb-ot-seg-lbl { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.shop-blocks .sb-ot-seg-lbl span { font-family: var(--f-gothic); font-size: calc(20 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.03em; color: #9A988E; }
.shop-blocks .sb-ot-seg.on .sb-ot-seg-lbl span { color: var(--ink); }
.shop-blocks .sb-ot-bn-cta { margin-top: calc(30 * var(--u)); text-align: center; border-radius: calc(24 * var(--u)); padding: calc(22 * var(--u)) 0; font-family: var(--f-gothic); font-size: calc(28 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.06em; color: var(--ink); background: var(--ot-bright, var(--lime)); border: calc(3 * var(--u)) solid var(--ink); box-shadow: 0 calc(6 * var(--u)) 0 var(--ink); }

/* ── Category tabs ───────────────────────────────────────────────────────── */
.shop-blocks .sb-cattabs {
  padding: 0 calc(44 * var(--u));
  --cat-text: #1a1a17; --cat-accent: #6A6E2D; --cat-keyline: #1a1a17; --cat-shadow: #1a1a17; --cat-surface: #F2E7DF; --cat-radius: calc(4 * var(--u));
}
.shop-blocks .sb-cattabs.sb-corner-sharp { --cat-radius: 0; }
.shop-blocks .sb-cattabs.sb-corner-subtle { --cat-radius: calc(12 * var(--u)); }
.shop-blocks .sb-cattabs.sb-corner-bold { --cat-radius: calc(28 * var(--u)); }
.shop-blocks .sb-cat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(24 * var(--u)); }
.shop-blocks .sb-cattabs .sb-kicker { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.14em; color: var(--cat-accent); }
.shop-blocks .sb-cattabs .sb-ttl { font-family: var(--f-bear); font-size: calc(44 * var(--u) * var(--font-scale)); font-weight: 500; line-height: 1.05; margin-top: calc(8 * var(--u)); color: var(--cat-text); }
.shop-blocks .sb-cattabs .sb-more { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.1em; color: var(--cat-accent); text-decoration: underline; }
.shop-blocks .sb-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
.shop-blocks .sb-tile { height: calc(192 * var(--u)); padding: calc(24 * var(--u)); position: relative; overflow: hidden; border-radius: var(--cat-radius); }
.shop-blocks .sb-tile .sb-num { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.1em; opacity: 0.85; }
.shop-blocks .sb-tile .sb-name { font-family: var(--f-bear); font-size: calc(34 * var(--u) * var(--font-scale)); font-weight: 500; line-height: 1; position: absolute; bottom: calc(24 * var(--u)); left: calc(24 * var(--u)); right: calc(24 * var(--u)); }
/* index */
.shop-blocks .sb-idx-list { display: flex; flex-direction: column; }
.shop-blocks .sb-idx-row { display: flex; align-items: center; gap: calc(24 * var(--u)); padding: calc(24 * var(--u)) calc(4 * var(--u)); border-bottom: calc(2 * var(--u)) solid rgba(0,0,0,0.08); }
.shop-blocks .sb-idx-row:last-child { border-bottom: 0; }
.shop-blocks .sb-idx-num { font-family: var(--f-gothic); font-size: calc(26 * var(--u) * var(--font-scale)); color: var(--cat-accent); width: calc(40 * var(--u)); flex: 0 0 auto; }
.shop-blocks .sb-idx-dot { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: var(--cat-radius); flex: 0 0 auto; }
.shop-blocks .sb-idx-name { flex: 1 1 auto; min-width: 0; }
.shop-blocks .sb-idx-name .sb-en { font-family: var(--f-bear); font-size: calc(32 * var(--u) * var(--font-scale)); font-weight: 500; line-height: 1.05; color: var(--cat-text); }
.shop-blocks .sb-idx-count { font-family: var(--f-gothic); font-size: calc(22 * var(--u) * var(--font-scale)); min-width: calc(52 * var(--u)); text-align: center; padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: calc(999 * var(--u)); flex: 0 0 auto; }
.shop-blocks .sb-idx-chev { color: var(--cat-accent); font-size: calc(36 * var(--u) * var(--font-scale)); opacity: 0.6; flex: 0 0 auto; }
/* bento */
.shop-blocks .sb-bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
.shop-blocks .sb-bento-tile { position: relative; min-height: calc(220 * var(--u)); padding: calc(20 * var(--u)); overflow: hidden; border-radius: var(--cat-radius); display: flex; flex-direction: column; justify-content: flex-end; }
.shop-blocks .sb-bento-tile.sb-hero { grid-column: 1 / -1; min-height: calc(300 * var(--u)); }
.shop-blocks .sb-bento-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-blocks .sb-bento-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 60%); }
.shop-blocks .sb-bento-badge { position: absolute; top: calc(16 * var(--u)); left: calc(16 * var(--u)); z-index: 2; font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.06em; padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(999 * var(--u)); }
.shop-blocks .sb-bento-cap { position: relative; z-index: 2; }
.shop-blocks .sb-bento-cap.on-img { color: #fff; }
.shop-blocks .sb-bento-cap .sb-en { font-family: var(--f-bear); font-size: calc(36 * var(--u) * var(--font-scale)); font-weight: 500; line-height: 1; }
/* sticker */
.shop-blocks .sb-chip-wrap { display: flex; flex-wrap: wrap; gap: calc(20 * var(--u)); }
.shop-blocks .sb-chip-pill { display: inline-flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)) calc(28 * var(--u)); border-radius: calc(999 * var(--u)); border: calc(4 * var(--u)) solid var(--cat-keyline); box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 var(--cat-shadow); }
.shop-blocks .sb-chip-pill .sb-en { font-family: var(--f-bear); font-size: calc(30 * var(--u) * var(--font-scale)); font-weight: 500; line-height: 1; }
.shop-blocks .sb-chip-count { font-family: var(--f-gothic); font-size: calc(22 * var(--u) * var(--font-scale)); min-width: calc(40 * var(--u)); text-align: center; padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--cat-text); color: var(--cat-surface); }
.shop-blocks .sb-cattabs .sb-empty { color: rgba(0,0,0,0.3); text-align: center; padding: calc(40 * var(--u)) 0; font-size: calc(24 * var(--u) * var(--font-scale)); }
/* icons */
.shop-blocks .sb-icons-grid { display: grid; gap: calc(28 * var(--u)) calc(12 * var(--u)); }
.shop-blocks .sb-icons-cols-3 { grid-template-columns: repeat(3, 1fr); }
.shop-blocks .sb-icons-cols-4 { grid-template-columns: repeat(4, 1fr); }
.shop-blocks .sb-icons-cols-5 { grid-template-columns: repeat(5, 1fr); }
.shop-blocks .sb-icon-tile { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); }
.shop-blocks .sb-icon-circle { width: calc(112 * var(--u)); height: calc(112 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-bear); font-size: calc(44 * var(--u) * var(--font-scale)); font-weight: 700; }
.shop-blocks .sb-icon-name { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); color: var(--cat-text); text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Product grid ────────────────────────────────────────────────────────── */
.shop-blocks .sb-grid-block { padding: 0 calc(44 * var(--u)); }
.shop-blocks .sb-grid-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(24 * var(--u)); }
.shop-blocks .sb-grid-block .sb-kicker { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.14em; color: var(--olive); }
.shop-blocks .sb-grid-block .sb-ttl { font-family: var(--f-bear); font-size: calc(44 * var(--u) * var(--font-scale)); font-weight: 500; line-height: 1.05; margin-top: calc(8 * var(--u)); }
.shop-blocks .sb-grid-block .sb-more { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); font-weight: 700; letter-spacing: 0.1em; color: var(--olive); text-decoration: underline; }
.shop-blocks .sb-grid { display: grid; gap: calc(24 * var(--u)); }
.shop-blocks .sb-cols-1 { grid-template-columns: 1fr; }
.shop-blocks .sb-cols-2 { grid-template-columns: 1fr 1fr; }
.shop-blocks .sb-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.shop-blocks .sb-card .sb-img { width: 100%; aspect-ratio: 4 / 5; background: #ddd; overflow: hidden; border-radius: calc(4 * var(--u)); position: relative; }
.shop-blocks .sb-card .sb-name { font-family: var(--f-bear); font-size: calc(28 * var(--u) * var(--font-scale)); font-weight: 500; margin-top: calc(16 * var(--u)); line-height: 1.15; }
.shop-blocks .sb-price { font-family: var(--f-gothic); font-size: calc(26 * var(--u) * var(--font-scale)); font-weight: 600; color: var(--olive); letter-spacing: 0.04em; }
.shop-blocks .sb-price.is-flash { color: #E96174; }
.shop-blocks .sb-price-row { display: flex; align-items: baseline; gap: calc(12 * var(--u)); margin-top: calc(4 * var(--u)); }
.shop-blocks .sb-price-was { font-family: var(--f-aleo); font-size: calc(20 * var(--u) * var(--font-scale)); color: rgba(0,0,0,0.4); text-decoration: line-through; }
.shop-blocks .sb-grid-flash-badge { position: absolute; top: calc(10 * var(--u)); left: calc(10 * var(--u)); background: #E96174; color: #fff; font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.12em; padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(4 * var(--u)); }
.shop-blocks .sb-rank-badge { position: absolute; top: calc(10 * var(--u)); left: calc(10 * var(--u)); font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.14em; padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: calc(4 * var(--u)); text-transform: uppercase; z-index: 2; }
.shop-blocks .rank-1 { background: var(--corn); color: var(--ink); box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--ink); }
.shop-blocks .rank-2 { background: #D3D1C7; color: var(--ink); box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--ink); }
.shop-blocks .rank-3 { background: var(--almond); color: var(--oat); box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--ink); }
.shop-blocks .rank-n { background: var(--ink); color: var(--oat); }
.shop-blocks .sb-sold-caption { margin-top: calc(6 * var(--u)); font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.12em; color: var(--olive); text-transform: uppercase; }
.shop-blocks .sb-rank-card-1 .sb-img { box-shadow: inset 0 calc(-3 * var(--u)) 0 var(--corn); }
.shop-blocks .sb-grid-block .sb-empty { color: rgba(0,0,0,0.3); text-align: center; padding: calc(40 * var(--u)) 0; font-size: calc(24 * var(--u) * var(--font-scale)); }
/* scroll rail */
.shop-blocks .sb-scroll-rail { display: flex; gap: calc(20 * var(--u)); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.shop-blocks .sb-scroll-rail::-webkit-scrollbar { display: none; }
.shop-blocks .sb-rail-card { flex: 0 0 calc(260 * var(--u)); width: calc(260 * var(--u)); }
.shop-blocks .sb-rail-card .sb-img { width: 100%; aspect-ratio: 4 / 5; background: #ddd; overflow: hidden; border-radius: calc(4 * var(--u)); position: relative; }
.shop-blocks .sb-rail-card .sb-name { font-family: var(--f-bear); font-size: calc(26 * var(--u) * var(--font-scale)); font-weight: 500; margin-top: calc(14 * var(--u)); line-height: 1.15; }
/* list */
.shop-blocks .sb-list-rows { display: flex; flex-direction: column; gap: calc(32 * var(--u)); }
.shop-blocks .sb-list-row { display: flex; gap: calc(24 * var(--u)); align-items: flex-start; }
.shop-blocks .sb-list-row .sb-img { flex: 0 0 calc(200 * var(--u)); width: calc(200 * var(--u)); aspect-ratio: 1; background: #ddd; overflow: hidden; border-radius: calc(8 * var(--u)); position: relative; }
.shop-blocks .sb-list-row .sb-meta { flex: 1; min-width: 0; }
.shop-blocks .sb-list-row .sb-name { font-family: var(--f-bear); font-size: calc(30 * var(--u) * var(--font-scale)); font-weight: 500; line-height: 1.15; }
.shop-blocks .sb-tagline { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); color: rgba(0,0,0,0.55); margin-top: calc(6 * var(--u)); line-height: 1.35; }

/* ── Coupon ──────────────────────────────────────────────────────────────── */
.shop-blocks .sb-coupon-blk { margin: 0 calc(36 * var(--u)); padding: calc(32 * var(--u)) calc(36 * var(--u)); border-radius: calc(16 * var(--u)); display: flex; align-items: center; gap: calc(28 * var(--u)); position: relative; overflow: hidden; }
.shop-blocks .sb-coupon-blk::before, .shop-blocks .sb-coupon-blk::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: var(--oat); }
.shop-blocks .sb-coupon-blk::before { left: calc(-14 * var(--u)); }
.shop-blocks .sb-coupon-blk::after { right: calc(-14 * var(--u)); }
.shop-blocks .sb-cp-disc { flex: 0 0 auto; min-width: calc(140 * var(--u)); text-align: center; padding-right: calc(28 * var(--u)); border-right: 1px dashed currentColor; }
.shop-blocks .sb-cp-big { font-family: var(--f-gothic); font-weight: 700; font-size: calc(56 * var(--u) * var(--font-scale)); letter-spacing: 0.04em; line-height: 1; }
.shop-blocks .sb-cp-body { flex: 1; min-width: 0; }
.shop-blocks .sb-cp-kicker { font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.14em; opacity: 0.8; }
.shop-blocks .sb-cp-title { font-family: var(--f-bear); font-weight: 500; font-size: calc(25 * var(--u) * var(--font-scale)); line-height: 1.2; margin-top: calc(6 * var(--u)); }
.shop-blocks .sb-cp-sub { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); margin-top: calc(8 * var(--u)); opacity: 0.8; }
.shop-blocks .sb-cp-code { margin-top: calc(14 * var(--u)); display: inline-flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u)); border: 1px dashed currentColor; border-radius: calc(6 * var(--u)); }
.shop-blocks .sb-cp-code-label { font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.14em; opacity: 0.65; }
.shop-blocks .sb-cp-code-val { font-family: var(--f-toni); font-weight: 700; font-size: calc(22 * var(--u) * var(--font-scale)); letter-spacing: 0.1em; }
.shop-blocks .sb-cp-code-copy { font-family: var(--f-toni); font-weight: 700; font-size: calc(16 * var(--u) * var(--font-scale)); letter-spacing: 0.12em; opacity: 0.6; }
.shop-blocks .sb-cp-cta { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; padding: calc(18 * var(--u)) calc(24 * var(--u)); font-family: var(--f-toni); font-weight: 700; font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.14em; background: rgba(255,255,255,0.92); color: #1a1a17; border-radius: calc(8 * var(--u)); }
.shop-blocks .sb-cp-st-stamp { flex-direction: column; text-align: center; gap: calc(16 * var(--u)); padding: calc(40 * var(--u)) calc(36 * var(--u)); border: calc(3 * var(--u)) dashed currentColor; }
.shop-blocks .sb-cp-st-stamp::before, .shop-blocks .sb-cp-st-stamp::after { display: none; }
.shop-blocks .sb-cp-st-stamp .sb-cp-disc { min-width: 0; padding-right: 0; border-right: 0; }
.shop-blocks .sb-cp-st-stamp .sb-cp-big { font-size: calc(72 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-cp-st-stamp .sb-cp-body { flex: 0 0 auto; width: 100%; }
.shop-blocks .sb-cp-st-stamp .sb-cp-cta { display: flex; width: 100%; justify-content: center; margin-top: calc(4 * var(--u)); }
.shop-blocks .sb-cp-st-strip { padding: calc(18 * var(--u)) calc(30 * var(--u)); gap: calc(20 * var(--u)); }
.shop-blocks .sb-cp-st-strip .sb-cp-disc { min-width: 0; padding-right: calc(20 * var(--u)); }
.shop-blocks .sb-cp-st-strip .sb-cp-big { font-size: calc(40 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-cp-st-strip .sb-cp-kicker, .shop-blocks .sb-cp-st-strip .sb-cp-sub, .shop-blocks .sb-cp-st-strip .sb-cp-code { display: none; }
.shop-blocks .sb-cp-st-strip .sb-cp-title { margin-top: 0; font-size: calc(26 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-cp-st-strip .sb-cp-cta { padding: calc(12 * var(--u)) calc(20 * var(--u)); }

/* ── Recipe story ────────────────────────────────────────────────────────── */
.shop-blocks .sb-recipe-blk { margin: calc(24 * var(--u)) 0; padding: 0; border-top: calc(3 * var(--u)) solid var(--ink); border-bottom: calc(3 * var(--u)) solid var(--ink); }
.shop-blocks .sb-rcp-img { width: 100%; aspect-ratio: 4 / 3; background: rgba(0,0,0,0.08); overflow: hidden; position: relative; }
.shop-blocks .sb-rcp-img-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-toni); font-size: calc(22 * var(--u) * var(--font-scale)); color: var(--olive); letter-spacing: 0.14em; }
.shop-blocks .sb-rcp-body { padding: calc(30 * var(--u)) calc(44 * var(--u)) calc(36 * var(--u)); }
.shop-blocks .sb-rcp-kicker { font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); }
.shop-blocks .sb-rcp-headline { font-family: var(--f-bear); font-size: calc(56 * var(--u) * var(--font-scale)); line-height: 1.0; padding-top: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }
.shop-blocks .sb-rcp-meta { margin-top: calc(8 * var(--u)); font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.12em; color: var(--olive); text-transform: uppercase; }
.shop-blocks .sb-rcp-para { margin-top: calc(18 * var(--u)); font-family: var(--f-aleo); font-size: calc(28 * var(--u) * var(--font-scale)); line-height: 1.55; white-space: pre-line; }
.shop-blocks .sb-rcp-card { margin-top: calc(24 * var(--u)); display: flex; align-items: center; gap: calc(20 * var(--u)); padding: calc(16 * var(--u)); border: calc(2 * var(--u)) solid var(--ink); background: rgba(255,255,255,0.5); }
.shop-blocks .sb-rcp-card-img { width: calc(140 * var(--u)); height: calc(140 * var(--u)); background: rgba(0,0,0,0.08); flex-shrink: 0; overflow: hidden; }
.shop-blocks .sb-rcp-card-meta { flex: 1; min-width: 0; }
.shop-blocks .sb-rcp-card-name { font-family: var(--f-bear); font-size: calc(28 * var(--u) * var(--font-scale)); line-height: 1.2; }
.shop-blocks .sb-rcp-card-tag { margin-top: calc(4 * var(--u)); font-family: var(--f-aleo); font-size: calc(20 * var(--u) * var(--font-scale)); color: var(--olive); }
.shop-blocks .sb-rcp-card-price { margin-top: calc(8 * var(--u)); font-family: var(--f-gothic); font-size: calc(26 * var(--u) * var(--font-scale)); letter-spacing: 0.06em; }
.shop-blocks .sb-rcp-cta { margin-top: calc(22 * var(--u)); display: inline-block; padding: calc(16 * var(--u)) calc(24 * var(--u)); background: var(--ink); color: var(--lime); font-family: var(--f-toni); font-size: calc(22 * var(--u) * var(--font-scale)); letter-spacing: 0.16em; text-transform: uppercase; }
.shop-blocks .sb-recipe-side { display: flex; align-items: stretch; }
.shop-blocks .sb-recipe-side .sb-rcp-img { width: 45%; aspect-ratio: auto; min-height: calc(420 * var(--u)); }
.shop-blocks .sb-recipe-side .sb-rcp-body { flex: 1; padding: calc(24 * var(--u)) calc(30 * var(--u)); }
.shop-blocks .sb-recipe-side .sb-rcp-headline { font-size: calc(40 * var(--u) * var(--font-scale)); }

/* ── Bundle ──────────────────────────────────────────────────────────────── */
.shop-blocks .sb-bun-blk { margin: 0 calc(44 * var(--u)); padding: calc(8 * var(--u)) 0; }
.shop-blocks .sb-bun-inner { padding: calc(32 * var(--u)) calc(28 * var(--u)); margin: calc(16 * var(--u)) 0; }
.shop-blocks .sb-bun-kicker { font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); }
.shop-blocks .sb-bun-pills-scroll { margin: calc(20 * var(--u)) calc(-10 * var(--u)) 0; overflow-x: auto; scrollbar-width: none; }
.shop-blocks .sb-bun-pills-scroll::-webkit-scrollbar { display: none; }
.shop-blocks .sb-bun-pills { display: inline-flex; gap: calc(12 * var(--u)); padding: 0 calc(10 * var(--u)); }
.shop-blocks .sb-bun-pill { flex-shrink: 0; padding: calc(12 * var(--u)) calc(22 * var(--u)); border: calc(2 * var(--u)) solid; border-radius: calc(999 * var(--u)); font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.10em; text-transform: uppercase; line-height: 1.2; background: transparent; white-space: nowrap; }
.shop-blocks .sb-bun-pill-star { font-size: calc(18 * var(--u) * var(--font-scale)); margin-right: calc(4 * var(--u)); }
.shop-blocks .sb-bun-title { font-family: var(--f-bear); font-size: calc(48 * var(--u) * var(--font-scale)); line-height: 1.12; padding-top: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
.shop-blocks .sb-bun-sub { font-family: var(--f-aleo); font-size: calc(24 * var(--u) * var(--font-scale)); color: var(--olive); margin-top: calc(10 * var(--u)); }
.shop-blocks .sb-bun-empty { margin-top: calc(16 * var(--u)); padding: calc(22 * var(--u)); border: calc(2 * var(--u)) dashed var(--ink); font-family: var(--f-toni); font-size: calc(22 * var(--u) * var(--font-scale)); color: var(--olive); text-align: center; }
.shop-blocks .sb-bun-cards { margin: calc(22 * var(--u)) calc(-10 * var(--u)) 0; overflow-x: auto; scrollbar-width: none; }
.shop-blocks .sb-bun-cards::-webkit-scrollbar { display: none; }
.shop-blocks .sb-bun-card-row { display: inline-flex; align-items: flex-start; gap: calc(14 * var(--u)); padding: 0 calc(10 * var(--u)); }
.shop-blocks .sb-bun-card { width: calc(180 * var(--u)); flex-shrink: 0; }
.shop-blocks .sb-bun-card-img { width: calc(180 * var(--u)); aspect-ratio: 1 / 1; background: rgba(0,0,0,0.08); border: calc(2 * var(--u)) solid var(--ink); overflow: hidden; }
.shop-blocks .sb-bun-card-name { margin-top: calc(10 * var(--u)); font-family: var(--f-bear); font-size: calc(22 * var(--u) * var(--font-scale)); line-height: 1.2; min-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.shop-blocks .sb-bun-card-price { margin-top: calc(4 * var(--u)); font-family: var(--f-gothic); font-size: calc(22 * var(--u) * var(--font-scale)); letter-spacing: 0.04em; }
.shop-blocks .sb-bun-plus { font-family: var(--f-bear); font-size: calc(42 * var(--u) * var(--font-scale)); color: var(--olive); flex-shrink: 0; height: calc(180 * var(--u)); display: flex; align-items: center; }
.shop-blocks .sb-bun-foot { margin-top: calc(22 * var(--u)); display: flex; align-items: center; gap: calc(18 * var(--u)); }
.shop-blocks .sb-bun-price-block { display: flex; flex-direction: column; align-items: flex-start; }
.shop-blocks .sb-bun-was { font-family: var(--f-aleo); font-size: calc(20 * var(--u) * var(--font-scale)); color: var(--olive); text-decoration: line-through; }
.shop-blocks .sb-bun-price { font-family: var(--f-bear); font-size: calc(44 * var(--u) * var(--font-scale)); line-height: 1; }
.shop-blocks .sb-bun-savings { margin-top: calc(4 * var(--u)); font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.14em; color: var(--berry); }
.shop-blocks .sb-bun-cta { margin-left: auto; padding: calc(22 * var(--u)) calc(28 * var(--u)); color: var(--oat); font-family: var(--f-toni); font-size: calc(22 * var(--u) * var(--font-scale)); letter-spacing: 0.14em; text-align: center; text-transform: uppercase; border-radius: calc(8 * var(--u)); }

/* ── Flash sale strip ────────────────────────────────────────────────────── */
.shop-blocks .sb-flash-strip { padding: calc(32 * var(--u)) calc(36 * var(--u)) calc(36 * var(--u)); }
.shop-blocks .sb-fs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(28 * var(--u)); }
.shop-blocks .sb-fs-kicker { font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.18em; opacity: 0.85; text-transform: uppercase; }
.shop-blocks .sb-fs-title { font-family: var(--f-bear); font-weight: 500; font-size: calc(40 * var(--u) * var(--font-scale)); line-height: 1.0; margin-top: calc(4 * var(--u)); }
.shop-blocks .sb-fs-clock { display: flex; flex-direction: column; align-items: flex-end; gap: calc(8 * var(--u)); }
.shop-blocks .sb-fs-clock-lbl { font-family: var(--f-toni); font-weight: 700; font-size: calc(16 * var(--u) * var(--font-scale)); letter-spacing: 0.14em; opacity: 0.8; }
.shop-blocks .sb-fs-clock-cells { display: inline-flex; align-items: center; }
.shop-blocks .sb-fs-ct-num { display: inline-block; background: rgba(0,0,0,0.35); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-family: var(--f-gothic); font-weight: 700; font-size: calc(28 * var(--u) * var(--font-scale)); letter-spacing: 0.04em; min-width: calc(52 * var(--u)); text-align: center; }
.shop-blocks .sb-fs-ct-sep { padding: 0 calc(6 * var(--u)); font-family: var(--f-gothic); font-weight: 700; font-size: calc(28 * var(--u) * var(--font-scale)); opacity: 0.65; }
.shop-blocks .sb-fs-cards { margin-top: calc(28 * var(--u)); display: flex; gap: calc(20 * var(--u)); overflow-x: auto; scrollbar-width: none; }
.shop-blocks .sb-fs-cards::-webkit-scrollbar { display: none; }
.shop-blocks .sb-fs-cards.is-grid { flex-wrap: wrap; }
.shop-blocks .sb-fs-cards.is-grid .sb-fs-card { width: calc((100% - 20 * var(--u)) / 2); }
.shop-blocks .sb-fs-card { flex: 0 0 calc(260 * var(--u)); width: calc(260 * var(--u)); background: rgba(255,255,255,0.94); color: #1a1a17; border-radius: calc(12 * var(--u)); overflow: hidden; }
.shop-blocks .sb-fs-card-img { position: relative; width: 100%; height: calc(260 * var(--u)); background: #eee; }
.shop-blocks .sb-fs-badge { position: absolute; top: calc(14 * var(--u)); left: calc(14 * var(--u)); background: #E96174; color: #fff; font-family: var(--f-gothic); font-weight: 700; font-size: calc(24 * var(--u) * var(--font-scale)); padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); }
.shop-blocks .sb-fs-card-meta { padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); }
.shop-blocks .sb-fs-card-name { font-family: var(--f-bear); font-size: calc(26 * var(--u) * var(--font-scale)); line-height: 1.1; }
.shop-blocks .sb-fs-card-prices { display: flex; align-items: baseline; gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.shop-blocks .sb-fs-price-now { font-family: var(--f-gothic); font-weight: 700; font-size: calc(34 * var(--u) * var(--font-scale)); color: #E96174; }
.shop-blocks .sb-fs-price-was { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); color: rgba(0,0,0,0.4); text-decoration: line-through; }
.shop-blocks .sb-fs-meter { margin-top: calc(14 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(18 * var(--u)); background: rgba(0,0,0,0.12); overflow: hidden; position: relative; }
.shop-blocks .sb-fs-meter-bar { position: absolute; inset: 0 auto 0 0; background: #E96174; }
.shop-blocks .sb-fs-meter-lbl { margin-top: calc(10 * var(--u)); font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.08em; color: rgba(0,0,0,0.55); }
.shop-blocks .sb-fs-empty { margin-top: calc(24 * var(--u)); font-family: var(--f-aleo); font-size: calc(24 * var(--u) * var(--font-scale)); opacity: 0.85; }
/* flash hero / banner */
.shop-blocks .sb-flash-hero { padding: calc(48 * var(--u)) calc(44 * var(--u)); text-align: center; }
.shop-blocks .sb-fh-kicker { font-family: var(--f-toni); font-weight: 700; font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; }
.shop-blocks .sb-fh-title { font-family: var(--f-bear); font-size: calc(56 * var(--u) * var(--font-scale)); line-height: 1.0; margin-top: calc(12 * var(--u)); }
.shop-blocks .sb-fh-ends { margin-top: calc(28 * var(--u)); font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.24em; opacity: 0.8; }
.shop-blocks .sb-fh-clock { display: flex; justify-content: center; align-items: flex-start; gap: calc(14 * var(--u)); margin-top: calc(18 * var(--u)); }
.shop-blocks .sb-fh-cell { min-width: calc(110 * var(--u)); }
.shop-blocks .sb-fh-num { font-family: var(--f-gothic); font-weight: 700; font-size: calc(56 * var(--u) * var(--font-scale)); line-height: 1; }
.shop-blocks .sb-fh-lbl { font-family: var(--f-toni); font-weight: 700; font-size: calc(16 * var(--u) * var(--font-scale)); letter-spacing: 0.14em; margin-top: calc(8 * var(--u)); opacity: 0.7; }
.shop-blocks .sb-fh-sep { font-family: var(--f-gothic); font-weight: 700; font-size: calc(56 * var(--u) * var(--font-scale)); opacity: 0.5; }
.shop-blocks .sb-fh-cta { display: inline-block; margin-top: calc(28 * var(--u)); padding: calc(20 * var(--u)) calc(56 * var(--u)); font-family: var(--f-gothic); font-weight: 700; font-size: calc(28 * var(--u) * var(--font-scale)); letter-spacing: 0.06em; background: rgba(255,255,255,0.92); color: #1a1a17; border-radius: calc(999 * var(--u)); }
.shop-blocks .sb-fh-cards { margin-top: calc(36 * var(--u)); text-align: left; }

/* flash design directions (classic / editorial / urgency) */
.shop-blocks .sb-fsd-wrap { position: relative; overflow: hidden; font-family: var(--f-aleo); --fs-head: 1; --fs-radius: calc(32 * var(--u)); --fs-border: calc(3 * var(--u)); --fs-panel: #FBF1F1; --fs-tile: #C24E61; --fs-accent: var(--lime); --fs-fill: var(--forest); --fs-price: var(--berry); --fs-ink: var(--ink); }
.shop-blocks .sb-fsd-wrap.sb-corner-subtle { border-radius: calc(28 * var(--u)); }
.shop-blocks .sb-fsd-wrap.sb-corner-bold { border-radius: calc(44 * var(--u)); }
.shop-blocks .sb-fsd-zig { position: absolute; top: 0; left: 0; right: 0; height: calc(28 * var(--u)); background: var(--fs-panel); z-index: 3; pointer-events: none; -webkit-mask: linear-gradient(45deg, transparent calc(8 * var(--u)), #000 0) repeat-x; }
.shop-blocks .sb-fsd-body { padding: calc(44 * var(--u)) 0; color: var(--fs-ink); }
@keyframes sbFsPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes sbFsDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.5); } }
.shop-blocks .sb-fs-pulse { animation: sbFsPulse 1s ease-in-out infinite; }
.shop-blocks .sb-fs-pulse-dot { animation: sbFsDot .9s ease-in-out infinite; }
.shop-blocks .sb-fsd-cards { display: flex; gap: calc(24 * var(--u)); overflow-x: auto; padding: 0 calc(32 * var(--u)) calc(8 * var(--u)); scrollbar-width: none; }
.shop-blocks .sb-fsd-cards::-webkit-scrollbar { display: none; }
.shop-blocks .sb-fsd-cards.is-grid { flex-wrap: wrap; }
.shop-blocks .sb-fsd-cards.is-grid .sb-fsd-card { width: calc((100% - 24 * var(--u)) / 2); }
.shop-blocks .sb-fsd-card { flex: 0 0 calc(300 * var(--u)); width: calc(300 * var(--u)); background: #FFFCF7; color: var(--ink); border-radius: var(--fs-radius); overflow: hidden; }
.shop-blocks .sb-fsd-img { position: relative; width: 100%; height: calc(300 * var(--u)); overflow: hidden; background: #eee; }
.shop-blocks .sb-fsd-badge-corner { position: absolute; top: calc(20 * var(--u)); left: calc(20 * var(--u)); background: var(--fs-ink); color: var(--fs-accent); padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); font-family: var(--f-gothic); font-size: calc(30 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-fsd-badge-stamp { position: absolute; top: calc(16 * var(--u)); right: calc(16 * var(--u)); background: var(--fs-accent); color: var(--fs-ink); border: var(--fs-border) solid var(--fs-ink); box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 var(--fs-ink); transform: rotate(7deg); padding: calc(10 * var(--u)) calc(16 * var(--u)); font-family: var(--f-gothic); font-size: calc(32 * var(--u) * var(--font-scale)); line-height: 1; }
.shop-blocks .sb-fsd-badge-ribbon { position: absolute; top: calc(28 * var(--u)); left: calc(-56 * var(--u)); width: calc(220 * var(--u)); transform: rotate(-45deg); background: var(--fs-accent); color: var(--fs-ink); text-align: center; font-family: var(--f-gothic); font-size: calc(26 * var(--u) * var(--font-scale)); padding: calc(6 * var(--u)) 0; }
.shop-blocks .sb-fsd-meta { padding: calc(24 * var(--u)) calc(26 * var(--u)) calc(28 * var(--u)); }
.shop-blocks .sb-fsd-name { font-family: var(--f-bear); font-size: calc(31 * var(--u) * var(--font-scale)); line-height: 1.05; }
.shop-blocks .sb-fsd-prices { display: flex; align-items: baseline; gap: calc(14 * var(--u)); margin-top: calc(16 * var(--u)); }
.shop-blocks .sb-fsd-now { font-family: var(--f-gothic); font-size: calc(44 * var(--u) * var(--font-scale)); color: var(--fs-price); }
.shop-blocks .sb-fsd-was { font-family: var(--f-aleo); font-size: calc(24 * var(--u) * var(--font-scale)); color: #6A6E2D; text-decoration: line-through; }
.shop-blocks .sb-fsd-meter { margin-top: calc(18 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(18 * var(--u)); background: rgba(0,0,0,.12); position: relative; overflow: hidden; }
.shop-blocks .sb-fsd-meter-bar { position: absolute; inset: 0 auto 0 0; background: var(--fs-fill); border-radius: calc(18 * var(--u)); }
.shop-blocks .sb-fsd-sold { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: .12em; color: #6A6E2D; margin-top: calc(10 * var(--u)); }
/* classic */
.shop-blocks .sb-fsd-classic .sb-fsd-head { text-align: center; padding: 0 calc(48 * var(--u)); }
.shop-blocks .sb-fsd-classic .sb-fsd-kicker { font-family: var(--f-toni); font-size: calc(24 * var(--u) * var(--font-scale)); letter-spacing: .34em; }
.shop-blocks .sb-fsd-classic .sb-fsd-title { font-family: var(--f-bear); font-size: calc(62 * var(--fs-head) * var(--u) * var(--font-scale)); line-height: 1; margin-top: calc(16 * var(--u)); }
.shop-blocks .sb-fsd-classic .sb-fsd-ends { text-align: center; margin-top: calc(40 * var(--u)); }
.shop-blocks .sb-fsd-classic .sb-fsd-ends-lbl { font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: .28em; color: rgba(26,26,23,.7); }
.shop-blocks .sb-fsd-classic .sb-fsd-clock { display: flex; justify-content: center; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(20 * var(--u)); }
.shop-blocks .sb-fsd-classic .sb-fsd-tile { background: var(--fs-tile); border-radius: calc(28 * var(--u)); width: calc(132 * var(--u)); padding: calc(22 * var(--u)) 0 calc(16 * var(--u)); text-align: center; }
.shop-blocks .sb-fsd-classic .sb-fsd-tile-num { font-family: var(--f-bear); font-size: calc(68 * var(--fs-head) * var(--u) * var(--font-scale)); line-height: 1; color: #FFFCF7; }
.shop-blocks .sb-fsd-classic .sb-fsd-tile-lbl { font-family: var(--f-toni); font-size: calc(16 * var(--u) * var(--font-scale)); letter-spacing: .18em; color: rgba(255,255,255,.7); margin-top: calc(8 * var(--u)); }
.shop-blocks .sb-fsd-classic .sb-fsd-colon { font-family: var(--f-bear); font-size: calc(48 * var(--u) * var(--font-scale)); color: rgba(26,26,23,.5); }
.shop-blocks .sb-fsd-classic .sb-fsd-cta-wrap { display: flex; justify-content: center; margin: calc(44 * var(--u)) 0; }
.shop-blocks .sb-fsd-classic .sb-fsd-cta { background: var(--fs-panel); color: var(--ink); border-radius: calc(999 * var(--u)); padding: calc(28 * var(--u)) calc(80 * var(--u)); font-family: var(--f-gothic); font-size: calc(36 * var(--u) * var(--font-scale)); letter-spacing: .1em; }
/* editorial */
.shop-blocks .sb-fsd-editorial .sb-fsd-head { padding: 0 calc(40 * var(--u)); }
.shop-blocks .sb-fsd-editorial .sb-fsd-kicker { font-family: var(--f-toni); font-size: calc(22 * var(--u) * var(--font-scale)); letter-spacing: .3em; }
.shop-blocks .sb-fsd-editorial .sb-fsd-title { font-family: var(--f-bear); font-size: calc(68 * var(--fs-head) * var(--u) * var(--font-scale)); line-height: .95; margin-top: calc(12 * var(--u)); max-width: calc(600 * var(--u)); }
.shop-blocks .sb-fsd-editorial .sb-fsd-ticker { display: flex; align-items: stretch; background: var(--fs-panel); border-radius: var(--fs-radius); margin-top: calc(32 * var(--u)); overflow: hidden; }
.shop-blocks .sb-fsd-editorial .sb-fsd-seg { flex: 1; text-align: center; padding: calc(20 * var(--u)) 0 calc(16 * var(--u)); }
.shop-blocks .sb-fsd-editorial .sb-fsd-seg-num { font-family: var(--f-gothic); font-size: calc(60 * var(--fs-head) * var(--u) * var(--font-scale)); line-height: 1; color: var(--ink); }
.shop-blocks .sb-fsd-editorial .sb-fsd-seg-lbl { font-family: var(--f-toni); font-size: calc(16 * var(--u) * var(--font-scale)); letter-spacing: .16em; color: #6A6E2D; margin-top: calc(4 * var(--u)); }
.shop-blocks .sb-fsd-editorial .sb-fsd-seg-div { width: calc(2 * var(--u)); background: rgba(0,0,0,.12); margin: calc(20 * var(--u)) 0; }
.shop-blocks .sb-fsd-editorial .sb-fsd-cta-row { display: flex; align-items: center; gap: calc(24 * var(--u)); margin-top: calc(32 * var(--u)); padding: 0 calc(40 * var(--u)); }
.shop-blocks .sb-fsd-editorial .sb-fsd-cta { background: var(--fs-accent); color: var(--ink); border: var(--fs-border) solid var(--fs-ink); border-radius: calc(999 * var(--u)); padding: calc(24 * var(--u)) calc(52 * var(--u)); font-family: var(--f-gothic); font-size: calc(34 * var(--u) * var(--font-scale)); box-shadow: 0 calc(6 * var(--u)) 0 var(--fs-ink); }
.shop-blocks .sb-fsd-editorial .sb-fsd-off { font-family: var(--f-aleo); font-size: calc(24 * var(--u) * var(--font-scale)); color: rgba(26,26,23,.75); line-height: 1.3; }
.shop-blocks .sb-fsd-editorial .sb-fsd-cards { margin-top: calc(40 * var(--u)); }
/* urgency */
.shop-blocks .sb-fsd-urgency .sb-fsd-head { text-align: center; padding: 0 calc(48 * var(--u)); }
.shop-blocks .sb-fsd-urgency .sb-fsd-live { display: inline-flex; align-items: center; gap: calc(14 * var(--u)); background: var(--fs-ink); color: var(--fs-accent); border-radius: calc(999 * var(--u)); padding: calc(8 * var(--u)) calc(24 * var(--u)); }
.shop-blocks .sb-fsd-urgency .sb-fsd-live-dot { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--fs-accent); }
.shop-blocks .sb-fsd-urgency .sb-fsd-live-lbl { font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: .24em; }
.shop-blocks .sb-fsd-urgency .sb-fsd-title { font-family: var(--f-bear); font-size: calc(66 * var(--fs-head) * var(--u) * var(--font-scale)); line-height: .98; margin-top: calc(24 * var(--u)); }
.shop-blocks .sb-fsd-urgency .sb-fsd-clock { display: flex; justify-content: center; gap: calc(14 * var(--u)); margin-top: calc(36 * var(--u)); padding: 0 calc(32 * var(--u)); }
.shop-blocks .sb-fsd-urgency .sb-fsd-tile { flex: 1; max-width: calc(160 * var(--u)); background: var(--fs-accent); border: var(--fs-border) solid var(--fs-ink); border-radius: calc(24 * var(--u)); padding: calc(20 * var(--u)) 0 calc(14 * var(--u)); text-align: center; box-shadow: 0 calc(8 * var(--u)) 0 var(--fs-ink); }
.shop-blocks .sb-fsd-urgency .sb-fsd-tile-num { font-family: var(--f-bear); font-size: calc(64 * var(--fs-head) * var(--u) * var(--font-scale)); line-height: 1; color: var(--ink); }
.shop-blocks .sb-fsd-urgency .sb-fsd-tile-lbl { font-family: var(--f-toni); font-size: calc(16 * var(--u) * var(--font-scale)); letter-spacing: .16em; color: var(--fs-fill); margin-top: calc(6 * var(--u)); }
.shop-blocks .sb-fsd-urgency .sb-fsd-cta-wrap { display: flex; justify-content: center; margin: calc(40 * var(--u)) 0 calc(44 * var(--u)); }
.shop-blocks .sb-fsd-urgency .sb-fsd-cta { background: var(--fs-ink); color: var(--fs-accent); border-radius: calc(999 * var(--u)); padding: calc(28 * var(--u)) calc(88 * var(--u)); font-family: var(--f-gothic); font-size: calc(36 * var(--u) * var(--font-scale)); letter-spacing: .1em; }

/* ── Voting block ────────────────────────────────────────────────────────── */
.shop-blocks .sb-voting-blk { margin: 0 calc(36 * var(--u)); padding: calc(32 * var(--u)); border-radius: calc(8 * var(--u)); position: relative; }
.shop-blocks .sb-voting-row { display: flex; align-items: center; gap: calc(24 * var(--u)); }
.shop-blocks .sb-vb-body { flex: 1; min-width: 0; }
.shop-blocks .sb-vb-kicker { font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.18em; opacity: 0.8; }
.shop-blocks .sb-vb-title { font-family: var(--f-bear); font-weight: 500; font-size: calc(34 * var(--u) * var(--font-scale)); line-height: 1.15; margin-top: calc(10 * var(--u)); }
.shop-blocks .sb-vb-q { font-family: var(--f-bear); font-weight: 500; font-size: calc(32 * var(--u) * var(--font-scale)); line-height: 1.12; margin-top: calc(8 * var(--u)); }
.shop-blocks .sb-vb-sub { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); line-height: 1.4; margin-top: calc(10 * var(--u)); opacity: 0.85; }
.shop-blocks .sb-vb-meta { margin-top: calc(12 * var(--u)); font-family: var(--f-toni); font-weight: 700; font-size: calc(16 * var(--u) * var(--font-scale)); letter-spacing: 0.16em; opacity: 0.7; }
.shop-blocks .sb-vb-status-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(10 * var(--u)); }
.shop-blocks .sb-vb-status-pill { display: inline-block; font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.12em; color: var(--berry); }
.shop-blocks .sb-vb-status-pill.closed { color: var(--olive); }
.shop-blocks .sb-vb-cat { font-family: var(--f-toni); font-weight: 700; font-size: calc(16 * var(--u) * var(--font-scale)); letter-spacing: 0.12em; opacity: 0.7; }
.shop-blocks .sb-vb-cta { margin-top: calc(22 * var(--u)); display: inline-block; padding: calc(16 * var(--u)) calc(28 * var(--u)); background: var(--ink); color: #fff; font-family: var(--f-gothic); font-weight: 700; font-size: calc(22 * var(--u) * var(--font-scale)); letter-spacing: 0.12em; border-radius: calc(999 * var(--u)); text-transform: uppercase; }
.shop-blocks .sb-vb-cta-pill { margin-top: 0; flex-shrink: 0; padding: calc(18 * var(--u)) calc(28 * var(--u)); background: transparent; }
.shop-blocks .sb-vb-stub { font-family: var(--f-aleo); font-style: italic; font-size: calc(22 * var(--u) * var(--font-scale)); color: var(--olive); text-align: center; padding: calc(20 * var(--u)) 0; }
.shop-blocks .sb-vb-opts { margin-top: calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.shop-blocks .sb-vb-opt { position: relative; border: calc(3 * var(--u)) solid rgba(0,0,0,0.4); padding: calc(18 * var(--u)) calc(22 * var(--u)); overflow: hidden; border-radius: calc(4 * var(--u)); }
.shop-blocks .sb-vb-opt.opt-results { border-color: var(--ink); }
.shop-blocks .sb-vb-opt-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(204,217,0,0.25); transition: width 0.4s ease; z-index: 0; }
.shop-blocks .sb-vb-opt-fill.fill-mine { background: var(--lime); }
.shop-blocks .sb-vb-opt-row { position: relative; z-index: 1; display: flex; align-items: center; gap: calc(20 * var(--u)); }
.shop-blocks .sb-vb-opt-letter { width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--f-gothic); font-weight: 700; font-size: calc(24 * var(--u) * var(--font-scale)); flex-shrink: 0; }
.shop-blocks .sb-vb-opt-label { flex: 1; min-width: 0; font-family: var(--f-bear); font-weight: 500; font-size: calc(28 * var(--u) * var(--font-scale)); line-height: 1; }
.shop-blocks .sb-vb-opt-tick { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid var(--ink); flex-shrink: 0; }
.shop-blocks .sb-vb-opt-pct { text-align: right; flex-shrink: 0; }
.shop-blocks .sb-vb-opt-pct-num { font-family: var(--f-gothic); font-weight: 700; font-size: calc(30 * var(--u) * var(--font-scale)); line-height: 1; }
.shop-blocks .sb-vb-opt-pct-lbl { font-family: var(--f-toni); font-weight: 700; font-size: calc(14 * var(--u) * var(--font-scale)); letter-spacing: 0.1em; opacity: 0.7; margin-top: calc(4 * var(--u)); }
.shop-blocks .sb-vb-voted { margin-top: calc(22 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); }
.shop-blocks .sb-vb-voted-dot { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; font-family: var(--f-bear); font-size: calc(22 * var(--u) * var(--font-scale)); flex-shrink: 0; }
.shop-blocks .sb-vb-voted-text { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-voting-inline .sb-vb-cta { display: block; width: 100%; box-sizing: border-box; text-align: center; margin-top: calc(22 * var(--u)); background: rgba(0,0,0,0.08); color: var(--olive); border-radius: 0; }
.shop-blocks .sb-vb-foot { margin-top: calc(14 * var(--u)); text-align: center; font-family: var(--f-toni); font-weight: 700; font-size: calc(16 * var(--u) * var(--font-scale)); letter-spacing: 0.15em; opacity: 0.6; }
.shop-blocks .sb-vb-winner { margin-top: calc(16 * var(--u)); display: flex; align-items: center; gap: calc(16 * var(--u)); }
.shop-blocks .sb-vb-winner-label { font-family: var(--f-toni); font-weight: 700; font-size: calc(16 * var(--u) * var(--font-scale)); letter-spacing: 0.16em; color: var(--olive); }
.shop-blocks .sb-vb-winner-name { font-family: var(--f-bear); font-weight: 500; font-size: calc(26 * var(--u) * var(--font-scale)); padding: calc(6 * var(--u)) calc(16 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(4 * var(--u)); }
.shop-blocks .sb-vb-winner-meta { margin-left: auto; font-family: var(--f-aleo); font-size: calc(20 * var(--u) * var(--font-scale)); color: var(--olive); }

/* ── Review card ─────────────────────────────────────────────────────────── */
.shop-blocks .sb-review-blk { padding: calc(40 * var(--u)) calc(44 * var(--u)); }
.shop-blocks .sb-rv-kicker { font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.18em; opacity: 0.75; text-align: center; margin-bottom: calc(16 * var(--u)); }
.shop-blocks .sb-rv-item { text-align: center; }
.shop-blocks .sb-rv-stars { display: flex; justify-content: center; gap: calc(4 * var(--u)); }
.shop-blocks .sb-rv-stars-left { justify-content: flex-start; }
.shop-blocks .sb-rv-star { font-size: calc(32 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-rv-star.on { color: #F2CA6C; }
.shop-blocks .sb-rv-star.off { color: rgba(0,0,0,0.15); }
.shop-blocks .sb-rv-quote { font-family: var(--f-bear); font-weight: 500; font-size: calc(30 * var(--u) * var(--font-scale)); line-height: 1.4; margin-top: calc(20 * var(--u)); white-space: pre-line; }
.shop-blocks .sb-rv-quote-left { text-align: left; }
.shop-blocks .sb-rv-byline { margin-top: calc(24 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--u)); }
.shop-blocks .sb-rv-avatar { width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: 50%; overflow: hidden; background: rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--f-bear); font-weight: 700; font-size: calc(28 * var(--u) * var(--font-scale)); color: rgba(0,0,0,0.5); }
.shop-blocks .sb-rv-avatar-img { width: 100%; height: 100%; }
.shop-blocks .sb-rv-byline-text { font-family: var(--f-aleo); text-align: left; }
.shop-blocks .sb-rv-name { font-weight: 700; font-size: calc(24 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-rv-sub { opacity: 0.65; font-size: calc(20 * var(--u) * var(--font-scale)); margin-top: calc(4 * var(--u)); letter-spacing: 0.04em; }
.shop-blocks .sb-rv-card { box-sizing: border-box; position: relative; }
.shop-blocks .sb-rv-mono { width: calc(80 * var(--u)); height: calc(80 * var(--u)); border-radius: 50%; background: var(--rv-circle, #7BBD3B); border: calc(4 * var(--u)) solid #1a1a17; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-bear); font-weight: 700; font-size: calc(38 * var(--u) * var(--font-scale)); color: #1a1a17; }
.shop-blocks .sb-rv-mono-img { width: 100%; height: 100%; border-radius: 50%; }
.shop-blocks .sb-rv-person { display: flex; align-items: center; gap: calc(22 * var(--u)); }
.shop-blocks .sb-rv-person-text { text-align: left; }
.shop-blocks .sb-rv-person-text .sb-rv-name { font-family: var(--f-gothic); font-size: calc(34 * var(--u) * var(--font-scale)); font-weight: 400; letter-spacing: 0.04em; line-height: 1; }
.shop-blocks .sb-rv-role { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); opacity: 0.7; margin-top: calc(6 * var(--u)); }
/* editorial */
.shop-blocks .sb-ed-card { background: var(--rv-card, #FFFCF7); border: calc(3 * var(--u)) solid var(--rv-border, #365329); border-radius: calc(32 * var(--u)); padding: calc(44 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u)); text-align: center; box-shadow: 0 calc(24 * var(--u)) calc(52 * var(--u)) calc(-36 * var(--u)) rgba(54,83,41,0.6); }
.shop-blocks .sb-ed-card .sb-rv-person { justify-content: center; }
.shop-blocks .sb-ed-kicker { display: flex; align-items: center; justify-content: center; gap: calc(18 * var(--u)); color: var(--rv-accent, #6A6E2D); }
.shop-blocks .sb-ed-tick { width: calc(32 * var(--u)); height: calc(3 * var(--u)); background: currentColor; }
.shop-blocks .sb-ed-klabel { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.28em; }
.shop-blocks .sb-rv-divider { height: calc(2 * var(--u)); background: rgba(0,0,0,0.12); margin: calc(32 * var(--u)) 0 calc(28 * var(--u)); }
/* riso */
.shop-blocks .sb-riso-stack { display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
.shop-blocks .sb-riso-card { background: var(--rv-card, #FFFCF7); border: calc(4 * var(--u)) solid var(--rv-border, #1a1a17); border-radius: calc(20 * var(--u)); padding: calc(44 * var(--u)) calc(36 * var(--u)) calc(32 * var(--u)); margin-top: calc(20 * var(--u)); box-shadow: calc(8 * var(--u)) calc(10 * var(--u)) 0 #1a1a17; }
.shop-blocks .sb-riso-badge { position: absolute; top: calc(-24 * var(--u)); left: calc(36 * var(--u)); z-index: 4; background: var(--rv-accent, #CCD900); border: calc(3 * var(--u)) solid #1a1a17; box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 #1a1a17; transform: rotate(-4deg); padding: calc(8 * var(--u)) calc(16 * var(--u)); display: flex; gap: calc(2 * var(--u)); }
.shop-blocks .sb-riso-badge-star { font-size: calc(22 * var(--u) * var(--font-scale)); color: #1a1a17; line-height: 1; }
.shop-blocks .sb-riso-stamp { position: absolute; top: calc(28 * var(--u)); right: calc(24 * var(--u)); border: calc(4 * var(--u)) solid var(--rv-accent, #E96174); color: var(--rv-accent, #E96174); transform: rotate(7deg); padding: calc(4 * var(--u)) calc(14 * var(--u)); text-align: center; line-height: 1.05; font-family: var(--f-gothic); font-size: calc(22 * var(--u) * var(--font-scale)); letter-spacing: 0.08em; }
.shop-blocks .sb-riso-kicker { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.24em; color: #6A6E2D; }
.shop-blocks .sb-riso-card .sb-rv-quote { margin-top: calc(20 * var(--u)); }
.shop-blocks .sb-riso-card .sb-rv-person { margin-top: calc(32 * var(--u)); }
.shop-blocks .sb-rv-mono-sticker { border-radius: calc(8 * var(--u)); transform: rotate(-3deg); box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 #1a1a17; background: #fff; padding: calc(4 * var(--u)); }
.shop-blocks .sb-rv-mono-inner { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
/* review carousel — swipeable strip + indicator dots (riso + carousel views).
   Track scrolls and carries its own padding so the riso sticker badge (which
   overflows above the card) and the card's drop-shadow are never clipped. */
.shop-blocks .sb-rv-track { display: flex; gap: calc(20 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: calc(16 * var(--u)); -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: calc(30 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u)); }
.shop-blocks .sb-rv-track::-webkit-scrollbar { display: none; }
/* slide is < full width so the next review crops on the right (one at a time) */
.shop-blocks .sb-rv-slide { flex: 0 0 88%; box-sizing: border-box; scroll-snap-align: start; }
.shop-blocks .sb-riso-carousel .sb-riso-card { margin-top: calc(4 * var(--u)); }
.shop-blocks .sb-rv-dots { display: flex; justify-content: center; gap: calc(12 * var(--u)); margin-top: calc(24 * var(--u)); }
.shop-blocks .sb-rv-dot { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: rgba(0,0,0,0.18); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.shop-blocks .sb-rv-dot.on { background: rgba(0,0,0,0.7); transform: scale(1.15); }
/* spotlight */
.shop-blocks .sb-spot-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(20 * var(--u)); }
.shop-blocks .sb-spot-kicker { font-family: var(--f-toni); font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.24em; opacity: 0.7; }
.shop-blocks .sb-spot-title { font-family: var(--f-bear); font-size: calc(40 * var(--u) * var(--font-scale)); line-height: 1; margin-top: calc(6 * var(--u)); }
.shop-blocks .sb-spot-stage .sb-rv-card { background: var(--rv-card, #1a1a17); color: var(--rv-cardfg, #F2E7DF); border-radius: calc(28 * var(--u)); padding: calc(40 * var(--u)) calc(36 * var(--u)); }
.shop-blocks .sb-spot-top { display: flex; align-items: center; justify-content: space-between; }
.shop-blocks .sb-spot-count { font-family: var(--f-gothic); font-size: calc(22 * var(--u) * var(--font-scale)); opacity: 0.7; }
.shop-blocks .sb-spot-rail { display: flex; gap: calc(14 * var(--u)); margin-top: calc(20 * var(--u)); }
.shop-blocks .sb-spot-thumb { width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: 50%; background: rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; font-family: var(--f-bear); font-weight: 700; font-size: calc(28 * var(--u) * var(--font-scale)); }
.shop-blocks .sb-spot-thumb.on { background: var(--rv-accent, var(--lime)); }

/* ── WeCom contact ───────────────────────────────────────────────────────── */
.shop-blocks .sb-wc-blk { margin: 0 calc(44 * var(--u)); }
.shop-blocks .sb-wc-loop-qr-frame { border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(20 * var(--u)); padding: calc(12 * var(--u)); background: #fff; }
.shop-blocks .sb-wc-loop-qr-img { width: 100%; height: calc(192 * var(--u)); display: block; border-radius: calc(6 * var(--u)); object-fit: contain; }
/* warm / poster card */
.shop-blocks .sb-wc-loop-card { position: relative; padding: calc(40 * var(--u)) calc(36 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(32 * var(--u)); box-shadow: calc(10 * var(--u)) calc(12 * var(--u)) 0 var(--ink); }
.shop-blocks .sb-wc-loop-card.sb-wc-loop-flat { box-shadow: none; }
.shop-blocks .sb-wc-loop-card.sb-wc-loop-noframe { border: 0; }
.shop-blocks .sb-wc-loop-badge { display: inline-flex; align-items: center; padding: calc(8 * var(--u)) calc(22 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(999 * var(--u)); font-family: var(--f-toni); font-weight: 700; font-size: calc(18 * var(--u) * var(--font-scale)); letter-spacing: 0.14em; text-transform: uppercase; }
.shop-blocks .sb-wc-loop-title { margin-top: calc(18 * var(--u)); font-family: var(--f-bear); font-size: calc(54 * var(--u) * var(--font-scale)); line-height: 1.0; }
.shop-blocks .sb-wc-loop-sub { margin-top: calc(12 * var(--u)); font-family: var(--f-aleo); font-size: calc(24 * var(--u) * var(--font-scale)); line-height: 1.45; opacity: 0.82; }
.shop-blocks .sb-wc-loop-props { display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)); margin-top: calc(24 * var(--u)); }
.shop-blocks .sb-wc-loop-chip { display: inline-flex; align-items: center; padding: calc(12 * var(--u)) calc(20 * var(--u)); border-radius: calc(999 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); }
.shop-blocks .sb-wc-loop-chip-tx { font-family: var(--f-toni); font-weight: 700; font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.04em; color: var(--ink); }
.shop-blocks .sb-wc-loop-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24 * var(--u)); margin-top: calc(28 * var(--u)); }
.shop-blocks .sb-wc-loop-foot-l { flex: 1; min-width: 0; }
.shop-blocks .sb-wc-loop-cta { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(20 * var(--u)) calc(32 * var(--u)); border: calc(3 * var(--u)) solid currentColor; border-radius: calc(999 * var(--u)); background: transparent; font-family: var(--f-gothic); font-size: calc(28 * var(--u) * var(--font-scale)); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.shop-blocks .sb-wc-loop-qr { width: calc(200 * var(--u)); flex-shrink: 0; text-align: center; }
.shop-blocks .sb-wc-loop-qr-hint { display: block; margin-top: calc(10 * var(--u)); font-family: var(--f-aleo); font-size: calc(20 * var(--u) * var(--font-scale)); opacity: 0.8; }
/* compact */
.shop-blocks .sb-wc-loop-compact { padding-top: calc(8 * var(--u)); }
.shop-blocks .sb-wc-lm-card { position: relative; padding: calc(44 * var(--u)) calc(36 * var(--u)); overflow: hidden; border: calc(3 * var(--u)) solid var(--ink); filter: drop-shadow(calc(10 * var(--u)) calc(12 * var(--u)) 0 var(--ink)); }
.shop-blocks .sb-wc-lm-card.sb-wc-loop-flat { filter: none; }
.shop-blocks .sb-wc-lm-body { display: flex; gap: calc(32 * var(--u)); align-items: center; }
.shop-blocks .sb-wc-lm-l { flex: 1; min-width: 0; }
.shop-blocks .sb-wc-lm-kicker { font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; }
.shop-blocks .sb-wc-lm-title { margin-top: calc(10 * var(--u)); font-family: var(--f-bear); font-size: calc(48 * var(--u) * var(--font-scale)); line-height: 1.0; }
.shop-blocks .sb-wc-lm-sub { margin-top: calc(14 * var(--u)); font-family: var(--f-aleo); font-size: calc(24 * var(--u) * var(--font-scale)); line-height: 1.45; opacity: 0.8; }
.shop-blocks .sb-wc-lm-cta { margin: calc(28 * var(--u)) 0 0; display: inline-flex; align-items: center; padding: calc(18 * var(--u)) calc(36 * var(--u)); border: none; border-radius: calc(999 * var(--u)); font-family: var(--f-gothic); font-size: calc(30 * var(--u) * var(--font-scale)); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; cursor: pointer; }
.shop-blocks .sb-wc-lm-qr { width: calc(184 * var(--u)); flex-shrink: 0; text-align: center; }
.shop-blocks .sb-wc-lm-hint { display: block; margin-top: calc(10 * var(--u)); font-family: var(--f-aleo); font-size: calc(20 * var(--u) * var(--font-scale)); opacity: 0.8; line-height: 1.3; }
/* strip */
.shop-blocks .sb-wc-strip { display: flex; align-items: center; gap: calc(28 * var(--u)); padding: calc(28 * var(--u)) calc(32 * var(--u)); border-radius: calc(20 * var(--u)); }
.shop-blocks .sb-wc-strip-body { flex: 1; min-width: 0; }
.shop-blocks .sb-wc-kicker { font-family: var(--f-toni); font-size: calc(20 * var(--u) * var(--font-scale)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); }
.shop-blocks .sb-wc-strip-title { font-family: var(--f-bear); font-size: calc(36 * var(--u) * var(--font-scale)); line-height: 1.05; margin-top: calc(8 * var(--u)); }
.shop-blocks .sb-wc-strip-sub { font-family: var(--f-aleo); font-size: calc(22 * var(--u) * var(--font-scale)); opacity: 0.8; margin-top: calc(6 * var(--u)); }
.shop-blocks .sb-wc-cta { display: inline-flex; align-items: center; margin-top: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(32 * var(--u)); border: 0; border-radius: calc(999 * var(--u)); font-family: var(--f-gothic); font-size: calc(26 * var(--u) * var(--font-scale)); cursor: pointer; }
.shop-blocks .sb-wc-strip-qr { width: calc(160 * var(--u)); flex-shrink: 0; text-align: center; }
.shop-blocks .sb-wc-qr-sm { width: 100%; height: calc(150 * var(--u)); object-fit: contain; border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(12 * var(--u)); background: #fff; }
.shop-blocks .sb-wc-hint { font-family: var(--f-aleo); font-size: calc(18 * var(--u) * var(--font-scale)); opacity: 0.75; margin-top: calc(8 * var(--u)); }

/* corner radius presets (shared) */
.shop-blocks .sb-corner-sharp > .sb-greet,
.shop-blocks .sb-corner-sharp > .sb-coupon-blk,
.shop-blocks .sb-corner-sharp > .sb-voting-blk,
.shop-blocks .sb-corner-sharp > .sb-wc-blk { border-radius: 0; }
.shop-blocks .sb-corner-bold > .sb-greet,
.shop-blocks .sb-corner-bold > .sb-coupon-blk,
.shop-blocks .sb-corner-bold > .sb-voting-blk,
.shop-blocks .sb-corner-bold > .sb-wc-blk { border-radius: calc(28 * var(--u)); }

/* entrance animations (opt-in) */
@keyframes sbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sbSlideUp { from { opacity: 0; transform: translateY(calc(24 * var(--u))); } to { opacity: 1; transform: none; } }
.shop-blocks .sb-enter-fade { animation: sbFade .4s ease-out both; }
.shop-blocks .sb-enter-slide_up { animation: sbSlideUp .45s ease-out both; }

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP — the durable model (so NEW/generated blocks look right by default):

   1. Visual scale (--u) is DECOUPLED from layout width. On phones --u tracked
      the viewport (100vw/750) which, ported naively, made everything balloon on
      a monitor. On desktop --u is pinned to a fixed, slightly-larger-than-phone
      scale so type/spacing/icons stay sane no matter how wide the column is.
   2. EVERY block sits in a centered mid column (720px) by default — no block is
      ever stranded. A new block type inherits this with zero extra CSS.
   3. Grid-family + hero blocks OPT INTO a wider band and use auto-fill grids
      (repeat(auto-fill, minmax(min, 1fr))) so items reflow to fill the row and
      never orphan — works for any item count, at any width, for blocks not yet
      written.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .shop-blocks {
    --u: calc(440px / 750);   /* ~0.59: fixed visual scale, independent of width */
    max-width: 720px;         /* default mid column for all blocks */
    margin: 0 auto;
  }
  /* breakout children use 100vw; clamp the page so the scrollbar's own width
     can't introduce a horizontal scrollbar. */
  html, body { overflow-x: hidden; }

  /* Grid-family + hero blocks break out to a wider centered band. They keep the
     same --u (NO inflation — that's what used to balloon the icons/type); the
     extra width is spent on more grid columns, not bigger elements. */
  .shop-blocks .sb-blk-outer[data-block-type="product_grid"],
  .shop-blocks .sb-blk-outer[data-block-type="category_tabs"],
  .shop-blocks .sb-blk-outer[data-block-type="bundle"],
  .shop-blocks .sb-blk-outer[data-block-type="flash_sale_strip"],
  .shop-blocks .sb-blk-outer[data-block-type="hero_banner"] {
    width: 100vw;
    max-width: 1120px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Auto-fill grids — never orphan, fill the row at any width / item count. */
  .shop-blocks .sb-grid.sb-cols-1,
  .shop-blocks .sb-grid.sb-cols-2,
  .shop-blocks .sb-grid.sb-cols-3 {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .shop-blocks .sb-cat-grid,
  .shop-blocks .sb-bento-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  .shop-blocks .sb-bento-tile.sb-hero { grid-column: span 2; }
  .shop-blocks .sb-icons-cols-3,
  .shop-blocks .sb-icons-cols-4,
  .shop-blocks .sb-icons-cols-5 {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  /* hero PC handling lives in the PC-native section below */
}

/* ════════════════════════════════════════════════════════════════════════
   PC-NATIVE BLOCKS (Phase A) — blocks designed FOR the surface, not the phone
   layout widened. 3 tiers: phone <768 (app-faithful, above) · tablet 768-1023
   (simplified) · desktop >=1024 (full composition). Each PC block renders a
   canonical `.sb-*-pc` body from the renderer; the phone body is hidden >=768.
   Sizes here are FIXED px (a desktop type scale), never *var(--u), so they're
   independent of the phone scale unit.

   ① CATEGORIES — image bento (replaces 7 circles / classic tiles on desktop).
   ════════════════════════════════════════════════════════════════════════ */
.shop-blocks .sb-cat-pc { display: none; }

@media (min-width: 768px) {
  /* roomier band on desktop tiers */
  .shop-blocks .sb-blk-outer[data-block-type="category_tabs"] { max-width: 1240px; }

  /* swap phone body -> PC bento */
  .shop-blocks .sb-cat-phone { display: none; }
  .shop-blocks .sb-cat-pc { display: block; }

  /* PC head: prominent title, see-all top-right */
  .shop-blocks .sb-cattabs .sb-cat-head { margin-bottom: 28px; align-items: flex-end; }
  .shop-blocks .sb-cattabs .sb-kicker { font-size: 13px; }
  .shop-blocks .sb-cattabs .sb-ttl { font-size: 40px; }
  .shop-blocks .sb-cattabs .sb-more { font-size: 13px; }

  .shop-blocks .sb-pcbento {
    display: grid; gap: 16px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
  }
  .shop-blocks .sb-pcb-tile {
    position: relative; border-radius: 18px; overflow: hidden;
    display: flex; align-items: flex-end; padding: 20px;
    color: var(--ink); cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .shop-blocks .sb-pcb-tile.has-img { color: #fff; }
  .shop-blocks .sb-pcb-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.18); }
  .shop-blocks .sb-pcb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .shop-blocks .sb-pcb-tile.has-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 65%);
  }
  .shop-blocks .sb-pcb-cap { position: relative; z-index: 1; }
  .shop-blocks .sb-pcb-ct { font-family: var(--f-toni); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
  .shop-blocks .sb-pcb-en { font-family: var(--f-bear); font-size: 24px; line-height: 1; margin-top: 4px; }
}

/* tablet: uniform bento (no asymmetric feature tile) */
@media (min-width: 768px) and (max-width: 1023px) {
  .shop-blocks .sb-pcbento { grid-template-columns: repeat(3, 1fr); }
}

/* desktop: asymmetric bento — first tile is a 2x2 feature */
@media (min-width: 1024px) {
  .shop-blocks .sb-blk-outer[data-block-type="category_tabs"] { max-width: 1240px; }
  .shop-blocks .sb-cattabs .sb-ttl { font-size: 48px; }
  .shop-blocks .sb-pcbento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; }
  .shop-blocks .sb-pcb-tile.feat { grid-column: span 2; grid-row: span 2; }
  .shop-blocks .sb-pcb-tile.feat .sb-pcb-en { font-size: 44px; }
}

/* ② HERO — split (image + panel) / full-bleed cover banner / framed poster.
   What's possible depends on the block's content: a `split` hero has a
   headline/subtitle/CTAs to compose; a `full` hero is just media (+ optional
   CTAs). `full + cover` = photo banner; `full + contain` = poster (no crop). */
@media (min-width: 768px) {
  /* full-bleed: hero spans the whole viewport, edge to edge (no 1240 cap,
     no rounded corners at the screen edges). */
  .shop-blocks .sb-blk-outer[data-block-type="hero_banner"] { max-width: none; }
  .shop-blocks .sb-hero-full { overflow: hidden; }
  .shop-blocks .sb-hero-split { border-radius: 24px; overflow: hidden; }

  /* full + cover (photo): a real banner; CTAs overlaid bottom-left, not a stack */
  .shop-blocks .sb-hero-full.sb-hero-fit-cover { min-height: 420px; }
  .shop-blocks .sb-hero-full .sb-cta-stack {
    flex-direction: row; flex-wrap: wrap; width: auto; left: 48px; right: auto; bottom: 44px; gap: 14px;
  }
  .shop-blocks .sb-hero-full .sb-cta-btn { width: auto; padding: 16px 32px; font-size: 14px; }

  /* full + contain (poster): framed, centered, capped — never the 950px monster,
     and a min-height floor so a slow/broken image can't collapse the block. */
  .shop-blocks .sb-hero-full.sb-hero-fit-contain {
    aspect-ratio: auto !important; height: auto !important;
    min-height: 380px; max-height: 70vh;
    /* forest backdrop (not oat) so the box fills its 1240 band as a green hero
       that lines up with the greeting band below, instead of the artwork
       floating narrow on an invisible oat field. */
    background: var(--forest); display: flex; align-items: center; justify-content: center;
  }
  .shop-blocks .sb-hero-full.sb-hero-fit-contain .sb-hero-img,
  .shop-blocks .sb-hero-full.sb-hero-fit-contain .sb-hero-video {
    width: auto; height: auto; max-width: 100%; max-height: 70vh; object-fit: contain;
  }

  /* split: image one side, panel the other — fixed px type, not phone scale */
  .shop-blocks .sb-hero-split { grid-template-columns: 1.05fr .95fr; min-height: 380px; }
  .shop-blocks .sb-hero-split .sb-split-img .sb-hero-img,
  .shop-blocks .sb-hero-split .sb-split-img .sb-hero-video { width: 100%; height: 100%; object-fit: cover; }
  .shop-blocks .sb-split-panel { padding: 40px 44px; gap: 16px; justify-content: center; }
  .shop-blocks .sb-split-panel .sb-headline { font-size: 40px; line-height: 1; }
  .shop-blocks .sb-split-panel .sb-subtitle { font-size: 17px; line-height: 1.45; }
  .shop-blocks .sb-split-panel .sb-cta-stack {
    position: static; flex-direction: row; flex-wrap: wrap; width: auto; gap: 14px; margin-top: 8px;
    left: auto; right: auto; bottom: auto;
  }
  .shop-blocks .sb-split-panel .sb-cta-btn { width: auto; padding: 15px 28px; font-size: 14px; }
}

@media (min-width: 1024px) {
  .shop-blocks .sb-hero-split { min-height: 520px; }
  .shop-blocks .sb-split-panel { padding: 60px 56px; }
  .shop-blocks .sb-split-panel .sb-headline { font-size: 56px; line-height: .98; }
  .shop-blocks .sb-split-panel .sb-subtitle { font-size: 19px; }
}

/* ③ PRODUCT GRID — multi-up with hover lift + quick-view overlay (cosmetic;
   the whole card links to the product). Quick-view shows on hover, desktop only. */
.shop-blocks .sb-qadd { display: none; }
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="product_grid"] { max-width: 1240px; }
  .shop-blocks .sb-grid-block .sb-ttl { font-size: 40px; }
  .shop-blocks .sb-grid-block .sb-kicker,
  .shop-blocks .sb-grid-block .sb-more { font-size: 13px; }
  .shop-blocks .sb-card .sb-name { font-size: 18px; }
  .shop-blocks .sb-card .sb-price { font-size: 17px; }
  .shop-blocks .sb-card .sb-img { border-radius: 14px; }
}
@media (min-width: 1024px) {
  .shop-blocks .sb-blk-outer[data-block-type="product_grid"] .sb-grid.sb-cols-1,
  .shop-blocks .sb-blk-outer[data-block-type="product_grid"] .sb-grid.sb-cols-2,
  .shop-blocks .sb-blk-outer[data-block-type="product_grid"] .sb-grid.sb-cols-3 {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .shop-blocks .sb-card { transition: transform .18s ease; }
  .shop-blocks .sb-card:hover { transform: translateY(-4px); }
  .shop-blocks .sb-qadd {
    display: block; position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
    background: var(--ink); color: var(--oat); text-align: center; border-radius: 999px;
    font-family: var(--f-toni); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    font-size: 12px; padding: 11px 0; opacity: 0; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease; pointer-events: none;
  }
  .shop-blocks .sb-card:hover .sb-qadd { opacity: 1; transform: none; }
}

/* ④ GREETING — LIGHT PASS ONLY. The full PC "member banner" (name + points
   card + reward progress) needs account data that doesn't exist until Phase 2
   (web logins); on the public site greeting renders just a generic line. So we
   only size it comfortably on desktop — no forced full-width empty band. The
   rich banner ships with accounts. */
@media (min-width: 768px) {
  /* greeting is full-bleed too (matches the full-bleed hero above it = one
     cohesive green header), but its inner content stays aligned to the central
     1240 column so the headline lines up with the rest of the page. */
  .shop-blocks .sb-blk-outer[data-block-type="greeting"] {
    width: 100vw; max-width: none; position: relative; left: 50%; transform: translateX(-50%);
  }
  /* inset to a 1188 column so the headline lines up with the band blocks'
     inner content (1240 band minus their ~26px inner padding). */
  .shop-blocks .sb-greet-classic,
  .shop-blocks .sb-greet-wallet,
  .shop-blocks .sb-greet-coin {
    padding-top: 48px; padding-bottom: 48px;
    padding-left: max(56px, calc((100vw - 1188px) / 2));
    padding-right: max(56px, calc((100vw - 1188px) / 2));
  }
  .shop-blocks .sb-greet,
  .shop-blocks .sb-greet-inline {
    margin: 0; padding-top: 40px; padding-bottom: 40px;
    padding-left: max(56px, calc((100vw - 1188px) / 2));
    padding-right: max(56px, calc((100vw - 1188px) / 2));
  }
}
@media (min-width: 1024px) {
  .shop-blocks .sb-gr-headline { font-size: 44px; }
  .shop-blocks .sb-greet-classic .sb-grd-head,
  .shop-blocks .sb-greet-wallet .sb-grd-head,
  .shop-blocks .sb-greet-coin .sb-grd-head { font-size: 48px; }
}

/* ⑤ RECIPE / EDITORIAL — magazine side-by-side (image | text), fixed-px type.
   Markup is image + body siblings, so CSS lays them out as 2 columns. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] {
    width: 100vw; max-width: 1240px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-recipe-blk {
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
    margin: 0; border: 2px solid var(--ink); border-radius: 20px; overflow: hidden;
  }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-img {
    width: 100%; height: 100%; aspect-ratio: auto; min-height: 380px;
  }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-body {
    padding: 44px 48px; display: flex; flex-direction: column; justify-content: center;
  }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-kicker { font-size: 13px; }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-headline { font-size: 38px; line-height: 1.04; margin-top: 8px; }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-meta { font-size: 14px; }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-para { font-size: 16px; line-height: 1.6; }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-card-name { font-size: 18px; }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-card-tag { font-size: 14px; }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-card-price { font-size: 17px; }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-card-img { width: 96px; height: 96px; }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-cta { font-size: 14px; }
}
@media (min-width: 1024px) {
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-body { padding: 56px 60px; }
  .shop-blocks .sb-blk-outer[data-block-type="recipe_story"] .sb-rcp-headline { font-size: 46px; }
}

/* ⑥ COUPON — a COMPACT centered ticket (a coupon is a small object, not a
   full-width bar). Content is grouped/centered so there's no empty middle. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="coupon_block"] {
    width: 100vw; max-width: 680px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-coupon-blk { margin: 0; padding: 30px 40px; border-radius: 18px; gap: 28px; justify-content: center; }
  .shop-blocks .sb-cp-body { flex: 0 1 auto; }      /* don't stretch -> no empty gap */
  .shop-blocks .sb-cp-big { font-size: 48px; }
  .shop-blocks .sb-cp-kicker { font-size: 13px; }
  .shop-blocks .sb-cp-title { font-size: 21px; }
  .shop-blocks .sb-cp-sub { font-size: 15px; }
  .shop-blocks .sb-cp-cta { padding: 16px 28px; font-size: 14px; }
}

/* ⑦ NOTIFICATION BAR — a contained centered notice, fixed-px (never full-bleed). */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="notification_bar"] {
    width: 100vw; max-width: 1040px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-nbar-text { font-size: 16px; }
  .shop-blocks .sb-nbar-icon { font-size: 20px; }
  .shop-blocks .sb-nbar-banner .sb-nbar-text { font-size: 18px; }
}

/* ⑧ REMAINING HOMEPAGE BLOCKS — consistent band + fixed-px (de-stretched).
   Contained card/text blocks (review, voting, wecom) centre in a reading band
   so they read as an intentional symmetric inset next to the wide 1240 blocks;
   flash & bundle join the 1240 band. (Deeper per-view art-direction can follow
   once these can be eyeballed live.) */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="review_card"],
  .shop-blocks .sb-blk-outer[data-block-type="voting_block"] {
    width: 100vw; max-width: 880px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-blk-outer[data-block-type="wecom_contact"] {
    width: 100vw; max-width: 900px; position: relative; left: 50%; transform: translateX(-50%);
  }
  /* group copy + QR toward the centre (was edge-to-edge with an empty middle) */
  .shop-blocks .sb-wc-lm-body { justify-content: center; gap: 56px; }
  .shop-blocks .sb-wc-lm-l { flex: 0 1 auto; max-width: 540px; }
  .shop-blocks .sb-wc-loop-foot { justify-content: space-between; }
  .shop-blocks .sb-blk-outer[data-block-type="bundle"],
  .shop-blocks .sb-blk-outer[data-block-type="flash_sale_strip"] {
    width: 100vw; max-width: 1240px; position: relative; left: 50%; transform: translateX(-50%);
  }
  /* review */
  .shop-blocks .sb-rv-quote { font-size: 22px; line-height: 1.5; }
  .shop-blocks .sb-rv-name { font-size: 18px; }
  .shop-blocks .sb-spot-title { font-size: 34px; }
  /* voting */
  .shop-blocks .sb-vb-title,
  .shop-blocks .sb-vb-q { font-size: 28px; }
  .shop-blocks .sb-vb-opt-label { font-size: 18px; }
  /* wecom */
  .shop-blocks .sb-wc-loop-title,
  .shop-blocks .sb-wc-lm-title,
  .shop-blocks .sb-wc-strip-title { font-size: 30px; }
  .shop-blocks .sb-wc-loop-sub,
  .shop-blocks .sb-wc-lm-sub,
  .shop-blocks .sb-wc-strip-sub { font-size: 16px; }
  /* flash */
  .shop-blocks .sb-fs-title { font-size: 32px; }
  .shop-blocks .sb-fsd-tile-num { font-size: 30px; }
  .shop-blocks .sb-fsd-name { font-size: 17px; }
}
@media (min-width: 1024px) {
  .shop-blocks .sb-rv-quote { font-size: 26px; }
  .shop-blocks .sb-vb-title,
  .shop-blocks .sb-vb-q { font-size: 32px; }
}

/* ⑨ FLASH SALE (design view) — centre the product cards under the centred
   header instead of clustering them bottom-left in empty space. */
@media (min-width: 768px) {
  .shop-blocks .sb-fsd-cards { justify-content: center; flex-wrap: wrap; }
  .shop-blocks .sb-fsd-card { flex: 0 0 240px; width: 240px; }
  .shop-blocks .sb-fs-cards { justify-content: center; flex-wrap: wrap; }
}

/* ⑩ BUNDLE — 2-column on desktop: products on the left, a price + ADD BUNDLE
   summary panel on the right (was products-left / CTA-right with an empty gap). */
@media (min-width: 1024px) {
  .shop-blocks .sb-bun-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 44px; align-items: start;
  }
  .shop-blocks .sb-bun-kicker,
  .shop-blocks .sb-bun-pills-scroll,
  .shop-blocks .sb-bun-title,
  .shop-blocks .sb-bun-sub,
  .shop-blocks .sb-bun-cards { grid-column: 1; }
  .shop-blocks .sb-bun-foot {
    grid-column: 2; grid-row: 1 / span 10; align-self: center;
    flex-direction: column; align-items: flex-start; gap: 16px;
    padding-left: 36px; border-left: 2px solid rgba(0,0,0,.12);
  }
}

/* ── ANNOUNCEMENT BAR (ported from block-renderer.sb-wxss 3-90) ── */
/* ── Announcement bar ─────────────────────────────────────────────────── */
.shop-blocks .sb-announce {
  padding: calc(20 * var(--u)) calc(32 * var(--u));
  font-family: var(--f-toni);
  font-size: calc(calc(24 * var(--u)) * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  overflow: hidden;
}
.shop-blocks .sb-announce-linked {
  display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u));
}
.shop-blocks .sb-announce-chev {
  font-size: calc(calc(28 * var(--u)) * var(--font-scale));
  opacity: 0.75;
  line-height: 1;
}

/* ── Announcement animations ──────────────────────────────────────────── */
/* Marquee — horizontal scroll. Track is 2× the text (padded first copy +
   bare second copy) so translateX(-50%) loops seamlessly. */
.shop-blocks .sb-announce.sb-anim-marquee_rtl,
.shop-blocks .sb-announce.sb-anim-marquee_ltr { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); }
.shop-blocks .sb-announce .sb-anim-clip { flex: 1; min-width: 0; overflow: hidden; }
.shop-blocks .sb-announce .sb-anim-track { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform; }
.shop-blocks .sb-announce .sb-anim-track > .sb-announce-text:first-child { padding-right: calc(96 * var(--u)); }
.shop-blocks .sb-announce.sb-anim-marquee_rtl .sb-anim-track { animation: sb-a-marquee-rtl var(--anim-dur, 14s) linear infinite; }
.shop-blocks .sb-announce.sb-anim-marquee_ltr .sb-anim-track { animation: sb-a-marquee-ltr var(--anim-dur, 14s) linear infinite; }
@keyframes sb-a-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sb-a-marquee-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Vertical scroll — fixed-height clip with 2 stacked copies. */
.shop-blocks .sb-announce.sb-anim-scroll_up,
.shop-blocks .sb-announce.sb-anim-scroll_down { padding: 0 calc(32 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); }
.shop-blocks .sb-announce .sb-anim-vclip { height: calc(64 * var(--u)); overflow: hidden; }
.shop-blocks .sb-announce .sb-anim-vtrack { display: flex; flex-direction: column; align-items: center; line-height: calc(64 * var(--u)); }
.shop-blocks .sb-announce.sb-anim-scroll_up .sb-anim-vtrack   { animation: sb-a-scroll-up var(--anim-dur, 14s) linear infinite; }
.shop-blocks .sb-announce.sb-anim-scroll_down .sb-anim-vtrack { animation: sb-a-scroll-down var(--anim-dur, 14s) linear infinite; }
@keyframes sb-a-scroll-up   { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes sb-a-scroll-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* Per-letter — stagger via inline --i */
.shop-blocks .sb-announce .sb-letters { display: inline-block; }
.shop-blocks .sb-announce .sb-letters .sb-ch { display: inline-block; }
.shop-blocks .sb-announce.sb-anim-typewriter .sb-letters .sb-ch {
  opacity: 0;
  animation: sb-a-type-in var(--anim-dur, 6s) infinite;
  animation-delay: calc(var(--i) * var(--step, 0.08s));
}
@keyframes sb-a-type-in { 0%, 100% { opacity: 0; } 8%, 92% { opacity: 1; } }
.shop-blocks .sb-announce.sb-anim-fade_in_letters .sb-letters .sb-ch {
  opacity: 0;
  animation: sb-a-fade-in var(--anim-dur, 5s) infinite;
  animation-delay: calc(var(--i) * var(--step, 0.06s));
}
@keyframes sb-a-fade-in { 0%, 100% { opacity: 0; } 25%, 80% { opacity: 1; } }
.shop-blocks .sb-announce.sb-anim-wave .sb-letters .sb-ch {
  animation: sb-a-wave var(--anim-dur, 2.2s) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--step, 0.07s));
}
@keyframes sb-a-wave { 0%, 60%, 100% { transform: translateY(0); } 25% { transform: translateY(calc(-8 * var(--u))); } }

.shop-blocks /* Flicker — whole-text neon flicker, no per-letter split */
.shop-blocks .sb-announce.sb-anim-flicker { animation: sb-a-flicker var(--anim-dur, 2.4s) infinite; }
@keyframes sb-a-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; text-shadow: 0 0 calc(8 * var(--u)) currentColor; }
  20%, 24%, 55% { opacity: 0.35; text-shadow: none; }
}

/* Speed presets — override --anim-dur (overall) and --step (per-letter delay).
   Per-letter animations want shorter total durations so the cycle doesn't drag. */
.shop-blocks .sb-announce.sb-speed-slow   { --anim-dur: 22s; --step: 0.12s; }
.shop-blocks .sb-announce.sb-speed-normal { --anim-dur: 14s; --step: 0.08s; }
.shop-blocks .sb-announce.sb-speed-fast   { --anim-dur: 8s;  --step: 0.05s; }
.shop-blocks .sb-announce.sb-anim-typewriter.sb-speed-slow   { --anim-dur: 9s; }
.shop-blocks .sb-announce.sb-anim-typewriter.sb-speed-normal { --anim-dur: 6s; }
.shop-blocks .sb-announce.sb-anim-typewriter.sb-speed-fast   { --anim-dur: 3.5s; }
.shop-blocks .sb-announce.sb-anim-fade_in_letters.sb-speed-slow   { --anim-dur: 7s; }
.shop-blocks .sb-announce.sb-anim-fade_in_letters.sb-speed-normal { --anim-dur: 5s; }
.shop-blocks .sb-announce.sb-anim-fade_in_letters.sb-speed-fast   { --anim-dur: 3s; }
.shop-blocks .sb-announce.sb-anim-wave.sb-speed-slow   { --anim-dur: 3.4s; }
.shop-blocks .sb-announce.sb-anim-wave.sb-speed-normal { --anim-dur: 2.2s; }
.shop-blocks .sb-announce.sb-anim-wave.sb-speed-fast   { --anim-dur: 1.3s; }
.shop-blocks .sb-announce.sb-anim-flicker.sb-speed-slow   { --anim-dur: 3.6s; }
.shop-blocks .sb-announce.sb-anim-flicker.sb-speed-normal { --anim-dur: 2.4s; }
.shop-blocks .sb-announce.sb-anim-flicker.sb-speed-fast   { --anim-dur: 1.4s; }


/* ── FEATURED ITEM (ported from block-renderer.sb-wxss 466-565) ── */
/* ── Featured item ────────────────────────────────────────────────────── */
/* Three layouts (driven by CMS `view`):
   • card    — square image on top, kicker / name / price stacked below
   • split   — image left, copy right (legacy default)
   • banner  — wide image with copy floated bottom-left on top of it
   Card surface (`background:{...}` inline) + text colour come from
   `card_bg_color` / `card_fg_color`; the outer block bg comes from
   `bg_color` (transparent by default). */
.shop-blocks .sb-featured { padding: 0 calc(44 * var(--u)); }
.shop-blocks .sb-featured .sb-ft-card {
  padding: calc(36 * var(--u));
  border-radius: calc(4 * var(--u));
  overflow: hidden;
}
.shop-blocks .sb-featured .sb-ft-img { background: rgba(0,0,0,.15); overflow: hidden; border-radius: calc(4 * var(--u)); }
.shop-blocks .sb-featured .sb-img-full { width: 100%; height: 100%; }
.shop-blocks .sb-featured .sb-ft-meta { min-width: 0; }
.shop-blocks .sb-featured .sb-ft-kicker {
  font-family: var(--f-toni);
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.14em;
  /* Card-fg via inline style; fall back to lime if unspecified */
}
.shop-blocks .sb-featured .sb-ft-name {
  font-family: var(--f-bear);
  font-size: calc(calc(40 * var(--u)) * var(--font-scale));
  font-weight: 500;
  line-height: 1.05;
  margin-top: calc(8 * var(--u));
}
.shop-blocks .sb-featured .sb-ft-price {
  font-family: var(--f-gothic);
  font-size: calc(calc(36 * var(--u)) * var(--font-scale));
  font-weight: 600;
  letter-spacing: 0.04em;
}
.shop-blocks .sb-featured .sb-ft-price.sb-ft-flash { color: #FF8FA1; }
.shop-blocks .sb-featured .sb-ft-price-row {
  display: flex;
  align-items: baseline;
  gap: calc(14 * var(--u));
  margin-top: calc(12 * var(--u));
}
.shop-blocks .sb-featured .sb-ft-price-was {
  font-family: var(--f-aleo);
  font-size: calc(calc(24 * var(--u)) * var(--font-scale));
  text-decoration: line-through;
}
.shop-blocks .sb-featured .sb-ft-empty {
  color: rgba(0, 0, 0, 0.3);
  text-align: center;
  padding: calc(40 * var(--u)) 0;
  font-size: calc(calc(24 * var(--u)) * var(--font-scale));
}

.shop-blocks /* CARD view — image on top, copy below. */
.shop-blocks .sb-featured-view-card .sb-ft-card {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
.shop-blocks .sb-featured-view-card .sb-ft-img { width: 100%; height: calc(420 * var(--u)); }
.shop-blocks .sb-featured-view-card .sb-ft-meta { width: 100%; }

.shop-blocks /* SPLIT view (legacy default) — image left, copy right. */
.shop-blocks .sb-featured-view-split .sb-ft-card {
  display: flex;
  gap: calc(32 * var(--u));
  align-items: center;
}
.shop-blocks .sb-featured-view-split .sb-ft-img {
  width: calc(168 * var(--u));
  height: calc(208 * var(--u));
  flex-shrink: 0;
}
.shop-blocks .sb-featured-view-split .sb-ft-meta { flex: 1; }

/* BANNER view — wide image with copy floated bottom-left as an overlay. */
.shop-blocks .sb-featured-view-banner .sb-ft-card {
  position: relative;
  padding: 0;
  min-height: calc(360 * var(--u));
}
.shop-blocks .sb-featured-view-banner .sb-ft-img {
  width: 100%;
  height: calc(360 * var(--u));
  border-radius: calc(4 * var(--u));
}
.shop-blocks .sb-featured-view-banner .sb-ft-meta {
  position: absolute;
  left: calc(32 * var(--u));
  right: calc(32 * var(--u));
  bottom: calc(28 * var(--u));
  padding: calc(18 * var(--u)) calc(22 * var(--u));
  background: rgba(0, 0, 0, 0.4);
  border-radius: calc(4 * var(--u));
  backdrop-filter: blur(calc(8 * var(--u)));
}


/* ── COUNTDOWN TIMER (ported from block-renderer.sb-wxss 1069-1143) ── */
/* ── Countdown timer (flash-sale / 秒杀) ─────────────────────────────── */
.shop-blocks .sb-countdown {
  padding: calc(40 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u));
  text-align: center;
}
.shop-blocks .sb-cd-kicker {
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  letter-spacing: 0.18em;
  opacity: 0.75;
  text-transform: uppercase;
}
.shop-blocks .sb-cd-title {
  font-family: var(--f-bear);
  font-weight: 500;
  font-size: calc(calc(36 * var(--u)) * var(--font-scale));
  line-height: 1.15;
  margin-top: calc(8 * var(--u));
}
.shop-blocks .sb-cd-clock {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  margin-top: calc(24 * var(--u));
}
.shop-blocks .sb-cd-cell {
  min-width: calc(96 * var(--u));
  padding: calc(16 * var(--u)) calc(8 * var(--u));
  background: rgba(255, 255, 255, 0.12);
  border-radius: calc(12 * var(--u));
}
.shop-blocks .sb-cd-num {
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: calc(calc(44 * var(--u)) * var(--font-scale));
  letter-spacing: 0.04em;
  line-height: 1;
}
.shop-blocks .sb-cd-lbl {
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(16 * var(--u)) * var(--font-scale));
  letter-spacing: 0.14em;
  margin-top: calc(8 * var(--u));
  opacity: 0.7;
}
.shop-blocks .sb-cd-sep {
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: calc(calc(44 * var(--u)) * var(--font-scale));
  line-height: 1;
  padding-top: calc(16 * var(--u));
  opacity: 0.55;
}
.shop-blocks .sb-cd-cta {
  display: inline-block;
  margin-top: calc(28 * var(--u));
  padding: calc(18 * var(--u)) calc(44 * var(--u));
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  letter-spacing: 0.16em;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a17;
  border-radius: calc(999 * var(--u));
}
.shop-blocks .sb-cd-ended {
  margin-top: calc(32 * var(--u));
  font-family: var(--f-aleo);
  font-size: calc(calc(26 * var(--u)) * var(--font-scale));
  opacity: 0.8;
}


/* ── POINTS WIDGET (ported from block-renderer.sb-wxss 1639-1693) ── */
/* ── Points widget ────────────────────────────────────────────────────── */
.shop-blocks .sb-points-blk {
  padding: calc(40 * var(--u)) calc(36 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
}
.shop-blocks .sb-pt-star {
  flex: 0 0 calc(100 * var(--u));
  height: calc(100 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-blocks .sb-pt-star-glyph {
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: calc(calc(56 * var(--u)) * var(--font-scale));
  line-height: 1;
}
.shop-blocks .sb-pt-body { flex: 1; min-width: 0; }
.shop-blocks .sb-pt-kicker {
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  letter-spacing: 0.14em;
  opacity: 0.85;
}
.shop-blocks .sb-pt-title {
  font-family: var(--f-bear);
  font-weight: 500;
  font-size: calc(calc(32 * var(--u)) * var(--font-scale));
  line-height: 1.15;
  margin-top: calc(4 * var(--u));
}
.shop-blocks .sb-pt-sub {
  font-family: var(--f-aleo);
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
  margin-top: calc(8 * var(--u));
  opacity: 0.85;
}
.shop-blocks .sb-pt-cta {
  flex: 0 0 auto;
  padding: calc(14 * var(--u)) calc(28 * var(--u));
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  letter-spacing: 0.14em;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a17;
  border-radius: calc(999 * var(--u));
}


/* ── TOP UP (ported from block-renderer.sb-wxss 1694-1944) ── */
/* ── Top up (tier teaser — A card row · B receipt · C hero+strip) ─────── */
.shop-blocks .sb-topup-blk {
  padding: calc(36 * var(--u)) 0;
  border-top: calc(3 * var(--u)) solid rgba(26, 26, 23, 0.14);
  border-bottom: calc(3 * var(--u)) solid rgba(26, 26, 23, 0.14);
}
.shop-blocks .sb-tu-head { padding: 0 calc(36 * var(--u)); }
.shop-blocks .sb-tu-kicker {
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
  letter-spacing: 0.18em;
  color: var(--olive);
}
.shop-blocks .sb-tu-title {
  font-family: var(--f-bear);
  font-weight: 700;
  font-size: calc(calc(46 * var(--u)) * var(--font-scale));
  line-height: 1.04;
  margin-top: calc(10 * var(--u));
  letter-spacing: -0.01em;
}
.shop-blocks .sb-tu-hl {
  background: var(--tu-accent, var(--lime));
  color: var(--ink);
  padding: 0 calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
}

/* shared card paint + content bits */
.shop-blocks .sb-tu-card--cream { background: #FFFCF7; }
.shop-blocks .sb-tu-card--amber { background: var(--papaya); }
.shop-blocks .sb-tu-card--ink   { background: var(--ink); color: #fff; }
.shop-blocks .sb-tu-num {
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: calc(calc(21 * var(--u)) * var(--font-scale));
  letter-spacing: 0.06em;
  color: var(--olive);
}
.shop-blocks .sb-tu-card--ink .sb-tu-num,
.shop-blocks .sb-tu-hero .sb-tu-num { color: var(--tu-accent, var(--lime)); }
.shop-blocks .sb-tu-amt {
  font-family: var(--f-bear);
  font-weight: 700;
  font-size: calc(calc(64 * var(--u)) * var(--font-scale));
  line-height: 0.86;
  margin-top: calc(12 * var(--u));
  letter-spacing: -0.02em;
}
.shop-blocks .sb-tu-pts {
  display: inline-block;
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: calc(calc(24 * var(--u)) * var(--font-scale));
  letter-spacing: 0.04em;
  background: var(--ink);
  color: var(--tu-accent, var(--lime));
  padding: calc(7 * var(--u)) calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
}
.shop-blocks .sb-tu-card--ink .sb-tu-pts,
.shop-blocks .sb-tu-hero .sb-tu-pts { background: var(--tu-accent, var(--lime)); color: var(--ink); }
.shop-blocks .sb-tu-meta {
  font-family: var(--f-toni);
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  letter-spacing: 0.02em;
  color: var(--olive);
  white-space: nowrap;
}
.shop-blocks .sb-tu-card--ink .sb-tu-meta,
.shop-blocks .sb-tu-hero .sb-tu-meta { color: rgba(255, 255, 255, 0.62); }
.shop-blocks .sb-tu-best {
  position: absolute;
  top: calc(-18 * var(--u));
  right: calc(-10 * var(--u));
  transform: rotate(6deg);
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: calc(calc(19 * var(--u)) * var(--font-scale));
  letter-spacing: 0.04em;
  background: var(--berry);
  color: #fff;
  padding: calc(7 * var(--u)) calc(16 * var(--u));
  border: calc(3 * var(--u)) solid var(--ink);
  box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 var(--ink);
  white-space: nowrap;
  z-index: 2;
}

/* link-out row (A + B) — block links out to the full Top-up page */
.shop-blocks .sb-tu-linkout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  padding: calc(28 * var(--u)) calc(36 * var(--u)) 0;
}
.shop-blocks .sb-tu-sub {
  font-family: var(--f-toni);
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
  color: rgba(26, 26, 23, 0.62);
}
.shop-blocks .sb-tu-cta {
  flex: 0 0 auto;
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: calc(calc(28 * var(--u)) * var(--font-scale));
  letter-spacing: 0.04em;
  background: var(--ink);
  color: var(--tu-accent, var(--lime));
  padding: calc(20 * var(--u)) calc(36 * var(--u));
  border-radius: calc(4 * var(--u));
}

.shop-blocks /* A · card row — swipeable, ink best-value card peeks to signal scroll */
.shop-blocks .sb-tu-row {
  display: flex;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  padding: calc(38 * var(--u)) calc(36 * var(--u)) calc(18 * var(--u));
}
.shop-blocks .sb-tu-row .sb-tu-card {
  flex: 0 0 auto;
  width: calc(300 * var(--u));
  box-sizing: border-box;
  position: relative;
  margin-right: calc(24 * var(--u));
  background-clip: padding-box;
  border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(4 * var(--u));
  box-shadow: calc(6 * var(--u)) calc(6 * var(--u)) 0 var(--ink);
  padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u));
}
.shop-blocks .sb-tu-row .sb-tu-card:last-child { margin-right: 0; }
.shop-blocks .sb-tu-row .sb-tu-pts { margin-top: calc(22 * var(--u)); }
.shop-blocks .sb-tu-row .sb-tu-meta { margin-top: calc(22 * var(--u)); }

.shop-blocks /* B · receipt list — full-bleed bands, perforated dashed dividers */
.shop-blocks .sb-tu-receipt {
  margin: calc(30 * var(--u)) calc(36 * var(--u)) 0;
  border-top: calc(4 * var(--u)) solid var(--ink);
  border-bottom: calc(4 * var(--u)) solid var(--ink);
}
.shop-blocks .sb-tu-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(28 * var(--u)) calc(28 * var(--u));
}
.shop-blocks .sb-tu-band + .sb-tu-band { border-top: calc(3 * var(--u)) dashed rgba(26, 26, 23, 0.26); }
.shop-blocks .sb-tu-notch {
  position: absolute;
  top: 50%;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  background: var(--tu-bg, var(--oat));
  transform: translateY(-50%);
}
.shop-blocks .sb-tu-notch--l { left: calc(-13 * var(--u)); }
.shop-blocks .sb-tu-notch--r { right: calc(-13 * var(--u)); }
.shop-blocks .sb-tu-band-l { display: flex; flex-direction: column; }
.shop-blocks .sb-tu-band .sb-tu-amt {
  font-size: calc(calc(58 * var(--u)) * var(--font-scale));
  margin-top: calc(6 * var(--u));
  line-height: 0.9;
}
.shop-blocks .sb-tu-band-r {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(12 * var(--u));
}
.shop-blocks .sb-tu-best--band { top: calc(-46 * var(--u)); right: calc(-4 * var(--u)); }

/* C · hero tier + strip — push one best-value pack big */
.shop-blocks .sb-tu-hero {
  position: relative;
  margin: calc(30 * var(--u)) calc(36 * var(--u)) 0;
  background: var(--ink);
  color: #fff;
  border: calc(4 * var(--u)) solid var(--ink);
  box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--ink);
  border-radius: calc(4 * var(--u));
  padding: calc(30 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));
}
.shop-blocks .sb-tu-best--hero { top: calc(-18 * var(--u)); right: calc(28 * var(--u)); }
.shop-blocks .sb-tu-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.shop-blocks .sb-tu-amt--hero {
  font-size: calc(calc(96 * var(--u)) * var(--font-scale));
  line-height: 0.82;
  margin-top: calc(12 * var(--u));
  letter-spacing: -0.03em;
}
.shop-blocks .sb-tu-hero-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(16 * var(--u));
  padding-top: calc(8 * var(--u));
}
.shop-blocks .sb-tu-hero-cta {
  margin-top: calc(28 * var(--u));
  text-align: center;
  background: var(--tu-accent, var(--lime));
  color: var(--ink);
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: calc(calc(30 * var(--u)) * var(--font-scale));
  letter-spacing: 0.04em;
  padding: calc(22 * var(--u)) 0;
  border-radius: calc(4 * var(--u));
}
.shop-blocks .sb-tu-strip {
  display: flex;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  padding: calc(26 * var(--u)) calc(36 * var(--u)) calc(4 * var(--u));
}
.shop-blocks .sb-tu-strip .sb-tu-chipcard {
  flex: 0 0 auto;
  width: calc(224 * var(--u));
  box-sizing: border-box;
  margin-right: calc(20 * var(--u));
  border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(4 * var(--u));
  padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u));
}
.shop-blocks .sb-tu-strip .sb-tu-chipcard:last-child { margin-right: 0; }
.shop-blocks .sb-tu-amt--sm {
  font-size: calc(calc(48 * var(--u)) * var(--font-scale));
  margin-top: calc(8 * var(--u));
}
.shop-blocks .sb-tu-pts--sm {
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  margin-top: calc(14 * var(--u));
}
.shop-blocks .sb-tu-meta--sm {
  margin-top: calc(12 * var(--u));
  font-size: calc(calc(16 * var(--u)) * var(--font-scale));
}


/* ── STORE INFO (ported from block-renderer.sb-wxss 2166-2244) ── */
/* ── Store info ───────────────────────────────────────────────────────── */
.shop-blocks .sb-store-blk {
  margin: 0 calc(36 * var(--u));
  padding: calc(36 * var(--u)) calc(36 * var(--u)) calc(40 * var(--u));
  border-radius: calc(12 * var(--u));
}
.shop-blocks .sb-st-kicker {
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  letter-spacing: 0.14em;
  opacity: 0.8;
}
.shop-blocks .sb-st-title {
  font-family: var(--f-bear);
  font-weight: 500;
  font-size: calc(calc(34 * var(--u)) * var(--font-scale));
  line-height: 1.15;
  margin-top: calc(10 * var(--u));
}
.shop-blocks .sb-st-row {
  margin-top: calc(18 * var(--u));
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--u));
}
.shop-blocks .sb-st-icon {
  font-size: calc(calc(24 * var(--u)) * var(--font-scale));
  line-height: 1.4;
  opacity: 0.85;
}
.shop-blocks .sb-st-val {
  flex: 1;
  font-family: var(--f-aleo);
  font-size: calc(calc(24 * var(--u)) * var(--font-scale));
  line-height: 1.4;
}
.shop-blocks .sb-st-phone {
  text-decoration: underline;
}
.shop-blocks .sb-st-cta {
  display: inline-block;
  margin-top: calc(24 * var(--u));
  padding: calc(14 * var(--u)) calc(28 * var(--u));
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  letter-spacing: 0.14em;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a17;
  border-radius: calc(8 * var(--u));
}
.shop-blocks .sb-st-cards { display: flex; flex-direction: column; }
.shop-blocks .sb-st-card + .sb-st-card {
  margin-top: calc(24 * var(--u));
  padding-top: calc(24 * var(--u));
  border-top: calc(1 * var(--u)) solid rgba(0, 0, 0, 0.08);
}
.shop-blocks .sb-st-status {
  margin-top: calc(14 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-family: var(--f-aleo);
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
}
.shop-blocks .sb-st-dot {
  width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%;
  box-shadow: 0 0 0 calc(6 * var(--u)) rgba(255, 255, 255, 0.25);
}
.shop-blocks .sb-st-status-lbl { font-weight: 600; }
.shop-blocks .sb-st-hours { opacity: 0.7; }
.shop-blocks .sb-st-eta {
  margin-top: calc(6 * var(--u));
  font-family: var(--f-aleo);
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  opacity: 0.8;
}


/* ── AFFILIATE (ported from block-renderer.sb-wxss 2454-2812) ── */
/* ─── Affiliate block ─────────────────────────────────────────── */
.shop-blocks .sb-aff-blk {
  margin: 0 calc(36 * var(--u));
  padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(28 * var(--u));
  border-radius: calc(8 * var(--u));
}
.shop-blocks .sb-aff-head { margin-bottom: calc(22 * var(--u)); }
.shop-blocks .sb-aff-kicker {
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  letter-spacing: 0.22em;
  opacity: 0.7;
}
.shop-blocks .sb-aff-title {
  font-family: var(--f-bear);
  font-weight: 500;
  font-size: calc(calc(40 * var(--u)) * var(--font-scale));
  line-height: 1.0;
  padding-top: calc(4 * var(--u));
  margin-top: calc(6 * var(--u));
  letter-spacing: -0.01em;
  margin-top: calc(6 * var(--u));
}
.shop-blocks .sb-aff-sub {
  font-family: var(--f-aleo);
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
  line-height: 1.4;
  margin-top: calc(12 * var(--u));
  opacity: 0.85;
}
.shop-blocks .sb-aff-code-row {
  display: flex;
  align-items: stretch;
  gap: calc(12 * var(--u));
}
.shop-blocks .sb-aff-code-pill {
  flex: 1;
  background: rgba(0,0,0,0.08);
  border: calc(2 * var(--u)) solid var(--ink);
  padding: calc(14 * var(--u)) calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.shop-blocks .sb-aff-code-lbl {
  display: block;
  font-family: var(--f-toni);
  font-size: calc(calc(16 * var(--u)) * var(--font-scale));
  letter-spacing: 0.22em;
  opacity: 0.7;
}
.shop-blocks .sb-aff-code-val {
  display: block;
  font-family: var(--f-bear);
  font-size: calc(calc(34 * var(--u)) * var(--font-scale));
  line-height: 1;
  letter-spacing: -0.01em;
  margin-top: calc(4 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-blocks .sb-aff-copy {
  background: var(--ink);
  color: #fff;
  padding: 0 calc(24 * var(--u));
  font-family: var(--f-gothic);
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}
.shop-blocks .sb-aff-actions {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin-top: calc(18 * var(--u));
}
.shop-blocks .sb-aff-share {
  flex: 0 0 auto;
  background: #1AAD19;
  color: #fff;
  font-family: var(--f-gothic);
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
  letter-spacing: 0.12em;
  padding: calc(12 * var(--u)) calc(26 * var(--u));
  border: calc(2 * var(--u)) solid var(--ink);
  border-radius: 0;
  line-height: 1.4;
  text-transform: uppercase;
}
.shop-blocks .sb-aff-share::after { border: none; }
.shop-blocks .sb-aff-stats {
  flex: 1;
  font-family: var(--f-toni);
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  letter-spacing: 0.08em;
  opacity: 0.7;
  text-align: right;
}
.shop-blocks .sb-aff-signin {
  font-family: var(--f-toni);
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  letter-spacing: 0.12em;
  padding: calc(16 * var(--u)) calc(20 * var(--u));
  background: rgba(0,0,0,0.08);
  border: calc(2 * var(--u)) dashed var(--ink);
  text-align: center;
}
.shop-blocks .sb-aff-disabled {
  font-family: var(--f-aleo);
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
  padding: calc(18 * var(--u)) calc(20 * var(--u));
  border: calc(2 * var(--u)) dashed var(--ink);
  text-align: center;
  opacity: 0.7;
}

/* ─── Affiliate · STRIP view (compact horizontal) ─── */
.shop-blocks .sb-aff-strip {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(20 * var(--u)) calc(24 * var(--u));
}
.shop-blocks .sb-aff-strip-left { flex: 1; min-width: 0; }
.shop-blocks .sb-aff-strip-kicker {
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(16 * var(--u)) * var(--font-scale));
  letter-spacing: 0.22em;
  opacity: 0.7;
}
.shop-blocks .sb-aff-strip-code-row {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
  margin-top: calc(4 * var(--u));
  min-width: 0;
}
.shop-blocks .sb-aff-strip-code {
  font-family: var(--f-bear);
  font-size: calc(calc(30 * var(--u)) * var(--font-scale));
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-blocks .sb-aff-strip-stats {
  font-family: var(--f-toni);
  font-size: calc(calc(16 * var(--u)) * var(--font-scale));
  letter-spacing: 0.08em;
  opacity: 0.6;
  white-space: nowrap;
}
.shop-blocks .sb-aff-strip-copy,
.shop-blocks .sb-aff-strip-share,
.shop-blocks .sb-aff-strip-cta {
  flex: 0 0 auto;
  background: var(--ink);
  color: #fff;
  padding: calc(12 * var(--u)) calc(18 * var(--u));
  font-family: var(--f-gothic);
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  letter-spacing: 0.1em;
  border: none;
  border-radius: 0;
  line-height: 1.2;
  text-transform: uppercase;
}
.shop-blocks .sb-aff-strip-share { background: #1AAD19; }
.shop-blocks .sb-aff-strip-share::after { border: none; }
.shop-blocks .sb-aff-strip-disabled {
  font-family: var(--f-toni);
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  letter-spacing: 0.08em;
  opacity: 0.6;
}

/* ─── Affiliate · STAT view (big earned-¥ hero) ─── */
.shop-blocks .sb-aff-stat {
  text-align: center;
  padding: calc(40 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));
}
.shop-blocks .sb-aff-stat-kicker {
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  letter-spacing: 0.28em;
  opacity: 0.75;
}
.shop-blocks .sb-aff-stat-num {
  font-family: var(--f-bear);
  font-size: calc(calc(120 * var(--u)) * var(--font-scale));
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-top: calc(12 * var(--u));
}
.shop-blocks .sb-aff-stat-sub {
  font-family: var(--f-aleo);
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
  line-height: 1.4;
  margin-top: calc(8 * var(--u));
  opacity: 0.8;
}
.shop-blocks .sb-aff-stat-code-pill {
  display: inline-block;
  margin-top: calc(24 * var(--u));
  background: rgba(255,255,255,0.12);
  border: calc(2 * var(--u)) dashed currentColor;
  padding: calc(12 * var(--u)) calc(22 * var(--u));
  font-family: var(--f-bear);
  font-size: calc(calc(30 * var(--u)) * var(--font-scale));
  letter-spacing: 0.02em;
  line-height: 1;
}
.shop-blocks .sb-aff-stat-actions {
  display: flex;
  justify-content: center;
  gap: calc(12 * var(--u));
  margin-top: calc(22 * var(--u));
}
.shop-blocks .sb-aff-stat-copy,
.shop-blocks .sb-aff-stat-share,
.shop-blocks .sb-aff-stat-cta {
  background: currentColor;
  padding: calc(14 * var(--u)) calc(24 * var(--u));
  font-family: var(--f-gothic);
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  line-height: 1.3;
}
/* For stat-view we paint the button text in the card's bg colour so it
   reads as inverse-on-currentColor without needing extra wiring. */
.shop-blocks .sb-aff-stat-copy { color: #1a1a17; opacity: .92; }
.shop-blocks .sb-aff-stat-share {
  background: #1AAD19;
  color: #fff;
}
.shop-blocks .sb-aff-stat-share::after { border: none; }
.shop-blocks .sb-aff-stat-cta {
  display: inline-block;
  margin-top: calc(20 * var(--u));
  color: #1a1a17;
}
.shop-blocks .sb-aff-stat-disabled {
  margin-top: calc(16 * var(--u));
  font-family: var(--f-aleo);
  opacity: 0.7;
}

/* ─── Affiliate · RECEIPT view (paper / dashed-edges) ─── */
.shop-blocks .sb-aff-receipt {
  margin: calc(28 * var(--u)) calc(60 * var(--u));
  padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(32 * var(--u));
  border: calc(2 * var(--u)) dashed var(--ink);
  border-radius: 0;
  position: relative;
  box-shadow: calc(8 * var(--u)) calc(8 * var(--u)) 0 var(--ink);
}
.shop-blocks .sb-aff-receipt-stub {
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(16 * var(--u)) * var(--font-scale));
  letter-spacing: 0.3em;
  text-align: center;
  padding-bottom: calc(12 * var(--u));
  border-bottom: calc(2 * var(--u)) solid var(--ink);
  opacity: 0.75;
}
.shop-blocks .sb-aff-receipt-kicker {
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  letter-spacing: 0.22em;
  margin-top: calc(18 * var(--u));
  opacity: 0.7;
}
.shop-blocks .sb-aff-receipt-title {
  font-family: var(--f-bear);
  font-size: calc(calc(34 * var(--u)) * var(--font-scale));
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: calc(4 * var(--u));
}
.shop-blocks .sb-aff-receipt-sep {
  font-family: var(--f-gothic);
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  text-align: center;
  margin: calc(16 * var(--u)) 0;
  opacity: 0.55;
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
}
.shop-blocks .sb-aff-receipt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  margin: calc(6 * var(--u)) 0;
}
.shop-blocks .sb-aff-receipt-row-muted { opacity: 0.7; }
.shop-blocks .sb-aff-receipt-lbl {
  font-family: var(--f-toni);
  font-weight: 700;
  font-size: calc(calc(16 * var(--u)) * var(--font-scale));
  letter-spacing: 0.22em;
  opacity: 0.75;
}
.shop-blocks .sb-aff-receipt-val {
  font-family: var(--f-bear);
  font-size: calc(calc(26 * var(--u)) * var(--font-scale));
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.shop-blocks .sb-aff-receipt-actions {
  display: flex;
  gap: calc(12 * var(--u));
  margin-top: calc(8 * var(--u));
}
.shop-blocks .sb-aff-receipt-copy,
.shop-blocks .sb-aff-receipt-share {
  flex: 1;
  background: var(--ink);
  color: #fff;
  padding: calc(14 * var(--u)) 0;
  text-align: center;
  font-family: var(--f-gothic);
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  letter-spacing: 0.12em;
  border: none;
  border-radius: 0;
  line-height: 1.3;
  text-transform: uppercase;
}
.shop-blocks .sb-aff-receipt-share { background: #1AAD19; }
.shop-blocks .sb-aff-receipt-share::after { border: none; }
.shop-blocks .sb-aff-receipt-signin,
.shop-blocks .sb-aff-receipt-disabled {
  font-family: var(--f-aleo);
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  text-align: center;
  padding: calc(12 * var(--u)) 0;
  opacity: 0.7;
}


/* ── FAVORITES (ported from block-renderer.sb-wxss 4045-4158) ── */
/* ─── Favorites block — "your saved" rail / grid ─────────────────────── */
.shop-blocks .sb-fav-blk {
  padding: 0 calc(44 * var(--u));
}
.shop-blocks .sb-fav-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: calc(24 * var(--u));
}
.shop-blocks .sb-fav-head-text { flex: 1; min-width: 0; }
.shop-blocks .sb-fav-kicker {
  font-family: var(--f-toni);
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  letter-spacing: 0.25em;
  opacity: 0.7;
}
.shop-blocks .sb-fav-title {
  font-family: var(--f-bear);
  font-size: calc(calc(52 * var(--u)) * var(--font-scale));
  line-height: 1.0;
  padding-top: calc(6 * var(--u));
  margin-top: calc(8 * var(--u));
}
.shop-blocks .sb-fav-see-all {
  font-family: var(--f-toni);
  font-size: calc(calc(20 * var(--u)) * var(--font-scale));
  letter-spacing: 0.15em;
  opacity: 0.7;
  flex-shrink: 0;
  margin-left: calc(16 * var(--u));
}
.shop-blocks .sb-fav-empty {
  padding: calc(60 * var(--u)) 0 calc(20 * var(--u));
  text-align: center;
}
.shop-blocks .sb-fav-empty-title {
  font-family: var(--f-bear);
  font-size: calc(calc(36 * var(--u)) * var(--font-scale));
  opacity: 0.7;
}
.shop-blocks .sb-fav-empty-sub {
  font-family: var(--f-aleo);
  font-size: calc(calc(24 * var(--u)) * var(--font-scale));
  opacity: 0.55;
  margin-top: calc(8 * var(--u));
}

.shop-blocks .sb-fav-rail {
  white-space: nowrap;
  margin: 0 calc(-8 * var(--u));
  padding: 0 calc(8 * var(--u));
}
.shop-blocks .sb-fav-rail-card {
  display: inline-block;
  width: calc(280 * var(--u));
  margin-right: calc(20 * var(--u));
  vertical-align: top;
  white-space: normal;
}
.shop-blocks .sb-fav-rail-card:last-child { margin-right: 0; }

.shop-blocks .sb-fav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(24 * var(--u));
}
.shop-blocks .sb-fav-card { min-width: 0; }

.shop-blocks .sb-fav-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--oat);
  border: calc(2 * var(--u)) solid var(--ink);
  overflow: hidden;
}
.shop-blocks .sb-fav-img .sb-img-full { width: 100%; height: 100%; }
.shop-blocks .sb-fav-out .sb-fav-img .sb-img-full { filter: grayscale(0.6); opacity: 0.55; }
.shop-blocks .sb-fav-out-tag {
  position: absolute;
  bottom: calc(10 * var(--u));
  left: calc(10 * var(--u));
  background: var(--ink);
  color: #fff;
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  font-family: var(--f-gothic);
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  letter-spacing: 0.1em;
}
.shop-blocks .sb-fav-name {
  font-family: var(--f-bear);
  font-size: calc(calc(28 * var(--u)) * var(--font-scale));
  line-height: 1.15;
  margin-top: calc(12 * var(--u));
}
.shop-blocks .sb-fav-price-row {
  margin-top: calc(6 * var(--u));
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--u));
}
.shop-blocks .sb-fav-price {
  font-family: var(--f-gothic);
  font-size: calc(calc(30 * var(--u)) * var(--font-scale));
}
.shop-blocks .sb-fav-price.sb-is-flash { color: var(--berry, #E96174); }
.shop-blocks .sb-fav-price-was {
  font-family: var(--f-gothic);
  font-size: calc(calc(22 * var(--u)) * var(--font-scale));
  opacity: 0.5;
  text-decoration: line-through;
}


/* ── CROSS-CUTTING (corner/enter/badge subset) (ported from block-renderer.sb-wxss 4159-4264) ── */
/* ── 2026-05-20 cross-cutting enhancements ────────────────────────────────
   Shared classes used across multiple blocks: corner-radius presets,
   entrance animations, hero-banner scrim, spacer divider, countdown
   urgency pulse, featured sale badge. */

/* Corner radius presets — `corner-{sharp|subtle|bold}` on a block's outer
   class. Each block's existing border-radius wins via more specific
   selectors; these are global overrides for the wrapper card surfaces. */
.shop-blocks .sb-featured.sb-corner-sharp .sb-ft-card,
.shop-blocks .sb-grid-block.sb-corner-sharp .sb-card,
.shop-blocks .sb-fav-blk.sb-corner-sharp .sb-fav-card,
.shop-blocks .sb-bun-blk.sb-corner-sharp,
.shop-blocks .sb-recipe-blk.sb-corner-sharp .sb-recipe-img,
.shop-blocks .sb-recipe-blk.sb-corner-sharp,
.shop-blocks .sb-ot-card.sb-corner-sharp,
.shop-blocks .sb-ot-banner.sb-corner-sharp,
.shop-blocks .sb-countdown.sb-corner-sharp { border-radius: 0 !important; }
.shop-blocks .sb-featured.sb-corner-bold .sb-ft-card,
.shop-blocks .sb-grid-block.sb-corner-bold .sb-card,
.shop-blocks .sb-fav-blk.sb-corner-bold .sb-fav-card,
.shop-blocks .sb-bun-blk.sb-corner-bold,
.shop-blocks .sb-recipe-blk.sb-corner-bold .sb-recipe-img,
.shop-blocks .sb-recipe-blk.sb-corner-bold,
.shop-blocks .sb-ot-card.sb-corner-bold,
.shop-blocks .sb-ot-banner.sb-corner-bold,
.shop-blocks .sb-countdown.sb-corner-bold { border-radius: calc(28 * var(--u)) !important; }
.shop-blocks /* Self-framed blocks (poll, .shop-blocks referral, .shop-blocks store, .shop-blocks coupon, .shop-blocks greeting, .shop-blocks WeCom) don't
   carry the corner class on their own element, so reach them via the
   .sb-blk-outer corner class. Subtle keeps each block's native radius. */
.shop-blocks .sb-blk-outer.sb-corner-sharp > .sb-voting-blk,
.shop-blocks .sb-blk-outer.sb-corner-sharp > .sb-aff-blk,
.shop-blocks .sb-blk-outer.sb-corner-sharp > .sb-store-blk,
.shop-blocks .sb-blk-outer.sb-corner-sharp > .sb-coupon-blk,
.shop-blocks .sb-blk-outer.sb-corner-sharp > .sb-greet-blk,
.shop-blocks .sb-blk-outer.sb-corner-sharp > .sb-wc-blk { border-radius: 0 !important; }
.shop-blocks .sb-blk-outer.sb-corner-bold > .sb-voting-blk,
.shop-blocks .sb-blk-outer.sb-corner-bold > .sb-aff-blk,
.shop-blocks .sb-blk-outer.sb-corner-bold > .sb-store-blk,
.shop-blocks .sb-blk-outer.sb-corner-bold > .sb-coupon-blk,
.shop-blocks .sb-blk-outer.sb-corner-bold > .sb-greet-blk,
.shop-blocks .sb-blk-outer.sb-corner-bold > .sb-wc-blk { border-radius: calc(28 * var(--u)) !important; }
/* corner-subtle = legacy default, no override. */

/* Entrance animations — keep them subtle. The class is applied on the
   block root from JS via the `entrance_anim` CMS field. */
@keyframes sb-blk-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes sb-blk-slide-up   { from { opacity: 0; transform: translateY(calc(20 * var(--u))); } to { opacity: 1; transform: translateY(0); } }
.shop-blocks .sb-hero.sb-enter-fade,
.shop-blocks .sb-featured.sb-enter-fade,
.shop-blocks .sb-cattabs.sb-enter-fade,
.shop-blocks .sb-greet-blk.sb-enter-fade,
.shop-blocks .sb-bun-blk.sb-enter-fade        { animation: sb-blk-fade-in   .4s ease-out both; }
.shop-blocks .sb-hero.sb-enter-slide_up,
.shop-blocks .sb-featured.sb-enter-slide_up,
.shop-blocks .sb-cattabs.sb-enter-slide_up,
.shop-blocks .sb-greet-blk.sb-enter-slide_up,
.shop-blocks .sb-bun-blk.sb-enter-slide_up    { animation: sb-blk-slide-up .45s ease-out both; }
/* `enter-none` is the legacy instant render. */


/* Featured-item SALE ribbon — top-right corner of the card image. */
.shop-blocks .sb-featured .sb-img { position: relative; }
.shop-blocks .sb-featured .sb-feat-badge {
  position: absolute; top: calc(14 * var(--u)); right: calc(14 * var(--u));
  padding: calc(6 * var(--u)) calc(16 * var(--u));
  background: var(--berry, #E96174);
  color: #fff;
  font-family: var(--f-toni);
  font-size: calc(calc(18 * var(--u)) * var(--font-scale));
  font-weight: 700;
  letter-spacing: .12em;
  border-radius: calc(999 * var(--u));
  z-index: 2;
}


/* Countdown urgency — pulse the clock cells when remaining time crosses
   the configured threshold. Mirrors the CMS preview. */
@keyframes sb-cd-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.06); opacity: .85; }
}
.shop-blocks .sb-countdown.sb-urgent .sb-cd-cell { animation: sb-cd-pulse .9s ease-in-out infinite; }
.shop-blocks .sb-countdown.sb-urgent .sb-cd-cell:nth-child(2) { animation-delay: .12s; }
.shop-blocks .sb-countdown.sb-urgent .sb-cd-cell:nth-child(4) { animation-delay: .24s; }
.shop-blocks .sb-countdown.sb-urgent .sb-cd-cell:nth-child(6) { animation-delay: .36s; }


/* ── VIDEO BANNER (ported from block-renderer.sb-wxss 4272-4293) ── */
/* Video banner — autoplaying muted loop clip */
.shop-blocks .sb-video-blk {
  width: 100%;
  overflow: hidden;
  background: #000;
}
.shop-blocks .sb-video-el {
  width: 100%;
  height: 100%;
  display: block;
}
/* Full-screen splash — covers the whole device (onboarding intro video) */
.shop-blocks .sb-video-blk.sb-video-fs {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  z-index: 1;
}


/* ── LEADERBOARD (ported from block-renderer.sb-wxss 4294-4377) ── */
.shop-blocks .sb-lb-blk {
  margin: calc(16 * var(--u)) calc(24 * var(--u));
  padding: calc(32 * var(--u)) calc(36 * var(--u)) calc(28 * var(--u));
  border-radius: calc(28 * var(--u));
}
.shop-blocks .sb-lb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  margin-bottom: calc(20 * var(--u));
}
.shop-blocks .sb-lb-head-main { min-width: 0; flex: 1; }
.shop-blocks .sb-lb-kicker {
  font-size: calc(20 * var(--u));
  font-weight: 700;
  letter-spacing: calc(2 * var(--u));
  text-transform: uppercase;
  margin-bottom: calc(6 * var(--u));
}
.shop-blocks .sb-lb-ttl {
  font-size: calc(38 * var(--u));
  font-weight: 800;
  line-height: 1.15;
}
.shop-blocks .sb-lb-sub {
  font-size: calc(24 * var(--u));
  opacity: .7;
  margin-top: calc(6 * var(--u));
}
.shop-blocks .sb-lb-period {
  flex-shrink: 0;
  font-size: calc(20 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1 * var(--u));
  text-transform: uppercase;
  opacity: .55;
  padding-top: calc(6 * var(--u));
}
.shop-blocks .sb-lb-list { display: flex; flex-direction: column; }
.shop-blocks .sb-lb-row {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  padding: calc(16 * var(--u)) 0;
  border-bottom: calc(2 * var(--u)) solid rgba(26, 26, 23, .08);
}
.shop-blocks .sb-lb-row:last-child { border-bottom: none; }
.shop-blocks .sb-lb-medal { font-size: calc(32 * var(--u)); line-height: 1; width: calc(44 * var(--u)); text-align: center; }
.shop-blocks .sb-lb-rank {
  width: calc(44 * var(--u));
  text-align: center;
  font-size: calc(26 * var(--u));
  font-weight: 700;
  opacity: .55;
}
.shop-blocks .sb-lb-name {
  flex: 1;
  min-width: 0;
  font-size: calc(28 * var(--u));
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.shop-blocks .sb-lb-value {
  flex-shrink: 0;
  font-size: calc(28 * var(--u));
  font-weight: 800;
}
.shop-blocks .sb-lb-footer {
  margin-top: calc(18 * var(--u));
  font-size: calc(22 * var(--u));
  opacity: .65;
  line-height: 1.4;
}
.shop-blocks .sb-lb-cta {
  margin-top: calc(18 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1 * var(--u));
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════════
   PC-NATIVE (new blocks) — desktop compositions for the 10 freshly-ported
   types. Same rules as the rest of the engine: phone base above uses --u
   units; here sizes are FIXED px on a desktop type scale, and each type
   opts into the band width that suits the object it represents
   (strip → full-bleed · card → 680 · panel → 880/1040 · grid → 1240).
   ════════════════════════════════════════════════════════════════════════ */

/* ① ANNOUNCEMENT — a real ticker strip: full-bleed, taller, fixed type. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="announcement_bar"] { max-width: none; }
  .shop-blocks .sb-announce { padding: 12px 32px; font-size: 13px; letter-spacing: .08em; }
  .shop-blocks .sb-announce .sb-anim-vclip { height: 22px; }
  .shop-blocks .sb-announce .sb-anim-vtrack { line-height: 22px; }
  .shop-blocks .sb-announce-chev { font-size: 15px; }
}

/* ② FEATURED ITEM — editorial 2-col: photo left, meta right, Bear headline.
   The phone stacked card becomes a magazine spread; banner/split views keep
   their own aspect but pick up the same wide band. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="featured_item"] {
    width: 100vw; max-width: 1040px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-featured { padding: 0; }
  .shop-blocks .sb-featured .sb-ft-card {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch; border-radius: 22px; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease; cursor: pointer;
  }
  .shop-blocks .sb-featured .sb-ft-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.16); }
  .shop-blocks .sb-featured .sb-ft-img { aspect-ratio: 4 / 3; height: auto; min-height: 300px; }
  .shop-blocks .sb-featured .sb-ft-img .sb-img-full { width: 100%; height: 100%; object-fit: cover; }
  .shop-blocks .sb-featured .sb-ft-meta {
    display: flex; flex-direction: column; justify-content: center; gap: 14px;
    padding: 44px 48px;
  }
  .shop-blocks .sb-featured .sb-ft-kicker { font-size: 13px; letter-spacing: .22em; }
  .shop-blocks .sb-featured .sb-ft-name { font-family: var(--f-bear); font-size: 38px; line-height: 1.05; }
  .shop-blocks .sb-featured .sb-ft-price { font-size: 22px; }
  .shop-blocks .sb-featured .sb-ft-price-was { font-size: 16px; }
  .shop-blocks .sb-featured .sb-feat-badge { font-size: 12px; top: 14px; right: 14px; padding: 5px 12px; }
}
@media (min-width: 1024px) {
  .shop-blocks .sb-featured .sb-ft-name { font-size: 46px; }
}

/* ③ COUNTDOWN — centered event band: big Bear title, roomy clock cells. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="countdown_timer"] {
    width: 100vw; max-width: 880px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-countdown { padding: 44px 48px; border-radius: 22px; text-align: center; }
  .shop-blocks .sb-cd-kicker { font-size: 13px; letter-spacing: .24em; }
  .shop-blocks .sb-cd-title { font-family: var(--f-bear); font-size: 34px; margin-top: 8px; }
  .shop-blocks .sb-cd-clock { justify-content: center; gap: 14px; margin-top: 22px; }
  .shop-blocks .sb-cd-cell { min-width: 76px; padding: 14px 10px; border-radius: 14px; }
  .shop-blocks .sb-cd-num { font-size: 40px; }
  .shop-blocks .sb-cd-lbl { font-size: 11px; letter-spacing: .18em; }
  .shop-blocks .sb-cd-sep { font-size: 32px; }
  .shop-blocks .sb-cd-cta { display: inline-block; margin-top: 26px; padding: 14px 34px; font-size: 14px; letter-spacing: .14em; border-radius: 999px; cursor: pointer; }
  .shop-blocks .sb-cd-ended { font-size: 20px; padding: 18px 0 6px; }
}

/* ④ VIDEO — full-bleed cinema band, same treatment as the hero. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="video_banner"] { max-width: none; }
  .shop-blocks .sb-video-blk { min-height: 380px; }
  .shop-blocks .sb-video-el { object-fit: cover; }
}

/* ⑤ POINTS — one confident promo band: star seal left, copy centre, CTA right. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="points_widget"] {
    width: 100vw; max-width: 1040px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-points-blk {
    display: flex; align-items: center; gap: 28px;
    padding: 34px 44px; border-radius: 22px; margin: 0;
  }
  .shop-blocks .sb-pt-star { width: 74px; height: 74px; flex: none; }
  .shop-blocks .sb-pt-star-glyph { font-size: 40px; line-height: 74px; }
  .shop-blocks .sb-pt-kicker { font-size: 12px; letter-spacing: .22em; }
  .shop-blocks .sb-pt-title { font-family: var(--f-bear); font-size: 30px; line-height: 1.1; }
  .shop-blocks .sb-pt-sub { font-size: 15px; opacity: .85; }
  .shop-blocks .sb-pt-cta { margin-left: auto; flex: none; padding: 14px 30px; font-size: 13px; letter-spacing: .14em; border-radius: 999px; cursor: pointer; }
}

/* ⑥ TOP-UP — tier cards sit centred; receipt stays a narrow paper object. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="top_up"] {
    width: 100vw; max-width: 1040px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-topup-blk { padding: 40px 44px; border-radius: 22px; margin: 0; }
  .shop-blocks .sb-tu-kicker { font-size: 12px; letter-spacing: .22em; }
  .shop-blocks .sb-tu-title { font-family: var(--f-bear); font-size: 32px; }
  .shop-blocks .sb-tu-row { display: flex; justify-content: center; gap: 18px; overflow: visible; flex-wrap: wrap; }
  .shop-blocks .sb-tu-card { flex: 0 0 218px; width: 218px; cursor: pointer; transition: transform .16s ease; }
  .shop-blocks .sb-tu-card:hover { transform: translateY(-4px); }
  .shop-blocks .sb-tu-amt { font-size: 34px; }
  .shop-blocks .sb-tu-meta { font-size: 12px; }
  .shop-blocks .sb-topup-blk--b { max-width: 680px; margin: 0 auto; }
  .shop-blocks .sb-tu-strip { display: flex; justify-content: center; gap: 14px; overflow: visible; flex-wrap: wrap; }
  .shop-blocks .sb-tu-chipcard { cursor: pointer; }
  .shop-blocks .sb-tu-linkout { cursor: pointer; }
}

/* ⑦ STORES — location cards side-by-side on the wide band. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="store_info"] {
    width: 100vw; max-width: 1240px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-store-blk { padding: 36px 40px; border-radius: 22px; margin: 0; }
  .shop-blocks .sb-st-kicker { font-size: 13px; letter-spacing: .22em; margin-bottom: 18px; }
  .shop-blocks .sb-st-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px;
  }
  .shop-blocks .sb-st-card {
    margin: 0; padding: 26px 28px; border-radius: 16px;
    background: rgba(255,255,255,.55);
  }
  .shop-blocks .sb-st-title { font-family: var(--f-bear); font-size: 24px; }
  .shop-blocks .sb-st-status-lbl, .shop-blocks .sb-st-hours { font-size: 14px; }
  .shop-blocks .sb-st-val { font-size: 14px; }
  .shop-blocks .sb-st-eta { font-size: 13px; }
  .shop-blocks .sb-st-cta { display: inline-block; margin-top: 14px; padding: 11px 24px; font-size: 13px; border-radius: 999px; cursor: pointer; }
}

/* ⑧ FAVORITES — saved items reflow into the wide auto-fill grid (the phone
   rail's horizontal scroll makes no sense with a mouse). */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="favorites_block"] {
    width: 100vw; max-width: 1240px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-fav-blk { padding: 36px 40px; border-radius: 22px; margin: 0; }
  .shop-blocks .sb-fav-kicker { font-size: 13px; letter-spacing: .22em; }
  .shop-blocks .sb-fav-title { font-family: var(--f-bear); font-size: 32px; }
  .shop-blocks .sb-fav-see-all { font-size: 13px; letter-spacing: .12em; cursor: pointer; }
  .shop-blocks .sb-fav-rail,
  .shop-blocks .sb-fav-blk .sb-fav-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px; overflow: visible; white-space: normal;
  }
  .shop-blocks .sb-fav-rail-card, .shop-blocks .sb-fav-card {
    width: auto; margin: 0; cursor: pointer; transition: transform .16s ease;
  }
  .shop-blocks .sb-fav-rail-card:hover, .shop-blocks .sb-fav-card:hover { transform: translateY(-4px); }
  .shop-blocks .sb-fav-name { font-size: 16px; }
  .shop-blocks .sb-fav-price { font-size: 16px; }
}

/* ⑨ AFFILIATE — card/stat are compact centred tickets (a referral card is a
   small object, like the coupon); strip spans the mid band. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="affiliate_block"] {
    width: 100vw; max-width: 680px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-aff-blk { margin: 0; border-radius: 22px; }
  .shop-blocks .sb-aff-card { padding: 40px 44px; }
  .shop-blocks .sb-aff-kicker { font-size: 12px; letter-spacing: .22em; }
  .shop-blocks .sb-aff-title { font-family: var(--f-bear); font-size: 32px; }
  .shop-blocks .sb-aff-sub { font-size: 15px; }
  .shop-blocks .sb-aff-copy, .shop-blocks .sb-aff-share,
  .shop-blocks .sb-aff-strip-copy, .shop-blocks .sb-aff-strip-share,
  .shop-blocks .sb-aff-stat-copy, .shop-blocks .sb-aff-stat-share,
  .shop-blocks .sb-aff-receipt-copy, .shop-blocks .sb-aff-receipt-share,
  .shop-blocks .sb-aff-signin, .shop-blocks .sb-aff-strip-cta,
  .shop-blocks .sb-aff-stat-cta, .shop-blocks .sb-aff-receipt-signin { cursor: pointer; }
  .shop-blocks .sb-aff-stat-num { font-size: 56px; }
  .shop-blocks .sb-blk-outer[data-block-type="affiliate_block"] .sb-aff-strip {
    width: 100%; }
}

/* ⑩ LEADERBOARD — a ranking is a list object: narrow centred card, roomy rows. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="leaderboard"] {
    width: 100vw; max-width: 680px; position: relative; left: 50%; transform: translateX(-50%);
  }
  .shop-blocks .sb-lb-blk { margin: 0; padding: 36px 40px; border-radius: 22px; }
  .shop-blocks .sb-lb-kicker { font-size: 12px; letter-spacing: .22em; }
  .shop-blocks .sb-lb-ttl { font-family: var(--f-bear); font-size: 30px; }
  .shop-blocks .sb-lb-sub { font-size: 14px; }
  .shop-blocks .sb-lb-period { font-size: 12px; }
  .shop-blocks .sb-lb-row { padding: 13px 0; }
  .shop-blocks .sb-lb-name { font-size: 16px; }
  .shop-blocks .sb-lb-value { font-size: 15px; }
  .shop-blocks .sb-lb-medal { font-size: 20px; }
}

/* Order tracker (existing type, previously left on the default column) —
   give it the mid band so a live order reads like a status console. */
@media (min-width: 768px) {
  .shop-blocks .sb-blk-outer[data-block-type="order_tracker"] {
    width: 100vw; max-width: 880px; position: relative; left: 50%; transform: translateX(-50%);
  }
}

/* <picture> wrapper (desktop hero art variant) must not break the fill chain */
.shop-blocks .sb-hero picture { display: contents; }