/* 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)); border-radius: 50%; background-color: var(--gr-kicker); flex: none; }
.shop-blocks .sb-grd-top-accent .sb-grd-icon { background-color: var(--gr-accent); }
.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; }
/* 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 — app-faithful centered column (560px) for text/card blocks; grid-
   like blocks break out to a wider band with more columns to use the screen.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .shop-blocks {
    --u: calc(560px / 750);
    max-width: 560px;
    margin: 0 auto;
  }
  /* breakout children use 100vw; avoid a horizontal scrollbar from the
     scrollbar's own width by clamping the page. */
  html, body { overflow-x: hidden; }
  /* Grid-like blocks break out wider + centered, and add columns. */
  .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"] {
    width: 100vw;
    max-width: 1040px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* grids use a larger --u so type/spacing don't balloon at 1040px */
    --u: calc(1040px / 750);
  }
  /* product grids: 2-col phone -> 4-col desktop */
  .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(4, 1fr);
  }
  /* category tiles / bento / icons: more columns on desktop */
  .shop-blocks .sb-cat-grid,
  .shop-blocks .sb-bento-grid { grid-template-columns: repeat(4, 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(6, 1fr); }
  /* flash design + strip cards size down so more fit per row */
  .shop-blocks .sb-fsd-card { flex-basis: calc(280 * var(--u)); width: calc(280 * var(--u)); }
  .shop-blocks .sb-fs-card { flex-basis: calc(240 * var(--u)); width: calc(240 * var(--u)); }
  /* hero can be a touch taller / wider feeling; cap its column with the page */
  .shop-blocks .sb-blk-outer[data-block-type="hero_banner"] {
    width: 100vw; max-width: 1040px; position: relative; left: 50%; transform: translateX(-50%);
    --u: calc(1040px / 750);
  }
  .shop-blocks .sb-hero-full { border-radius: calc(24 * var(--u)); overflow: hidden; }
}

/* Wider desktop — let the grid band breathe a bit more. */
@media (min-width: 1280px) {
  .shop-blocks .sb-blk-outer[data-block-type="product_grid"] .sb-grid.sb-cols-3 {
    grid-template-columns: repeat(5, 1fr);
  }
}