/* ============================================================
   CANTINHO DO CHURRASCO — Design Foundations (ported from v2/ prototype)
   Colors + Typography tokens. Palette sampled from the brand logo
   (fire / wood / charcoal / cream).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Odibee+Sans&family=Oswald:wght@400;500;600;700&family=Bitter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ============ BRAND PALETTE (raw) ============ */
  --charcoal-950: #080605;
  --charcoal-900: #120D0B;
  --charcoal-800: #1C1512;
  --charcoal-700: #2A1F19;
  --charcoal-600: #3A2C24;
  --charcoal-500: #4E3A2E;

  --ember-600:    #B5410E;
  --ember-500:    #DA5C18;
  --ember-400:    #F2772A;
  --flame-400:    #F5A623;
  --flame-300:    #FBC453;
  --coal-red:     #8D1402;
  --coal-red-bright: #B5311A;

  --wood-900:     #3A1C08;
  --wood-800:     #622100;
  --wood-700:     #8A4A22;
  --wood-600:     #AB5733;
  --wood-500:     #C47A45;
  --wood-400:     #D9975F;

  --cream-50:     #FBF6EC;
  --cream-100:    #F9F0E1;
  --cream-200:    #F4E9D4;
  --cream-300:    #E7D8BD;

  --ash-400:      #9F8C73;
  --ash-500:      #847358;
  --smoke-600:    #6B5D4F;
  --smoke-700:    #534840;

  /* ============ BRAND-CONSTANT SEMANTIC TOKENS ============ */
  --primary:       #E51F0E;
  --primary-hover: #FB3A22;
  --primary-press: #B81206;
  --accent:        var(--flame-400);
  --glow-primary:  0 0 26px rgba(229,31,14,.55);

  --success:       #4E8A3F;
  --warning:       var(--flame-400);
  --danger:        var(--coal-red-bright);

  /* ============ TYPOGRAPHY ============ */
  --font-display: 'Odibee Sans', 'Oswald', Impact, sans-serif;
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Bitter', Georgia, 'Times New Roman', serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.75rem;
  --text-5xl:  5rem;

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-normal:1.55;

  --tracking-display: 0.01em;
  --tracking-label:   0.14em;
  --tracking-body:    0;

  /* ============ SPACING (8pt base) ============ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ============ RADII ============ */
  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  --shadow-glow: 0 0 24px rgba(218,92,24,.45);
}

/* ---- DARK (default) ---- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--charcoal-900);
  --bg-deep:       var(--charcoal-950);
  --surface:       var(--charcoal-800);
  --surface-2:     var(--charcoal-700);
  --surface-hover: var(--charcoal-700);

  --fg-bright:     var(--cream-100);
  --fg:            var(--cream-200);
  --fg-soft:       var(--cream-300);
  --fg-muted:      var(--ash-400);
  --fg-faint:      var(--ash-500);
  --placeholder:   var(--smoke-600);
  --on-primary:    var(--cream-50);

  --border:        var(--charcoal-600);
  --border-strong: var(--wood-700);
  --hairline:      rgba(255,255,255,.06);

  --scrim:         rgba(8,6,5,.82);
  --scrim-strong:  rgba(8,6,5,.96);

  --price:         var(--flame-400);

  --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
  --shadow-md:   0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:   0 18px 48px rgba(0,0,0,.6);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- LIGHT (warm parchment / daytime grill) ---- */
[data-theme="light"] {
  color-scheme: light;

  --bg:            #F7EFE2;
  --bg-deep:       #EFE3CF;
  --surface:       #FFFDF8;
  --surface-2:     #F1E6D4;
  --surface-hover: #EFE3CF;

  --fg-bright:     #1C1512;
  --fg:            #2A1F19;
  --fg-soft:       #4E3A2E;
  --fg-muted:      #7A6A55;
  --fg-faint:      #9A8A73;
  --placeholder:   #A1907A;
  --on-primary:    var(--cream-50);

  --border:        #E6D8C0;
  --border-strong: #C9A878;
  --hairline:      rgba(58,28,8,.10);

  --scrim:         rgba(251,246,236,.84);
  --scrim-strong:  rgba(251,246,236,.95);

  --price:         var(--ember-600);

  --shadow-sm:   0 1px 2px rgba(58,28,8,.10);
  --shadow-md:   0 8px 22px rgba(58,28,8,.12);
  --shadow-lg:   0 22px 52px rgba(58,28,8,.16);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);
}

/* ============ SEMANTIC ELEMENT STYLES ============ */
.cc-display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--fg-bright); }
.cc-h1 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); color: var(--fg-bright); margin: 0; }
.cc-h2 { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-3xl); line-height: var(--leading-snug); color: var(--fg-bright); margin: 0; }
.cc-h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg); margin: 0; }
.cc-eyebrow { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--primary); }
.cc-body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg); }
.cc-small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--fg-muted); }
.cc-price { font-family: var(--font-heading); font-weight: 700; color: var(--price); font-variant-numeric: tabular-nums; }

/* ============ BASE RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  min-height: 100vh;
  transition: background .35s ease;
}
input { color-scheme: inherit; }
input::placeholder { color: var(--placeholder); }

.scroll-y { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.scroll-y::-webkit-scrollbar { width: 7px; height: 7px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.scroll-y::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

/* ============ THEME TOGGLE + FLASH ============ */
.cc-theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-bright); background: var(--scrim);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 14px 9px 12px; cursor: pointer;
  box-shadow: var(--shadow-md); transition: background .2s, border-color .2s;
}
.cc-theme-toggle:hover { border-color: var(--border-strong); }
.cc-theme-toggle .dot { width: 16px; height: 16px; border-radius: 999px; flex: none; background: radial-gradient(circle at 32% 30%, var(--flame-300), var(--ember-500) 70%); box-shadow: var(--shadow-glow); }
[data-theme="light"] .cc-theme-toggle .dot { background: radial-gradient(circle at 32% 30%, #FFE6A8, var(--flame-400) 75%); }

.cc-flash { font-family: var(--font-body); border-radius: var(--radius-md); padding: 12px 16px; margin: 0 0 12px; }
.cc-flash--notice { background: rgba(78,138,63,.14); border: 1px solid rgba(78,138,63,.4); color: var(--fg-bright); }
.cc-flash--alert  { background: rgba(141,20,2,.14); border: 1px solid rgba(181,49,26,.45); color: var(--fg-bright); }

/* ============ WEB LAYOUT (cliente-web) ============ */
.cc-web-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 5vw, 48px);
  background: var(--scrim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50;
}
.cc-web-brand {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  line-height: 0;
}
.cc-web-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.cc-web-navlink {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; overflow: hidden;
  padding: 9px 11px; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--fg);
  transition: color .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.22, 1.35, .36, 1);
}
.cc-web-navlink > span, .cc-web-navlink__icon { position: relative; z-index: 2; }
.cc-web-navlink::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(112deg, transparent 28%, color-mix(in srgb, var(--cream-50) 38%, transparent) 48%, transparent 64%); transform: translateX(-115%) skewX(-14deg); }
.cc-web-navlink::after { content: ""; position: absolute; z-index: 2; left: 22%; right: 22%; bottom: 4px; height: 2px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 78%, transparent); transform: scaleX(0); transition: transform .22s ease; }
.cc-web-navlink:is(:hover, :focus-visible) { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 70%, var(--border)); background: color-mix(in srgb, var(--primary) 11%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent), 0 0 18px color-mix(in srgb, var(--primary) 24%, transparent); transform: translateY(-3px); outline: 0; }
.cc-web-navlink:is(:hover, :focus-visible)::before { opacity: 1; animation: cc-nav-shine .65s ease-out both; }
.cc-web-navlink:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.cc-web-navlink:is(:hover, :focus-visible) .cc-web-navlink__icon { animation: cc-nav-icon .45s cubic-bezier(.22, 1.45, .36, 1) both; }
.cc-web-navlink__icon { flex: none; transition: color .2s ease; }
@keyframes cc-nav-shine { from { transform: translateX(-115%) skewX(-14deg); } to { transform: translateX(115%) skewX(-14deg); } }
@keyframes cc-nav-icon { 0% { transform: scale(.7) rotate(-12deg); } 62% { transform: translateY(-2px) scale(1.2) rotate(7deg); } 100% { transform: scale(1) rotate(0); } }
.cc-web-nav__actions { display: flex; align-items: center; gap: 10px; }
.cc-web-bag {
  position: relative; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px; cursor: pointer; display: inline-flex;
  isolation: isolate; overflow: hidden;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.22, 1.35, .36, 1);
}
.cc-web-bag::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(112deg, transparent 24%, color-mix(in srgb, var(--cream-50) 42%, transparent) 48%, transparent 68%); transform: translateX(-115%) skewX(-14deg); }
.cc-web-bag::after { content: ""; position: absolute; z-index: 1; inset: 1px; pointer-events: none; opacity: 0; border: 1px solid color-mix(in srgb, var(--flame-300) 80%, transparent); border-radius: 8px; box-shadow: inset 0 0 12px color-mix(in srgb, var(--primary) 20%, transparent); transition: opacity .2s ease; }
.cc-web-bag > svg { position: relative; z-index: 2; transform-origin: 50% 25%; }
.cc-web-bag:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--primary) 16%, var(--surface-2)); border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent), 0 0 20px color-mix(in srgb, var(--primary) 30%, transparent); transform: translateY(-3px) scale(1.045); outline: 0; }
.cc-web-bag:is(:hover, :focus-visible)::before { opacity: 1; animation: cc-bag-shine .62s ease-out both; }
.cc-web-bag:is(:hover, :focus-visible)::after { opacity: 1; }
.cc-web-bag:is(:hover, :focus-visible) > svg { animation: cc-bag-swing .58s cubic-bezier(.22, 1.45, .36, 1) both; }
@keyframes cc-bag-shine { from { transform: translateX(-115%) skewX(-14deg); } to { transform: translateX(115%) skewX(-14deg); } }
@keyframes cc-bag-swing { 0% { transform: rotate(-10deg) scale(.82); } 42% { transform: translateY(-2px) rotate(9deg) scale(1.14); } 70% { transform: rotate(-4deg) scale(1.03); } 100% { transform: rotate(0) scale(1); } }
.cc-web-bag__badge {
  position: absolute; z-index: 3; top: -7px; right: -7px; background: var(--ember-500); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px; min-width: 20px; height: 20px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.cc-web-main { max-width: 1100px; margin: 0 auto; padding: clamp(20px, 5vw, 48px); }
.cc-web-main--flush { max-width: none; padding: 0; }
.cc-theme-toggle--fixed { position: fixed; right: 18px; bottom: 18px; z-index: 55; }

/* Web footer */
.cc-web-footer {
  background: var(--bg-deep); border-top: 1px solid var(--surface-2);
  padding: 46px clamp(20px, 5vw, 48px); display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 48px;
}
.cc-web-footer__brand { display: flex; align-items: center; gap: 14px; }
.cc-web-footer__copy { font-family: var(--font-body); font-size: 13.5px; color: var(--fg-muted); }
.cc-web-footer__social { display: flex; gap: 12px; }
.cc-web-social {
  width: 42px; height: 42px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
}

/* Cart drawer */
.cc-drawer__scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 80;
  opacity: 0; transition: opacity .25s;
}
.cc-drawer__scrim.is-open { opacity: 1; }
.cc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 90vw;
  background: var(--bg); border-left: 1px solid var(--surface-2); z-index: 81;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.cc-drawer.is-open { transform: translateX(0); }
