/*!
  Template:  Crumbelle | Bakery & Patisserie HTML Template
  Version:   1.0.0
  Author:    MOONSHOTS
  Website:   https://m00nshots.dev
  Contact:   build@m00nshots.dev
  Copyright: (c) 2026 m00nshots. All rights reserved.
*/
/* ==========================================================================
   CRUMBELLE THEME — Bakery & Patisserie
   Design language: sweet and editorial. Vanilla grounds, dark-chocolate ink,
   raspberry + matcha accents and a pastry-pink blush. Scalloped section
   edges, a ganache drip under chocolate sections, stitched ribbon pill
   buttons, cake-box cards with ribbon and bow, kraft-paper tags and small
   hand-lettered notes. Gilda Display / Instrument Sans / Sacramento.
   --------------------------------------------------------------------------
   01. Tokens (light / dark)            11. Home 1 – Sourdough Bakery
   02. Base, type, script, tags, bows   12. Home 2 – Patisserie & Macarons
   03. Buttons & links                  13. Home 3 – Cake Studio
   04. Header (awning) & logo           14. Home 4 – Bakery Café & Pre-order
   05. Section edges: scallop & drip    15. Page header & inner pages
   06. Bake board (signature 1)         16. Generic components restyled
   07. Cake builder (signature 2)       17. Footer & 404
   08. Pastry case (signature 3)
   09. Pre-order slot picker (sig. 4)
   10. Cards, notes, posts, CTA
   ========================================================================== */

/* 01. Tokens ------------------------------------------------------------- */
:root {
  --cb-rasp: #c8325a; --cb-vanilla: #fff4e2; --cb-choc: #2e1a14; --cb-matcha: #7fa36a; --cb-pink: #f7c8d0; --cb-kraft: #d9b68b;
  --bg: #fff4e2; --bg-2: #fce3df; --surface: #fffcf6; --surface-2: #fbecdc;
  --text: #2e1a14; --muted: #74574b; --line: rgba(46, 26, 20, .13);
  --primary: #c8325a; --primary-2: #e0507a; --accent: #7fa36a; --on-primary: #ffffff;
  --cb-em: #c8325a; --cb-pink-soft: #fbdce2; --cb-matcha-soft: #e3ebd5; --cb-matcha-ink: #4d6e3c;
  --cb-chocbg: #2e1a14; --cb-edge: var(--bg);
  --font-head: "Gilda Display", Georgia, serif; --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-logo: "Sacramento", "Gilda Display", cursive; --logo-weight: 400; --logo-size: 2.5rem; --logo-tracking: 0; --logo-case: none;
  --head-weight: 400; --head-tracking: -0.01em;
  --radius-sm: 14px; --radius: 26px; --radius-lg: 40px; --radius-btn: 999px;
  --gradient: linear-gradient(135deg, #c8325a, #e0507a);
  --shadow-sm: 0 2px 6px rgba(46, 26, 20, .06);
  --shadow: 0 22px 44px -26px rgba(46, 26, 20, .38);
  --shadow-lg: 0 40px 80px -36px rgba(46, 26, 20, .5);
  --header-h: 92px;
  --cb-drip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0,0 H200 V8 C194,8 192,10 191,16 C190,26 182,26 181,16 C180,10 176,8 168,8 C156,8 154,10 153,22 C152,36 142,36 141,22 C140,11 136,8 124,8 C112,8 110,10 109,14 C108,20 102,20 101,14 C100,10 96,8 84,8 C72,8 70,10 69,24 C68,34 58,34 57,24 C56,10 52,8 40,8 C28,8 26,10 25,15 C24,22 17,22 16,15 C15,10 10,8 0,8 Z'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #2e1a14; --bg-2: #3b231b; --surface: #412820; --surface-2: #4d3027;
  --text: #fff4e2; --muted: #d6bcab; --line: rgba(255, 244, 226, .14);
  --primary: #e4557d; --primary-2: #f07b9b; --on-primary: #ffffff;
  --cb-em: #f38fab; --cb-pink-soft: #55302f; --cb-matcha-soft: #3a4630; --cb-matcha-ink: #b7d19f;
  --cb-chocbg: #1d0f0a;
  --shadow: 0 22px 44px -26px rgba(0, 0, 0, .7);
  --shadow-lg: 0 40px 80px -36px rgba(0, 0, 0, .85);
}

/* 02. Base, type, script, tags, bows ------------------------------------ */
body { font-size: 16.5px; }
h1, h2, h3 { text-wrap: balance; }
h3, h4 { font-weight: 400; }
.hero__title em, .h2 em, .h3 em, .page-header h1 em, h2 em {
  font-family: var(--font-logo); font-style: normal; font-weight: 400; color: var(--cb-em);
  font-size: 1.32em; line-height: .7; letter-spacing: 0; padding-inline: .04em;
}
.h2 { font-size: clamp(2.1rem, 4.3vw, 3.5rem); line-height: 1.06; }
.hero__title { font-size: clamp(2.7rem, 6.2vw, 5.4rem); line-height: 1.04; margin-bottom: .6em; }
ol.cb-tl, ol.cb-steps, ol.cb-years, ol.cb-board__list { list-style: none; margin: 0; }
ol.cb-tl, ol.cb-steps, ol.cb-years { padding-left: 0; }
.lead { color: var(--muted); }
.eyebrow { color: var(--cb-em); font-weight: 600; font-size: .78rem; letter-spacing: .18em; }
.eyebrow::before { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, currentColor 0 3px, transparent 3.5px), radial-gradient(circle, transparent 5px, currentColor 5.5px 6.5px, transparent 7px); }
.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.muted { color: var(--muted); }

.cb-script { display: inline-flex; align-items: flex-end; gap: 4px; font-family: var(--font-logo); font-size: 2.1rem; line-height: 1; color: var(--cb-em); transform: rotate(-5deg); }
.cb-script svg { width: 46px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: -10px; }

.cb-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 26px; line-height: 1.15;
  color: #3b2418; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  background:
    radial-gradient(circle at 13px 50%, rgba(46, 26, 20, .6) 0 3px, transparent 3.6px),
    repeating-linear-gradient(98deg, rgba(120, 80, 40, .07) 0 2px, transparent 2px 7px),
    var(--cb-kraft);
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
  border-radius: 0 6px 6px 0; transform: rotate(-3deg);
}
.cb-tag .ti { font-size: 1rem; }

.cb-bow { position: relative; display: inline-block; width: 56px; height: 28px; }
.cb-bow i { position: absolute; top: 1px; width: 27px; height: 22px; border: 4px solid var(--primary); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.cb-bow i:first-child { left: 1px; transform: rotate(-18deg); border-radius: 60% 30% 30% 60%; }
.cb-bow i:nth-child(2) { right: 1px; transform: rotate(18deg); border-radius: 30% 60% 60% 30%; }
.cb-bow b { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -7px 0 0 -6.5px; border-radius: 4px; background: var(--primary); box-shadow: -6px 10px 0 -2px var(--primary), 6px 10px 0 -2px var(--primary); }

.cb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cb-matcha); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-matcha) 30%, transparent); flex: none; }
.cb-open { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 244, 226, .16); border: 1px solid rgba(255, 244, 226, .35); font-weight: 600; font-size: .88rem; margin-bottom: 22px; backdrop-filter: blur(8px); }
.cb-open i { width: 10px; height: 10px; border-radius: 50%; background: #9cd07f; box-shadow: 0 0 0 4px rgba(156, 208, 127, .3); animation: cb-pulse 1.8s ease-in-out infinite; }
@keyframes cb-pulse { 50% { box-shadow: 0 0 0 8px rgba(156, 208, 127, 0); } }
.cb-center-note { text-align: center; color: var(--muted); margin-top: 36px; }
.cb-center-note .ti { vertical-align: -2px; margin-right: 4px; }
.cb-ticks li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-weight: 500; }
.cb-ticks .ti { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cb-matcha-soft); color: var(--cb-matcha-ink); font-size: 1.1rem; }

