:root {
  --gold: #ff4f70;
  --gold-light: #ff8da2;
  --gold-dark: #c82450;
  --black: #fff9ec;
  --black-soft: #fffdf7;
  --black-card: #ffffff;
  --ink: #311827;
  --muted: #705664;
  --cream: #fff9ec;
  --lemon: #ffd633;
  --peach: #ff9c6d;
  --mint: #91dfbd;
  --berry: #c82450;
  --sky: #9ddcec;
  --plum: #6c3153;
  --line: rgba(69, 28, 51, 0.15);
  --shadow: 0 22px 60px rgba(86, 35, 60, 0.13);
}

html { scroll-behavior: smooth; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.brand-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 100svh; min-height: 42rem; overflow: hidden; background: #261913; isolation: isolate; }
.brand-door { position: relative; display: flex; min-width: 0; align-items: flex-end; padding: clamp(2rem, 5vw, 5rem); overflow: hidden; color: #fff9ec; text-decoration: none; background-position: center; background-size: cover; }
.brand-door::before { content: ""; position: absolute; inset: 0; z-index: -2; background: inherit; transition: transform .85s cubic-bezier(.2,.75,.2,1), filter .6s ease; }
.brand-door-shade { position: absolute; inset: 0; z-index: -1; transition: opacity .45s ease; }
.brand-door-catering { justify-content: flex-start; background-image: url("gallery/sauced-lamb-chops.jpg"); }
.brand-door-catering .brand-door-shade { background: linear-gradient(20deg, rgba(37,17,11,.94) 6%, rgba(74,29,18,.46) 62%, rgba(40,16,11,.18)); }
.brand-door-bakery { justify-content: flex-end; text-align: right; background-image: url("cakes/strawberry-parfait.jpeg"); }
.brand-door-bakery .brand-door-shade { background: linear-gradient(340deg, rgba(70,17,39,.92) 5%, rgba(134,38,70,.38) 61%, rgba(72,17,41,.12)); }
.brand-door-content { position: relative; z-index: 2; display: flex; max-width: 33rem; flex-direction: column; align-items: flex-start; transform: translateY(0); transition: transform .5s cubic-bezier(.2,.75,.2,1); }
.brand-door-bakery .brand-door-content { align-items: flex-end; }
.brand-door-kicker { margin-bottom: 1rem; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.brand-door strong { font-family: "Fraunces", serif; font-size: clamp(3.7rem, 6.3vw, 7.6rem); font-weight: 800; line-height: .79; letter-spacing: -.065em; text-wrap: balance; }
.brand-door strong em { color: #ffbf63; font-weight: 700; }
.brand-door-bakery strong em { color: #ffd633; }
.brand-door-description { margin-top: 1.35rem; font-size: clamp(.8rem, 1vw, 1rem); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.brand-door-cta { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.5rem; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(29,12,15,.22); backdrop-filter: blur(10px); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.brand-door-cta i { transition: transform .3s ease; }
.brand-door:hover::before, .brand-door:focus-visible::before { transform: scale(1.045); filter: saturate(1.08); }
.brand-door:hover .brand-door-content, .brand-door:focus-visible .brand-door-content { transform: translateY(-.6rem); }
.brand-door:hover .brand-door-cta i, .brand-door:focus-visible .brand-door-cta i { transform: translateX(.28rem); }
.brand-door-bakery:hover .brand-door-cta i, .brand-door-bakery:focus-visible .brand-door-cta i { transform: translateY(.28rem); }
.brand-door:focus-visible { outline: 4px solid #ffd633; outline-offset: -7px; }
.brand-split::after { content: ""; position: absolute; inset: 0 auto 0 50%; z-index: 4; width: 1px; background: rgba(255,255,255,.58); pointer-events: none; }
.brand-split-seal { position: absolute; top: 50%; left: 50%; z-index: 5; display: grid; width: 10.5rem; height: 10.5rem; place-content: center; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: #3b2028; color: #fff9ec; box-shadow: 0 18px 50px rgba(19,8,10,.36); text-align: center; transform: translate(-50%,-50%) rotate(-5deg); pointer-events: none; }
.brand-split-seal::before { content: ""; position: absolute; inset: .42rem; border: 1px dashed rgba(255,214,51,.72); border-radius: inherit; }
.brand-split-seal span { font-size: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.brand-split-seal strong { margin: .35rem 0; color: #ffd633; font-family: "Fraunces", serif; font-size: 1.15rem; line-height: .95; }
.brand-split-prompt { position: absolute; top: 2rem; left: 50%; z-index: 6; margin: 0; color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; transform: translateX(-50%); text-shadow: 0 2px 12px rgba(0,0,0,.45); pointer-events: none; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
}

body {
  background: var(--cream) !important;
  color: var(--ink) !important;
  font-family: "DM Sans", sans-serif !important;
  overflow-x: hidden;
}

body::before {
  background:
    radial-gradient(circle at 7% 14%, rgba(255, 214, 51, .48), transparent 22rem),
    radial-gradient(circle at 98% 9%, rgba(157, 220, 236, .34), transparent 24rem),
    radial-gradient(circle at 78% 44%, rgba(145, 223, 189, .18), transparent 22rem),
    linear-gradient(180deg, #fffdf6 0%, #fff3df 100%) !important;
}

body::after {
  opacity: .18;
  background-image: url("site/detroit-skyline.svg") !important;
  background-position: bottom center !important;
  background-repeat: no-repeat !important;
  background-size: 120% auto !important;
  filter: sepia(1) saturate(.55) hue-rotate(285deg);
}

h1, h2, h3, h4, .gold-gradient {
  font-family: "Fraunces", serif !important;
}

.gold-gradient {
  background: none !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

.text-white { color: var(--ink) !important; }
.text-gray-300 { color: #654f5c !important; }
.text-gray-400, .text-gray-500 { color: var(--muted) !important; }
.text-\[var\(--gold\)\], .text-\[var\(--gold-light\)\] { color: var(--berry) !important; }
.bg-\[var\(--black\)\], .bg-\[var\(--black-soft\)\], .bg-\[var\(--black-card\)\] { background: #fff !important; }

header {
  background: rgba(255, 253, 247, .9) !important;
  border-color: var(--line) !important;
  box-shadow: 0 8px 30px rgba(75, 31, 52, .06);
}

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

header > div > div { min-height: 5.75rem !important; height: auto !important; }
header h1 { color: var(--ink) !important; -webkit-text-fill-color: currentColor !important; }
#header-logo {
  width: 4.75rem;
  height: 4.75rem;
  flex: 0 0 auto;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(75, 31, 52, .13));
}
#todays-777-badge { background: #fff4b8 !important; border-color: #edbf1d !important; color: #5a3e00 !important; }

.site-main { position: relative; }
.site-main > .flex.gap-2.mb-8 {
  position: sticky;
  top: 6rem;
  z-index: 40;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 2rem;
  padding: .38rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 35px rgba(75, 31, 52, .1);
  backdrop-filter: blur(16px);
}

.tab-btn {
  border-radius: 999px !important;
  color: var(--muted) !important;
  background: transparent !important;
  font-size: .86rem;
}

.tab-btn.tab-active {
  color: #fff !important;
  background: var(--ink) !important;
  box-shadow: 0 5px 14px rgba(47, 26, 39, .18);
}

.bakery-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(22rem, .94fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  min-height: 37rem;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2.5rem);
  position: relative;
  border: 2px solid rgba(117, 60, 83, .1);
  border-radius: 2.5rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,244,197,.82)),
    repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255,79,112,.05) 18px, rgba(255,79,112,.05) 19px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.bakery-hero::after {
  content: "DETROIT MADE";
  position: absolute;
  right: -1.7rem;
  bottom: 1rem;
  color: rgba(49, 24, 39, .06);
  font-family: "Fraunces", serif;
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -.06em;
  pointer-events: none;
}

.eyebrow {
  margin-bottom: 1rem;
  color: var(--berry) !important;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-copy h2 {
  max-width: 12ch;
  font-size: clamp(3.5rem, 7vw, 6.8rem);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.055em;
}

.hero-copy h2 em {
  position: relative;
  color: var(--berry);
  font-style: italic;
  white-space: nowrap;
}

.hero-copy h2 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.08em;
  height: .12em;
  border-radius: 50%;
  background: var(--lemon);
  transform: rotate(-2deg);
  z-index: -1;
}

.hero-lede { max-width: 40rem; margin: 1.75rem 0; color: var(--muted) !important; font-size: 1.08rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-primary, .hero-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: 0 1.25rem; border-radius: 999px !important; font-weight: 800; }
.hero-primary { color: #fff !important; }
.hero-secondary { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.hero-secondary:hover { transform: translateY(-2px); border-color: var(--gold); }
.hero-notes { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2rem; color: var(--muted); font-size: .82rem; font-weight: 700; }
.hero-notes i { margin-right: .35rem; color: var(--berry); }

.daily-order-board {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: 1.5rem;
  margin: -1.2rem clamp(.8rem, 3vw, 2.8rem) 1.25rem;
  padding: 1.1rem 1.3rem;
  position: relative;
  z-index: 3;
  border: 2px solid var(--ink);
  border-radius: 1.2rem;
  background: var(--lemon);
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(-.35deg);
}
.order-board-status { display: flex; align-items: center; gap: .85rem; }
.order-board-status p { margin: 0; color: #4f3b18; font-size: .79rem; }
.order-board-status .order-board-label { color: var(--ink); font-size: .96rem; font-weight: 900; }
.status-pulse { width: .75rem; height: .75rem; flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 50%; background: #39b86f; box-shadow: 0 0 0 5px rgba(57,184,111,.2); }
.order-board-steps { display: flex; justify-content: flex-end; gap: .7rem; }
.order-board-steps span { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.order-board-steps b { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .62rem; }

.collection-shortcuts {
  display: grid;
  grid-template-columns: 1.1fr 1fr .9fr;
  gap: .85rem;
  margin: 2.6rem 0 1rem;
}
.collection-shortcut {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 1.15rem;
  border: 2px solid var(--ink);
  border-radius: 1.2rem;
  color: var(--ink);
  text-align: left;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.collection-shortcut:hover, .collection-shortcut:focus-visible { transform: translate(-2px, -2px) rotate(-.5deg); box-shadow: 8px 8px 0 var(--ink); }
.collection-shortcut.classic { background: var(--mint); }
.collection-shortcut.infused { background: var(--peach); }
.collection-shortcut.parfait { background: var(--sky); }
.collection-shortcut b, .collection-shortcut small { display: block; }
.collection-shortcut b { font-family: "Fraunces", serif; font-size: 1.18rem; line-height: 1; }
.collection-shortcut small { margin-top: .3rem; color: rgba(49,24,39,.72); font-size: .7rem; }
.shortcut-number { font-size: .68rem; font-weight: 900; }
.collection-shortcut i { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.65); }

.hero-collage { position: relative; min-height: 31rem; }
.hero-collage::before { content: ""; position: absolute; inset: 4% 2% 6% 11%; border-radius: 48% 52% 40% 60%; background: var(--lemon); transform: rotate(5deg); }
.hero-photo { position: absolute; overflow: hidden; border: .55rem solid #fff; box-shadow: 0 25px 60px rgba(75, 31, 52, .22); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo-main { inset: 0 8% 7% 3%; border-radius: 48% 48% 38% 42%; transform: rotate(2.5deg); }
.hero-photo-small { width: 42%; height: 42%; right: -2%; bottom: -1%; border-radius: 50%; transform: rotate(-7deg); }
.hero-sticker { position: absolute; top: 3%; right: -2%; display: grid; place-items: center; width: 8rem; height: 8rem; padding: 1rem; border: 2px solid var(--ink); border-radius: 50%; background: var(--peach); color: var(--ink); text-align: center; transform: rotate(8deg); }
.hero-sticker::before { content: "✦"; position: absolute; top: .38rem; font-size: .9rem; }
.hero-sticker strong { font-family: "Fraunces", serif; font-size: 1.05rem; line-height: 1.05; }
.hero-sticker span { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.service-ribbon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.5rem 0 3rem;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.service-ribbon span { padding: 1rem 1.4rem; text-align: center; font-size: .84rem; }
.service-ribbon span + span { border-left: 1px solid rgba(255,255,255,.16); }
.service-ribbon b { color: var(--lemon); }

.shop-notice {
  max-width: none !important;
  border: 0 !important;
  border-radius: 1.4rem !important;
  box-shadow: 0 14px 35px rgba(82, 33, 57, .08);
}
.shop-notice-new { background: linear-gradient(110deg, #fff, #ffedf1) !important; }
.shop-notice-safety { background: linear-gradient(110deg, #fff, #eefaf5) !important; }
.shop-notice > i { display: grid; width: 2.8rem; height: 2.8rem; flex: 0 0 auto; place-items: center; border-radius: .85rem; background: var(--lemon); color: var(--ink) !important; font-size: 1.1rem !important; }

.glass-card, [role="alert"], #shop-tab > .max-w-3xl {
  background: rgba(255, 255, 255, .9) !important;
  border-color: var(--line) !important;
  box-shadow: 0 16px 45px rgba(75, 31, 52, .08);
}
.glass-card:hover { border-color: rgba(255,92,122,.4) !important; box-shadow: 0 22px 55px rgba(75,31,52,.13) !important; }

.catalog-shell { scroll-margin-top: 9rem; padding: 4rem 0 1rem; }
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.catalog-heading h2 { font-size: clamp(3rem, 6vw, 5.8rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; }
.catalog-heading > div > p:last-child { max-width: 36rem; margin-top: .75rem; color: var(--muted); }
.catalog-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; max-width: 33rem; }
.catalog-filter { padding: .72rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: .8rem; font-weight: 800; transition: transform .2s ease, background .2s ease, color .2s ease; }
.catalog-filter:hover { transform: translateY(-2px); border-color: var(--ink); }
.catalog-filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.grandma-note { position: relative; max-width: 56rem; margin: -.25rem 0 1.75rem 2.25rem; padding: 1.15rem 1.5rem 1.2rem 2rem; border: 1px solid rgba(200,36,80,.24); border-radius: .35rem 1.4rem 1.4rem .35rem; background: #fff8e7; box-shadow: 8px 8px 0 rgba(255,156,109,.2); transform: rotate(-.35deg); }
.grandma-note::before { content: ""; position: absolute; top: -.6rem; bottom: -.6rem; left: .7rem; width: 2px; border-radius: 2px; background: var(--berry); }
.grandma-note-kicker { display: block; margin-bottom: .3rem; color: var(--berry); font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.grandma-note p { color: var(--muted); font-size: clamp(.9rem, 1.5vw, 1.02rem); line-height: 1.65; }
.grandma-note strong { color: var(--ink); }
.grandma-note em { color: var(--berry); font-family: "Fraunces", serif; font-size: 1.08em; font-weight: 800; }

.catalog-tools { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 3rem; }
.catalog-search { position: relative; display: flex; align-items: center; flex: 1; min-height: 3.8rem; border: 2px solid var(--ink); border-radius: 1rem; background: #fff; box-shadow: 5px 5px 0 rgba(49,24,39,.13); }
.catalog-search > i { margin-left: 1.1rem; color: var(--berry); }
.catalog-search input { width: 100%; min-width: 0; height: 100%; padding: 1rem; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; font-weight: 700; }
.catalog-search input::placeholder { color: #9a7d8a; font-weight: 500; }
.catalog-search kbd { margin-right: .75rem; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: .45rem; background: #fff8e7; color: var(--muted); font-family: inherit; font-size: .65rem; white-space: nowrap; }
.catalog-result-count { min-width: 7rem; color: var(--muted); font-size: .78rem; font-weight: 800; text-align: right; }

.product-collections { display: grid; gap: 4rem; }
.collection-section { display: grid; gap: 1.3rem; }
.collection-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.collection-header h3 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; line-height: 1; }
.collection-header p { margin-top: .45rem; color: var(--muted); }
.collection-count { flex: 0 0 auto; min-width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--lemon); font-weight: 900; }
.collection-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }

.product-card { grid-column: span 4; min-width: 0; padding: .75rem !important; border: 1px solid rgba(49,24,39,.08) !important; border-radius: 1.5rem !important; background: #fff !important; box-shadow: 0 14px 35px rgba(75,31,52,.09); transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-5px) rotate(-.2deg); box-shadow: 0 22px 45px rgba(75,31,52,.15); }
.product-card:nth-child(5n + 1), .product-card:nth-child(5n + 4) { grid-column: span 5; }
.product-card:nth-child(5n + 2), .product-card:nth-child(5n + 3), .product-card:nth-child(5n + 5) { grid-column: span 7; }
.product-card-media { position: relative; height: 18rem; overflow: hidden; border-radius: 1rem; background: #f4e9dc; }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.product-card:hover .product-card-media img { transform: scale(1.045); }
.product-card-body { display: flex; flex: 1; flex-direction: column; padding: 1rem .45rem .4rem; }
.product-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; color: var(--berry); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.product-card h4 { font-size: clamp(1.55rem, 2.5vw, 2.15rem); font-weight: 800; line-height: 1; }
.product-description { margin: .8rem 0 1.1rem; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.product-actions { display: grid; gap: .55rem; margin-top: auto; }
.product-actions button { min-height: 3rem; border-radius: .8rem !important; }
.product-actions .order-slice-btn { border-color: var(--line) !important; background: #fff8ef !important; color: var(--ink) !important; }
.product-badge { position: absolute; top: .75rem; right: .75rem; padding: .45rem .65rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.product-badge.today { left: .75rem; right: auto; background: var(--lemon); color: var(--ink); }
.product-badge.infusion-option { top: auto; right: auto; bottom: .75rem; left: .75rem; background: var(--mint); color: var(--ink); }
.empty-catalog { padding: 4rem 1rem; border: 2px dashed rgba(182,45,88,.35); border-radius: 1.5rem; background: rgba(255,255,255,.75); text-align: center; color: var(--muted); }
.empty-catalog > i { display: grid; width: 4rem; height: 4rem; margin: 0 auto 1rem; place-items: center; border-radius: 50%; background: var(--lemon); color: var(--ink); font-size: 1.4rem; }

.btn-gold, .gold-bg-gradient, .badge {
  background: var(--berry) !important;
  color: #fff !important;
  box-shadow: none;
}
.btn-gold { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn-gold:hover { background: #9f1e44 !important; box-shadow: 0 10px 24px rgba(182,45,88,.2) !important; transform: translateY(-2px); }
.btn-gold:active { transform: translateY(0) scale(.98); }
.gold-border { border-color: var(--gold) !important; }

input, select, textarea {
  border-color: var(--line) !important;
  background: #fff !important;
  color: var(--ink) !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(255,92,122,.13) !important; }

.modal { background: rgba(47,26,39,.62) !important; }
.modal-content { background: #fffdf9 !important; border-color: var(--gold) !important; color: var(--ink) !important; box-shadow: 0 35px 100px rgba(47,26,39,.35); }

#delivery-area-map { filter: saturate(.75) sepia(.08); }
#newsletter > div { border: 2px solid var(--ink) !important; background: linear-gradient(135deg, #fff, #fff2a6) !important; box-shadow: 8px 8px 0 var(--ink); }
footer { background: var(--ink) !important; border: none !important; color: #fff !important; }
footer .text-gray-300, footer .text-gray-400, footer .text-gray-500 { color: #eadde4 !important; }
footer .text-\[var\(--gold\)\] { color: var(--lemon) !important; }

#chat-fab { background: var(--berry) !important; box-shadow: 0 14px 35px rgba(182,45,88,.3) !important; }
#chat-panel { background: #fffdf9 !important; border-color: var(--line) !important; color: var(--ink) !important; }
#chat-panel .chat-header { background: var(--ink) !important; }

@media (max-width: 900px) {
  .bakery-hero { grid-template-columns: 1fr; }
  .hero-copy h2 { max-width: 10ch; }
  .hero-collage { min-height: 27rem; }
  .daily-order-board { grid-template-columns: 1fr; }
  .order-board-steps { justify-content: flex-start; flex-wrap: wrap; }
  .collection-shortcuts { grid-template-columns: 1fr 1fr; }
  .collection-shortcut.parfait { grid-column: 1 / -1; }
  .catalog-heading { align-items: start; flex-direction: column; }
  .catalog-filters { justify-content: flex-start; max-width: none; }
  .grandma-note { margin-left: .4rem; }
  .product-card, .product-card:nth-child(n) { grid-column: span 6; }
}

@media (max-width: 640px) {
  .brand-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: 100svh; min-height: 44rem; }
  .brand-door { align-items: center; padding: 2.1rem 1.3rem; }
  .brand-door-catering { background-position: center 56%; }
  .brand-door-bakery { background-position: center 48%; text-align: right; }
  .brand-door strong { font-size: clamp(3rem, 14vw, 4.25rem); }
  .brand-door-kicker { margin-bottom: .6rem; }
  .brand-door-description { margin-top: .75rem; }
  .brand-door-cta { margin-top: .8rem; padding: .55rem .75rem; }
  .brand-split::after { inset: 50% 0 auto; width: auto; height: 1px; }
  .brand-split-seal { width: 7.25rem; height: 7.25rem; }
  .brand-split-seal strong { font-size: .82rem; }
  .brand-split-seal span { font-size: .43rem; }
  .brand-split-prompt { top: .8rem; white-space: nowrap; }
  header > div > div { min-height: 4.75rem !important; }
  #header-logo { width: 3.5rem; height: 3.5rem; }
  header h1 { font-size: 1rem !important; }
  .site-main { padding-left: .75rem !important; padding-right: .75rem !important; }
  .site-main > .flex.gap-2.mb-8 { top: 4.8rem; width: 100%; justify-content: start; border-radius: 1rem; }
  .tab-btn { padding: .7rem .85rem !important; }
  .tab-btn i { display: none; }
  .bakery-hero { min-height: auto; padding: 2.25rem 1.1rem 1.25rem; border-radius: 1.5rem; }
  .hero-copy h2 { font-size: clamp(3.35rem, 17vw, 5rem); }
  .hero-actions { display: grid; }
  .hero-notes { gap: .7rem 1rem; }
  .hero-collage { min-height: 21rem; }
  .hero-photo-main { inset: 0 4% 5% 0; }
  .hero-sticker { width: 6.7rem; height: 6.7rem; right: 0; }
  .daily-order-board { margin: -1rem .25rem 1.5rem; padding: 1rem; box-shadow: 5px 5px 0 var(--ink); }
  .order-board-steps { display: grid; grid-template-columns: 1fr; }
  .collection-shortcuts { grid-template-columns: 1fr; margin-top: 2rem; }
  .collection-shortcut.parfait { grid-column: auto; }
  .service-ribbon { grid-template-columns: 1fr; }
  .service-ribbon span + span { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .catalog-shell { padding-top: 2.5rem; }
  .catalog-filters { flex-wrap: nowrap; width: calc(100vw - 1.5rem); overflow-x: auto; padding-bottom: .5rem; }
  .catalog-filter { white-space: nowrap; }
  .catalog-tools { align-items: stretch; flex-direction: column; margin-bottom: 2rem; }
  .catalog-search kbd { display: none; }
  .catalog-result-count { min-width: 0; text-align: left; }
  .collection-header { align-items: start; }
  .collection-grid { display: grid; grid-template-columns: 1fr; }
  .product-card, .product-card:nth-child(n) { grid-column: auto; }
  .product-card-media { height: 17rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}