.cc-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--surface-2); flex: none;
}
.cc-drawer__title {
  font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: var(--fg-bright);
  text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 10px;
}
.cc-drawer__close { background: none; border: 0; cursor: pointer; display: flex; padding: 4px; }
.cc-drawer__empty { text-align: center; color: var(--fg-muted); font-family: var(--font-body); padding: 70px 24px; }
.cc-drawer__empty p { margin: 14px 0 22px; }
.cc-drawer__body { flex: 1; overflow-y: auto; padding: 8px 20px 18px; }
.cc-drawer__row {
  display: flex; gap: 14px; align-items: center; padding: 13px 0;
  border-bottom: 1px solid var(--surface-2);
}
.cc-drawer__media { flex: none; }
.cc-drawer__info { flex: 1; min-width: 0; }
.cc-drawer__name {
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--fg-bright);
  text-transform: uppercase; letter-spacing: .02em;
}
.cc-drawer__line { font-size: 14px; margin-top: 3px; }
.cc-drawer__unit { font-family: var(--font-body); font-size: 11.5px; color: var(--fg-faint); }
.cc-drawer__stepper { display: flex; align-items: center; gap: 10px; flex: none; }
.cc-drawer__qty {
  font-family: var(--font-heading); font-weight: 700; color: var(--fg-bright);
  min-width: 42px; text-align: center;
}
.cc-drawer__foot { padding: 18px 20px 28px; border-top: 1px solid var(--surface-2); flex: none; }
.cc-drawer__meta {
  display: flex; justify-content: space-between; margin-bottom: 5px;
  font-family: var(--font-body); font-size: 13.5px; color: var(--fg-muted);
}
.cc-drawer__hint { font-size: 12.5px; color: var(--fg-faint); }
.cc-drawer__total {
  display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 18px;
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-muted); font-size: 13px;
}
.cc-drawer__total .cc-price { font-size: 28px; text-transform: none; letter-spacing: 0; }
.cc-drawer__note {
  display: flex; align-items: center; gap: 7px; font-family: var(--font-body);
  font-size: 12.5px; color: var(--fg-muted); margin: 0 0 14px;
}
.cc-drawer__cta { width: 100%; justify-content: center; }
.cc-step {
  width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cc-step form { margin: 0; }

/* Prototype-style hero */
.cc-hero-web {
  position: relative; overflow: hidden; padding: 88px clamp(20px, 5vw, 40px) 72px; text-align: center;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(218,92,24,.32), rgba(141,20,2,.12) 38%, transparent 66%),
    var(--bg-deep);
}
.cc-hero-web__inner { position: relative; max-width: 980px; margin: 0 auto; }
.cc-hero-web__eyebrow { justify-content: center; margin-bottom: 22px; }
.cc-hero-web__title {
  font-family: var(--font-display); font-size: clamp(48px, 9vw, 84px); line-height: .98;
  color: var(--fg-bright); margin: 0 auto; max-width: 14ch; letter-spacing: .01em;
  animation: cc-hero-ember 13.8s linear infinite;
}
.cc-hero-web__title span { color: var(--ember-500); animation: cc-hero-ember-hot 13.8s linear infinite; }
@keyframes cc-hero-ember {
  0% { opacity: 1; filter: brightness(1.05); }
  4% { opacity: .8; filter: brightness(.94); }
  8% { opacity: .91; filter: brightness(1); }
  12% { opacity: .74; filter: brightness(.9); }
  17% { opacity: .97; filter: brightness(1.04); }
  21% { opacity: .84; filter: brightness(.96); }
  27% { opacity: .9; filter: brightness(.99); }
  31% { opacity: .7; filter: brightness(.86); }
  36% { opacity: .95; filter: brightness(1.03); }
  41% { opacity: .78; filter: brightness(.92); }
  46% { opacity: .88; filter: brightness(.98); }
  52% { opacity: .72; filter: brightness(.88); }
  58% { opacity: 1; filter: brightness(1.06); }
  63% { opacity: .83; filter: brightness(.95); }
  69% { opacity: .93; filter: brightness(1.01); }
  74% { opacity: .76; filter: brightness(.91); }
  80% { opacity: .98; filter: brightness(1.05); }
  86% { opacity: .81; filter: brightness(.94); }
  92% { opacity: .9; filter: brightness(.99); }
  96% { opacity: .73; filter: brightness(.89); }
  100% { opacity: 1; filter: brightness(1.05); }
}
@keyframes cc-hero-ember-hot {
  0%, 17%, 36%, 58%, 80%, 100% { opacity: 1; text-shadow: 0 0 17px color-mix(in srgb, var(--ember-500) 58%, transparent); }
  4%, 21%, 41%, 63%, 86% { opacity: .78; text-shadow: 0 0 6px color-mix(in srgb, var(--ember-500) 26%, transparent); }
  12%, 31%, 52%, 74%, 96% { opacity: .68; text-shadow: 0 0 2px color-mix(in srgb, var(--ember-500) 14%, transparent); }
  8%, 27%, 46%, 69%, 92% { opacity: .91; text-shadow: 0 0 11px color-mix(in srgb, var(--ember-500) 42%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-hero-web__title, .cc-hero-web__title span { animation: none; filter: none; }
}
.cc-hero-web__cta { display: flex; align-items: center; gap: 16px; justify-content: center; margin-top: 38px; }
.cc-hero-web__search {
  position: relative; display: flex; align-items: center; gap: 10px; width: min(100%, 320px); height: 46px;
  padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.cc-hero-web__search input {
  width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg-bright);
  font-family: var(--font-body); font-size: 14px;
}
.cc-hero-web__search input::placeholder { color: var(--fg-muted); }
.cc-hero-web__search:focus-within { border-color: var(--ember-400); box-shadow: 0 0 0 3px rgba(218, 92, 24, .18); }
.cc-hero-web__search .cc-suggestions { text-align: left; }
.cc-hero-web__tour { margin-top: 34px; border: 1px solid color-mix(in srgb, var(--primary) 46%, var(--border)); color: var(--ember-400); }
.cc-hero-web__tour:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 22%, transparent); transform: translateY(-2px); }
@media (max-width: 560px) {
  .cc-hero-web__cta { align-items: stretch; flex-direction: column; }
  .cc-hero-web__cta .cc-btn { justify-content: center; }
  .cc-hero-web__search { width: 100%; }
}