/* 03. Buttons & links ---------------------------------------------------- */
.btn { --btn-bg: var(--primary); --btn-fg: #fff; font-weight: 600; letter-spacing: .01em; padding-inline: 28px; }
.btn::before {
  content: ""; position: absolute; inset: 4px; border-radius: inherit; pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--btn-fg) 55%, transparent);
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent); }
.btn--ghost::before { border-color: color-mix(in srgb, var(--primary) 45%, transparent); inset: 3px; }
.btn--ghost::after { background: var(--cb-pink-soft); }
.btn--light { --btn-bg: var(--cb-vanilla); --btn-fg: var(--cb-choc); }
.btn--light::before { border-color: rgba(200, 50, 90, .55); }
.btn--sm::before { inset: 3px; }
.cb-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cb-em); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease); }
.cb-link:hover { background-size: 30% 1.5px; }
.cb-link .ti { transition: transform .3s var(--ease); }
.cb-link:hover .ti { transform: translateX(4px); }

/* 04. Header (awning) & logo -------------------------------------------- */
.site-header, .site-header.is-scrolled {
  background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding-top: 8px;
  filter: drop-shadow(0 8px 10px rgba(46, 26, 20, .07));
}
.site-header.is-scrolled { height: 78px; }
.site-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: repeating-linear-gradient(90deg, var(--primary) 0 22px, var(--cb-pink) 22px 44px); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 12px; background: radial-gradient(circle at 50% 0, var(--bg) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x; pointer-events: none; }
.site-header.is-hidden { transform: translateY(calc(-100% - 16px)); }
.logo { font-size: var(--logo-size); color: var(--text); gap: 10px; padding-top: 4px; }
.logo__mark { width: 40px; height: 40px; border-radius: 50%; background: var(--cb-pink-soft); color: var(--primary); border: 1.5px dashed var(--primary); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--cb-pink); font-size: 1.2rem; margin-top: -4px; transition: transform .5s var(--ease); }
.logo:hover .logo__mark { transform: rotate(-12deg); }
.nav__link { font-weight: 500; padding: 9px 14px; }
.nav__link:hover, .nav__link.is-active { color: var(--primary); background: var(--cb-pink-soft); }
.dropdown { border-radius: 22px; padding: 10px; border: 1px solid var(--line); }
.dropdown a:hover { background: var(--cb-pink-soft); color: var(--primary); }
.icon-btn { border-color: var(--line); }
.cb-hbtn { min-height: 44px; }
.drawer__panel { border-left: 8px solid transparent; border-image: repeating-linear-gradient(180deg, var(--primary) 0 22px, var(--cb-pink) 22px 44px) 8; }
.drawer__nav a { border-bottom: 1px dashed var(--line); font-family: var(--font-head); font-size: 1.3rem; }
@media (max-width: 479px) { :root { --logo-size: 2.2rem; } .logo__mark { width: 34px; height: 34px; font-size: 1rem; } }

/* 05. Section edges: scallop & drip ------------------------------------- */
.section--alt { background: var(--bg-2); --cb-edge: var(--bg-2); }
.cb-choc { background: var(--cb-chocbg); --cb-edge: var(--cb-chocbg); --bg: #37211a; color: #fff4e2; --text: #fff4e2; --muted: #d8bfae; --line: rgba(255, 244, 226, .16); --surface: #3d251d; --surface-2: #4a2e25; --cb-em: #f59ab3; --cb-pink-soft: #5a3130; --cb-matcha-soft: #3e4a32; --cb-matcha-ink: #bfd8a6; }
.cb-scallop::before, .cb-drip::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 14px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 100%, var(--cb-edge) 13.5px, transparent 14px) 0 100% / 28px 14px repeat-x;
}
.cb-scallop::after, .cb-scallop-b::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 14px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--cb-edge) 13.5px, transparent 14px) 0 0 / 28px 14px repeat-x;
}
.cb-drip::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 40px; z-index: 2; pointer-events: none;
  background: var(--cb-edge); -webkit-mask: var(--cb-drip) 0 0 / 200px 40px repeat-x; mask: var(--cb-drip) 0 0 / 200px 40px repeat-x;
}
.cb-scallop-b { --cb-edge: var(--bg-2); position: relative; overflow: visible; }

