/* ──────────────────────────────────────────────────────────────────────
   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(180deg, rgba(11,26,43,.58) 0%, rgba(11,26,43,.20) 40%, rgba(11,26,43,.30) 68%, rgba(11,26,43,.66) 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(180deg, rgba(11,26,43,.56) 0%, rgba(11,26,43,.30) 45%, rgba(11,26,43,.66) 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); }

/* ── 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: .5rem 0 0; }
@media (min-width: 720px) { .cc-grid { grid-template-columns: 1fr 1fr; gap: .85rem; } }

.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); }
.cc-row.open { box-shadow: var(--shadow-md); border-color: var(--line-200); }
.cc-row .head { display: flex; gap: .8rem; padding: .7rem; 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 84px; width: 84px; height: 84px; border-radius: 10px; 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); }
.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: .98rem; line-height: 1.15; }
.cc-row .kr { color: var(--gray); font-style: italic; font-size: .76rem; margin-top: .05rem; }
.cc-row .ds { color: var(--gray); font-size: .8rem; line-height: 1.35; margin: .2rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-row .meta { margin-top: auto; display: flex; align-items: center; gap: .5rem; padding-top: .35rem; }
.cc-row .price { font-weight: 800; color: var(--navy-900); font-size: .95rem; }
.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); }

/* 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: .85rem .9rem 1rem; }
.cc-grp { margin-bottom: .85rem; }
.cc-grp h4 { margin: 0 0 .4rem; font-size: .78rem; 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: .55rem; padding: .5rem .55rem; border: 1.5px solid var(--line); border-radius: 10px; margin-bottom: .35rem; cursor: pointer; font-size: .88rem; 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); }
.cc-opt .nm { font-weight: 600; }
.cc-opt .pr { margin-left: auto; font-weight: 700; color: var(--navy-800); font-size: .85rem; }
.cc-opt .inc { font-size: .72rem; color: var(--gray); }
.cc-opts .addrow { display: flex; align-items: center; gap: .75rem; margin-top: .4rem; }
.cc-opts .addbtn { flex: 1; }

/* 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 .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; }

/* 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-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); }
.cc-quick { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cc-quick-btn { display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; padding: .55rem .7rem; border: 1.5px solid var(--line-200); background: #fff; border-radius: 10px; cursor: pointer; text-align: left; }
.cc-quick-btn .ql { font-weight: 800; font-size: .9rem; color: var(--navy-900); }
.cc-quick-btn .qt { font-weight: 500; font-size: .72rem; color: var(--gray); }
.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-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-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); }