/* First-visit account modal */
.cc-welcome { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 20px; }
.cc-welcome__backdrop { position: absolute; inset: 0; background: rgba(8, 5, 4, .74); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.cc-welcome__card { position: relative; width: min(100%, 440px); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; padding: 30px; border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border)); border-radius: 24px; background: linear-gradient(145deg, var(--surface), var(--bg-deep)); box-shadow: 0 24px 72px rgba(0, 0, 0, .52), 0 0 38px color-mix(in srgb, var(--primary) 18%, transparent); animation: cc-welcome-in .5s cubic-bezier(.16, 1, .3, 1) both; }
.cc-welcome__close { position: absolute; top: 13px; right: 13px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--fg-muted); cursor: pointer; transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.cc-welcome__close:is(:hover, :focus-visible) { color: var(--fg-bright); border-color: var(--primary); transform: rotate(90deg); outline: 0; }
.cc-welcome__brand { width: 150px; margin: 0 auto 22px; }
.cc-welcome__eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--ember-400); font-family: var(--font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.cc-welcome h2 { margin: 0; color: var(--fg-bright); font-family: var(--font-heading); font-size: 28px; line-height: 1; text-transform: uppercase; }
.cc-welcome p { margin: 10px 0 20px; color: var(--fg-muted); font-family: var(--font-body); line-height: 1.5; }
.cc-welcome__field { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; color: var(--fg-soft); font-family: var(--font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cc-welcome__field input { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px; outline: 0; background: var(--surface-2); color: var(--fg-bright); font: 16px var(--font-body); text-transform: none; }
.cc-welcome__field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.cc-welcome__submit { width: 100%; justify-content: center; margin-top: 8px; }
.cc-welcome__login, .cc-welcome__back { display: block; width: 100%; margin-top: 14px; border: 0; background: none; color: var(--ember-400); text-align: center; font: 600 13px var(--font-heading); text-decoration: none; cursor: pointer; }
.cc-welcome__divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--fg-faint); font: 12px var(--font-body); }
.cc-welcome__divider::before, .cc-welcome__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.cc-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-social form { margin: 0; }
.cc-social__button { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--fg-bright); font: 700 12px var(--font-heading); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cc-social__button--google:hover:not(:disabled) { border-color: #4285f4; box-shadow: 0 0 18px rgba(66, 133, 244, .24); transform: translateY(-2px); }
.cc-social__button--facebook { background: #1877f2; border-color: #1877f2; color: white; }
.cc-social__button--facebook:hover:not(:disabled) { box-shadow: 0 0 20px rgba(24, 119, 242, .45); transform: translateY(-2px); }
.cc-social__button:disabled { cursor: not-allowed; opacity: .43; filter: grayscale(.7); }
.cc-social__logo { display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 999px; font: 800 17px/1 Arial, sans-serif; }
.cc-social__logo--google { color: #4285f4; background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 48%, #fbbc05 0 70%, #ea4335 0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cc-social__logo--facebook { color: #1877f2; background: white; }
@keyframes cc-welcome-in { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.cc-steps { max-width: 980px; margin: 56px auto 0; text-align: left; }
.cc-steps__label {
  font-family: var(--font-heading); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--fg-muted); font-size: 12.5px; margin-bottom: 26px; text-align: center;
}
.cc-steps__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.cc-steps__line {
  position: absolute; top: 29px; left: 12.5%; right: 12.5%; height: 2px;
  background: var(--surface-2); z-index: 0;
  transform-origin: left center; transform: scaleX(0);
  transition: transform 4.2s cubic-bezier(.16, 1, .3, 1) .28s;
}
.cc-steps:has(.cc-steps__item.is-in) .cc-steps__line { transform: scaleX(1); }
.cc-steps__item {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: 0 16px;
  opacity: 1; transform: none;
  filter: blur(0);
  transition: opacity 2.35s cubic-bezier(.16, 1, .3, 1), transform 2.35s cubic-bezier(.16, 1, .3, 1), filter 1.85s ease-out;
}
.cc-steps__item.is-pending {
  opacity: 0; transform: translateY(54px) scale(.88); filter: blur(8px);
}
.cc-steps__item.is-in {
  opacity: 1; transform: translateY(0) scale(1); filter: blur(0);
}
.cc-steps__item.is-in .cc-steps__icon {
  animation: stepsIgnite 1.9s cubic-bezier(.16, 1, .3, 1) both;
}
.cc-steps__icon {
  width: 60px; height: 60px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; position: relative; margin-bottom: 16px;
  background: var(--surface); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
}
.cc-steps__icon::after { content: ""; position: absolute; inset: -9px; border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent); border-radius: inherit; pointer-events: none; opacity: 0; transform: scale(.72); }
.cc-steps__item.is-in .cc-steps__icon::after { animation: stepsHalo 2.1s ease-out .28s both; }
.cc-steps__icon.is-hot {
  background: var(--ember-500); border-color: var(--ember-500); box-shadow: var(--shadow-glow);
}
.cc-steps__n {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 999px;
  background: var(--bg-deep); border: 1px solid var(--border); font-family: var(--font-heading);
  font-weight: 700; font-size: 12px; color: var(--fg-bright); display: flex; align-items: center; justify-content: center;
}
.cc-steps__title {
  font-family: var(--font-heading); font-weight: 700; font-size: 16px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--fg-bright); line-height: 1.15;
}
.cc-steps__item.is-in .cc-steps__title { animation: stepsCopyIn 1.55s cubic-bezier(.16, 1, .3, 1) .38s both; }
.cc-steps__title.is-hot { color: var(--ember-400); }
.cc-steps__desc {
  font-family: var(--font-body); font-size: 13.5px; color: var(--fg-muted);
  margin-top: 8px; line-height: 1.5; max-width: 22ch;
}
.cc-steps__item.is-in .cc-steps__desc { animation: stepsCopyIn 1.55s cubic-bezier(.16, 1, .3, 1) .68s both; }
@keyframes stepsIgnite {
  0% { transform: translateY(24px) scale(.62) rotate(-10deg); opacity: 0; box-shadow: 0 0 0 transparent; }
  48% { transform: translateY(-5px) scale(1.16) rotate(5deg); opacity: 1; box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 0%, transparent), 0 0 32px color-mix(in srgb, var(--primary) 40%, transparent); }
  76% { transform: translateY(2px) scale(.98) rotate(-2deg); }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; box-shadow: var(--shadow-sm); }
}
@keyframes stepsHalo { 0% { opacity: 0; transform: scale(.72); } 28% { opacity: .85; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes stepsCopyIn { 0% { opacity: 0; transform: translateY(16px); filter: blur(5px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
@media (max-width: 820px) {
  .cc-steps__grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .cc-steps__line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-steps__item, .cc-steps__item.is-pending, .cc-steps__line {
    opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important;
  }
  .cc-steps__item.is-in .cc-steps__icon, .cc-steps__item.is-in .cc-steps__icon::after, .cc-steps__item.is-in .cc-steps__title, .cc-steps__item.is-in .cc-steps__desc { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
  .cc-tabbar__tab, .cc-tabbar__tab *, .cc-tabbar__tab::before, .cc-chip > span, .cc-chip > span::before, .cc-chip > span::after, .cc-chip__icon, .cc-chip__label, .cc-grid .cc-card, .cc-m-list .cc-m-row, .cc-web-navlink, .cc-web-navlink::before, .cc-web-navlink::after, .cc-web-navlink__icon, .cc-card__add, .cc-card__add::before, .cc-m-row__add, .cc-m-row__add::before, .cc-web-bag, .cc-web-bag::before, .cc-web-bag::after, .cc-web-bag > svg {
    transform: none !important; transition: none !important; animation: none !important;
  }
}


/* Story + location */
.cc-story {
  background: var(--surface); border-top: 1px solid var(--surface-2); border-bottom: 1px solid var(--surface-2);
}
.cc-story__inner {
  max-width: 1040px; margin: 0 auto; padding: 80px clamp(20px, 5vw, 40px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.cc-story__title {
  font-family: var(--font-display); font-size: clamp(32px, 5vw, 44px); color: var(--fg-bright);
  line-height: 1.05; margin: 16px 0 18px;
}
.cc-story__p { font-family: var(--font-body); font-size: 16.5px; color: var(--fg-soft); line-height: 1.6; margin: 0 0 14px; }
.cc-story__p--muted { color: var(--fg-muted); margin-bottom: 0; }
.cc-story__art {
  height: 320px; border-radius: 18px; position: relative; overflow: hidden;
  background: radial-gradient(110% 110% at 70% 10%, var(--wood-500), var(--wood-800) 60%, var(--wood-900));
  border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center;
}
.cc-story__caption {
  position: absolute; bottom: 14px; right: 16px; font-size: 10px; letter-spacing: .16em;
  color: rgba(255,255,255,.4); font-family: var(--font-heading); text-transform: uppercase;
}
.cc-location { max-width: 1040px; margin: 0 auto; padding: 84px clamp(20px, 5vw, 40px); }
.cc-location__head { text-align: center; margin-bottom: 40px; }
.cc-location__head .cc-eyebrow { justify-content: center; margin-bottom: 14px; }
.cc-location__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cc-location__card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 26px; text-align: center;
}
.cc-location__icon {
  width: 52px; height: 52px; border-radius: 999px; background: rgba(218,92,24,.14);
  border: 1px solid rgba(218,92,24,.35); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.cc-location__label {
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em;
  font-size: 12px; color: var(--fg-muted); margin-bottom: 7px;
}
.cc-location__value { font-family: var(--font-body); font-size: 16px; color: var(--fg-bright); }
@media (max-width: 820px) {
  .cc-story__inner, .cc-location__grid { grid-template-columns: 1fr; }
}

.cc-ig { max-width: 1040px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px) 84px; }
.cc-ig__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.cc-ig__lead { margin: 10px 0 0; font-family: var(--font-body); font-size: 15px; color: var(--fg-muted); max-width: 36rem; }
.cc-ig__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.cc-ig__card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border-radius: 14px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); transition: transform .18s ease, border-color .18s ease;
}
.cc-ig__card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.cc-ig__media {
  position: relative; aspect-ratio: 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cc-ig__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-ig__ph { display: flex; align-items: center; justify-content: center; }
.cc-ig__badge {
  position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-family: var(--font-heading);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.cc-ig__caption {
  margin: 0; padding: 12px 14px 14px; font-family: var(--font-body); font-size: 13px;
  color: var(--fg-muted); line-height: 1.45;
}
@media (max-width: 820px) {
  .cc-ig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .cc-ig__grid { grid-template-columns: 1fr; }
}

.cc-admin__igthumb, .cc-admin__igph {
  width: 48px; height: 48px; border-radius: 8px; object-fit: cover; display: block;
}
.cc-admin__igph { border: 1px solid var(--border); }

.cc-featured__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.cc-card--action { position: relative; }
.cc-card__hit { display: flex; flex-direction: column; text-decoration: none; flex: 1; color: inherit; }
.cc-card__addform { margin: 0 14px 14px; }
.cc-card__add { width: 100%; justify-content: center; }
.cc-card__add, .cc-m-row__add {
  position: relative; isolation: isolate; overflow: visible;
  transition: background .2s ease, box-shadow .22s ease, transform .22s cubic-bezier(.22, 1.35, .36, 1);
}
.cc-card__add::before, .cc-m-row__add::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; opacity: 0;
  inset: -8px -5px -12px; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 105%, color-mix(in srgb, var(--flame-400) 68%, transparent) 0 20%, transparent 60%), radial-gradient(ellipse at 28% 100%, color-mix(in srgb, var(--ember-500) 56%, transparent) 0 12%, transparent 48%), radial-gradient(ellipse at 72% 100%, color-mix(in srgb, var(--flame-300) 56%, transparent) 0 12%, transparent 48%);
  filter: blur(5px); transform: scale(.78) translateY(4px);
}
.cc-card__add > svg, .cc-card__add-label, .cc-m-row__add > svg { position: relative; z-index: 1; }
.cc-card__add:is(:hover, :focus-visible), .cc-m-row__add:is(:hover, :focus-visible) { background: var(--primary-hover); box-shadow: 0 0 0 1px color-mix(in srgb, var(--flame-300) 52%, transparent), 0 5px 18px color-mix(in srgb, var(--ember-500) 48%, transparent), 0 0 28px color-mix(in srgb, var(--flame-400) 32%, transparent); animation: cc-add-heat 1.15s ease-in-out infinite; outline: 0; }
.cc-card__add:is(:hover, :focus-visible)::before, .cc-m-row__add:is(:hover, :focus-visible)::before { opacity: .9; animation: cc-add-fire .82s ease-in-out infinite alternate; }
@keyframes cc-add-fire { from { transform: scale(.78) translateY(4px); filter: blur(5px); } to { transform: scale(1.08) translateY(-3px); filter: blur(7px); } }
@keyframes cc-add-heat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.025); } }
.cc-detail__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cc-detail__hint {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px;
  color: var(--fg-muted); background: rgba(218,92,24,.1); border: 1px solid rgba(218,92,24,.25);
  border-radius: 11px; padding: 10px 12px; margin: 0 0 18px;
}
.cc-web-order { max-width: 560px; margin: 0 auto; }
.cc-web-order__body { margin-top: 8px; }
.cc-web-account { max-width: 900px; }
.cc-web-account__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 28px; }
.cc-web-account__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; }
.cc-web-account__h {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fg-muted); margin: 0 0 14px;
}
.cc-web-account__addrs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cc-web-account__addrs li {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.cc-web-cartpage { max-width: 520px; }
@media (max-width: 820px) {
  .cc-web-account__grid { grid-template-columns: 1fr; }
  .cc-web-navlink { display: none; }
}


.cc-linkbtn {
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  color: var(--fg-bright); background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: .15s;
}
.cc-linkbtn:hover { border-color: var(--border-strong); }
.cc-linkbtn--primary { background: var(--primary); color: var(--on-primary); border-color: transparent; box-shadow: var(--glow-primary); }
.cc-linkbtn--primary:hover { background: var(--primary-hover); }
/* button_to renders a form; keep it inline with the nav */
.cc-web-nav form { margin: 0; }

/* ============ HOME HUB ============ */
.cc-hero { text-align: left; margin-bottom: 40px; }
.cc-hero .cc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cc-hero__brand { margin: 0; line-height: 0; }
.cc-hero__lead { max-width: 52ch; margin-top: 16px; color: var(--fg-soft); }
.cc-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .cc-hub { grid-template-columns: 1fr; } }
.cc-hub__card {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-md); transition: border-color .2s, transform .1s;
}
.cc-hub__card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cc-hub__icon {
  width: 48px; height: 48px; flex: none; border-radius: var(--radius-md);
  background: rgba(218,92,24,.12); display: flex; align-items: center; justify-content: center;
}
.cc-hub__card > :nth-child(2) { flex: 1; min-width: 0; }
.cc-hub__title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--fg-bright); }
.cc-hub__soon { font-family: var(--font-heading); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--flame-400); border: 1px solid rgba(245,166,35,.4); background: rgba(245,166,35,.12); border-radius: 999px; padding: 2px 7px; margin-left: 4px; }