/* 06. Bake board (signature 1) ----------------------------------------- */
.cb-board { background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.cb-board__now {
  display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: center; padding: clamp(22px, 3vw, 32px);
  background: var(--cb-chocbg); color: #fff4e2; position: relative;
}
.cb-board__now::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: radial-gradient(circle at 50% 0, var(--cb-chocbg) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x; z-index: 1; }
.cb-board__clock { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px dashed rgba(255, 244, 226, .2); }
.cb-board__clock span { display: inline-flex; gap: 6px; align-items: center; font-size: .86rem; color: #d8bfae; }
.cb-board__clock b { font-family: var(--font-head); font-weight: 400; font-size: 1.7rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.cb-board__clock small { color: #f59ab3; font-weight: 600; font-size: .86rem; }
.cb-board__lbl { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-em); }
.cb-board__now .cb-board__lbl { color: #f59ab3; }
.cb-board__next b { display: block; font-family: var(--font-head); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; margin: 4px 0 2px; }
.cb-board__next p { margin: 0; color: #d8bfae; }
.cb-board__next [data-next-in] { color: #bfd8a6; font-weight: 600; }
.cb-board__just { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-radius: 999px; background: rgba(247, 200, 208, .12); }
.cb-board__just b { font-weight: 600; }
.cb-dial { position: relative; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, #3d251d 0 55%, transparent 56%), repeating-conic-gradient(from 0deg, rgba(255, 244, 226, .25) 0 1deg, transparent 1deg 30deg); }
.cb-dial__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--p) * 1%), rgba(255, 244, 226, .1) 0); -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 59% 70%, transparent 71%); mask: radial-gradient(circle, transparent 0 58%, #000 59% 70%, transparent 71%); transition: background .6s; }
.cb-dial__ic { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; color: #ffb36b; }
.cb-board__list { padding: 22px clamp(14px, 2.4vw, 26px) 8px; }
.cb-bake { display: grid; grid-template-columns: 56px 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 10px; border-radius: 16px; border-bottom: 1px dashed var(--line); transition: background .4s, opacity .4s; }
.cb-bake__time { font-family: var(--font-head); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cb-bake__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); font-size: 1.1rem; color: var(--primary); }
.cb-bake__txt b { display: block; font-weight: 600; line-height: 1.25; }
.cb-bake__txt small { display: block; color: var(--muted); font-size: .86rem; line-height: 1.35; }
.cb-bake__qty { display: none; color: var(--muted); font-size: .84rem; white-space: nowrap; }
.cb-bake__st { grid-column: 3 / -1; justify-self: start; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
@media (min-width: 640px) {
  .cb-bake { grid-template-columns: 60px 40px minmax(0, 1fr) auto auto; }
  .cb-bake__qty { display: block; }
  .cb-bake__st { grid-column: auto; justify-self: end; }
}
.cb-bake.is-past { opacity: .55; }
.cb-bake.is-past .cb-bake__st { background: transparent; border: 1px solid var(--line); }
.cb-bake.is-just { background: var(--cb-pink-soft); border-bottom-color: transparent; }
.cb-bake.is-just .cb-bake__st { background: var(--primary); color: #fff; }
.cb-bake.is-just .cb-bake__ic { background: var(--primary); color: #fff; }
.cb-bake.is-next { background: var(--cb-matcha-soft); border-bottom-color: transparent; }
.cb-bake.is-next .cb-bake__st { background: var(--cb-matcha); color: #fff; }
.cb-board__foot { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 14px clamp(18px, 2.6vw, 30px) 22px; font-size: .86rem; color: var(--muted); }
.cb-board--compact .cb-bake { padding: 9px 10px; }
.cb-boardwrap { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .cb-boardwrap { grid-template-columns: .85fr 1.15fr; gap: 64px; } .cb-boardwrap--flip { grid-template-columns: .8fr 1.2fr; align-items: center; } }
.cb-boardwrap__img { position: relative; border-radius: 200px 200px var(--radius) var(--radius); overflow: visible; }
.cb-boardwrap__img img { border-radius: 200px 200px var(--radius) var(--radius); width: 100%; aspect-ratio: 8/7; }
.cb-boardwrap__tag { position: absolute; left: -8px; bottom: 26px; }
@media (max-width: 1023px) { .cb-boardwrap__img { display: none; } }

/* 07. Cake builder (signature 2) ---------------------------------------- */
.cb-builder { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .cb-builder { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "stage opts" "sum opts"; grid-template-rows: auto 1fr; gap: 28px 40px; align-items: start; }
  .cb-builder__stage { grid-area: stage; } .cb-builder__opts { grid-area: opts; } .cb-builder__sum { grid-area: sum; }
}
.cb-builder__stage {
  position: relative; min-height: 400px; display: grid; place-items: end center; padding: 40px 20px 34px; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(circle at 50% 58%, var(--surface) 0 34%, color-mix(in srgb, var(--surface) 55%, transparent) 34.4% 36%, transparent 36.4%),
              radial-gradient(circle, color-mix(in srgb, var(--primary) 16%, transparent) 1.6px, transparent 2px) 0 0 / 18px 18px,
              var(--cb-pink-soft);
}
.cb-builder__tag { position: absolute; top: 20px; left: 20px; }
.cb-cake { --w: min(300px, 72vw); position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.cb-cake__topper { color: var(--primary); font-size: 2rem; height: 0; opacity: 0; transform: translateY(12px) scale(.6); transition: all .5s var(--ease); margin-bottom: 4px; line-height: 1; }
.cb-cake[data-topper="1"] .cb-cake__topper { height: 36px; opacity: 1; transform: none; }
.cb-tier {
  position: relative; height: 86px; border-radius: 10px 10px 12px 12px; margin-top: 8px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .08), transparent 22%, transparent 70%, rgba(0, 0, 0, .12)), var(--frost);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .06); transition: width .6s var(--ease), height .6s var(--ease), opacity .4s, margin .6s var(--ease), background-color .4s;
}
.cb-tier::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--frost) 82%, #fff); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05); }
.cb-tier--1 { width: var(--w); height: 96px; }
.cb-tier--2 { width: calc(var(--w) * .74); }
.cb-tier--3 { width: calc(var(--w) * .5); height: 74px; }
.cb-cake[data-tiers="1"] .cb-tier--2, .cb-cake[data-tiers="1"] .cb-tier--3, .cb-cake[data-tiers="2"] .cb-tier--3 { height: 0; opacity: 0; margin-top: 0; }
.cb-tier__slice {
  position: absolute; right: 12%; top: 6px; bottom: 6px; width: 22%; border-radius: 4px; overflow: hidden;
  background: repeating-linear-gradient(180deg, var(--sponge) 0 15px, color-mix(in srgb, var(--frost) 85%, #fff) 15px 21px);
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, .1); clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 100%); transition: background .4s;
}
.cb-tier__deco { position: absolute; left: 0; right: 0; pointer-events: none; transition: opacity .4s; opacity: 0; }
.cb-cake[data-deco="flowers"] .cb-tier__deco { opacity: 1; top: -20px; height: 28px; background:
  radial-gradient(circle at 16% 60%, #e0507a 0 7px, transparent 7.5px), radial-gradient(circle at 25% 45%, #f7c8d0 0 9px, transparent 9.5px),
  radial-gradient(circle at 33% 64%, #7fa36a 0 5px, transparent 5.5px), radial-gradient(circle at 12% 40%, #fff4e2 0 6px, transparent 6.5px),
  radial-gradient(circle at 82% 58%, #f7c8d0 0 7px, transparent 7.5px), radial-gradient(circle at 88% 44%, #c8325a 0 5px, transparent 5.5px); }
.cb-cake[data-deco="macarons"] .cb-tier__deco { opacity: 1; top: -16px; height: 18px; left: 10%; right: 10%; background:
  radial-gradient(ellipse 8px 6px at 50% 30%, #e0507a 96%, transparent) 0 0 / 30px 18px repeat-x,
  radial-gradient(ellipse 8px 2px at 50% 58%, #fff 96%, transparent) 0 0 / 30px 18px repeat-x,
  radial-gradient(ellipse 8px 6px at 50% 82%, #e0507a 96%, transparent) 0 0 / 30px 18px repeat-x; }
.cb-cake[data-deco="berries"] .cb-tier__deco { opacity: 1; top: -12px; height: 14px; left: 8%; right: 8%; background:
  radial-gradient(circle at 30% 50%, #a8283f 0 5.5px, transparent 6px) 0 0 / 22px 14px repeat-x,
  radial-gradient(circle at 70% 60%, #3b3f78 0 4px, transparent 4.5px) 0 0 / 22px 14px repeat-x; }
.cb-cake[data-deco="sprinkles"] .cb-tier__deco { opacity: 1; top: 8px; bottom: 10px; left: 6%; right: 38%; background:
  radial-gradient(circle, #e0507a 1.6px, transparent 2px) 0 0 / 17px 13px, radial-gradient(circle, #7fa36a 1.6px, transparent 2px) 7px 5px / 19px 15px,
  radial-gradient(circle, #f2d66b 1.6px, transparent 2px) 3px 9px / 15px 17px, radial-gradient(circle, #6e8fd6 1.6px, transparent 2px) 11px 2px / 21px 14px; }
.cb-cake[data-deco="drip"] .cb-tier__deco { opacity: 1; top: -2px; height: 30px; background: #3a2019; -webkit-mask: var(--cb-drip) 0 0 / 110px 30px repeat-x; mask: var(--cb-drip) 0 0 / 110px 30px repeat-x; border-radius: 10px 10px 0 0; }
.cb-cake__stand { width: calc(var(--w) * 1.18); height: 14px; margin-top: 2px; border-radius: 50%; background: linear-gradient(#f1e2cf, #d8c1a4); box-shadow: 0 18px 0 -6px #c9ae8e, 0 30px 22px -14px rgba(46, 26, 20, .4); position: relative; }
.cb-cake__stand::after { content: ""; position: absolute; left: 50%; top: 12px; width: 26px; height: 22px; margin-left: -13px; background: linear-gradient(90deg, #c9ae8e, #e7d6bf, #c9ae8e); }
.cb-builder__opts { display: grid; gap: 18px; }
.cb-builder fieldset { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.cb-builder legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; margin-bottom: 14px; font-family: var(--font-head); font-size: 1.2rem; }
.cb-builder legend span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cb-pink-soft); color: var(--primary); font-family: var(--font-body); font-weight: 700; font-size: .85rem; }
.cb-builder fieldset > div { clear: both; }
.cb-opt, .cb-swatch, .cb-chipopt, .cb-check { position: relative; cursor: pointer; }
.cb-opt input, .cb-swatch input, .cb-chipopt input, .cb-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-opts { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cb-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-opt span { display: block; height: 100%; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); transition: all .3s; }
.cb-opt b { display: block; font-weight: 600; }
.cb-opt small { color: var(--muted); font-size: .8rem; }
.cb-swatches { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cb-swatch span { display: grid; grid-template-columns: 28px 1fr; gap: 0 10px; align-items: center; padding: 10px 12px; border-radius: 16px; border: 1.5px solid var(--line); transition: all .3s; height: 100%; }
.cb-swatch i { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 0 0 1px var(--line); }
.cb-swatch b { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.cb-swatch small { color: var(--muted); font-size: .76rem; }
.cb-chipopts { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-chipopt span, .cb-check span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 500; font-size: .92rem; transition: all .3s; }
.cb-chipopt small, .cb-check small { color: var(--muted); }
.cb-chipopt .ti { color: var(--primary); }
.cb-extras > div, .cb-extras { display: block; }
.cb-extras .cb-check { display: inline-block; margin: 0 8px 8px 0; }
.cb-check span::before { content: ""; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--surface); transition: all .3s; }
.cb-opt input:checked + span, .cb-swatch input:checked + span, .cb-chipopt input:checked + span, .cb-check input:checked + span { border-color: var(--primary); background: var(--cb-pink-soft); }
.cb-check input:checked + span::before { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--primary); }
.cb-opt input:focus-visible + span, .cb-swatch input:focus-visible + span, .cb-chipopt input:focus-visible + span, .cb-check input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.cb-builder__sum { position: relative; padding: 34px clamp(22px, 3vw, 32px) 28px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cb-builder__bow { position: absolute; top: -14px; left: 50%; margin-left: -28px; }
.cb-builder__bow i { background: var(--surface); }
.cb-builder__line { margin: 8px 0 16px; font-weight: 500; }
.cb-builder__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0; border-block: 1px dashed var(--line); }
.cb-builder__price small { color: var(--muted); }
.cb-builder__price b { font-family: var(--font-head); font-weight: 400; font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: var(--cb-em); }
.cb-builder__facts { margin: 14px 0 20px; }
.cb-builder__facts li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.cb-builder__facts span { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); }
.cb-builder__ok, .cb-po__ok { display: none; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--cb-matcha-soft); color: var(--cb-matcha-ink); font-weight: 600; gap: 8px; align-items: center; }
.is-sent .cb-builder__ok, .is-sent .cb-po__ok { display: flex; }

/* 08. Pastry case (signature 3) ----------------------------------------- */
.cb-case { position: relative; padding: clamp(18px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cb-case__top { display: grid; gap: 16px; margin-bottom: 26px; }
.cb-case .tabs__list { margin-bottom: 0; gap: 8px; }
@media (max-width: 767px) { .cb-case .tabs__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding: 2px 4px 4px; } .cb-case .tabs__list::-webkit-scrollbar { display: none; } .cb-case .tabs__btn { flex: none; } }
.cb-case .tabs__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-weight: 600; font-size: .95rem; border-color: var(--line); }
.cb-case .tabs__btn small { font-size: .72rem; min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.cb-case .tabs__btn:hover { background: var(--cb-pink-soft); color: var(--primary); border-color: transparent; }
.cb-case .tabs__btn.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.cb-case .tabs__btn.is-active small { background: rgba(255, 255, 255, .25); color: #fff; }
.cb-case__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px dashed var(--line); }
.cb-case__filters > span { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: .88rem; margin-right: 4px; }
.cb-filter { padding: 7px 14px; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--cb-matcha) 70%, transparent); font-size: .86rem; font-weight: 600; color: var(--cb-matcha-ink); transition: all .3s; }
.cb-filter:hover { background: var(--cb-matcha-soft); }
.cb-filter[aria-pressed="true"] { background: var(--cb-matcha); border-style: solid; border-color: var(--cb-matcha); color: #fff; }
.cb-case__count { margin-left: auto; font-size: .86rem; color: var(--muted); }
.cb-case__shelf { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cb-case__shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cb-case__shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; border-radius: 22px; background: var(--bg); border: 1px solid var(--line); transition: opacity .4s, filter .4s, transform .4s var(--ease), box-shadow .4s; }
.cb-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cb-item__img { position: relative; }
.cb-item__img img { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--line), 0 12px 20px -10px rgba(46, 26, 20, .45); }
.cb-item__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cb-item h3 { font-size: 1.14rem; margin: 2px 0 4px; line-height: 1.2; }
.cb-item__price { flex: none; font-size: .8rem; padding: 5px 10px 5px 22px; letter-spacing: .02em; }
.cb-item p { color: var(--muted); font-size: .9rem; line-height: 1.45; margin: 0 0 10px; }
.cb-item.is-dim { opacity: .28; filter: grayscale(1); }
.cb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cb-diet, .cb-allergen { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; cursor: help; }
.cb-diet { background: var(--cb-matcha-soft); color: var(--cb-matcha-ink); }
.cb-diet--gf { background: #fbe7c3; color: #7a4f10; }
.cb-diet--nf { background: #e5e2f5; color: #4c4588; }
.cb-diet--v { background: color-mix(in srgb, var(--cb-matcha) 20%, transparent); }
[data-theme="dark"] .cb-diet--gf { background: #56411f; color: #f5d59a; }
[data-theme="dark"] .cb-diet--nf { background: #3a3658; color: #cfc9f5; }
.cb-allergen { border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.cb-case__key { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 24px 0 0; padding-top: 18px; border-top: 1px dashed var(--line); font-size: .84rem; }
.cb-case__key span { display: inline-flex; gap: 6px; align-items: center; }

/* 09. Pre-order slot picker (signature 4) ------------------------------- */
.cb-po { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .cb-po { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cb-po__ticket { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .cb-po { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); } .cb-po__ticket { grid-column: auto; } }
.cb-po__col { padding: clamp(20px, 2.6vw, 28px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.cb-po__h { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin-bottom: 18px; }
.cb-po__h .ti { color: var(--primary); }
.cb-po__items li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.cb-po__img img { width: 52px; height: 52px; border-radius: 50%; }
.cb-po__items b { display: block; font-weight: 600; line-height: 1.2; }
.cb-po__items small { color: var(--muted); }
.cb-qty { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.cb-qty button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); transition: background .3s, color .3s; }
.cb-qty button:hover { background: var(--primary); color: #fff; }
.cb-qty output { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); margin-bottom: 16px; }
.cb-mode button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 999px; font-weight: 600; font-size: .9rem; transition: all .3s; }
.cb-mode button small { color: var(--muted); font-weight: 500; }
.cb-mode button.is-active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.cb-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.cb-day { display: grid; gap: 0; padding: 10px 4px; border-radius: 16px; border: 1.5px solid var(--line); text-align: center; transition: all .3s; }
.cb-day small { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cb-day b { font-family: var(--font-head); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.cb-day.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cb-day.is-active small { color: rgba(255, 255, 255, .8); }
.cb-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 480px) { .cb-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cb-slot { display: grid; place-items: center; min-height: 44px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--line); font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; line-height: 1.1; transition: all .3s; }
.cb-slot small { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.cb-slot:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.cb-slot.is-active { background: var(--cb-matcha); border-color: var(--cb-matcha); color: #fff; }
.cb-slot:disabled { cursor: not-allowed; color: var(--muted); opacity: .6; background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--line) 6px 7px); }
.cb-slot.is-off { display: none; }
.cb-po__hint { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: .86rem; color: var(--muted); }
.cb-po__ticket, .cb-ticket {
  position: relative; padding: 28px clamp(22px, 3vw, 30px) 44px; background: var(--surface); color: var(--text); border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
}
.cb-po__when { margin: 10px 0 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.cb-po__when b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.cb-po__when small { color: var(--muted); }
.cb-po__lines li { display: flex; justify-content: space-between; padding: 5px 0; color: var(--muted); }
.cb-po__lines b { color: var(--text); font-variant-numeric: tabular-nums; }
.cb-po__total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 20px; padding-top: 12px; border-top: 2px dotted var(--line); }
.cb-po__total b { font-family: var(--font-head); font-weight: 400; font-size: 2.4rem; line-height: 1; color: var(--cb-em); }

/* 10. Cards, notes, posts, CTA ------------------------------------------ */
.cb-boxes { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cb-boxes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cb-boxes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cb-boxes--stack { gap: 16px; }
.cb-box { position: relative; padding: 0 26px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; text-align: center; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.cb-box:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.cb-box__lid { position: relative; height: 54px; margin: 0 -26px 26px; background: linear-gradient(90deg, transparent calc(50% - 7px), var(--primary) calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)), var(--cb-pink-soft); border-bottom: 2px dashed color-mix(in srgb, var(--primary) 35%, transparent); }
.cb-box__lid .cb-bow { position: absolute; left: 50%; bottom: -16px; margin-left: -28px; z-index: 1; }
.cb-box__lid .cb-bow i { background: var(--cb-pink-soft); }
.cb-box__ic { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--cb-matcha-soft); color: var(--cb-matcha-ink); font-size: 1.5rem; margin-top: 6px; }
.cb-box h3 { font-size: 1.35rem; margin: 16px 0 8px; }
.cb-box p { color: var(--muted); margin: 0; }
.cb-boxes--stack .cb-box { text-align: left; display: grid; grid-template-columns: 54px 1fr; gap: 0 16px; padding: 22px; align-items: start; }
.cb-boxes--stack .cb-box__lid { display: none; }
.cb-boxes--stack .cb-box__ic { grid-row: span 2; margin: 0; }
.cb-boxes--stack .cb-box h3 { margin: 4px 0 6px; font-size: 1.2rem; }
.cb-boxes--stack .cb-box { border-left: 6px solid var(--primary); }

.cb-notes { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cb-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-note { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 34px 28px 26px; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 8px; background: var(--surface); border: 1px solid var(--line); }
.cb-note::before { content: "“"; position: absolute; top: -6px; right: 22px; font-family: var(--font-head); font-size: 6rem; line-height: 1; color: var(--cb-pink); }
.cb-choc .cb-note::before { color: #6b3a3c; }
.cb-note .stars { color: var(--primary); font-size: .95rem; }
.cb-choc .cb-note .stars { color: #f59ab3; }
.cb-note blockquote { font-family: var(--font-head); font-size: 1.22rem; line-height: 1.45; }
.cb-note figcaption { display: flex; gap: 12px; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); }
.cb-note img { width: 48px; height: 48px; border-radius: 50%; }
.cb-note strong { display: block; font-weight: 600; }
.cb-note span { font-size: .88rem; color: var(--muted); }

.cb-posts { display: grid; gap: 30px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cb-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cb-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-post { position: relative; }
.cb-post__img { display: block; border-radius: var(--radius) var(--radius) 120px 120px / var(--radius) var(--radius) 40px 40px; overflow: hidden; }
.cb-post__img img { width: 100%; aspect-ratio: 4/3; transition: transform 1s var(--ease); }
.cb-post:hover .cb-post__img img { transform: scale(1.05); }
.cb-post__cat { position: absolute; left: 14px; top: 16px; }
.cb-post__body { padding: 18px 6px 0; }
.cb-post time { font-size: .85rem; color: var(--muted); }
.cb-post h3 { font-size: 1.4rem; line-height: 1.22; margin: 6px 0 12px; }
.cb-post:hover h3 { color: var(--primary); }

.cb-cta-sec { padding-top: clamp(56px, 8vw, 110px); }
.cb-cta { position: relative; display: grid; gap: 32px; align-items: center; padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 72px) clamp(32px, 5vw, 64px); border-radius: var(--radius-lg); background: var(--primary); color: #fff; overflow: hidden; isolation: isolate; --text: #fff; --muted: rgba(255, 255, 255, .85); --cb-em: #ffe0e8; }
.cb-cta::before { content: ""; position: absolute; inset: 0 0 auto; height: 44px; background: color-mix(in srgb, var(--primary) 70%, #5a0f25); -webkit-mask: var(--cb-drip) 0 0 / 240px 44px repeat-x; mask: var(--cb-drip) 0 0 / 240px 44px repeat-x; z-index: -1; }
.cb-cta::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14) 2px, transparent 2.5px) 0 0 / 20px 20px; z-index: -1; }
@media (min-width: 1024px) { .cb-cta { grid-template-columns: 1.25fr .75fr; gap: 56px; } }
.cb-cta .lead { color: rgba(255, 255, 255, .88); }
.cb-cta__script { color: #ffe0e8; margin-bottom: 8px; }
.cb-cta .btn--ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, .55); }
.cb-cta .btn--ghost::before { border-color: rgba(255, 255, 255, .45); }
.cb-cta .btn--ghost::after { background: rgba(255, 255, 255, .14); }
.cb-cta__img { justify-self: center; width: min(360px, 100%); }
.cb-cta__img img { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 10px solid rgba(255, 255, 255, .18); outline: 2px dashed rgba(255, 255, 255, .5); outline-offset: 6px; }
@media (max-width: 1023px) { .cb-cta__img { width: min(260px, 80%); } }

.cb-band { background: var(--primary); color: #fff; padding-block: 18px; position: relative; z-index: 1; }
.cb-band .marquee { -webkit-mask: none; mask: none; }
.cb-band .marquee__track { gap: 0; padding-right: 0; }
.cb-band span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 2rem); white-space: nowrap; }
.cb-band i { font-style: normal; color: var(--cb-pink); font-size: .8em; }

.cb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.cb-stat { padding: 18px 12px; border-radius: 22px; background: var(--cb-pink-soft); text-align: center; }
.cb-stat b { display: block; font-family: var(--font-head); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; color: var(--cb-em); }
.cb-stat > span { display: block; font-size: .82rem; color: var(--muted); margin-top: 6px; line-height: 1.3; }

.cb-split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .cb-split { grid-template-columns: 1fr 1fr; gap: 80px; } .cb-split--rev > :first-child { order: 2; } }
.cb-split__img { position: relative; padding-bottom: 40px; }
.cb-split__img > img:first-child { width: 88%; aspect-ratio: 7/8; border-radius: var(--radius-lg) var(--radius-lg) 220px var(--radius-lg); box-shadow: var(--shadow-lg); }
.cb-split--rev .cb-split__img > img:first-child { margin-left: auto; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 220px; }
.cb-split__small { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 6/7; border-radius: 999px; border: 8px solid var(--bg); box-shadow: var(--shadow); }
.cb-split--rev .cb-split__small { right: auto; left: 0; }
.section--alt .cb-split__small { border-color: var(--bg-2); }

.cb-menu-mini li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; }
.cb-menu-mini b { font-weight: 600; }
.cb-menu-mini i { flex: 1; min-width: 20px; border-bottom: 2px dotted color-mix(in srgb, var(--text) 25%, transparent); transform: translateY(-4px); }
.cb-menu-mini span { font-family: var(--font-head); font-size: 1.1rem; white-space: nowrap; color: var(--cb-em); }

.cb-tl { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); counter-reset: s; }
@media (min-width: 640px) { .cb-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cb-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.cb-tl li { position: relative; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.cb-tl__h { position: absolute; top: 22px; right: 22px; font-family: var(--font-logo); font-size: 2.2rem; line-height: 1; color: var(--cb-em); }
.cb-tl__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cb-pink-soft); color: var(--cb-em); font-size: 1.4rem; border: 1.5px dashed color-mix(in srgb, var(--cb-em) 60%, transparent); }
.cb-tl h3 { font-size: 1.3rem; margin: 18px 0 6px; }
.cb-tl p { color: var(--muted); margin: 0; }

/* 11. Home 1 – Sourdough Bakery ------------------------------------------ */
.cb-hero1 { padding-bottom: clamp(56px, 7vw, 100px); }
.cb-hero1::before { content: ""; position: absolute; right: -10%; top: 12%; width: 60%; height: 80%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 12%, transparent) 1.5px, transparent 2px) 0 0 / 22px 22px; z-index: -1; -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); }
.cb-hero1__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .cb-hero1__grid { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
.cb-hero1__tag { margin-bottom: 26px; }
.cb-hero1__facts { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 42px; padding-top: 26px; border-top: 1px dashed var(--line); }
.cb-hero1__facts b { display: block; font-family: var(--font-head); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--cb-em); }
.cb-hero1__facts span { font-size: .88rem; color: var(--muted); }
.cb-hero1__art { position: relative; max-width: 540px; margin-inline: auto; width: 100%; padding: 0 0 40px 30px; }
.cb-arch { position: relative; }
.cb-arch::before { content: ""; position: absolute; inset: -14px; border: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent); border-radius: 999px 999px 36px 36px; pointer-events: none; }
.cb-arch img { width: 100%; aspect-ratio: 4/5; border-radius: 999px 999px 28px 28px; box-shadow: var(--shadow-lg); }
.cb-hero1__round { position: absolute; left: -6px; bottom: 0; width: 38%; }
.cb-hero1__round img { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 8px solid var(--bg); box-shadow: var(--shadow); }
.cb-hero1__script { position: absolute; left: -10px; top: 12%; z-index: 2; }
@media (min-width: 1024px) { .cb-hero1__script { left: -96px; top: 16%; } }
.cb-hero1__script svg { transform: rotate(40deg) translate(6px, 10px); }
.cb-hero1__next { position: absolute; right: -8px; bottom: 60px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 300px; }
.cb-hero1__next small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cb-hero1__next b { display: block; font-weight: 600; line-height: 1.2; }
.cb-hero1__next em { font-style: normal; font-family: var(--font-head); font-size: 1.3rem; color: var(--cb-em); margin-left: auto; padding-left: 8px; }
@media (max-width: 639px) { .cb-hero1__art { padding-left: 10px; } .cb-hero1__script { display: none; } .cb-hero1__next { right: 0; bottom: 38%; max-width: 230px; } }

/* 12. Home 2 – Patisserie & Macarons ------------------------------------- */
.cb-p-patis .cb-hero2 { background: var(--bg-2); text-align: center; padding-bottom: clamp(60px, 7vw, 100px); }
.cb-hero2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 16%, transparent) 1.5px, transparent 2px) 0 0 / 24px 24px; z-index: -1; -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.cb-hero2__text { max-width: 860px; margin-inline: auto; }
.cb-hero2__text .lead { margin-inline: auto; }
.cb-hero2__text .btn-group { justify-content: center; }
.cb-hero2__script { margin-bottom: 14px; }
.cb-hero2__stage { position: relative; margin: clamp(48px, 6vw, 72px) auto 0; max-width: 980px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 36px; }
.cb-hero2__main { position: relative; z-index: 1; width: min(460px, 78vw); }
.cb-hero2__main img { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 12px solid var(--surface); outline: 2px dashed var(--primary); outline-offset: 8px; box-shadow: var(--shadow-lg); }
.cb-hero2__side { position: absolute; bottom: 80px; width: 24%; }
.cb-hero2__side img { width: 100%; aspect-ratio: 4/5; border-radius: 999px; border: 8px solid var(--surface); box-shadow: var(--shadow); }
.cb-hero2__side--l { left: 3%; transform: rotate(-7deg); }
.cb-hero2__side--r { right: 3%; transform: rotate(7deg); }
.cb-hero2__macs { position: absolute; left: 50%; bottom: 0; z-index: 2; display: flex; gap: 6px; transform: translateX(-50%); padding: 14px 20px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); }
.cb-hero2__macs .cb-mac { --s: 50px; }
.cb-hero2__tag { position: absolute; z-index: 3; right: 24%; top: 6%; }
@media (max-width: 767px) { .cb-hero2__side { display: none; } .cb-hero2__tag { right: 0; top: 0; } .cb-hero2__macs .cb-mac { --s: 40px; } .cb-hero2__macs { padding: 10px 14px; gap: 4px; } }
.cb-mac { --s: 64px; display: inline-flex; flex-direction: column; align-items: center; width: var(--s); flex: none; }
.cb-mac i { display: block; width: 100%; height: calc(var(--s) * .36); border-radius: 50%; background: radial-gradient(ellipse at 35% 30%, rgba(255, 255, 255, .5), transparent 45%), var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.cb-mac i:last-child { background: var(--c); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .1), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.cb-mac b { display: block; width: 86%; height: calc(var(--s) * .14); margin-block: -2px; border-radius: 4px; background: var(--f); box-shadow: 0 0 0 1px rgba(46, 26, 20, .08); position: relative; z-index: 1; }
.cb-macwall { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .cb-macwall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cb-macwall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cb-macwall li { display: grid; justify-items: center; gap: 14px; padding: 28px 12px 22px; border-radius: 999px 999px var(--radius) var(--radius); background: var(--surface); border: 1px solid var(--line); text-align: center; transition: transform .5s var(--ease), box-shadow .5s; }
.cb-macwall li:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.cb-macwall li:hover .cb-mac { transform: rotate(-8deg) scale(1.06); }
.cb-macwall .cb-mac { --s: 88px; transition: transform .5s var(--ease); }
.cb-macwall b { font-family: var(--font-head); font-weight: 400; font-size: 1.15rem; }
.cb-gifts { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cb-gifts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-gift { border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.cb-gift__img { position: relative; }
.cb-gift__img img { width: 100%; aspect-ratio: 5/4; }
.cb-gift__img::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 14px; margin-left: -7px; background: color-mix(in srgb, var(--primary) 85%, transparent); }
.cb-gift__bow { position: absolute; left: 50%; bottom: -14px; margin-left: -28px; z-index: 1; }
.cb-gift__bow i { background: var(--surface); }
.cb-gift__body { position: relative; padding: 30px 26px 26px; }
.cb-gift__n { position: absolute; top: 14px; right: 22px; font-family: var(--font-logo); font-size: 3rem; line-height: 1; color: var(--cb-pink); }
.cb-gift h3 { font-size: 1.5rem; margin-bottom: 6px; }
.cb-gift p { color: var(--muted); }
.cb-gift__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }

/* 13. Home 3 – Cake Studio ----------------------------------------------- */
.cb-hero3 { background: var(--cb-chocbg); --cb-edge: var(--cb-chocbg); color: #fff4e2; --text: #fff4e2; --muted: #d8bfae; --line: rgba(255, 244, 226, .18); --cb-em: #f59ab3; --surface: #3d251d; padding-bottom: clamp(72px, 8vw, 120px); overflow: visible; }
.cb-hero3::before { display: none; }
.cb-hero3 .container { position: relative; }
.cb-hero3__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .cb-hero3__grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.cb-hero3__script { color: #f59ab3; margin-bottom: 16px; }
.cb-hero3 .btn--ghost { --btn-fg: #fff4e2; border-color: rgba(255, 244, 226, .4); }
.cb-hero3 .btn--ghost::after { background: rgba(255, 244, 226, .1); }
.cb-occ { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.cb-occ li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px dashed rgba(255, 244, 226, .35); font-size: .9rem; }
.cb-occ .ti { color: #f59ab3; }
.cb-hero3__art { position: relative; padding: 20px 40px 60px; max-width: 580px; margin-inline: auto; width: 100%; }
.cb-cakebox { position: relative; border-radius: var(--radius-lg); overflow: visible; }
.cb-cakebox img { width: 100%; aspect-ratio: 5/6; border-radius: var(--radius-lg); border: 10px solid #fff4e2; }
.cb-cakebox__rib { position: absolute; top: 0; bottom: 0; left: 50%; width: 18px; margin-left: -9px; background: var(--primary); z-index: 1; box-shadow: 0 0 0 3px rgba(255, 255, 255, .2); }
.cb-cakebox__bow { position: absolute; top: -14px; left: 50%; margin-left: -34px; z-index: 2; transform: scale(1.4); }
.cb-cakebox__bow i { background: var(--cb-chocbg); }
.cb-polaroid { position: absolute; width: 42%; padding: 10px 10px 4px; background: #fffcf6; color: #2e1a14; border-radius: 6px; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .7); z-index: 3; }
.cb-polaroid img { width: 100%; aspect-ratio: 1; border-radius: 3px; }
.cb-polaroid figcaption { font-family: var(--font-logo); font-size: 1.5rem; text-align: center; line-height: 1.5; }
.cb-polaroid--a { left: -6px; bottom: 0; transform: rotate(-8deg); }
.cb-polaroid--b { right: -4px; top: 18%; transform: rotate(7deg); width: 36%; }
@media (max-width: 639px) { .cb-hero3__art { padding: 16px 12px 70px; } .cb-polaroid figcaption { font-size: 1.15rem; } }

.cb-gal { columns: 2; column-gap: 12px; }
@media (min-width: 1024px) { .cb-gal { columns: 4; } }
.cb-gal__item { break-inside: avoid; margin-bottom: 12px; position: relative; border-radius: var(--radius); overflow: hidden; }
.cb-gal__item img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.cb-gal__item:hover img { transform: scale(1.05); }
.cb-gal__item figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text); font-size: .85rem; font-weight: 600; backdrop-filter: blur(6px); }
.cb-faqwrap { display: grid; gap: 40px; }
@media (min-width: 1024px) { .cb-faqwrap { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; } }
.cb-faqwrap .cb-hours { margin-top: 8px; }

/* 14. Home 4 – Bakery Café & Pre-order ----------------------------------- */
.cb-hero4 { min-height: min(100svh, 900px); display: flex; align-items: center; color: #fff; --text: #fff; --muted: rgba(255, 255, 255, .84); isolation: isolate; }
.cb-hero4__bg { position: absolute; inset: 0; z-index: -2; }
.cb-hero4::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px; background: radial-gradient(circle at 50% 100%, var(--bg) 13.5px, transparent 14px) 0 100% / 28px 14px repeat-x; }
.cb-hero4__bg img { width: 100%; height: 100%; }
.cb-hero4::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(46, 26, 20, .92) 0%, rgba(46, 26, 20, .7) 45%, rgba(46, 26, 20, .25) 100%); }
.cb-hero4 .container { width: 100%; }
.cb-hero4__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .cb-hero4__grid { grid-template-columns: 1.2fr .8fr; gap: 64px; } }
.cb-hero4 .lead { color: rgba(255, 255, 255, .86); }
.cb-hero4 .hero__title em { color: #f7c8d0; }
.cb-hero4 .btn--ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, .5); }
.cb-hero4 .btn--ghost::before { border-color: rgba(255, 255, 255, .4); }
.cb-hero4 .btn--ghost::after { background: rgba(255, 255, 255, .12); }
.cb-ticket { display: grid; gap: 14px; --text: var(--cb-choc); color: #2e1a14; background: #fffaf1; --line: rgba(46, 26, 20, .14); --surface: #fffaf1; --muted: #74574b; max-width: 440px; width: 100%; justify-self: end; }
[data-theme="dark"] .cb-ticket { background: #412820; color: #fff4e2; --text: #fff4e2; --surface: #412820; --line: rgba(255, 244, 226, .16); --muted: #d6bcab; }
.cb-ticket h2 { font-size: 1.9rem; margin: 0; }
.cb-ticket .form-row { gap: 12px; grid-template-columns: 1fr 1fr; }
.cb-ticket .input { min-height: 48px; }
.cb-ticket__note { display: flex; gap: 8px; align-items: center; margin: 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 1023px) { .cb-ticket { justify-self: start; } }
.cb-steps { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-steps li { position: relative; padding: 30px 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.cb-steps__n { position: absolute; top: 12px; right: 22px; font-family: var(--font-logo); font-size: 3.2rem; line-height: 1; color: var(--cb-pink); }
.cb-steps__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--primary); color: #fff; font-size: 1.4rem; }
.cb-steps h3 { font-size: 1.35rem; margin: 18px 0 6px; }
.cb-steps p { color: var(--muted); margin: 0; }
.cb-zones li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.cb-zones li > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.cb-zones li > span:first-child .ti { color: var(--primary); }
.cb-zones li > span:nth-child(2) { grid-row: 2; color: var(--muted); font-size: .88rem; padding-left: 26px; }
.cb-zones em { grid-row: span 2; font-style: normal; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--cb-matcha-soft); color: var(--cb-matcha-ink); font-size: .85rem; white-space: nowrap; }

/* 15. Page header & inner pages ----------------------------------------- */
.cb-ph { background: var(--bg-2); text-align: center; padding-bottom: clamp(56px, 6vw, 88px); }
.cb-ph__in { display: grid; gap: 28px; align-items: center; justify-items: center; }
@media (min-width: 1024px) { .cb-ph__in { grid-template-columns: 250px minmax(0, 1fr) 230px; gap: 48px; } }
.cb-ph__text { max-width: 760px; }
.cb-ph .breadcrumb { justify-content: center; }
.cb-ph h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); letter-spacing: -0.02em; line-height: 1.04; }
.cb-ph .lead { margin-inline: auto; }
.cb-ph__tag { margin-top: 8px; }
.cb-ph__img img { box-shadow: var(--shadow); }
.cb-ph__img--a img { width: 250px; aspect-ratio: 1; border-radius: 50%; border: 8px solid var(--surface); outline: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 6px; }
.cb-ph__img--b img { width: 230px; aspect-ratio: 4/5; border-radius: 999px 999px 24px 24px; border: 8px solid var(--surface); transform: rotate(4deg); }
@media (max-width: 1023px) { .cb-ph__img--b { display: none; } .cb-ph__img--a { order: -1; } .cb-ph__img--a img { width: 128px; outline-offset: 4px; } }

.cb-drinks { margin-top: 12px; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.cb-drinks h3 { display: flex; gap: 10px; align-items: center; font-size: 1.35rem; }
.cb-drinks h3 .ti { color: var(--primary); }
.cb-drinks .muted { margin: 10px 0 0; font-size: .88rem; }

.cb-years li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
@media (min-width: 768px) { .cb-years li { grid-template-columns: 180px minmax(0, 1fr); } }
.cb-years span { font-family: var(--font-logo); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--cb-em); }
.cb-years h3 { font-size: 1.45rem; margin-bottom: 4px; }
.cb-years p { color: var(--muted); margin: 0; }
.member__img { border-radius: 999px 999px var(--radius) var(--radius); }
.member h3 { font-size: 1.35rem; }

.cb-sizes { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .cb-sizes { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.cb-sizes__list { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cb-sizes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cb-sizes__list li { display: grid; gap: 4px; padding: 22px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.cb-sizes__list b { font-family: var(--font-head); font-weight: 400; font-size: 1.5rem; }
.cb-sizes__list span { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.cb-sizes__list em { font-style: normal; font-weight: 700; color: var(--cb-em); }
.cb-gal--4 { columns: 2; }
@media (min-width: 1024px) { .cb-gal--4 { columns: 4; } }

.cb-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.cb-cat { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: .92rem; transition: all .3s; }
.cb-cat:hover, .cb-cat.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.cb-feature { display: grid; gap: 28px; align-items: center; padding: clamp(14px, 2vw, 22px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 1024px) { .cb-feature { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.cb-feature__img { border-radius: calc(var(--radius-lg) - 10px); overflow: hidden; }
.cb-feature__img img { width: 100%; aspect-ratio: 7/5; }
.cb-feature__body { padding: 8px clamp(8px, 2vw, 26px) 16px; }
.cb-feature time { display: block; margin: 16px 0 8px; color: var(--muted); font-size: .9rem; }
.cb-feature h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; }
.cb-recipe { display: grid; gap: 32px; padding: clamp(18px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--primary) 9%, transparent) 31px 32px); }
@media (min-width: 1024px) { .cb-recipe { grid-template-columns: .8fr 1.2fr; gap: 48px; } }
.cb-recipe__img { position: relative; }
.cb-recipe__img img { width: 100%; aspect-ratio: 1; border-radius: var(--radius); }
.cb-recipe__tag { position: absolute; top: 18px; left: -6px; }
.cb-recipe h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.cb-recipe__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 24px; }
.cb-recipe__meta li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--cb-pink-soft); font-size: .88rem; font-weight: 500; }
.cb-recipe__cols { display: grid; gap: 28px; }
@media (min-width: 768px) { .cb-recipe__cols { grid-template-columns: 1fr 1.2fr; } }
.cb-recipe__cols h3 { font-size: 1.3rem; color: var(--cb-em); }
.cb-recipe__ing li { padding: 6px 0 6px 22px; position: relative; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.cb-recipe__ing li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--cb-matcha); }
.cb-recipe__steps { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.cb-recipe__steps li { counter-increment: r; position: relative; padding: 4px 0 14px 44px; }
.cb-recipe__steps li::before { content: counter(r); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: .85rem; }
.cb-newsband { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .cb-newsband { grid-template-columns: 1fr minmax(0, 460px); gap: 56px; } }
.cb-newsband__script { color: #f59ab3; margin-bottom: 8px; }
.cb-choc .newsletter { background: var(--surface); border-color: var(--line); }

.cb-shops { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cb-shops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cb-shops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-shop { border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.cb-shop__img { position: relative; }
.cb-shop__img img { width: 100%; aspect-ratio: 3/2; }
.cb-shop__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 12px; background: radial-gradient(circle at 50% 100%, var(--surface) 11.5px, transparent 12px) 0 100% / 24px 12px repeat-x; }
.cb-shop__bow { position: absolute; top: 14px; right: 16px; }
.cb-shop__bow i { background: rgba(255, 255, 255, .6); }
.cb-shop__body { padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cb-shop h3 { font-size: 1.6rem; margin: 0; }
.cb-shop p { color: var(--muted); margin: 0; }
.cb-shop__addr { display: flex; gap: 8px; align-items: center; color: var(--text) !important; font-weight: 500; }
.cb-shop__addr .ti { color: var(--primary); }
.cb-shop__feats { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-shop__feats li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--cb-matcha-soft); color: var(--cb-matcha-ink); font-size: .8rem; font-weight: 600; }
.cb-hours { padding: 22px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.cb-hours--mini { padding: 14px 0 0; margin-top: auto; border: 0; border-top: 1px dashed var(--line); border-radius: 0; background: none; }
.cb-hours__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.cb-hours__head h3 { font-size: 1.25rem; margin: 0; }
.cb-hours--mini .cb-hours__head h3 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; }
.cb-hours__st { padding: 4px 12px; border-radius: 999px; background: var(--surface-2); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cb-hours__st.is-open { background: var(--cb-matcha); color: #fff; }
.cb-hours__st.is-closed { background: var(--cb-pink-soft); color: var(--cb-em); }
.cb-hours li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 10px; border-radius: 10px; font-size: .92rem; }
.cb-hours li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cb-hours li.is-today { background: var(--cb-pink-soft); color: var(--cb-em); font-weight: 600; }
.cb-mapwrap { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1024px) { .cb-mapwrap { grid-template-columns: .9fr 1.1fr; gap: 56px; } }
.cb-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 380px; border: 8px solid var(--surface); box-shadow: var(--shadow); }
.cb-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cb-map__land { fill: #f6e7d2; }
.cb-map__water { fill: #cfe0e8; }
.cb-map__park { fill: #dbe7c9; }
.cb-map__st path { fill: none; stroke: #fffaf2; stroke-width: 10; stroke-linecap: round; }
[data-theme="dark"] .cb-map__land { fill: #3a241c; }
[data-theme="dark"] .cb-map__water { fill: #2b3a42; }
[data-theme="dark"] .cb-map__park { fill: #34402b; }
[data-theme="dark"] .cb-map__st path { stroke: #4d3228; }
.cb-map__pin { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); transform: translate(-50%, -50%); font-size: .86rem; white-space: nowrap; }
.cb-map__pin .ti { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; }

/* 16. Generic components restyled -------------------------------------- */
.accordion { border-top: 1px dashed var(--line); }
.accordion__item { border-bottom: 1px dashed var(--line); }
.accordion__btn { font-weight: 400; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.accordion__item.is-open .accordion__icon { background: var(--primary); }
.process { gap: 20px; }
.step { border-radius: var(--radius); background: var(--surface); }
.step__num { font-family: var(--font-logo); font-weight: 400; font-size: 2.2rem; padding: 0; background: none; color: var(--cb-em); line-height: 1; }
.step h3 { font-size: 1.35rem; margin-top: 10px; }
.contact-list .icon-box { border-radius: 50%; background: var(--cb-pink-soft); color: var(--primary); }
.form.card { border-radius: var(--radius-lg); }
.input, .select, .textarea { border-radius: 16px; background: var(--surface); }
.newsletter { border-radius: 999px; }
.card:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); }
.to-top { background: var(--primary); color: #fff; }
.preloader__bar::after { background: var(--primary); }
.cursor { background: var(--primary); }

/* 17. Footer & 404 ------------------------------------------------------ */
.cb-foot { position: relative; margin-top: 14px; padding-top: clamp(70px, 8vw, 110px); background: var(--cb-chocbg); color: #fff4e2; --text: #fff4e2; --muted: #d8bfae; --line: rgba(255, 244, 226, .15); --surface: #3d251d; --cb-edge: var(--cb-chocbg); }
.cb-foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 14px; background: radial-gradient(circle at 50% 100%, var(--cb-chocbg) 13.5px, transparent 14px) 0 100% / 28px 14px repeat-x; }
.cb-foot .logo { color: #fff4e2; }
.cb-foot .logo__mark { box-shadow: 0 0 0 3px var(--cb-chocbg), 0 0 0 4px #f59ab3; background: #5a3130; color: #f59ab3; border-color: #f59ab3; }
.cb-foot__top { display: grid; gap: 36px; padding-bottom: 44px; border-bottom: 1px dashed var(--line); }
@media (min-width: 768px) { .cb-foot__top { grid-template-columns: 1fr 1fr; } .cb-foot__news { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .cb-foot__top { grid-template-columns: 1.2fr .8fr 1.1fr; gap: 48px; } .cb-foot__news { grid-column: auto; } }
.cb-foot__brand p { color: var(--muted); max-width: 42ch; margin: 18px 0 0; }
.cb-foot h4 { font-size: 1.2rem; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; letter-spacing: 0; }
.cb-foot__hours li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); color: var(--muted); }
.cb-foot__hours b { color: #fff4e2; font-weight: 600; }
.cb-foot__news p { color: var(--muted); }
.cb-foot .newsletter { background: #3d251d; border-color: var(--line); max-width: none; }
.cb-foot__cols { display: grid; gap: 32px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 44px; }
@media (min-width: 1024px) { .cb-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cb-foot__col ul li { padding: 5px 0; }
.cb-foot__col a { color: var(--muted); transition: color .3s; }
.cb-foot__col a:hover { color: #f59ab3; }
.cb-foot address { font-style: normal; color: var(--muted); line-height: 1.9; }
.cb-foot__word { font-family: var(--font-logo); font-size: clamp(4.5rem, 18vw, 15rem); line-height: 1; text-align: center; color: #f59ab3; opacity: .16; user-select: none; margin: -10px 0 -20px; white-space: nowrap; overflow: hidden; }
.cb-foot .footer-bottom { border-top: 1px dashed var(--line); color: var(--muted); }
.cb-foot .footer-bottom span { display: inline-flex; gap: 6px; align-items: center; }
.cb-foot .socials a { border-color: var(--line); }
.cb-foot .socials a:hover { background: var(--primary); }
.error-page { background: var(--bg-2); }
.error-page .code { font-family: var(--font-head); font-weight: 400; letter-spacing: -0.04em; }
.error-page > div::before { content: "oh, crumbs!"; display: block; font-family: var(--font-logo); font-size: clamp(2.4rem, 6vw, 3.6rem); color: var(--cb-em); transform: rotate(-5deg); margin-bottom: -10px; }
.error-page .btn--gradient { background: var(--primary); }

@media (max-width: 639px) { .cb-gal__item figcaption { left: 8px; bottom: 8px; padding: 4px 10px; font-size: .74rem; } }