/* ──────────────────────────────────────────────────────────────────────
   storefront.css — Creole Cravings Cuisine customer site (mobile-first).
   White base; navy=structure, red=action, gold=accent, green+palm=signature.
   Compact DoorDash-style rows with inline (accordion) options. See DESIGN.md.
   ────────────────────────────────────────────────────────────────────── */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 720px) { .wrap { padding: 0 1.25rem; } }

/* ── Top banner ── */
.cc-topbar { background: var(--navy-900); color: var(--on-navy); font-size: .8rem; font-weight: 600; text-align: center; padding: .5rem 1rem; }
.cc-topbar b { color: var(--gold); }

/* ── Header ── */
.cc-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.95); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); }
.cc-header .wrap { display: flex; align-items: center; gap: .6rem; height: 60px; }
.cc-logo { display: flex; align-items: center; gap: .4rem; text-decoration: none; }
.cc-logo img { height: 40px; width: auto; display: block; }
.cc-logo .script { font-family: var(--font-script); font-size: 1.3rem; color: var(--red); line-height: 1; }
.cc-logo .navy { color: var(--navy-900); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.cc-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.cc-iconbtn { display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--radius-pill); padding: .5rem .85rem; font-weight: 700; font-size: .85rem; cursor: pointer; border: 1.5px solid var(--line-200); background: #fff; color: var(--navy-900); white-space: nowrap; }
.cc-iconbtn:hover { border-color: var(--navy-600); }
.cc-iconbtn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.cc-iconbtn.primary:hover { background: var(--red-600); }
.cc-iconbtn .label { display: none; }
@media (min-width: 520px) { .cc-iconbtn .label { display: inline; } }
.cc-navlinks { display: none; }
@media (min-width: 860px) { .cc-navlinks { display: flex; gap: 1.1rem; margin-left: 1rem; } .cc-navlinks a { color: var(--navy-900); text-decoration: none; font-weight: 600; font-size: .9rem; } .cc-navlinks a:hover { color: var(--red); } }

/* ── Hero ── (photo bg + navy scrim set in tokens/below) ── */
.cc-hero { position: relative; color: #fff; overflow: hidden;
  background-color: var(--navy-900);
  background-image:
    radial-gradient(120% 90% at 80% 8%, rgba(244,165,42,.12), transparent 55%),
    radial-gradient(85% 80% at 8% 96%, rgba(30,122,70,.14), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 50%, rgba(0,0,0,.46) 100%),
    url('/images/brand/hero-bg.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat; }
@media (max-width: 620px) { .cc-hero { background-image: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 50%, rgba(0,0,0,.52) 100%), url('/images/brand/hero-bg.jpg'); } }
.cc-hero h1, .cc-hero .lead, .cc-hero .subline { text-shadow: 0 1px 14px rgba(11,26,43,.55); }
.cc-hero .palm { position: absolute; color: var(--gold); opacity: .16; }
.cc-hero .palm.tr { top: -10px; right: -10px; transform: scaleX(-1); width: 180px; height: 180px; }
.cc-hero .palm.bl { bottom: -20px; left: -20px; width: 160px; height: 160px; }
.cc-hero .wrap { position: relative; z-index: 1; padding: 3.25rem 1rem 2.75rem; max-width: 760px; margin: 0 auto; text-align: center; }
.cc-flag { display: inline-flex; align-items: center; gap: .45rem; background: var(--red); color: #fff; font-weight: 800; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; padding: .35rem .75rem; border-radius: var(--radius-pill); }
.cc-hero h1 { font-weight: 800; font-size: clamp(2rem, 8vw, 3.6rem); line-height: 1.03; letter-spacing: -.02em; margin: 1rem 0 .4rem; }
.cc-hero h1 .accent { color: var(--gold); }
.cc-hero .subline { font-style: italic; color: var(--gold-300); font-size: 1rem; font-weight: 600; }
.cc-hero .lead { color: rgba(255,255,255,.88); font-size: 1rem; line-height: 1.55; max-width: 34rem; margin: .7rem auto 1.4rem; }
.cc-hero .cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ── Info strip ── */
.cc-strip { background: var(--navy-800); color: var(--on-navy); }
.cc-strip .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.6rem; padding: .85rem 1rem; }
.cc-strip .item { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; }
.cc-strip .item .ic { color: var(--gold); }
.cc-strip .item b { color: var(--gold); }

/* ── Section headers ── */
.cc-sec { padding: 2.4rem 0 .5rem; }
.cc-sec-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1rem; }
.cc-sec-head h2 { font-weight: 800; font-size: 1.4rem; color: var(--navy-900); margin: 0; letter-spacing: -.01em; }
.cc-sec-head .creole { color: var(--gray); font-style: italic; font-weight: 600; font-size: .9rem; }
.cc-sec-head .rule { flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), transparent); }
/* "Sold Out" trailing section — muted so it reads as the tail of the menu */
.cc-sec-head--sold { margin-top: 1.5rem; }
.cc-sec-head--sold h2 { color: var(--gray); }
.cc-sec-head--sold .rule { background: linear-gradient(90deg, var(--gray,#8a93a0), transparent); opacity: .5; }

/* ── Weekly special spotlight ── */
.cc-special { background: linear-gradient(120deg, #16294A, #1B2F52); color: #fff; border-radius: var(--radius-card); overflow: hidden; display: grid; grid-template-columns: 1fr; box-shadow: var(--shadow-lg); }
@media (min-width: 720px) { .cc-special { grid-template-columns: 1.1fr 1fr; } }
.cc-special .ph { min-height: 200px; background: center/cover no-repeat var(--navy-700); }
.cc-special .body { padding: 1.5rem; }
.cc-special .eyebrow { color: var(--gold); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.cc-special h3 { font-weight: 800; font-size: 1.5rem; margin: .35rem 0 .15rem; }
.cc-special .kreyol { color: var(--gold-300); font-style: italic; }
.cc-special .price { font-size: 1.35rem; font-weight: 800; color: var(--gold); margin: .6rem 0; }

/* ── Category filter (sticky) ── */
.cc-filter { position: sticky; top: 60px; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); padding: .7rem 0; border-bottom: 1px solid var(--border); }
.cc-filter .wrap { display: flex; gap: .5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cc-filter .wrap::-webkit-scrollbar { display: none; }
.cc-pill { white-space: nowrap; }

/* ── Menu: compact rows ── */
.cc-grid { display: grid; grid-template-columns: 1fr; gap: .65rem; margin: .65rem 0 0; }
@media (min-width: 720px) { .cc-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.cc-row { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease; }
.cc-row:hover { box-shadow: var(--shadow-sm); }
/* Featured (Popular / Favorite): clearly bigger than the rest — larger photo, name
   and description, a gold ring + tint; full-width on desktop so they read as the
   highlight at the top of each category. Doubled class = beats the base .cc-row rules. */
.cc-row.cc-row--feat { border: 2px solid var(--gold); box-shadow: var(--shadow-md); background: #FFFCF4; }
.cc-row.cc-row--feat .head { padding: 1.15rem; gap: 1.1rem; }
.cc-row.cc-row--feat .thumb { flex: 0 0 150px; width: 150px; height: 150px; }
.cc-row.cc-row--feat .nm { font-size: 1.32rem; }
.cc-row.cc-row--feat .kr { font-size: .9rem; }
.cc-row.cc-row--feat .ds { font-size: .96rem; -webkit-line-clamp: 3; }
.cc-row.cc-row--feat .price { font-size: 1.18rem; }
.cc-row.cc-row--feat .thumb .chip { background: var(--gold); color: var(--navy-900); font-size: .62rem; }
/* On desktop, Plat du Jour cards flow in the normal 2-up grid (side by side) — full
   width left too much empty space between the photo and the Choose button — but render
   noticeably BIGGER than regular items so they're the obvious thing to click. */
@media (min-width: 720px) {
  .cc-row.cc-row--feat .head { padding: 1.5rem; gap: 1.3rem; }
  .cc-row.cc-row--feat .thumb { flex: 0 0 184px; width: 184px; height: 184px; }
  .cc-row.cc-row--feat .nm { font-size: 1.6rem; }
  .cc-row.cc-row--feat .kr { font-size: .98rem; }
  .cc-row.cc-row--feat .ds { font-size: 1.04rem; -webkit-line-clamp: 3; }
  .cc-row.cc-row--feat .price { font-size: 1.35rem; }
  .cc-row.cc-row--feat .choose { font-size: .92rem; padding: .7rem 1.1rem; }
  .cc-row.cc-row--feat { box-shadow: var(--shadow-lg); }
}
.cc-row.open { box-shadow: var(--shadow-md); border-color: var(--line-200); }
.cc-row .head { display: flex; gap: .95rem; padding: 1rem; cursor: default; align-items: stretch; }
/* option items read as a tappable button */
.cc-row.has-opts .head { cursor: pointer; }
.cc-row.has-opts:hover { border-color: var(--navy-600); box-shadow: var(--shadow-md); }
.cc-row.has-opts .head:active { background: var(--cream); }
.cc-row .thumb { position: relative; flex: 0 0 100px; width: 100px; height: 100px; border-radius: 12px; overflow: hidden; background: var(--cream-200); }
.cc-row .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-row.is-sold .thumb img { filter: grayscale(.7) opacity(.65); }
.cc-row .thumb .chip { position: absolute; top: 4px; left: 4px; font-size: .58rem; font-weight: 800; letter-spacing: .04em; padding: .12em .4em; border-radius: var(--radius-pill); color: #fff; background: var(--navy-900); }
.cc-row .thumb .chip.sold { background: var(--gray); }
/* SOLD OUT: centered red badge on a dimmed photo — high contrast, not a faint corner chip */
.cc-row .thumb .cc-soldout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(22,41,74,.45); border-radius: inherit; }
.cc-row .thumb .cc-soldout-tag { background: var(--red,#E03127); color: #fff; font-weight: 800; font-size: .8rem;
  letter-spacing: .07em; padding: .3rem .6rem; border-radius: 6px; box-shadow: 0 1px 5px rgba(0,0,0,.45); white-space: nowrap; }
.cc-row--feat .thumb .cc-soldout-tag { font-size: 1rem; padding: .42rem .85rem; }   /* bigger photo → bigger badge */
.cc-row .thumb .chip.chip--feat { background: var(--gold); color: var(--navy-900); }   /* Plat du Jour */
.cc-row .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-row .nm { font-weight: 800; color: var(--navy-900); font-size: 1.1rem; line-height: 1.2; }
.cc-row .kr { color: var(--gray); font-style: italic; font-size: .82rem; margin-top: .1rem; }
.cc-row .ds { color: var(--navy-700); font-size: .9rem; line-height: 1.45; margin: .3rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-row .inc-line { color: var(--gray); font-style: italic; font-size: .82rem; line-height: 1.4; margin: .25rem 0 0; }
.cc-row .meta { margin-top: auto; display: flex; align-items: center; gap: .5rem; padding-top: .5rem; }
.cc-row .price { font-weight: 800; color: var(--navy-900); font-size: 1.06rem; }
.cc-row .sched { font-size: .68rem; font-weight: 700; color: var(--green); background: rgba(30,122,70,.08); border-radius: var(--radius-pill); padding: .12rem .45rem; }
.cc-row .add { flex: 0 0 auto; align-self: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-size: 1.3rem; font-weight: 700; cursor: pointer; line-height: 1; display: grid; place-items: center; }
.cc-row .add:hover { background: var(--red-600); }
.cc-row.is-sold .add { background: var(--gray); cursor: not-allowed; }

/* "Choose ▾" pill — visibly distinct from the red round "+" */
.cc-row .choose { flex: 0 0 auto; align-self: center; background: var(--navy-900); color: #fff; border: 0;
  border-radius: var(--radius-pill); padding: .55rem .8rem; font-weight: 700; font-size: .78rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.cc-row .choose:hover { background: var(--navy-700); }
.cc-row .choose .chev { transition: transform .2s ease; display: inline-block; }
.cc-row.open .choose .chev { transform: rotate(180deg); }

/* inline "N options ▾" cue next to the price */
.cc-row .optcue { display: inline-flex; align-items: center; gap: .15rem; font-size: .66rem; font-weight: 800;
  letter-spacing: .02em; color: var(--navy-700); background: var(--cream-200); border: 1px solid var(--line-200);
  border-radius: var(--radius-pill); padding: .12rem .45rem; }
.cc-row .optcue .chev { font-size: .85em; }
.cc-row.open .optcue .chev { transform: rotate(180deg); }

/* Schedule pill: inline next to price on desktop (unchanged); on mobile the inline copy
   is hidden and a full-card-width copy drops below the head so it reads as one clean
   line and never stacks one-word-per-line. */
.cc-row .sched--mobile { display: none; }
/* Desktop: footer dissolves so the Choose/+ control acts as a normal head child. */
.cc-foot { display: contents; }
@media (max-width: 600px) {
  .cc-row .sched--inline { display: none; }
  .cc-row .optcue { display: none; }   /* redundant with the "Choose ▾" button on mobile */
  /* Footer = one full-width row below: days on the LEFT (small), button on the RIGHT. */
  .cc-foot { order: 5; flex: 1 1 100%; display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }
  .cc-foot .sched--mobile { display: inline-flex; font-size: .6rem; white-space: nowrap; min-width: 0; overflow: hidden; }
  .cc-foot > .choose, .cc-foot > .add { margin-left: auto; }
  /* Photo on the LEFT, text to its RIGHT (not stacked under it). One consistent photo
     size — including featured cards — so the text always sits beside it; the Choose / +
     control drops to its own line below. */
  /* Regular cards compacted; Plat du Jour stays deliberately larger (bigger photo,
     padding, title, and a 3-line description) so it stands out from the rest. */
  .cc-row .head { flex-wrap: wrap; align-items: flex-start; padding: .6rem; gap: .65rem; }
  .cc-row.cc-row--feat .head { padding: .95rem; gap: .9rem; }
  .cc-row .thumb { flex: 0 0 82px; width: 82px; height: 82px; }
  .cc-row.cc-row--feat .thumb { flex: 0 0 150px; width: 150px; height: 150px; }   /* Plat du Jour photo larger than the rest */
  .cc-row .info, .cc-row.cc-row--feat .info { flex: 1 1 55%; min-width: 0; }
  /* Regular cards: text on the LEFT, food photo on the RIGHT. */
  .cc-row:not(.cc-row--feat) .info { order: 1; }
  .cc-row:not(.cc-row--feat) .thumb { order: 2; }
  /* Plat du Jour: big photo on the LEFT, text beside it on the RIGHT (fills the space
     next to the 150px photo instead of wrapping below it). */
  .cc-row.cc-row--feat .info { flex: 1 1 0; }
  .cc-row .nm { font-size: 1rem; }                 /* feat keeps its bigger 1.32rem via the higher-specificity rule */
  .cc-row .ds { -webkit-line-clamp: 2; }           /* feat keeps 3 lines via .cc-row--feat .ds */
  .cc-row .meta { padding-top: .35rem; }
}

/* accordion options panel */
.cc-opts { max-height: 0; overflow: hidden; transition: max-height .25s ease; border-top: 0 solid var(--border); }
.cc-row.open .cc-opts { max-height: 800px; border-top: 1px solid var(--border); }
.cc-opts .inner { padding: .65rem .7rem .8rem; }
.cc-grp { margin-bottom: .6rem; }
.cc-grp h4 { margin: 0 0 .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-700); font-weight: 800; }
.cc-grp h4 .req { color: var(--red); }
.cc-opt { display: flex; align-items: center; gap: .4rem; padding: .38rem .5rem; border: 1.5px solid var(--line); border-radius: 9px; margin-bottom: .3rem; cursor: pointer; font-size: .8rem; line-height: 1.25; color: var(--navy-900); }
.cc-opt:hover { border-color: var(--line-200); background: var(--cream); }
.cc-opt.sel { border-color: var(--red); background: rgba(224,49,39,.05); }
.cc-opt input { accent-color: var(--red); flex: 0 0 auto; }
/* option name reuses .nm (same class as the card title) — the bigger
   .cc-row--feat .nm card rule would otherwise cascade in and balloon Plat du
   Jour option names. Higher specificity here pins the option name small. */
.cc-row .cc-opts .cc-opt .nm { font-weight: 600; min-width: 0; font-size: .8rem; line-height: 1.25; }
.cc-choose-modal .cc-opt .nm { font-size: .8rem; }
/* "(translation)" parenthetical in an option name — its own line, italic, muted */
.cc-opt .nm .cc-tr { display: block; font-weight: 400; font-style: italic; color: var(--gray); opacity: .55; font-size: .72rem; line-height: 1.25; }
.cc-opt .pr { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-weight: 700; color: var(--navy-800); font-size: .78rem; }
.cc-opt .inc { font-size: .68rem; color: var(--gray); min-width: 0; }
.cc-opts .addrow { display: flex; align-items: center; gap: .75rem; margin-top: .4rem; }
.cc-opts .addbtn { flex: 1; }

/* ── Desktop chooser modal (desktop-only; mobile keeps the inline accordion above) ── */
.cc-choose-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(11,26,43,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.cc-choose-box { position: relative; width: min(560px, 100%); max-height: 92vh; overflow: auto; background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-lg); }
.cc-choose-x { position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--navy-900); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }
.cc-choose-x:hover { background: #fff; }
.cc-choose-hero { height: 220px; background: var(--cream-200); overflow: hidden; }
.cc-choose-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-choose-body { padding: 1.1rem 1.25rem 1.25rem; }
.cc-choose-h .nm { font-weight: 800; font-size: 1.35rem; color: var(--navy-900); line-height: 1.15; }
.cc-choose-h .kr { color: var(--gray); font-style: italic; font-size: .9rem; margin-top: .1rem; }
.cc-choose-h .ds { color: var(--navy-700); font-size: .92rem; line-height: 1.5; margin: .5rem 0 .2rem; }
/* modal options are always expanded — override the collapsed-accordion defaults */
.cc-choose-modal .cc-opts { max-height: none; overflow: visible; border-top: 1px solid var(--border); margin-top: .75rem; }
.cc-choose-modal .cc-opts .inner { padding: .85rem 0 0; }
.cc-choose-foot { margin-top: .75rem; }
.cc-choose-foot .cancel { width: 100%; }

/* qty stepper */
.cc-step { display: inline-flex; align-items: center; border: 1.5px solid var(--line-200); border-radius: var(--radius-pill); overflow: hidden; }
.cc-step button { width: 32px; height: 34px; border: 0; background: #fff; color: var(--navy-900); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.cc-step button:hover { background: var(--cream-200); }
.cc-step .n { min-width: 28px; text-align: center; font-weight: 700; color: var(--navy-900); }

/* ── About / Contact / Footer ── */
.cc-about { background: var(--cream); }
.cc-about .grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 760px) { .cc-about .grid { grid-template-columns: 1.2fr 1fr; gap: 2rem; } }
.cc-about p { color: var(--gray-700); line-height: 1.65; }
.cc-features { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cc-feature { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-portal); padding: .9rem; }
.cc-feature h4 { margin: 0 0 .2rem; color: var(--navy-900); font-size: .95rem; }
.cc-feature p { margin: 0; font-size: .82rem; }
.cc-contact .grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 760px) { .cc-contact .grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.cc-contact .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.cc-contact .card p { margin: .4rem 0; }
.cc-contact .preorder { margin: 0 0 .6rem; }
.cc-bullets { list-style: disc; margin: 0; padding-left: 1.2rem; }
.cc-bullets li { margin: .25rem 0; line-height: 1.45; color: var(--gray-700); font-size: .9rem; }
.cc-contact .hours { padding: 0; margin: 0; }
.cc-contact .hours li { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px dashed var(--border); list-style: none; }
.cc-contact a { color: var(--red); font-weight: 700; text-decoration: none; }
.cc-footer { background: var(--navy-900); color: var(--on-navy-muted); margin-top: 2.5rem; }
.cc-footer .wrap { padding: 1.75rem 1rem; text-align: center; }
.cc-footer .tag { color: var(--gold); font-weight: 700; }

/* ── Cart drawer ── */
.cc-overlay { position: fixed; inset: 0; background: rgba(14,42,71,.5); opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 100; }
.cc-overlay.open { opacity: 1; visibility: visible; }
.cc-cart { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100vw); background: #fff; z-index: 101; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.cc-cart.open { transform: translateX(0); }
.cc-cart .head { background: var(--navy-900); color: #fff; padding: 1rem 1.1rem; display: flex; align-items: center; gap: .6rem; }
.cc-cart .head h3 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.cc-cart .head .close { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.cc-cart .items { flex: 1; overflow-y: auto; padding: .9rem 1.1rem; }
.cc-cart .empty { color: var(--gray); text-align: center; padding: 2.5rem 1rem; }
.cc-cart .empty .big { font-size: 2.5rem; }
.cc-line { display: flex; gap: .6rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.cc-line .info { flex: 1; min-width: 0; }
.cc-line .nm { font-weight: 700; color: var(--navy-900); font-size: .9rem; }
.cc-line .op { font-size: .76rem; color: var(--gray); margin-top: .1rem; }
.cc-line .rm { background: transparent; border: 0; color: var(--gray); cursor: pointer; font-size: .76rem; text-decoration: underline; padding: .2rem 0 0; }
.cc-cart .foot { border-top: 1px solid var(--border); padding: 1rem 1.1rem; }
.cc-cart .sub { display: flex; justify-content: space-between; font-weight: 800; color: var(--navy-900); font-size: 1.05rem; margin-bottom: .7rem; }
.cc-cart .checkout { width: 100%; justify-content: center; font-size: 1rem; padding: .85rem; }
.cc-cart .note { font-size: .74rem; color: var(--gray); text-align: center; margin: .55rem 0 0; }

/* ── Modals (checkout, order status, generic) ── */
.cc-modal { position: fixed; inset: 0; z-index: 110; display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .2s; background: rgba(14,42,71,.5); }
.cc-modal.open { opacity: 1; visibility: visible; }
@media (min-width: 640px) { .cc-modal { align-items: center; } }
.cc-modal .box { background: #fff; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; border-radius: var(--radius-card) var(--radius-card) 0 0; box-shadow: var(--shadow-lg); }
@media (min-width: 640px) { .cc-modal .box { border-radius: var(--radius-card); } }
.cc-modal .mhead { position: sticky; top: 0; background: var(--navy-900); color: #fff; padding: 1rem 1.1rem; display: flex; align-items: center; gap: .5rem; z-index: 1; }
.cc-modal .mhead h3 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.cc-modal .mhead .close { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.cc-modal .mbody { padding: 1.1rem; }
.cc-modal .mfoot { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: .9rem 1.1rem; }
/* Order-status lookup: centre the window on phones (was anchored to the bottom) and
   show the status as a big, obvious colour-coded badge. */
#cc-status { align-items: center; padding: 1rem; }
#cc-status .box { border-radius: var(--radius-card); }
.os-card { text-align: center; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.1rem; margin-bottom: .7rem; background: #fff; }
.os-card:last-child { margin-bottom: 0; }
.os-ono { font-weight: 800; color: var(--navy-900); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }
.os-status { display: inline-block; margin: .55rem 0; padding: .55rem 1.25rem; border-radius: var(--radius-pill); font-weight: 800; font-size: 1.35rem; line-height: 1.1; }
.os-st-active { background: var(--gold); color: var(--navy-900); }
.os-st-ready  { background: var(--green); color: #fff; }
.os-st-cancel { background: var(--red); color: #fff; }
.os-meta { font-size: .9rem; color: var(--navy-700); line-height: 1.55; }

/* form bits */
.cc-field { margin-bottom: .85rem; }
.cc-field label { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-700); margin-bottom: .3rem; }
.cc-field label .req { color: var(--red); }
.cc-field label .opt { color: var(--gray); font-weight: 600; text-transform: none; letter-spacing: 0; }
.cc-input, .cc-textarea, .cc-select { width: 100%; font-family: var(--font-ui); font-size: .95rem; color: var(--navy-900); border: 1.5px solid var(--line-200); border-radius: 10px; padding: .6rem .7rem; background: #fff; }
.cc-input:focus, .cc-textarea:focus, .cc-select:focus { outline: none; border-color: var(--navy-600); }
.cc-textarea { resize: vertical; min-height: 64px; }
.cc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.cc-toggle { display: flex; gap: .5rem; }
.cc-toggle button { flex: 1; padding: .55rem .6rem; border: 1.5px solid var(--line-200); background: #fff; border-radius: 10px; font-weight: 700; color: var(--navy-900); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .12rem; line-height: 1.15; }
.cc-toggle button.sel { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.cc-toggle button .t { font-weight: 800; font-size: .92rem; }
.cc-toggle button .sub { font-weight: 600; font-size: .7rem; color: var(--gray); }
.cc-toggle button.sel .sub { color: rgba(255,255,255,.85); }
.cc-slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.cc-slot { padding: .5rem .7rem; border: 1.5px solid var(--line-200); background: #fff; border-radius: 10px; font-weight: 700; font-size: .82rem; color: var(--navy-900); cursor: pointer; }
.cc-slot.sel { border-color: var(--red); background: rgba(224,49,39,.06); color: var(--red-700); }
/* split Date + Time (Hour/Min/AM-PM scroll menus) + a colourful confirm button */
.cc-dt-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.cc-date-input { flex: 0 0 auto; width: auto; min-width: 0; }
.cc-time-row { display: flex; gap: .4rem; flex-wrap: nowrap; }
.cc-time-row .cc-input { flex: 0 0 auto; width: auto; min-width: 0; text-align: center; padding-left: .4rem; padding-right: .4rem; }
.cc-setpickup { width: 100%; margin-top: .5rem; }
.chk-fr { display: inline-block; margin-top: .25rem; font-style: italic; color: var(--gray-700); }
.cc-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .6rem; }
.cc-quick-btn { display: flex; flex-direction: column; align-items: flex-start; gap: .08rem; padding: .35rem .4rem; border: 1.5px solid var(--line-200); background: #fff; border-radius: 8px; cursor: pointer; text-align: left; }
.cc-quick-btn .ql { font-weight: 800; font-size: .78rem; color: var(--navy-900); }
.cc-quick-btn .qt { font-weight: 500; font-size: .64rem; color: var(--gray); }
/* very light tint per button: blue / red / green */
.cc-quick-btn[data-i="0"] { background: #eff5ff; border-color: #d4e4fb; }
.cc-quick-btn[data-i="1"] { background: #fdf0ef; border-color: #f7d6d3; }
.cc-quick-btn[data-i="2"] { background: #eef8f1; border-color: #cfead9; }
.cc-quick-btn.sel { border-color: var(--red); background: rgba(224,49,39,.06); }
.cc-quick-btn.sel .ql { color: var(--red-700); }
.cc-quick-btn:disabled { opacity: .5; cursor: not-allowed; }
.cc-dt-label { display: block; margin: .6rem 0 .25rem; font-size: .78rem; color: var(--gray); }
.cc-avail { font-size: .85rem; color: var(--navy-900); background: #FBF6EC; border: 1px solid var(--line-200); border-radius: 10px; padding: .5rem .7rem; margin-bottom: .5rem; }
.cc-avail .sub { font-size: .76rem; color: var(--gray); }
.cc-quick { margin-top: .5rem; }
#chk-pick-msg .good { color: #1E7A46; font-weight: 700; font-size: .85rem; }
#chk-pick-msg .bad { color: var(--red); font-weight: 700; font-size: .85rem; }
#chk-deliv-fee .good { color: #1E7A46; font-weight: 700; }
#chk-deliv-fee .bad { color: var(--red); font-weight: 700; }
#chk-deliv-fee .muted { color: var(--gray); }
.cc-pay { display: flex; flex-direction: column; gap: .5rem; }
.cc-pay .opt { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 1.5px solid var(--line-200); border-radius: 10px; cursor: pointer; }
.cc-pay .opt.sel { border-color: var(--red); background: rgba(224,49,39,.05); }
.cc-pay .opt .ico { flex: 0 0 auto; display: block; }
.cc-pay .opt .h { margin-left: auto; font-family: monospace; font-size: .82rem; color: var(--navy-800); }
.cc-coupon { display: flex; gap: .5rem; }
.cc-coupon .cc-input { flex: 1; text-transform: uppercase; }
.cc-coupon .cc-input::placeholder { text-transform: none; }
.cc-coupon-hint { font-size: .8rem; color: #1E7A46; margin-top: .3rem; font-weight: 600; }
/* order confirmation modal */
.cf-check { width: 56px; height: 56px; margin: .2rem auto .8rem; border-radius: 50%; background: #1E7A46; color: #fff; font-size: 2rem; line-height: 56px; text-align: center; font-weight: 800; }
.cf-summary { background: var(--cream, #FBF6EC); border: 1px solid var(--line-200); border-radius: 12px; padding: .9rem 1rem; }
.cf-summary .cf-ono { font-size: 1.05rem; margin-bottom: .35rem; color: var(--navy-900); }
.cf-summary .cf-line { font-size: .92rem; color: var(--gray-700); padding: .15rem 0; }
.cf-summary .cf-note { font-size: .85rem; color: #1E7A46; margin-top: .5rem; }
.cc-summary { background: var(--cream); border-radius: 10px; padding: .8rem .9rem; margin: .9rem 0; }
.cc-summary .ln { display: flex; justify-content: space-between; padding: .2rem 0; color: var(--gray-700); font-size: .9rem; }
.cc-summary .ln.tot { border-top: 1px solid var(--border); margin-top: .35rem; padding-top: .5rem; font-weight: 800; color: var(--navy-900); font-size: 1.05rem; }
.cc-summary .ln.disc { color: var(--green); }
.cc-summary .ln .was { color: var(--gray-700); opacity: .6; margin-right: .25rem; }
.cc-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem; color: var(--gray-700); margin: .5rem 0; }
.cc-consent input { margin-top: .15rem; accent-color: var(--red); }
.cc-place { width: 100%; justify-content: center; font-size: 1.05rem; padding: .9rem; }
.cc-msg { font-size: .85rem; padding: .6rem .75rem; border-radius: 8px; margin: .5rem 0; }
.cc-msg.err { background: #FDECEA; color: var(--red-700); }
.cc-errbox { background: #FDECEA; color: var(--red-700); border: 1.5px solid var(--red); border-radius: 10px; padding: .7rem .85rem; margin-bottom: .9rem; font-size: .88rem; }
.cc-errbox b { display: block; margin-bottom: .25rem; }
.cc-errbox ul { margin: 0; padding-left: 1.15rem; }
.cc-errbox li { margin: .12rem 0; }
.cc-hint { font-size: .78rem; color: var(--gray); margin: -.4rem 0 .85rem; }
.field-bad { border-color: var(--red) !important; }
.cc-input.field-bad, .cc-textarea.field-bad { background: #FDECEA; }
#chk-pay.field-bad { border: 1.5px solid var(--red); border-radius: 10px; padding: .4rem; }
#chk-dt.field-bad { background: #FDECEA; }
.cc-msg.ok { background: rgba(30,122,70,.1); color: var(--green-600); }
.cc-msg.info { background: rgba(244,165,42,.12); color: var(--gold-700); }

/* loading / error states */
.cc-loading, .cc-error { text-align: center; color: var(--gray); padding: 2.5rem 1rem; }
.cc-error { color: var(--red-600); }

/* ═══════════════════════════════════════════════════════════════════════
   Menu card LAYOUT VARIANTS — opt-in via a modifier class on the grid
   container (.cc-grid.menu-grid--photo-top | --photo-tile | --thumb-left |
   --split | --list-row | --overlay). The live grid is UNCLASSED and keeps
   the original rules above; nothing here applies to it. One shared card
   markup (row() in storefront.js) drives all variants — elements a variant
   doesn't show are hidden with CSS, never removed, so every data-* hook and
   listener survives.
   Column counts use @container queries: inside a container-typed wrapper
   (the /_preview/ page) they follow the wrapper width; with no container
   ancestor (the real page) they resolve against the viewport.
   Selector convention: every rule is prefixed with
   `.cc-grid[class*="menu-grid--"] .cc-row` (shared) or
   `.cc-grid.menu-grid--X .cc-row` (per-variant) — (0,4,0) specificity, so
   they beat every base/media-query rule above (max (0,3,0)); per-variant
   blocks come after the shared block so ties resolve to the variant.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── shared variant scaffolding (default shape = photo band on top) ── */
.cc-grid[class*="menu-grid--"] { grid-template-columns: 1fr; gap: 1.1rem; }
.cc-grid[class*="menu-grid--"] .cc-row { position: relative; display: flex; flex-direction: column; }
.cc-grid[class*="menu-grid--"] .cc-row .head { flex: 1; display: flex; flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
.cc-grid[class*="menu-grid--"] .cc-row .thumb { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.cc-grid[class*="menu-grid--"] .cc-row .info { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: .8rem .9rem .75rem; }
.cc-grid[class*="menu-grid--"] .cc-row .meta { display: contents; }
.cc-grid[class*="menu-grid--"] .cc-row .nm { font-size: 1.06rem; }
.cc-grid[class*="menu-grid--"] .cc-row .kr { font-size: .82rem; }
.cc-grid[class*="menu-grid--"] .cc-row .ds { font-size: .88rem; -webkit-line-clamp: 2; margin-top: .3rem; }
.cc-grid[class*="menu-grid--"] .cc-row .inc-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-grid[class*="menu-grid--"] .cc-row .sched--inline { display: inline-flex; align-self: flex-start; margin-top: .5rem; }
/* footer row: price pinned bottom-left (margin-top:auto), control pinned
   bottom-right (absolute) — no dedicated button column, aligned card bottoms */
.cc-grid[class*="menu-grid--"] .cc-row .price { margin: auto 96px 0 0; padding-top: .6rem; min-height: 42px; display: flex; align-items: center; font-size: 1.05rem; }
.cc-grid[class*="menu-grid--"] .cc-row .cc-foot { display: block; position: absolute; right: .8rem; bottom: .72rem; margin: 0; z-index: 3; }
.cc-grid[class*="menu-grid--"] .cc-row .cc-foot .sched--mobile { display: none; }
.cc-grid[class*="menu-grid--"] .cc-row .choose { font-size: .78rem; padding: .55rem .8rem; align-self: auto; }
/* photo-less items: neutral cream tint + brand mark at the variant's own
   aspect ratio — the placeholder SVG itself is hidden so it can never
   letterbox or crop oddly. Badges keep painting above it. */
.cc-grid[class*="menu-grid--"] .cc-row .thumb img[src$="_placeholder.svg"] { display: none; }
.cc-grid[class*="menu-grid--"] .cc-row .thumb:has(img[src$="_placeholder.svg"]) { background: linear-gradient(150deg, var(--cream), var(--cream-200)); }
.cc-grid[class*="menu-grid--"] .cc-row .thumb:has(img[src$="_placeholder.svg"])::after { content: ""; position: absolute; inset: 16%; background: url('/images/brand/logo-transparent.png') center / contain no-repeat; opacity: .42; z-index: 1; }
.cc-grid[class*="menu-grid--"] .cc-row .thumb .chip,
.cc-grid[class*="menu-grid--"] .cc-row .thumb .cc-soldout { z-index: 2; }
/* Plat du Jour keeps its gold ring / tint / gold chip from the base rules;
   size overrides are neutralized so it re-fits each variant's geometry. */
.cc-grid[class*="menu-grid--"] .cc-row.cc-row--feat .nm { font-size: 1.06rem; }
.cc-grid[class*="menu-grid--"] .cc-row.cc-row--feat .ds { -webkit-line-clamp: 2; font-size: .88rem; }
.cc-grid[class*="menu-grid--"] .cc-row.cc-row--feat .price { font-size: 1.05rem; }

/* ── 1. photo-top: full-width 4:3 photo band (the shared default shape) ── */
/* (no extra structural rules — columns below) */

/* ── 2. photo-tile: square photo, title + chip + footer only ── */
.cc-grid.menu-grid--photo-tile .cc-row .thumb { aspect-ratio: 1 / 1; }
.cc-grid.menu-grid--photo-tile .cc-row .kr,
.cc-grid.menu-grid--photo-tile .cc-row .ds,
.cc-grid.menu-grid--photo-tile .cc-row .inc-line { display: none; }
.cc-grid.menu-grid--photo-tile .cc-row .nm { font-size: .98rem; }
.cc-grid.menu-grid--photo-tile .cc-row .sched--inline { margin-top: .45rem; }

/* ── 3. thumb-left: 96px square thumb, title beside it, text full width below ── */
.cc-grid.menu-grid--thumb-left .cc-row .head { display: grid; grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto auto 1fr auto; column-gap: .85rem; row-gap: 0;
  padding: .85rem .9rem .8rem; align-items: start; }
.cc-grid.menu-grid--thumb-left .cc-row .thumb { grid-column: 1; grid-row: 1 / 4; width: 96px; aspect-ratio: 1 / 1; border-radius: 12px; }
.cc-grid.menu-grid--thumb-left .cc-row .info { display: contents; }
.cc-grid.menu-grid--thumb-left .cc-row .nm { grid-column: 2; grid-row: 1; margin-top: .1rem; }
.cc-grid.menu-grid--thumb-left .cc-row .kr { grid-column: 2; grid-row: 2; }
.cc-grid.menu-grid--thumb-left .cc-row .ds { grid-column: 1 / -1; grid-row: 4; margin-top: .55rem; }
.cc-grid.menu-grid--thumb-left .cc-row .inc-line { grid-column: 1 / -1; grid-row: 5; }
.cc-grid.menu-grid--thumb-left .cc-row .sched--inline { grid-column: 1 / -1; grid-row: 6; justify-self: start; margin-top: .5rem; }
.cc-grid.menu-grid--thumb-left .cc-row .price { grid-column: 1 / -1; grid-row: 8; align-self: end; margin: 0 96px 0 0; }
@container (max-width: 520px) {
  .cc-grid.menu-grid--thumb-left .cc-row .head { grid-template-columns: 72px minmax(0, 1fr); }
  .cc-grid.menu-grid--thumb-left .cc-row .thumb { width: 72px; }
}

/* ── 4. split: photo fills the left 40%, edge-to-edge, full card height ── */
.cc-grid.menu-grid--split .cc-row .head { flex-direction: row; }
.cc-grid.menu-grid--split .cc-row .thumb { flex: 0 0 40%; width: 40%; height: auto; aspect-ratio: auto; min-height: 215px; }
.cc-grid.menu-grid--split .cc-row .info { padding: .85rem .9rem .8rem; }

/* ── 5. list-row: one item per row, thumb left, price + control right ── */
.cc-grid.menu-grid--list-row { gap: .6rem; }
.cc-grid.menu-grid--list-row .cc-row .head { flex-direction: row; align-items: center; gap: .85rem; padding: .6rem .8rem; }
.cc-grid.menu-grid--list-row .cc-row .thumb { flex: 0 0 72px; width: 72px; aspect-ratio: 1 / 1; border-radius: 10px; }
.cc-grid.menu-grid--list-row .cc-row .info { padding: 0 200px 0 0; }
.cc-grid.menu-grid--list-row .cc-row .ds { -webkit-line-clamp: 1; }
.cc-grid.menu-grid--list-row .cc-row .inc-line,
.cc-grid.menu-grid--list-row .cc-row .sched--inline { display: none; }
.cc-grid.menu-grid--list-row .cc-row .price { position: absolute; top: 50%; right: 122px; transform: translateY(-50%); margin: 0; padding: 0; min-height: 0; }
.cc-grid.menu-grid--list-row .cc-row:has(.cc-foot .add) .price { right: 68px; }
.cc-grid.menu-grid--list-row .cc-row .cc-foot { top: 50%; bottom: auto; transform: translateY(-50%); }
@container (max-width: 600px) {
  .cc-grid.menu-grid--list-row .cc-row .info { padding-right: 96px; }
  .cc-grid.menu-grid--list-row .cc-row .price,
  .cc-grid.menu-grid--list-row .cc-row:has(.cc-foot .add) .price { position: static; transform: none; margin: .25rem 0 0; }
}

/* ── 6. overlay: photo fills the card (3:4), text over a navy bottom scrim ── */
.cc-grid.menu-grid--overlay .cc-row { aspect-ratio: 3 / 4; }
.cc-grid.menu-grid--overlay .cc-row .thumb { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; z-index: 0; }
.cc-grid.menu-grid--overlay .cc-row .info { position: absolute; left: 0; right: 0; bottom: 0; flex: none; z-index: 2;
  padding: 2.6rem .85rem .85rem; background: linear-gradient(180deg, rgba(22,41,74,0), rgba(22,41,74,.6) 45%, rgba(22,41,74,.92)); }
.cc-grid.menu-grid--overlay .cc-row .nm { color: #fff; }
.cc-grid.menu-grid--overlay .cc-row .kr { color: rgba(255,255,255,.85); }
.cc-grid.menu-grid--overlay .cc-row .ds,
.cc-grid.menu-grid--overlay .cc-row .inc-line,
.cc-grid.menu-grid--overlay .cc-row .sched--inline { display: none; }
.cc-grid.menu-grid--overlay .cc-row .price { color: #fff; margin: .2rem 96px 0 0; padding: 0; min-height: 0; }
.cc-grid.menu-grid--overlay .cc-row .cc-foot { bottom: .85rem; }

/* ── responsive column counts (container-query driven; viewport fallback) ── */
@container (min-width: 480px) {
  .cc-grid.menu-grid--photo-tile { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 640px) {
  .cc-grid.menu-grid--photo-top, .cc-grid.menu-grid--overlay { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 860px) {
  .cc-grid.menu-grid--photo-tile { grid-template-columns: repeat(3, 1fr); }
  .cc-grid.menu-grid--thumb-left, .cc-grid.menu-grid--split { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 1200px) {
  .cc-grid.menu-grid--photo-top, .cc-grid.menu-grid--overlay { grid-template-columns: repeat(3, 1fr); }
  .cc-grid.menu-grid--photo-tile { grid-template-columns: repeat(4, 1fr); }
}