/* ============ BUTTONS ============ */
.cc-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  border: 0; border-radius: var(--radius-md); padding: 14px 26px; transition: .15s;
}
.cc-btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--glow-primary); }
.cc-btn--primary:hover { background: var(--primary-hover); }
.cc-btn--ghost { background: transparent; color: var(--ember-400); padding: 10px 8px; }
.cc-btn--ghost:hover { color: var(--ember-500); }
.cc-btn--icon { width: 34px; height: 34px; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 10px; }
.cc-btn--danger:hover { color: var(--danger, #e5484d); border-color: color-mix(in srgb, var(--danger, #e5484d) 56%, var(--border)); background: color-mix(in srgb, var(--danger, #e5484d) 10%, transparent); }
.cc-card .cc-card__add { transition: background .2s ease, box-shadow .22s ease, transform .22s cubic-bezier(.22, 1.35, .36, 1); }

/* ============ BADGES ============ */
.cc-badge {
  display: inline-block; font-family: var(--font-heading); font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.cc-badge--hot { background: var(--coal-red); color: var(--on-primary); }
.cc-badge--new { background: var(--flame-400); color: #1C1512; }
.cc-badge--veg { background: rgba(78,138,63,.18); color: #7FB86B; border: 1px solid rgba(78,138,63,.4); }

/* ============ SECTIONS ============ */
.cc-section { margin-top: 44px; }
.cc-section > .cc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }

/* ============ STOREFRONT HOME ============ */
.cc-store-hero { padding: 8px 0 8px; }
.cc-store-hero .cc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cc-store-hero__lead { max-width: 50ch; margin: 16px 0 22px; color: var(--fg-soft); }

.cc-featured {
  display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: center;
  text-decoration: none; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-md); transition: border-color .2s;
}
.cc-featured:hover { border-color: var(--border-strong); }
.cc-featured__media .cc-thumb { width: 100%; }
.cc-featured__desc { color: var(--fg-soft); margin: 10px 0 14px; max-width: 52ch; }
.cc-featured__price { font-size: 22px; }
@media (max-width: 720px) { .cc-featured { grid-template-columns: 1fr; } }

.cc-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cc-promo {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: var(--shadow-sm);
}
.cc-promo__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-promo__title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--fg-bright); margin: 0; text-transform: uppercase; letter-spacing: .02em; }
.cc-promo__blurb { color: var(--fg-muted); }
.cc-promo__items { margin: 0; padding-left: 18px; color: var(--fg); font-family: var(--font-body); font-size: 13px; }
.cc-promo__price { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.cc-promo__was { font-family: var(--font-body); color: var(--fg-faint); text-decoration: line-through; font-size: 14px; }
.cc-promo__price .cc-price { font-size: 19px; }

.cc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.cc-cat-tile {
  display: flex; flex-direction: column; gap: 4px; min-height: 140px;
  text-decoration: none; border-radius: var(--radius-lg); padding: 18px;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-md); color: var(--cream-100);
  justify-content: flex-end; transition: transform .1s;
}
.cc-cat-tile:hover { transform: translateY(-2px); }
.cc-cat-tile__emoji { font-size: 30px; }
.cc-cat-tile__name { font-family: var(--font-heading); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; }
.cc-cat-tile__tag { font-family: var(--font-body); font-size: 12px; color: rgba(249,240,225,.75); }

/* ============ MENU + FILTER ============ */
.cc-menu__head { margin-bottom: 18px; }
.cc-menu__head .cc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cc-search {
  position: relative; display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px;
}
.cc-search__input { flex: 1; background: transparent; border: 0; outline: 0; font-family: var(--font-body); font-size: 15px; color: var(--fg-bright); }
.cc-suggestions { position: absolute; z-index: 20; top: calc(100% + 7px); right: 0; left: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg); }
.cc-suggestions[hidden] { display: none; }
.cc-suggestions__item { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--fg); text-decoration: none; transition: background .16s ease; }
.cc-suggestions__item:last-child { border-bottom: 0; }
.cc-suggestions__item:is(:hover, :focus-visible, .is-active) { background: var(--surface-2); outline: 0; }
.cc-suggestions__item strong { font-family: var(--font-heading); font-size: 14px; color: var(--fg-bright); }
.cc-suggestions__item span { font-family: var(--font-body); font-size: 12px; color: var(--fg-muted); }
.cc-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.cc-chip { position: relative; cursor: pointer; }
.cc-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cc-chip > span {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; overflow: hidden;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  padding: 9px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--fg-muted);
  transition: border-color .24s ease, color .2s ease, font-weight .2s ease, box-shadow .24s ease, transform .24s cubic-bezier(.22, 1.35, .36, 1);
}
.cc-chip > span::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(112deg, transparent 28%, color-mix(in srgb, var(--cream-50) 38%, transparent) 48%, transparent 64%); transform: translateX(-115%) skewX(-14deg); }
.cc-chip > span::after { content: ""; position: absolute; z-index: -1; inset: -55%; border-radius: inherit; background: var(--primary); transform: scale(0); }
.cc-chip__icon { position: relative; z-index: 2; display: inline-block; flex: none; font-size: 16px; line-height: 1; transform-origin: 50% 65%; }
.cc-chip__label { position: relative; z-index: 2; color: inherit; font: inherit; transition: color .2s ease, font-weight .2s ease; }
.cc-chip input:checked + span { border-color: transparent; background: var(--primary); color: var(--on-primary); font-weight: 800; animation: cc-chip-select .42s cubic-bezier(.22, 1.35, .36, 1); }
.cc-chip input:checked + span::after { animation: cc-chip-fill .42s ease-out both; }
.cc-chip input:checked + span .cc-chip__icon { animation: cc-chip-icon-select .48s cubic-bezier(.22, 1.45, .36, 1); }
.cc-chip input:checked + span .cc-chip__label { color: var(--on-primary); font-weight: 800; animation: cc-chip-label-select .42s ease-out; }
.cc-chip:is(:hover, :focus-within) > span { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent), 0 0 22px color-mix(in srgb, var(--primary) 34%, transparent), inset 0 0 14px color-mix(in srgb, var(--primary) 16%, transparent); transform: translateY(-3px) scale(1.035); }
.cc-chip:is(:hover, :focus-within) > span::before { opacity: 1; animation: cc-chip-shine .7s ease-out both; }

@keyframes cc-chip-select {
  0% { background: var(--surface-2); color: var(--fg-muted); transform: scale(.93); }
  58% { background: var(--primary-hover); transform: scale(1.055); }
  100% { background: var(--primary); transform: scale(1); }
}
@keyframes cc-chip-fill { from { transform: scale(0); opacity: .45; } to { transform: scale(1); opacity: 0; } }
@keyframes cc-chip-icon-select { 0% { transform: scale(.65) rotate(-18deg); } 58% { transform: translateY(-2px) scale(1.28) rotate(13deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes cc-chip-label-select { 0% { color: var(--fg-muted); font-weight: 600; letter-spacing: .05em; } 60% { color: var(--cream-50); font-weight: 800; letter-spacing: .085em; } 100% { color: var(--on-primary); font-weight: 800; letter-spacing: .05em; } }
@keyframes cc-chip-shine { from { transform: translateX(-115%) skewX(-14deg); } to { transform: translateX(115%) skewX(-14deg); } }

/* ============ PRODUCT GRID + CARD ============ */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.cc-card {
  position: relative; display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); transition: border-color .24s ease, box-shadow .24s ease, transform .24s cubic-bezier(.22, 1.35, .36, 1);
}
.cc-card::after {
  content: ""; position: absolute; z-index: 2; inset: -1px; pointer-events: none; opacity: 0;
  border: 2px solid color-mix(in srgb, var(--primary) 78%, var(--cream-50)); border-radius: inherit;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--primary) 26%, transparent), 0 0 22px color-mix(in srgb, var(--primary) 34%, transparent);
  transition: opacity .2s ease;
}
.cc-card::before {
  content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(112deg, transparent 28%, color-mix(in srgb, var(--cream-50) 38%, transparent) 48%, transparent 64%);
  transform: translateX(-115%) skewX(-14deg);
}
.cc-card:is(:hover, :focus-within) { border-color: var(--primary); box-shadow: 0 16px 30px rgba(0, 0, 0, .3), 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent), 0 0 30px color-mix(in srgb, var(--primary) 30%, transparent); transform: translateY(-7px) scale(1.012); }
.cc-card:is(:hover, :focus-within)::after { opacity: 1; }
.cc-card:is(:hover, :focus-within)::before { opacity: 1; animation: cc-card-shine .75s ease-out both; }
.cc-card__media { padding: 12px 12px 0; }
.cc-card__body { display: flex; flex-direction: column; gap: 7px; padding: 14px; }
.cc-card__badge { margin-bottom: 2px; }
.cc-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; color: var(--fg-bright); margin: 0; line-height: 1.1; }
.cc-card__desc { font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-card__price { font-size: 17px; margin-top: 4px; }
.cc-empty { text-align: center; color: var(--fg-muted); font-family: var(--font-body); padding: 50px 0; }
.cc-grid .cc-card, .cc-m-list .cc-m-row { animation: cc-product-reveal .5s cubic-bezier(.22, 1.18, .36, 1) both; animation-delay: var(--cc-item-delay, 0ms); }
.cc-grid > :nth-child(1), .cc-m-list > :nth-child(1) { --cc-item-delay: 0ms; }
.cc-grid > :nth-child(2), .cc-m-list > :nth-child(2) { --cc-item-delay: 55ms; }
.cc-grid > :nth-child(3), .cc-m-list > :nth-child(3) { --cc-item-delay: 110ms; }
.cc-grid > :nth-child(4), .cc-m-list > :nth-child(4) { --cc-item-delay: 165ms; }
.cc-grid > :nth-child(5), .cc-m-list > :nth-child(5) { --cc-item-delay: 220ms; }
.cc-grid > :nth-child(6), .cc-m-list > :nth-child(6) { --cc-item-delay: 275ms; }
.cc-grid > :nth-child(7), .cc-m-list > :nth-child(7) { --cc-item-delay: 330ms; }
.cc-grid > :nth-child(8), .cc-m-list > :nth-child(8) { --cc-item-delay: 385ms; }
.cc-grid > :nth-child(9), .cc-m-list > :nth-child(9) { --cc-item-delay: 440ms; }
.cc-grid > :nth-child(10), .cc-m-list > :nth-child(10) { --cc-item-delay: 495ms; }
.cc-grid > :nth-child(11), .cc-m-list > :nth-child(11) { --cc-item-delay: 550ms; }
.cc-grid > :nth-child(12), .cc-m-list > :nth-child(12) { --cc-item-delay: 605ms; }
@keyframes cc-product-reveal { from { opacity: 0; transform: translateY(18px) scale(.975); filter: blur(3px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes cc-card-shine { from { transform: translateX(-115%) skewX(-14deg); } to { transform: translateX(115%) skewX(-14deg); } }

/* ============ THUMBNAIL ============ */
.cc-thumb { width: 100%; display: block; flex: none; }
.cc-thumb--img { object-fit: cover; }
.cc-thumb--ph { display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* ============ PRODUCT DETAIL ============ */
.cc-detail { display: grid; grid-template-columns: 420px 1fr; gap: 32px; align-items: start; }
@media (max-width: 820px) { .cc-detail { grid-template-columns: 1fr; } }
.cc-detail__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cc-detail__title { margin: 0 0 10px; }
.cc-detail__price { font-size: 24px; display: flex; align-items: baseline; gap: 8px; }
.cc-detail__perkg { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--fg-faint); }
.cc-detail__desc { color: var(--fg-soft); margin: 16px 0 22px; max-width: 56ch; }

/* ============================================================
   MOBILE SURFACE (phone-framed app) — cliente-app
   ============================================================ */
.cc-layout-mobile {
  background: radial-gradient(120% 90% at 50% 0%, var(--surface-2), var(--bg-deep) 70%);
  min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 12px 60px;
  overflow-x: hidden;
}

/* Fixed chrome (hub link + theme toggle) */
.cc-fixed-chip { position: fixed; top: 16px; z-index: 60; }
.back-home {
  left: 18px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  color: var(--fg-bright); background: var(--scrim);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px;
  box-shadow: var(--shadow-md);
}
.back-home:hover { border-color: var(--border-strong); }
.cc-layout-mobile .cc-theme-toggle--fixed { right: 18px; bottom: auto; }

/* Phone frame */
.cc-phone {
  width: min(390px, 100%); height: 844px; background: #15100D; border-radius: 52px; padding: 11px;
  box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.4); position: relative;
  max-width: 100%;
}
.cc-phone__notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 124px; height: 33px; background: #000; border-radius: 999px; z-index: 50; }
.cc-phone__screen { width: 100%; height: 100%; background: var(--bg); border-radius: 42px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.cc-phone__content { flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; }

/* Direct mobile preview: the same app without the desktop phone shell. */
.cc-layout-mobile--preview { display: block; height: 100vh; height: 100dvh; min-height: 0; padding: 0; overflow: hidden; background: var(--bg); }
.cc-mobile-preview { width: min(100%, 430px); height: 100%; min-height: 0; margin: 0 auto; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
.cc-mobile-preview__content { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; }

.cc-statusbar { height: 52px; flex: none; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px 6px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--fg-bright); }
.cc-statusbar__right { display: flex; gap: 6px; align-items: center; }
.cc-statusbar__dots { font-size: 12px; }

/* Bottom tab bar */
.cc-tabbar { flex: none; display: flex; background: var(--scrim-strong); border-top: 1px solid var(--surface-2); padding: 10px 8px 26px; }
.cc-tabbar__tab { flex: 1; min-width: 0; padding: 0 4px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: var(--fg-faint); transition: color .2s ease; }
.cc-tabbar__tab span { font-family: var(--font-heading); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.cc-tabbar__tab.is-active span { color: var(--ember-500); }
.cc-tabbar__tab.is-disabled { opacity: .5; pointer-events: none; }
.cc-tabbar__tab:focus-visible { outline: 2px solid var(--ember-500); outline-offset: 3px; border-radius: 10px; }
.cc-tabbar__icon { transform-origin: center; }
.cc-tabbar__tab:not(.is-active):is(:hover, :focus-visible) .cc-tabbar__icon { transform: translateY(-2px); }
.cc-tabbar__tab.is-active .cc-tabbar__icon { will-change: transform; }
.cc-tabbar__label { display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: 0 7px; overflow: hidden; text-align: center; }
.cc-tabbar__label-text { display: inline-block; white-space: nowrap; transform: translateX(0); }
.cc-tabbar__label.is-overflowing { text-align: left; }
.cc-tabbar__label.is-overflowing .cc-tabbar__label-text { animation: cc-label-scroll 3s ease-in-out infinite alternate; }
.cc-tabbar__tab--explore.is-active .cc-tabbar__icon { animation: cc-tab-flame 1.9s ease-in-out infinite; }
.cc-tabbar__tab--menu.is-active .cc-tabbar__icon { animation: cc-tab-utensils 2.5s ease-in-out infinite; }
.cc-tabbar__tab--cart.is-active .cc-tabbar__icon { animation: cc-tab-bag 2.25s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.cc-tabbar__tab--account.is-active .cc-tabbar__icon { animation: cc-tab-user 2.7s ease-in-out infinite; }
.cc-tabbar__tab--cart.is-active .cc-tabbar__badge { animation: cc-tab-badge 2.25s ease-in-out infinite; }

@keyframes cc-tab-flame {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50% { transform: translateY(-1px) rotate(3deg) scale(1.12); }
}
@keyframes cc-tab-utensils {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-2px) rotate(-5deg); }
  65% { transform: translateY(-1px) rotate(3deg); }
}
@keyframes cc-tab-bag {
  0%, 100% { transform: translateY(0) scale(1); }
  18% { transform: translateY(-3px) scale(1.06); }
  38% { transform: translateY(0) scale(.98); }
}
@keyframes cc-tab-user {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.09); }
}
@keyframes cc-tab-badge {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.13); }
  38% { transform: scale(1); }
}
@keyframes cc-label-scroll {
  0%, 16% { transform: translateX(0); }
  84%, 100% { transform: translateX(calc(-1 * var(--cc-tab-label-overflow))); }
}

/* Explore */
.cc-m-explore { padding: 4px 20px 20px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.cc-m-greeting {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.cc-m-greeting__copy { flex: 1; min-width: 0; }
.cc-m-greeting .cc-eyebrow { font-size: 12px; }
.cc-m-title { font-family: var(--font-display); font-size: 34px; color: var(--fg-bright); margin: 4px 0 0; line-height: 1.05; }
.cc-m-greeting .cc-logo--mobile { flex: none; max-width: 90px; }
.cc-m-search { position: relative; display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; text-decoration: none; }
.cc-m-search__ph { font-family: var(--font-body); font-size: 14.5px; color: var(--fg-muted); }
.cc-m-search--input .cc-m-search__field { flex: 1; background: transparent; border: 0; outline: 0; font-family: var(--font-body); font-size: 14.5px; color: var(--fg-bright); }
.cc-suggestions--mobile { top: calc(100% + 8px); }
.cc-m-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cc-m-cat { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; text-decoration: none; color: var(--cream-100); border: 1px solid var(--hairline); box-shadow: var(--shadow-md); min-width: 0; overflow: hidden; }
.cc-m-cat__emoji { font-size: 22px; flex: none; }
.cc-m-cat__name { flex: 1; min-width: 0; box-sizing: border-box; padding: 0 3px; overflow: hidden; font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.15; }
.cc-m-cat__name-text { display: inline-block; white-space: nowrap; transform: translateX(0); }
.cc-m-cat__name.is-overflowing .cc-m-cat__name-text { animation: cc-label-scroll 3s ease-in-out infinite alternate; }
.cc-m-sectlabel { display: inline-flex; align-items: center; gap: 7px; margin: 22px 0 12px; font-size: 11px; }
.cc-m-featured { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
.cc-m-featured .cc-thumb { width: 100%; }
.cc-m-featured__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.cc-m-featured__name { font-family: var(--font-heading); font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--fg-bright); }

/* Menu */
.cc-m-menu { padding: 4px 18px 20px; }
.cc-m-menu__title { font-size: 30px; margin-bottom: 12px; }
.cc-m-chips { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
.cc-m-chips::-webkit-scrollbar { display: none; }
.cc-m-chips .cc-chip > span { white-space: nowrap; padding: 8px 14px; font-size: 12px; }

/* Product list rows */
.cc-m-list { display: flex; flex-direction: column; gap: 12px; }
.cc-m-row { position: relative; display: flex; gap: 13px; align-items: center; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; text-decoration: none; transition: border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.22, 1.35, .36, 1); }
.cc-m-row::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0; border: 2px solid color-mix(in srgb, var(--primary) 72%, var(--cream-50)); border-radius: inherit; box-shadow: inset 0 0 14px color-mix(in srgb, var(--primary) 20%, transparent), 0 0 18px color-mix(in srgb, var(--primary) 24%, transparent); transition: opacity .2s ease; }
.cc-m-row:is(:hover, :focus-within) { border-color: var(--primary); box-shadow: 0 10px 24px rgba(0, 0, 0, .28), 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent); transform: translateY(-3px) scale(1.01); }
.cc-m-row:is(:hover, :focus-within)::after { opacity: 1; }
.cc-m-row__media { width: 84px; flex: none; }
.cc-m-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-m-row__name { font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--fg-bright); line-height: 1.1; }
.cc-m-row__desc { font-family: var(--font-body); font-size: 12.5px; color: var(--fg-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-m-row__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.cc-m-row__foot .cc-price { font-size: 16px; }
.cc-m-row__add { width: 34px; height: 34px; border-radius: 11px; background: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-primary); }

/* Mobile detail */
.cc-m-detail { display: flex; flex-direction: column; height: 100%; }
.cc-m-detail__hero { position: relative; flex: none; }
.cc-m-detail__hero .cc-thumb { width: 100%; }
.cc-m-detail__back { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; border-radius: 999px; background: var(--scrim-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
.cc-m-detail__body { padding: 18px 20px 8px; }
.cc-m-detail__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cc-m-detail__name { font-family: var(--font-display); font-size: 30px; color: var(--fg-bright); margin: 6px 0 8px; line-height: 1.05; }
.cc-m-detail__price { font-size: 20px; }
.cc-m-detail__perkg { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--fg-faint); }
.cc-m-detail__desc { font-family: var(--font-body); font-size: 14.5px; color: var(--fg); line-height: 1.6; margin: 14px 0; }
.cc-m-detail__hint { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12.5px; color: var(--fg-muted); background: rgba(218,92,24,.1); border: 1px solid rgba(218,92,24,.25); border-radius: 11px; padding: 10px 12px; }
.cc-m-detail__bar { margin-top: auto; padding: 14px 20px 22px; border-top: 1px solid var(--surface-2); background: var(--scrim-strong); }
.cc-m-detail__cta { width: 100%; justify-content: center; opacity: .65; }

/* ============================================================
   PHASE 2 — CART, STEPPERS, WEIGHING, STAFF
   ============================================================ */

/* Tab bar cart badge */
.cc-tabbar__icon { position: relative; display: inline-flex; }
.cc-tabbar__badge { position: absolute; top: -7px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--ember-500); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 10px; display: flex; align-items: center; justify-content: center; }

/* Step buttons (shared) */
.cc-step { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cc-step:hover { border-color: var(--border-strong); }

/* Mobile cart */
.cc-cart { padding: 4px 18px 18px; display: flex; flex-direction: column; min-height: 100%; }
.cc-cart__title { font-size: 30px; margin-bottom: 12px; }
.cc-cart__empty { text-align: center; color: var(--fg-muted); font-family: var(--font-body); padding: 60px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cc-cart__items { display: flex; flex-direction: column; }
.cc-cart__row { display: flex; gap: 13px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--surface-2); }
.cc-cart__media { width: 60px; flex: none; }
.cc-cart__info { flex: 1; min-width: 0; }
.cc-cart__name { font-family: var(--font-heading); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; color: var(--fg-bright); }
.cc-cart__line { font-size: 14.5px; margin-top: 3px; }
.cc-cart__unit { font-family: var(--font-body); font-size: 11.5px; color: var(--fg-faint); margin-top: 1px; }
.cc-cart__stepper { display: flex; align-items: center; gap: 10px; }
.cc-cart__stepper form { margin: 0; }
.cc-cart__qty { font-family: var(--font-heading); font-weight: 700; color: var(--fg-bright); min-width: 48px; text-align: center; }
.cc-cart__summary { margin-top: auto; padding-top: 16px; }
.cc-cart__subtotal { display: flex; justify-content: space-between; font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--fg-bright); }
.cc-cart__subtotal span:last-child { color: var(--price); }
.cc-cart__note { display: flex; gap: 8px; align-items: flex-start; font-family: var(--font-body); font-size: 12px; color: var(--fg-muted); margin: 10px 0 14px; }
.cc-cart__cta { width: 100%; justify-content: center; }

/* Mobile detail add bar */
.cc-m-detail__qty { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.cc-m-detail__qtyval { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--fg-bright); min-width: 72px; text-align: center; }
.cc-m-row__add { width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--primary); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-primary); }
.cc-m-row__add form, form.cc-m-row__add { margin: 0; }
.cc-m-row__link { display: flex; gap: 13px; align-items: center; flex: 1; min-width: 0; text-decoration: none; }
.cc-m-row { gap: 10px; }

/* Order header + weighing panel */
.cc-order { padding: 6px 18px 18px; }
.cc-order__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cc-order__back { background: none; border: 0; cursor: pointer; display: inline-flex; }
.cc-order__title { font-family: var(--font-display); font-size: 26px; color: var(--fg-bright); margin: 0; }

.cc-weigh { display: flex; flex-direction: column; gap: 14px; }
.cc-weigh__status { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; border-radius: 18px; padding: 22px 20px; border: 1px solid var(--border); background: var(--surface); }
.cc-weigh__status--done { background: rgba(60,170,80,.1); border-color: rgba(60,170,80,.35); }
.cc-weigh__icon { width: 56px; height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.cc-weigh__icon--pulse { background: var(--surface-2); animation: pulse 1.6s ease-in-out infinite; }
.cc-weigh__icon--ok { background: var(--success); box-shadow: 0 8px 24px rgba(60,170,80,.35); }
.cc-weigh__h { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--fg-bright); text-transform: uppercase; letter-spacing: .03em; }
.cc-weigh__p { font-family: var(--font-body); font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; margin: 2px 0 0; max-width: 280px; }
.cc-weigh__row { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px; }
.cc-weigh__row--done { border-color: rgba(60,170,80,.3); }
.cc-weigh__name { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; text-transform: uppercase; color: var(--fg-bright); }
.cc-weigh__reqline { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-family: var(--font-body); font-size: 12.5px; color: var(--fg-muted); }
.cc-weigh__pulse { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-heading); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--ember-400); animation: pulse 1.6s ease-in-out infinite; }
.cc-weigh__pulse .cc-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ember-400); }
.cc-weigh__delta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cc-weigh__was { font-family: var(--font-body); font-size: 12px; color: var(--fg-faint); text-decoration: line-through; }
.cc-weigh__conf { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--success); }
.cc-weigh__price { margin-left: auto; font-size: 15.5px; }
.cc-weigh__summary { display: flex; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; font-family: var(--font-heading); font-weight: 700; color: var(--fg-bright); }
.cc-weigh__locked { width: 100%; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--fg-faint); cursor: default; }
.cc-weigh__locked span, .cc-weigh__locked { animation: pulse 1.6s ease-in-out infinite; }
.cc-weigh__cta { width: 100%; justify-content: center; }

/* Staff weighing station (web layout) */
.cc-staff { max-width: 720px; }
.cc-staff > .cc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cc-staff__order { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-top: 16px; box-shadow: var(--shadow-sm); }
.cc-staff__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.cc-staff__id { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--fg-bright); }
.cc-staff__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--surface-2); }
.cc-staff__name { font-family: var(--font-body); color: var(--fg); }
.cc-staff__field { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); }
.cc-staff__field input { width: 130px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-family: var(--font-body); font-size: 15px; color: var(--fg-bright); }
.cc-staff__order .cc-btn { margin-top: 14px; }

/* ============ PHASE 3 — CHECKOUT & PAYMENTS (mobile) ============ */
/* Shared input */
.cc-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; font-family: var(--font-body); font-size: 15px; color: var(--fg-bright); }
.cc-input::placeholder { color: var(--fg-faint); }
.cc-input:focus { outline: none; border-color: var(--ember-400); }
.cc-input--sm { width: auto; flex: 0 0 90px; }

/* Checkout panel */
.cc-co { display: flex; flex-direction: column; gap: 18px; }
.cc-co__form { display: flex; flex-direction: column; gap: 14px; }
.cc-co__step { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); color: var(--fg-bright); }
.cc-co__stepnum { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; flex: none; background: var(--primary); color: var(--on-primary); font-weight: 700; }
.cc-co__hint { margin: -4px 0 0; font-family: var(--font-body); font-size: 12.5px; line-height: 1.45; color: var(--fg-muted); }
.cc-co__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-co__segopt { position: relative; cursor: pointer; }
.cc-co__segopt input { position: absolute; opacity: 0; pointer-events: none; }
.cc-co__segopt span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-muted); font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
.cc-co__segopt input:checked + span { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.cc-co__addr { display: flex; flex-direction: column; gap: 10px; }
.cc-co__addr[hidden] { display: none; }
.cc-co__addropt { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-family: var(--font-body); font-size: 14px; color: var(--fg); cursor: pointer; }
.cc-co__newaddr summary { cursor: pointer; color: var(--ember-400); font-family: var(--font-heading); font-weight: 600; font-size: 14px; padding: 6px 0; }
.cc-co__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cc-co__grid .cc-input { width: 100%; }
.cc-co__promo { display: flex; gap: 8px; align-items: center; }
.cc-co__promo .cc-input { flex: 1; }
.cc-co__continue { width: 100%; justify-content: center; }
.cc-co__review { display: flex; flex-direction: column; gap: 10px; padding: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cc-co__reviewrow { display: flex; align-items: flex-start; gap: 9px; font-family: var(--font-body); font-size: 13.5px; color: var(--fg); }
.cc-co__reviewrow svg { flex: none; margin-top: 2px; }
.cc-co__edit { align-self: flex-start; font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--ember-400); }
.cc-co__pay { display: flex; flex-direction: column; gap: 10px; }
.cc-co__paybtn { width: 100%; justify-content: center; }

/* Order summary (line items + totals) */
.cc-osum { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.cc-osum__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-family: var(--font-body); color: var(--fg); }
.cc-osum__name small { display: block; color: var(--fg-faint); font-size: 12px; }
.cc-osum__line { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid var(--surface-2); color: var(--fg-muted); font-family: var(--font-body); font-size: 14px; }
.cc-osum__line--disc { color: var(--success); }
.cc-osum__total { display: flex; justify-content: space-between; padding-top: 11px; margin-top: 6px; border-top: 1px solid var(--border); font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--fg-bright); }
.cc-osum__total .cc-price { font-size: 19px; }

/* Pix payment */
.cc-pix { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.cc-pix__head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cc-pix__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); }
.cc-pix__h { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--fg-bright); }
.cc-pix__p { font-family: var(--font-body); font-size: 14px; color: var(--fg-muted); max-width: 30ch; }
.cc-pix__qr { width: 220px; height: 220px; border-radius: 16px; background: #fff; display: grid; place-items: center; padding: 14px; border: 1px solid var(--border); }
.cc-pix__qrimg { width: 100%; height: 100%; image-rendering: pixelated; object-fit: contain; }
.cc-pix__amount { display: flex; gap: 10px; align-items: baseline; font-family: var(--font-heading); color: var(--fg-muted); }
.cc-pix__copy { display: flex; gap: 8px; width: 100%; align-items: center; }
.cc-pix__code { font-family: var(--font-mono, monospace); font-size: 12px; flex: 1; }
.cc-pix__exp { font-family: var(--font-body); font-size: 12px; color: var(--fg-faint); }
.cc-pix__sim { width: 100%; justify-content: center; opacity: .8; }

/* Card (Stripe Elements) */
.cc-card { display: flex; flex-direction: column; gap: 14px; }
.cc-card__head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cc-card__amount { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-heading); color: var(--fg-muted); }
.cc-card__element { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; min-height: 44px; }
.cc-card__error { color: var(--danger, #e5484d); font-family: var(--font-body); font-size: 13px; min-height: 0; }
.cc-card__error:empty { display: none; }
.cc-card__alt { justify-content: center; }

/* Confirmation */
.cc-conf { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.cc-conf__badge { width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center; background: var(--success); box-shadow: 0 0 0 8px color-mix(in srgb, var(--success) 22%, transparent); }
.cc-conf__h { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--fg-bright); }
.cc-conf__p { font-family: var(--font-body); font-size: 14px; color: var(--fg-muted); max-width: 32ch; }
.cc-conf__status .cc-chip--live { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-bright); font-family: var(--font-heading); font-weight: 600; font-size: 13px; }
.cc-chip--live .cc-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--success); animation: pulse 1.6s ease-in-out infinite; }
.cc-conf__addr { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); }
.cc-conf__track { font-family: var(--font-body); font-size: 13px; color: var(--fg-faint); }
.cc-conf__cta { width: 100%; justify-content: center; }

/* ============ PHASE 4 — TRACKING & KITCHEN ============ */
/* Customer tracking timeline */
.cc-track { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.cc-track__eta { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-family: var(--font-body); font-size: 13px; color: var(--fg); }
.cc-timeline { list-style: none; margin: 4px 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.cc-timeline__step { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 4px 0; position: relative; }
.cc-timeline__dot { flex: 0 0 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); z-index: 1; }
.cc-timeline__step:not(:last-child) .cc-timeline__dot::after { content: ""; position: absolute; left: 14px; top: 30px; width: 2px; height: calc(100% - 22px); background: var(--border); z-index: 0; }
.cc-timeline__step--done .cc-timeline__dot { background: var(--success); border-color: transparent; }
.cc-timeline__step--done .cc-timeline__dot::after { background: var(--success); }
.cc-timeline__step--current .cc-timeline__dot { background: var(--primary); border-color: transparent; box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 24%, transparent); animation: pulse 1.8s ease-in-out infinite; }
.cc-timeline__body { display: flex; flex-direction: column; gap: 1px; padding-top: 5px; }
.cc-timeline__label { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--fg-bright); }
.cc-timeline__step--pending .cc-timeline__label { color: var(--fg-faint); font-weight: 500; }
.cc-timeline__at { font-family: var(--font-body); font-size: 11px; color: var(--fg-faint); }
.cc-track__driver, .cc-track__eta { color: var(--fg-muted); }
.cc-track__cancel { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cc-track__cancelicon { width: 60px; height: 60px; border-radius: 999px; display: grid; place-items: center; background: var(--danger, #e5484d); }

/* Kitchen board (web layout, staff) */
.cc-staff__title { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--fg-bright); margin: 2px 0; }
.cc-staff__lead { font-family: var(--font-body); color: var(--fg-muted); margin-bottom: 18px; }
.cc-staff__empty { padding: 32px; text-align: center; color: var(--fg-muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.cc-kitchen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cc-kitchen__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.cc-kitchen__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-kitchen__badge { padding: 3px 9px; border-radius: 999px; font-family: var(--font-heading); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); color: var(--fg-muted); }
.cc-kitchen__badge--received { background: color-mix(in srgb, var(--ember-400) 20%, transparent); color: var(--ember-400); }
.cc-kitchen__badge--preparing { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary); }
.cc-kitchen__badge--ready_for_pickup, .cc-kitchen__badge--out_for_delivery { background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); }
.cc-kitchen__mode { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 12px; color: var(--fg-muted); }
.cc-kitchen__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-body); font-size: 13px; color: var(--fg); }
.cc-kitchen__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--surface-2); }
.cc-kitchen__actions { display: flex; gap: 8px; }
.cc-btn--sm { padding: 8px 12px; font-size: 13px; }

/* ============ PHASE 4b — ACCOUNT (mobile) ============ */
.cc-acct { display: flex; flex-direction: column; gap: 18px; }
.cc-acct__head { display: flex; align-items: center; gap: 13px; }
.cc-acct__avatar { flex: 0 0 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: var(--primary); }
.cc-acct__name { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--fg-bright); }
.cc-acct__email { font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); }
.cc-acct__links { display: flex; flex-direction: column; gap: 8px; }
.cc-acct__link { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--fg-bright); }
.cc-acct__link span { display: inline-flex; align-items: center; gap: 10px; }
.cc-acct__h { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--fg-bright); margin-top: 4px; }
.cc-acct__orders { display: flex; flex-direction: column; gap: 8px; }
.cc-acct__logout { justify-content: center; margin-top: 8px; }

/* Order history rows */
.cc-orow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.cc-orow__main { display: flex; flex-direction: column; gap: 2px; }
.cc-orow__id { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--fg-bright); }
.cc-orow__date { font-family: var(--font-body); font-size: 12px; color: var(--fg-faint); }
.cc-orow__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cc-orow__state { padding: 2px 9px; border-radius: 999px; font-family: var(--font-heading); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); color: var(--fg-muted); }
.cc-orow__state--received, .cc-orow__state--preparing { color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, transparent); }
.cc-orow__state--completed, .cc-orow__state--delivered, .cc-orow__state--ready_for_pickup, .cc-orow__state--out_for_delivery { color: var(--success); background: color-mix(in srgb, var(--success) 18%, transparent); }
.cc-orow__state--cancelled { color: var(--danger, #e5484d); background: color-mix(in srgb, var(--danger, #e5484d) 16%, transparent); }

/* Addresses */
.cc-addr { display: flex; flex-direction: column; gap: 16px; }
.cc-addr__list { display: flex; flex-direction: column; gap: 8px; }
.cc-addr__card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.cc-addr__info { display: flex; flex-direction: column; gap: 2px; }
.cc-addr__label { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--fg-bright); }
.cc-addr__default { color: var(--success); }
.cc-addr__line { font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); }
.cc-addr__actions { display: flex; align-items: center; gap: 6px; }
.cc-addr__form { margin-top: 10px; }

/* ============ PHASE 5 — ADMIN DASHBOARD ============ */
.cc-admin { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; background: var(--bg); }
.cc-admin__side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 20px 14px; background: var(--surface); border-right: 1px solid var(--border); }
.cc-admin__brand { padding: 6px 10px 16px; }
.cc-admin__brandlink {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg-bright);
}
.cc-admin__brandlabel {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted);
}
.cc-admin__nav { display: flex; flex-direction: column; gap: 3px; }
.cc-admin__navlink { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--fg-muted); }
.cc-admin__navlink:hover { background: var(--surface-2); color: var(--fg-bright); }
.cc-report-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; margin: 18px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.cc-report-filter__actions { display: flex; align-items: end; gap: 8px; }
.cc-report-kpis { grid-template-columns: repeat(3, 1fr); }
.cc-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.cc-report-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc-report-card { margin: 0; min-width: 0; }
.cc-report-list { display: grid; gap: 7px; margin: 0; }
.cc-report-list div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--surface-2); font-family: var(--font-body); font-size: 13px; }
.cc-report-list dt { color: var(--fg-muted); } .cc-report-list dd { margin: 0; color: var(--fg-bright); font-family: var(--font-heading); font-weight: 700; }
.cc-report-bars { display: flex; align-items: end; gap: 7px; height: 170px; padding: 10px 0 2px; border-bottom: 1px solid var(--border); }
.cc-report-bars div { display: flex; flex: 1; min-width: 10px; height: 100%; flex-direction: column; justify-content: end; gap: 7px; }
.cc-report-bars span { min-height: 5px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--flame-300), var(--primary)); box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 24%, transparent); }
.cc-report-bars small { color: var(--fg-faint); font: 10px var(--font-body); white-space: nowrap; transform: rotate(-45deg); transform-origin: left center; }
@media (max-width: 1100px) { .cc-report-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cc-report-grid--wide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .cc-report-filter, .cc-report-grid, .cc-report-grid--wide, .cc-report-kpis { grid-template-columns: 1fr; } }
.cc-admin__navlink.is-active { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.cc-admin__sidefoot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 8px; }
.cc-admin__main { display: flex; flex-direction: column; padding: 22px 30px 60px; max-width: 1200px; }
.cc-admin__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.cc-admin__who { display: flex; flex-direction: column; }
.cc-admin__role { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--fg-bright); }
.cc-admin__email { font-family: var(--font-body); font-size: 12px; color: var(--fg-faint); }
.cc-admin__h1 { font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: var(--fg-bright); }
.cc-admin__lead { font-family: var(--font-body); color: var(--fg-muted); margin: 4px 0 22px; }
.cc-admin__h2 { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--fg-bright); display: inline-flex; align-items: center; gap: 8px; }
.cc-admin__block { margin-top: 28px; }
.cc-admin__blockhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.cc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.cc-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 6px; }
.cc-kpi__label { font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); }
.cc-kpi__value { font-family: var(--font-heading); font-weight: 700; font-size: 24px; color: var(--fg-bright); }

.cc-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cc-table th { text-align: left; font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cc-table td { padding: 11px 14px; font-family: var(--font-body); font-size: 14px; color: var(--fg); border-bottom: 1px solid var(--surface-2); }
.cc-table tr:last-child td { border-bottom: none; }

.cc-table__actions { display: flex; gap: 6px; justify-content: flex-end; }
.cc-admin__headactions { display: flex; gap: 8px; }

/* Admin forms */
.cc-admin__form { max-width: 620px; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.cc-field { display: flex; flex-direction: column; gap: 5px; }
.cc-field > span { font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.cc-admin__formrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.cc-check { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 14px; color: var(--fg); }
.cc-admin__group { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cc-admin__group legend { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--fg-bright); padding: 0 6px; }
.cc-admin__group[hidden] { display: none; }
.cc-admin__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.cc-admin__formactions { display: flex; gap: 10px; margin-top: 6px; }

@media (max-width: 820px) {
  .cc-admin { grid-template-columns: 1fr; }
  .cc-admin__side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; overflow-x: auto; }
  .cc-admin__sidefoot { margin: 0; border: none; padding: 0; }
}

/* ============ PHASE 6 — DRIVER APP ============ */
.cc-driver { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); padding-bottom: 40px; }
.cc-driver__top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.cc-driver__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; color: var(--fg-bright); }
.cc-driver__right { display: flex; align-items: center; gap: 8px; }
.cc-driver__main { padding: 18px; display: flex; flex-direction: column; gap: 20px; }
.cc-driver__h1 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--fg-bright); }
.cc-driver__section { display: flex; flex-direction: column; gap: 10px; }
.cc-driver__h2 { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; }
.cc-deliv { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 9px; }
.cc-deliv__head { display: flex; align-items: center; justify-content: space-between; }
.cc-deliv__addr, .cc-deliv__phone { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 13px; color: var(--fg); }
.cc-deliv__actions { margin-top: 4px; }
.cc-deliv__actions .cc-btn { width: 100%; justify-content: center; }

/* ============ AUTH (Devise login / signup / password) ============ */
.cc-auth {
  display: flex; justify-content: center; padding: 12px 0 40px;
}
.cc-auth__card {
  width: 100%; max-width: 430px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 34px 32px;
  box-shadow: var(--shadow-lg);
}
.cc-auth__brand {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 26px; text-align: center;
}
.cc-auth__tagline {
  font-family: var(--font-body); font-size: 13px; color: var(--fg-faint);
}
.cc-auth__tabs {
  display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px; margin-bottom: 22px;
}
.cc-auth__tab {
  flex: 1; text-align: center; text-decoration: none;
  font-family: var(--font-heading); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 12px; border-radius: 9px;
  color: var(--fg-muted); transition: .2s;
}
.cc-auth__tab.is-active {
  background: var(--primary); color: var(--on-primary); box-shadow: var(--glow-primary);
}
.cc-auth__tab:not(.is-active):hover { color: var(--fg-bright); }
.cc-auth__heading {
  font-family: var(--font-heading); font-weight: 700; font-size: 22px;
  color: var(--fg-bright); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .03em;
}
.cc-auth__lede {
  font-family: var(--font-body); font-size: 14px; color: var(--fg-muted);
  margin: 0 0 18px; line-height: 1.45;
}
.cc-auth__form { display: flex; flex-direction: column; gap: 15px; }
.cc-auth__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.cc-auth__link {
  font-family: var(--font-body); font-size: 14px; color: var(--ember-400);
  text-decoration: none;
}
.cc-auth__link:hover { color: var(--ember-500); text-decoration: underline; }
.cc-auth__submit { width: 100%; justify-content: center; margin-top: 4px; }
.cc-auth__hint {
  font-family: var(--font-body); font-size: 12px; color: var(--fg-faint);
}
.cc-auth__footer { margin: 18px 0 0; text-align: center; }
.cc-auth .cc-flash ul { margin: 8px 0 0; padding-left: 18px; }

/* ============ GUIDED TOUR ============ */
.cc-tour-launch {
  left: 18px; top: 64px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-bright); background: var(--scrim);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px;
  box-shadow: var(--shadow-md); cursor: pointer;
}
.cc-tour-launch--web { left: auto; right: 18px; top: auto; bottom: 72px; }
.cc-tour {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0; transition: opacity .22s ease;
}
.cc-tour.is-open { opacity: 1; pointer-events: auto; }
.cc-tour__mask {
  position: absolute; inset: 0;
  background: rgba(8, 5, 4, .72);
  pointer-events: auto;
}
.cc-tour__spotlight {
  position: absolute; border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(8, 5, 4, .72), 0 0 0 2px var(--ember-400), var(--shadow-glow);
  background: transparent; pointer-events: none;
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}
.cc-tour__mask { background: transparent; } /* spotlight box-shadow paints the dim */
.cc-tour__target {
  position: relative; z-index: 201 !important;
  pointer-events: none;
}
.cc-tour__card {
  position: absolute; z-index: 202; width: min(340px, calc(100vw - 24px));
  background: var(--bg); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px 18px 14px; box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: tourCardIn .28s cubic-bezier(.22,1,.36,1) both;
}
.cc-tour__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ember-400);
  margin-bottom: 10px;
}
.cc-tour__progress {
  margin-left: auto; color: var(--fg-faint); letter-spacing: .06em;
}
.cc-tour__title {
  font-family: var(--font-heading); font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: .03em; color: var(--fg-bright);
  margin: 0 0 8px; line-height: 1.15;
}
.cc-tour__body {
  font-family: var(--font-body); font-size: 14.5px; color: var(--fg-muted);
  line-height: 1.5; margin: 0 0 16px;
}
.cc-tour__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cc-tour__skip {
  background: none; border: 0; cursor: pointer; padding: 8px 0;
  font-family: var(--font-body); font-size: 13px; color: var(--fg-faint);
}
.cc-tour__skip:hover { color: var(--fg); }
.cc-tour__nav { display: flex; align-items: center; gap: 6px; }
.cc-tour__prev { padding: 10px 12px; }
.cc-tour__next { padding: 10px 16px; }
.cc-tour__prev:disabled { opacity: .35; pointer-events: none; }
@keyframes tourCardIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-tour, .cc-tour__spotlight, .cc-tour__card { transition: none !important; animation: none !important; }
}

/* ============ ANIMATIONS + LOGO THEME SWITCH ============ */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ringPulse { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.18); opacity: 0; } }

.cc-logo {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; flex: none;
}
.cc-logo img {
  display: block; width: auto; height: auto; max-width: 100%;
}
.cc-logo--header img { height: 44px; width: auto; }
.cc-logo--hero img { height: clamp(120px, 28vw, 180px); width: auto; }
.cc-logo--auth img { height: 88px; width: auto; }
.cc-logo--admin img { height: 40px; width: auto; }
.cc-logo--mobile img { width: 90px; height: auto; }

[data-theme="dark"]  .cc-logo-day   { display: none; }
[data-theme="light"] .cc-logo-night { display: none; }


/* ============ IMPRESSÃO NÃO FISCAL (admin) ============ */
.cc-printnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; border-bottom: 1px solid var(--border); }
.cc-printnav__tab {
  padding: 9px 14px; border-radius: 10px 10px 0 0; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--fg-muted);
}
.cc-printnav__tab:hover { background: var(--surface-2); color: var(--fg-bright); }
.cc-printnav__tab.is-active { background: var(--surface); color: var(--primary); border: 1px solid var(--border); border-bottom-color: var(--surface); margin-bottom: -1px; }

.cc-printfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.cc-printhealth { font-family: var(--font-body); font-size: 12px; }
.cc-printhealth--ok { color: var(--success); }
.cc-printhealth--erro { color: var(--danger, #e5484d); }
.cc-printhealth--idle { color: var(--fg-faint); }

.cc-printstatus { font-size: 14px; }
.cc-printstatus[data-tone="ok"] { color: var(--success); }
.cc-printstatus[data-tone="erro"] { color: var(--danger, #e5484d); }
.cc-printstatus[data-tone="idle"] { color: var(--fg-faint); }

.cc-printer-diagnostic {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-top: 4px; border-top: 1px solid var(--border);
}
.cc-printer-diagnostic .cc-printstatus { flex: 1; min-width: 220px; }

.cc-printlayout {
  display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  align-items: start; gap: 20px;
}
.cc-printlayout__preview { min-width: 0; }
.cc-printlayout__previewhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.cc-printlayout__previewhead h3 {
  margin: 0; color: var(--fg-bright); font-family: var(--font-heading); font-size: 13px;
}
.cc-printlayout__paper {
  padding: 12px; overflow-x: auto; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px dashed var(--border);
}

/* Prévia do cupom: monoespaçada, largura de bobina */
.cc-receipt {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px; overflow-x: auto; white-space: pre; color: var(--fg);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.45;
}
.cc-receipt--live {
  width: calc(var(--receipt-width, 48ch) + 36px); max-width: none; min-height: 260px;
  margin: 0; box-sizing: border-box; transition: width 160ms ease;
}

@media (max-width: 900px) {
  .cc-printlayout { grid-template-columns: 1fr; }
}

.cc-printlog {
  display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 14px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--fg-muted);
}
.cc-printlog:empty::after { content: "Sem eventos ainda."; color: var(--fg-faint); }

/* Payment gateway admin helpers */
.cc-admin__hint { color: var(--fg-muted); font-size: 0.875rem; margin: 0.5rem 0 1rem; }
.cc-table__tag { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 9999px; background: var(--surface-2, rgba(255,255,255,0.08)); color: var(--fg-muted); font-size: 0.75rem; margin-right: 0.25rem; }
.cc-admin__credgroup { display: none; }
.cc-admin__credgroup:not([hidden]) { display: block; }