/* ============================================================
   Heavenly Dipped Delights by Jenniel
   Look & feel derived from client-approved mockup:
   pink marble + satin bow background, gold accents, script details
   ============================================================ */

:root{
  --pink:        #e88fa2;
  --pink-deep:   #d96b85;
  --pink-soft:   #f7c9d3;
  --blush:       #fdf1f2;
  --cream:       #fffaf5;
  --choc:        #4a2c1a;
  --choc-deep:   #3a2113;
  --gold:        #c9a24b;
  --gold-soft:   #e3cf9a;
  --ink:         #5b4636;

  --script: 'Great Vibes', cursive;
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Montserrat', 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

body{
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--choc);
  background: #fbeee8 url('../assets/bow-bg.jpg') center top / cover no-repeat fixed;
  min-height: 100vh;
}

img{ max-width:100%; display:block; }
a{ color: var(--pink-deep); }

/* ---------- Header / Nav ---------- */
.site-header{
  padding: 1.4rem 4vw 0.6rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
}
.main-nav{ display:flex; flex-wrap:wrap; gap: clamp(.8rem, 2.2vw, 2.2rem); align-items:center; margin-inline:auto; }
.main-nav a{
  font-family: var(--serif);
  font-weight:600;
  letter-spacing:.16em;
  font-size:.95rem;
  text-transform:uppercase;
  color: var(--choc);
  text-decoration:none;
  padding-bottom:.25rem;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.main-nav a:hover{ color: var(--pink-deep); }
.main-nav a[aria-current="page"]{ color:#b0485f; border-color:#b0485f; }
.main-nav a:focus-visible{ outline:2px solid var(--pink-deep); outline-offset:3px; }

.social{ display:flex; gap:.6rem; }
.social a{
  width:34px; height:34px; border-radius:50%;
  background: var(--pink);
  position:relative; overflow:hidden;
  color:#fff; display:grid; place-items:center;
  text-decoration:none; font-family:var(--sans); font-size:.85rem; font-weight:700;
  box-shadow: 0 2px 6px rgba(217,107,133,.4);
}
.social a img{
  position:absolute; top:50%; left:50%;
  max-width:none; height:auto;
  object-fit:contain;
  pointer-events:none;
}
.social a[aria-label="Facebook"] img{
  width:58px;
  transform:translate(-50%,calc(-50% + 2px));
}
.social a[aria-label="Email"] img{
  width:30px;
  transform:translate(calc(-50% - .5px),calc(-50% + .3px));
}
.social a:hover{ background: var(--pink-deep); }

/* ---------- Layout helpers ---------- */
.wrap{ width:min(1180px, 92vw); margin-inline:auto; }

.panel{
  background: rgba(255,250,246,.88);
  border: 1px solid rgba(201,162,75,.35);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(120,70,50,.12);
  padding: clamp(1.6rem, 4vw, 3rem);
  backdrop-filter: blur(2px);
}

.page-body{ padding: 1.5rem 0 4rem; display:grid; gap:2.2rem; }

/* ---------- Type ---------- */
h1,h2,h3{ font-family: var(--serif); font-weight:600; color: var(--choc-deep); }

.eyebrow{
  font-family: var(--sans);
  font-size:.72rem; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase;
  color: var(--gold);
  margin-bottom:.8rem;
}
.headline-pink{
  color:#c2556e;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight:700;
  margin-bottom:1rem;
}
.script-line{
  font-family: var(--script);
  color:#d47990;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 1.2rem 0;
}
p{ line-height:1.65; }
.lede{ font-size:1.15rem; max-width:62ch; }

.gold-divider{
  display:flex; align-items:center; gap:.8rem;
  margin:1.4rem auto; width:min(320px,80%);
  color:var(--gold);
}
.gold-divider::before,.gold-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--serif);
  font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  font-size:.9rem;
  color:#fff; text-decoration:none;
  background: linear-gradient(180deg, var(--pink) 0%, var(--pink-deep) 100%);
  border:1px solid rgba(255,255,255,.65);
  outline:1px solid var(--gold-soft);
  border-radius:8px;
  padding:.9rem 1.8rem;
  box-shadow: 0 6px 16px rgba(217,107,133,.45);
  transition: transform .15s, box-shadow .15s;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(217,107,133,.55); }
#panelGal .btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.btn:focus-visible{ outline:3px solid var(--choc); outline-offset:2px; }
.btn .heart{ font-size:1rem; }
.btn.gold{ background:linear-gradient(180deg,#d9b968,#b98f35); box-shadow:0 6px 16px rgba(185,143,53,.4); }

/* Customer-facing typography refinement — lighter weights for nav, hero
   heading, card headings, and buttons. Scoped to body[class] because every
   customer page carries a page-identifying body class (home-page,
   treats-page, etc.) while admin.html's <body> starts with none — this
   reaches .main-nav a / .headline-pink / .btn on public pages without
   touching the Owner Login screen in admin.html, which reuses the same
   classes. The :not(.admin-dashboard-active) guard additionally excludes
   the logged-in Owner Portal: admin.html's own JS adds that class to
   <body> once the owner signs in, which would otherwise make body[class]
   start matching there too and silently override the Owner Portal's own
   .btn weight (800) with this rule's 600. */
body[class]:not(.admin-dashboard-active) .main-nav a{ font-weight:500; }
body[class]:not(.admin-dashboard-active) .headline-pink{ font-weight:600; }
body[class]:not(.admin-dashboard-active) .btn{ font-weight:600; }
body[class]:not(.admin-dashboard-active) .card h3{ font-weight:500; }
body[class]:not(.admin-dashboard-active) .feature h3{ font-weight:500; }

/* ---------- HERO (Home) ---------- */
.hero{
  display:grid;
  grid-template-columns: minmax(300px, .9fr) minmax(300px, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items:center;
  padding: 0 0 2rem;
  min-height: calc(88vh - 90px); /* hero + nav ≈ one screen, like the mockup */
}
.hero-logo{ text-align:center; }
.hero-logo img{
  margin-inline:auto;
  margin-bottom:.6rem;
  filter: drop-shadow(0 10px 24px rgba(120,70,50,.18));
}
.hero-copy{ text-align:center; margin-top:0; }
.hero-copy p{ max-width:46ch; margin:0 auto .4rem; }
.hero-copy .headline-pink{ font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom:.8rem; }
.hero-copy .script-line{ font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin:.8rem 0; }
.hero-copy .btn{ padding:.75rem 1.5rem; font-size:.82rem; }

/* Borderless treats photo, per client mockup */
.treat-photo{ margin:0; width:100%; }
.treat-photo img{
  width:100%;
  height:auto;                 /* natural 4:3 — full box visible, no cropping */
  max-height: 60vh;
  object-fit: contain;
  border-radius:14px;
  box-shadow: 0 20px 55px rgba(120,70,50,.28);
}

.hero 
/* ---------- Pink feature band ---------- */
.feature-band{
  margin-top:2rem;
  background: linear-gradient(180deg, #f6b9c6 0%, #ef9fb1 100%);
  border-top: 3px solid var(--gold-soft);
  border-radius: 60% 60% 0 0 / 22px 22px 0 0;
  padding: 2.6rem 4vw 2.4rem;
}
.features{
  width:min(1180px,100%); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:2rem;
}
.feature{
  display:grid;
  justify-items:center;
  align-content:start;
  gap:.55rem;
  min-width:0;
  text-align:center;
}
.feature .icon{
  flex:0 0 auto; width:44px; height:44px;
  border:1.5px solid #7c3346; border-radius:10px;
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  color:#7c3346; font-size:1.2rem;
  background:rgba(255,255,255,.35);
}
.feature .icon img{
  position:absolute; top:50%; left:50%;
  width:96px; height:96px;
  max-width:none;
  object-fit:contain;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.feature .icon img[src="assets/feature-star.png"]{
  width:70px; height:70px;
}
.feature h3{
  /* same typographic style as the "Sweet Moments" headline */
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:2.5em;
  font-family:var(--serif);
  font-weight:700;
  font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase;
  color:#7c3346; margin:0;
}
.feature p{max-width:24ch;margin:0 auto;font-family:var(--serif);font-size:1rem;line-height:1.55;color:var(--choc-deep)}

/* ---------- Sections / cards ---------- */
.card-grid{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top:1.5rem;
}

.card{
  background:#fff;
  border:1px solid rgba(201,162,75,.3);
  border-radius:12px;
  padding:1.3rem 1.4rem;
  box-shadow:0 8px 20px rgba(120,70,50,.08);
}
.card img.card-photo{
  width:calc(100% + 2.8rem);
  margin:-1.3rem -1.4rem 1rem;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:12px 12px 0 0;
}


/* Keep product photos centered inside cards in the homepage What We Create section. */
.custom-treat-grid .card img.card-photo{
  object-position:center center;
  display:block;
}

.card h3{ font-size:1.15rem; margin-bottom:.4rem; color:#7a4a2c; }
.card p{ font-size:.98rem; line-height:1.55; }

.steps{ counter-reset: step; display:grid; gap:1rem; margin-top:1.4rem; }
.step{
  display:flex; gap:1rem; align-items:flex-start;
  background:#fff; border-radius:12px; padding:1.1rem 1.3rem;
  border:1px solid rgba(201,162,75,.25);
}
/* height:31px + padding-top:7px (content-box, so the two still sum to
   the original 38px box -- circle size unchanged) instead of a flat
   height:38px: flex+line-height:1 centers the *line box*, but
   Cormorant Garamond's digits sit high within their line box (built-in
   descender space they never use), so mathematically-centered still
   reads visually high. Shifting the centered content area down by
   half the removed top space corrects for that font-metric asymmetry. */
.step::before{
  counter-increment: step; content: counter(step);
  flex:0 0 auto; width:38px; height:31px; border-radius:50%;
  background:var(--pink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-sizing:content-box;
  margin:0; padding:7px 0 0; text-indent:0; text-align:center; transform:none;
  font-family:var(--serif); font-weight:700; font-size:1.1rem; line-height:1;
}

/* ---------- Pricing table ---------- */
.price-table{ width:100%; border-collapse:collapse; margin-top:1.2rem; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(120,70,50,.08); }
.price-table th,.price-table td{ padding:.85rem 1.2rem; text-align:left; }
.price-table thead th{
  background:var(--pink); color:#fff;
  font-family:var(--sans); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
}
.price-table tbody tr:nth-child(even){ background:var(--blush); }
.price-table td:last-child, .price-table th:last-child{ text-align:right; font-weight:700; }

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:1.4rem; }
.gallery-card{ background:#fff; border-radius:12px; overflow:hidden; border:1px solid rgba(201,162,75,.3); box-shadow:0 8px 20px rgba(120,70,50,.08); }
.gallery-card img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.gallery-card .ph{
  aspect-ratio:4/3; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--blush),#fbe3e8);
  color:#c2889a; font-family:var(--script); font-size:1.6rem;
}
.gallery-card figcaption{ padding:.9rem 1.1rem; font-family:var(--sans); font-size:.85rem; color:var(--ink); }
.gallery-card figcaption strong{ display:block; font-family:var(--serif); font-size:1.1rem; color:var(--choc); letter-spacing:.05em; }

/* ---------- Forms ---------- */
form{ display:grid; gap:1.1rem; margin-top:1.4rem; }
.form-row{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
label{ font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8a5a3b; display:block; margin-bottom:.35rem; }
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea{
  width:100%;
  font-family:var(--serif); font-size:1.05rem; color:var(--choc);
  padding:.75rem .9rem;
  border:1px solid var(--gold-soft); border-radius:8px;
  background:#fff;
}
input:focus,select:focus,textarea:focus{ outline:2px solid var(--pink); outline-offset:1px; }
fieldset{ border:1px solid var(--gold-soft); border-radius:10px; padding:1rem 1.2rem; background:rgba(255,255,255,.7); }
legend{ font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8a5a3b; padding:0 .5rem; }
.choice{ display:flex; align-items:flex-start; gap:.55rem; font-family:var(--serif); font-size:1rem; margin:.35rem 0; }
.choice input{ margin-top:.3rem; accent-color:var(--pink-deep); }
.choices-inline{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.ack .choice{ font-size:.98rem; line-height:1.5; }

/* ---------- FAQ ---------- */
details{
  background:#fff; border:1px solid rgba(201,162,75,.3); border-radius:12px;
  padding:1rem 1.3rem; margin-top:.9rem;
}
summary{ font-family:var(--serif); font-weight:700; font-size:1.12rem; color:#7a4a2c; cursor:pointer; }
summary:focus-visible{ outline:2px solid var(--pink-deep); outline-offset:3px; }
details p{ padding-top:.7rem; }

/* ---------- Footer ---------- */
.site-footer{
  background: linear-gradient(180deg, #f6b9c6, #ee97aa);
  border-top:3px solid var(--gold-soft);
  padding:2.6rem 4vw 1.6rem;
  text-align:center;
  color:#5d2f3a;
}
.site-footer .f-name{ font-family:var(--script); font-size:2rem; color:#7c3346; }
.site-footer .f-tag{ font-family:var(--serif); letter-spacing:.12em; text-transform:uppercase; font-size:.85rem; margin:.3rem 0 1rem; }
.site-footer .footer-email-link{color:inherit;text-decoration:none}
.site-footer .footer-email-link:hover{text-decoration:underline}
.site-footer nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.4rem; margin:1rem 0; }
.site-footer nav a{ color:#5d2f3a; font-family:var(--sans); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; }
.site-footer nav a:hover{ text-decoration:underline; }
.site-footer .copy{ font-family:var(--sans); font-size:.72rem; margin-top:1.4rem; opacity:.85; }
.site-footer .footer-credit{ display:block; width:clamp(160px,40vw,240px); height:auto; aspect-ratio:1789/77; object-fit:cover; object-position:51% 50%; margin:.7rem auto 0; opacity:.85; }
.site-footer .btn{ margin-top:.6rem; }

/* ---------- Page banner (interior pages) ---------- */
.page-banner{ text-align:center; padding:1.5rem 0 .5rem; }
img.mini-logo{ width:min(240px,55vw); margin:0 auto .4rem; filter:drop-shadow(0 6px 18px rgba(120,70,50,.15)); }
.page-banner h1{
  font-size:clamp(1.6rem,3.4vw,2.4rem);
  letter-spacing:.14em; text-transform:uppercase; color:#c2556e;
}
.page-banner .script-line{ margin-top:.2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; }
  .site-header{ justify-content:center; }
}

/* ---------- Booking calendar ---------- */
.cal-wrap{ max-width:720px; margin:1.6rem auto 0; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.cal-head h3{ font-size:1.5rem; letter-spacing:.08em; color:#7a4a2c; }
.cal-nav{
  background:var(--pink); color:#fff; border:none; border-radius:50%;
  width:42px; height:42px; font-size:1.2rem; cursor:pointer;
  box-shadow:0 3px 8px rgba(217,107,133,.4);
}
.cal-nav:hover{ background:var(--pink-deep); }
.cal-nav:disabled{ opacity:.35; cursor:default; }
.cal-nav:focus-visible{ outline:3px solid var(--choc); outline-offset:2px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-grid .dow{
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:#8a5a3b;
  text-align:center; padding:.4rem 0;
}
.cal-day{
  aspect-ratio:1; border-radius:10px; border:1px solid var(--gold-soft);
  background:#fff; font-family:var(--serif); font-size:1.05rem; color:var(--choc);
  display:grid; place-items:center; cursor:pointer; position:relative;
  transition: background .15s, transform .1s;
}
.cal-day:hover:not(:disabled){ background:var(--pink-soft); transform:scale(1.05); }
.cal-day:focus-visible{ outline:3px solid var(--pink-deep); outline-offset:1px; }
.cal-day:disabled{ background:var(--blush); color:#cba3ad; border-color:#f0dce1; cursor:not-allowed; }
.cal-day.booked:disabled{ background:#f3d6db; color:#b76c7e; text-decoration:line-through; }
.cal-day.selected{ background:var(--pink-deep); color:#fff; border-color:var(--pink-deep); font-weight:700; }
.cal-day.empty{ visibility:hidden; }
.cal-legend{ display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; margin-top:1.2rem; font-family:var(--sans); font-size:.78rem; color:#6d4a34; }
.cal-legend span{ display:inline-flex; align-items:center; gap:.45rem; }
.cal-legend i{ width:16px; height:16px; border-radius:4px; border:1px solid var(--gold-soft); display:inline-block; }
.cal-legend .l-open i{ background:#fff; }
.cal-legend .l-closed i{ background:var(--blush); border-color:#f0dce1; }
.cal-legend .l-booked i,.cal-day.calendar-booked{ background:#e3f1e6; border-color:#8db69a; color:#356544; }
.cal-legend .l-pending i,.cal-day.calendar-pending{ background:#fff3d9; border-color:#d8b56a; color:#7b5b1d; }
.cal-legend .l-cancelled i,.cal-day.calendar-cancelled{ background:#f1edef; border-color:#c9b9bf; color:#806e75; }
.cal-day.calendar-cancelled{ text-decoration:line-through; }
.cal-day.calendar-selected{ outline:3px solid var(--pink-deep); outline-offset:2px; }
.cal-day > span{ position:absolute; right:4px; top:3px; display:grid; place-items:center; min-width:16px; height:16px; padding:0 3px; border-radius:99px; background:#765c66; color:#fff; font:700 .58rem var(--sans); text-decoration:none; }
.calendar-empty{ margin:1rem 0 0; padding:1rem; border:1px dashed #d9bdc8; border-radius:12px; background:#fff8fb; text-align:center; font:.78rem var(--sans); color:#7d6870; }
.cal-selected-box{
  margin-top:1.6rem; text-align:center;
  background:#fff; border:1px solid var(--gold-soft); border-radius:14px;
  padding:1.5rem; display:none;
}
.cal-selected-box.show{ display:block; }
.cal-selected-box .date-line{ font-family:var(--script); font-size:1.9rem; color:#b0485f; margin-bottom:.6rem; }
.cal-selected-box .btn{ margin:.4rem .5rem 0; }
.calendar-order-card{ position:relative; margin-top:.8rem; padding:1rem; border:1px solid #ead6dd; border-left:5px solid #d8b56a; border-radius:12px; background:#fff; text-align:left; }
.calendar-order-card.booked{ border-left-color:#6f9e7b; }
.calendar-order-card.cancelled{ border-left-color:#aa969e; opacity:.75; }
.calendar-order-card h4{ margin:0; padding-right:6rem; color:#714256; font:700 1.2rem var(--serif); }
.calendar-order-state{ position:absolute; right:1rem; top:1rem; border-radius:99px; padding:.28rem .55rem; background:#fff3d9; color:#7b5b1d; font:700 .64rem var(--sans); text-transform:uppercase; }
.calendar-order-card.booked .calendar-order-state{ background:#e3f1e6; color:#356544; }
.calendar-order-card.cancelled .calendar-order-state{ background:#f1edef; color:#806e75; }
.calendar-order-schedule{ margin:.3rem 0 0; padding-right:6rem; color:#714256; font:700 .8rem var(--sans); overflow-wrap:anywhere; }
.calendar-order-card dl{ display:grid; grid-template-columns:max-content 1fr; gap:.35rem .8rem; margin:.8rem 0 0; font:.74rem var(--sans); }
.calendar-order-card dt{ color:#947986; font-weight:700; }
.calendar-order-card dd{ margin:0; color:#614f56; overflow-wrap:anywhere; }

/* ---------- Owner admin portal ---------- */
.admin-login{ max-width:440px; margin-inline:auto; text-align:center; }
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:3.2rem; }
.pw-toggle{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:1.1rem; color:#8a5a3b;
  width:44px;height:44px;padding:0;display:grid;place-items:center;
}
.pw-toggle:focus-visible{ outline:2px solid var(--pink-deep); border-radius:4px; }
.admin-tabs{ display:flex; gap:.6rem; justify-content:center; margin:1.4rem 0; flex-wrap:wrap; }
.admin-tabs button{
  font-family:var(--serif); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  font-size:.85rem; padding:.7rem 1.4rem; border-radius:8px; cursor:pointer;
  border:1px solid var(--gold-soft); background:#fff; color:var(--choc);
}
.admin-tabs button[aria-selected="true"]{ background:var(--pink); color:#fff; border-color:var(--pink); }
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }
.admin-msg{
  font-family:var(--sans); font-size:.85rem; border-radius:8px; padding:.8rem 1rem; margin-top:1rem;
  display:none;
}
.admin-msg.show{ display:block; }
.admin-msg.ok{ background:#e7f5e9; color:#2e6b3a; border:1px solid #bfe3c6; }
.admin-msg.warn{ background:#fff3e0; color:#b45309; border:1px solid #fde3b0; }
.admin-msg.err{ background:#fdecee; color:#a13a4e; border:1px solid #f3c6cf; }
.order-action-toast{position:fixed;left:50%;bottom:1.5rem;z-index:900;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity 160ms ease,transform 160ms ease;max-width:min(90vw,420px);border-radius:10px;padding:.75rem 1.1rem;font:600 .82rem var(--sans);box-shadow:0 10px 30px rgba(60,20,35,.18)}
.order-action-toast.show{opacity:1;transform:translate(-50%,0)}
.order-action-toast.ok{background:#e7f5e9;color:#2e6b3a;border:1px solid #bfe3c6}
.order-action-toast.err{background:#fdecee;color:#a13a4e;border:1px solid #f3c6cf}
.gal-admin-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }
.gal-admin-item{
  display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:1rem; align-items:center; background:#fff;
  border:1px solid #e6d5dc; border-radius:16px; padding:.9rem 1rem; box-shadow:0 5px 16px rgba(81,49,60,.035);
}
.gal-admin-thumb{ display:grid; place-items:center; width:88px; height:66px; overflow:hidden; border-radius:8px; background:#fae8ef; color:#9a506a; font-size:1.25rem; }
.gal-admin-thumb img{ width:100%; height:100%; object-fit:cover; }
.gal-admin-item .meta{ min-width:0; font-family:var(--sans); font-size:.85rem; }
.gal-admin-item .meta strong,.gal-admin-item .meta span,.gal-admin-item .meta small{ display:block; }
.gal-admin-item .meta strong{ color:#714256; overflow-wrap:anywhere; }
.gal-admin-item .meta span{ color:#7f6972; font-size:.75rem; margin-top:.15rem; }
.gal-admin-item .meta small{ color:#a08a92; font-size:.66rem; margin-top:.3rem; }
.gallery-status{ border-radius:999px; padding:.3rem .55rem; font:700 .64rem var(--sans); white-space:nowrap; }
.gallery-status.is-visible{ background:#e8f4ea; color:#3d7449; }
.gallery-status.is-hidden{ background:#f3e7ec; color:#8c5268; }
.gallery-off{ opacity:.62; }
.admin-msg.gallery-empty{ display:block; text-align:center; background:#fff8fb; color:#7d6870; border:1px solid #efd6df; }
/* ---------- Mobile menu (hamburger) ---------- */
.nav-toggle{
  display:none;
  font-family:var(--serif); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:.9rem; color:var(--choc);
  background:rgba(255,250,246,.9); border:1px solid var(--gold-soft); border-radius:8px;
  padding:.6rem 1.1rem; cursor:pointer;
  box-shadow:0 4px 12px rgba(120,70,50,.12);
}
.nav-toggle:focus-visible{ outline:2px solid var(--pink-deep); outline-offset:2px; }

@media (max-width: 1120px){
  .site-header{ align-items:flex-start; }
  .nav-toggle{ display:inline-block; }
  .main-nav{
    display:none;
    flex-direction:column; align-items:stretch; gap:0;
    width:100%;
    background:rgba(255,250,246,.97);
    border:1px solid var(--gold-soft); border-radius:12px;
    box-shadow:0 14px 34px rgba(120,70,50,.18);
    padding:.4rem 0;
    margin-top:.6rem;
    order:3; /* drop below the toggle + social icons */
  }
  .site-header.nav-open .main-nav{ display:flex; }
  .main-nav a{
    padding:.85rem 1.2rem;
    border-bottom:1px solid rgba(201,162,75,.18);
  }
  .main-nav a:last-child{ border-bottom:none; }
  .main-nav a[aria-current="page"]{ border-bottom:1px solid rgba(201,162,75,.18); background:var(--blush); }
  /* Container grows to 44px (from 34px) for a comfortable mobile touch
     target, but the artwork itself must stay visually identical -- same
     crop/scale as desktop, just larger. Each image width/offset below is
     the exact desktop value multiplied by the container's own scale
     factor (44/34), instead of an independently-chosen mobile number, so
     the apparent crop can never drift between breakpoints. */
  .social a{width:44px;height:44px}
  .social a[aria-label="Facebook"] img{width:calc(58px * 44 / 34);transform:translate(-50%,calc(-50% + 2px * 44 / 34))}
  .social a[aria-label="Email"] img{width:calc(30px * 44 / 34);transform:translate(calc(-50% - .5px * 44 / 34),calc(-50% + .3px * 44 / 34))}
}


/* ---------- Short-Notice Booking Callout ---------- */
.short-notice-callout{
  max-width:760px;
  margin:1.8rem auto .5rem;
  padding:1.35rem 1.5rem;
  background:linear-gradient(135deg, rgba(253,241,242,.96), rgba(247,201,211,.42));
  border:1px solid rgba(217,107,133,.4);
  border-left:5px solid var(--pink-deep);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(120,70,50,.08);
}
.short-notice-callout h3{
  color:#c2556e;
  font-size:clamp(1.25rem,2.4vw,1.55rem);
  margin-bottom:.65rem;
}
.short-notice-callout p{
  font-family:var(--sans);
  font-size:.9rem;
  color:var(--ink);
}
.short-notice-callout p + p{ margin-top:.65rem; }

.scheduling-notice{
  max-width:760px;
  margin:.85rem 0 1rem;
  padding:.8rem 1rem;
  border:1px solid rgba(217,107,133,.38);
  border-left:4px solid var(--pink-deep);
  border-radius:10px;
  background:#fff4f7;
  color:#714256;
  font:700 .86rem/1.45 var(--sans);
}
/* One shared grid + one shared item structure for the whole Add-Ons &
   Packaging section, used identically by order.html and admin.html's
   manual booking form. Fixed 3-column grid matches the Treat Selection
   fieldset directly above it, instead of an auto-fit track count that
   could silently disagree between sections/screen widths.
   .stick-upgrade-rows is display:contents so its stick-upgrade-row
   children become direct items of the .addon-choices grid, sharing
   the exact same column tracks as the plain add-on checkboxes. */
.addon-choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:1.5rem;
  row-gap:.9rem;
  align-items:start;
}
.stick-upgrade-rows{
  display:contents;
}
.addon-choices > .choice,
.addon-choices > .mb-addon-option{
  min-width:0;
  margin:0;
}
/* Every add-on row — plain or upgraded-stick — shares this exact
   structure: checkbox, then a name that can wrap to two lines without
   disturbing anything else, then the price on its own line directly
   under the name. That keeps the price in the same anchored spot
   whether the name is short or wraps, instead of trailing loosely
   after run-on text. */
.addon-choice{
  align-items:flex-start;
  gap:.6rem;
  margin:0;
  min-width:0;
}
.addon-choice input[type="checkbox"]{
  flex-shrink:0;
  margin-top:.25rem;
}
.addon-choice-text{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;
}
.addon-choice-price{
  color:#8a5a3b;
  font:600 .78rem var(--sans);
  letter-spacing:.02em;
}
.stick-upgrade-row{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  width:100%;
  min-width:0;
}
.stick-upgrade-control{
  display:grid;
  gap:.3rem;
  min-width:0;
  max-width:180px;
  margin:0 0 0 1.55rem;
  letter-spacing:.04em;
}
.stick-upgrade-control[hidden]{display:none}
#upgraded-stick-options .stick-upgrade-control{
  gap:.45rem;
  max-width:none;
  margin-top:.15rem;
  letter-spacing:normal;
}
.stick-upgrade-apply-label{
  margin:0;
  color:#714256;
  font:700 .72rem var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.stick-upgrade-assignments{
  display:grid;
  gap:.55rem;
}
.stick-upgrade-assignment{
  display:grid;
  gap:.35rem;
  min-width:0;
  padding:.55rem .6rem;
  border:1px solid rgba(199,169,74,.35);
  border-radius:8px;
  background:rgba(255,255,255,.55);
}
.stick-upgrade-assignment-choice{
  align-items:flex-start;
  gap:.45rem;
  margin:0;
  min-width:0;
  font:500 .82rem/1.35 var(--sans);
  letter-spacing:0;
  text-transform:none;
}
.stick-upgrade-assignment-choice input{flex-shrink:0;margin-top:.1rem}
.stick-upgrade-quantity{
  display:grid;
  gap:.25rem;
  margin:0 0 0 1.35rem;
  color:#714256;
  font:600 .7rem/1.35 var(--sans);
  letter-spacing:.04em;
  text-transform:none;
}
.stick-upgrade-select,
.stick-upgrade-quantity select{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  margin:0;
  padding:.35rem .55rem;
  border-radius:6px;
}
.stick-upgrade-select{font-size:.9rem}
.stick-upgrade-quantity select{font-size:.82rem}
.stick-upgrade-empty{
  margin:0;
  color:#8b6d78;
  font:400 .76rem/1.45 var(--sans);
}
@media(max-width:640px){
  .addon-choices{grid-template-columns:1fr}
  #upgraded-stick-options .stick-upgrade-control{margin-left:1.55rem}
  .stick-upgrade-assignment{padding:.65rem .7rem}
}
/* Add-Ons & Packaging: explicit 3-column grid, scoped to this fieldset only
   (the Upgraded Sticks fieldset reuses the same .addon-choices class as a
   plain flex row and must not become a grid). Row 1: Custom Design / Theme,
   Edible Images, Picture Frames. Row 2: Clear Boxes, Satin Bows,
   Individually Wrapped. Each checkbox's own expanded panel is placed in the
   same grid cell as its checkbox (see .custom-design-row below), so
   expanding one never shifts the others out of position. */
#addon-options .addon-choices{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:1.4rem;
  row-gap:.6rem;
  align-items:start;
}
#addon-options [data-addon-slot="picture-frames"]{grid-column:3;grid-row:1}
#addon-options [data-addon-slot="clear-boxes"]{grid-column:1;grid-row:2}
#addon-options [data-addon-slot="satin-bows"]{grid-column:2;grid-row:2}
#addon-options [data-addon-slot="wrapped"]{grid-column:3;grid-row:2}
@media(max-width:640px){
  #addon-options .addon-choices{grid-template-columns:1fr}
  #addon-options .addon-choices>*{grid-column:1;grid-row:auto}
}
/* Custom Design / Theme lives in column 1, row 1; Edible Images (same
   markup shape, .custom-design-row[data-edible-images-row]) lives in
   column 2, row 1. Each one's expanded panel (.custom-design-control)
   renders directly beneath its own checkbox, inside that same grid cell --
   expanding it only makes that one cell taller, it never spans into or
   displaces the other columns. */
.custom-design-row{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  width:100%;
  min-width:0;
}
.custom-design-row[data-edible-images-row]{grid-column:2}
.addon-allocation-row{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  width:100%;
  min-width:0;
}
.addon-allocation-row [data-addon-allocation-control]{margin-left:1.55rem}
/* Manual booking's Add-Ons & Packaging: same 3-column grid, scoped to this
   fieldset (#mb-addon-options) only. Its Upgraded Sticks rows share this
   same container (unlike the customer form, which keeps them in a separate
   fieldset) -- .stick-upgrade-rows' shared display:contents (below) lets
   the 3 stick rows dissolve into direct grid items here too, auto-placing
   into row 1 as their own 3 columns, then Custom Design / Theme, Edible
   Images, and Picture Frames form row 2, then Clear Boxes, Satin Bows, and
   Individually Wrapped form row 3. */
#mb-addon-options .addon-choices{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:1.4rem;
  row-gap:.6rem;
  align-items:start;
}
#mb-addon-options [data-addon-slot="custom-design"]{grid-column:1;grid-row:2}
#mb-addon-options [data-addon-slot="edible-images"]{grid-column:2;grid-row:2}
#mb-addon-options [data-addon-slot="picture-frames"]{grid-column:3;grid-row:2}
#mb-addon-options [data-addon-slot="clear-boxes"]{grid-column:1;grid-row:3}
#mb-addon-options [data-addon-slot="satin-bows"]{grid-column:2;grid-row:3}
#mb-addon-options [data-addon-slot="wrapped"]{grid-column:3;grid-row:3}
@media(max-width:640px){
  #mb-addon-options .addon-choices{grid-template-columns:1fr}
  #mb-addon-options .addon-choices>*{grid-column:1;grid-row:auto}
}
.custom-design-control{
  display:grid;
  gap:.85rem;
  min-width:0;
  max-width:640px;
  margin:.4rem 0 0 1.55rem;
}
.custom-design-control[hidden]{display:none}
[data-custom-design-row]>.custom-design-control{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem 1rem;
  width:calc(300% + 2.8rem);
  max-width:none;
  margin-left:0;
  margin-top:.25rem;
}
[data-custom-design-row]>.custom-design-control>.custom-design-field:nth-child(1){grid-column:1;grid-row:1}
[data-custom-design-row]>.custom-design-control>.custom-design-field:nth-child(2){grid-column:2;grid-row:1}
[data-custom-design-row]>.custom-design-control>.custom-design-field:nth-child(3){grid-column:1;grid-row:2}
.custom-design-info{
  grid-column:2;
  grid-row:2;
  display:grid;
  align-content:start;
  gap:.65rem;
  min-width:0;
  padding:.75rem .85rem;
  border:1px solid rgba(199,169,74,.35);
  border-radius:10px;
  background:rgba(255,255,255,.55);
}
.custom-design-field label{
  display:block;
  margin:0 0 .25rem;
  color:#714256;
  font:700 .72rem var(--sans);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.custom-design-field input,
.custom-design-field textarea{
  box-sizing:border-box;
  width:100%;
}
.custom-design-hint{
  margin:.3rem 0 0;
  color:#8b6d78;
  font:400 .76rem/1.4 var(--sans);
}
[data-custom-design-row] .custom-design-hint{margin-top:.15rem}
.custom-design-apply-label{
  margin:.2rem 0 0;
  color:#714256;
  font:700 .72rem var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.custom-design-assignments{
  display:grid;
  gap:.55rem;
}
.custom-design-assignment{
  display:grid;
  gap:.3rem;
  min-width:0;
  padding:.55rem .6rem;
  border:1px solid rgba(199,169,74,.35);
  border-radius:8px;
  background:rgba(255,255,255,.55);
}
.custom-design-assignment-name{color:#3f2a34;font:600 .82rem var(--sans)}
.custom-design-assignment-ordered{color:#8b6d78;font:400 .74rem var(--sans)}
.custom-design-assignment label{
  display:block;
  margin:.3rem 0 .2rem;
  color:#714256;
  font:600 .7rem var(--sans);
  letter-spacing:.04em;
}
.custom-design-assignment select{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  margin:0;
  padding:.35rem .55rem;
  border-radius:6px;
  font-size:.82rem;
}
.custom-design-empty{margin:0;color:#8b6d78;font:400 .76rem/1.45 var(--sans)}
.custom-design-inspiration-note{
  margin:.3rem 0 0;
  color:#714256;
  font:600 .74rem/1.4 var(--sans);
}
[data-custom-design-row] .custom-design-inspiration-note{margin-top:.15rem}
.custom-design-inspiration-note a{color:#a14f6c}
@media(max-width:640px){
  .custom-design-control{margin-left:1.55rem;max-width:none}
  [data-custom-design-row]>.custom-design-control{
    grid-template-columns:1fr;
    width:100%;
    margin-left:0;
  }
  [data-custom-design-row]>.custom-design-control>.custom-design-field:nth-child(1),
  [data-custom-design-row]>.custom-design-control>.custom-design-field:nth-child(2),
  [data-custom-design-row]>.custom-design-control>.custom-design-field:nth-child(3),
  .custom-design-info{grid-column:1;grid-row:auto}
}
#inspiration-photos .inspiration-intro{
  font:400 .9rem/1.5 var(--sans);
  color:#6e5b63;
  margin:0 0 .6rem;
}
.inspiration-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.inspiration-hint{
  font:400 .78rem var(--sans);
  color:#8b6d78;
  margin:.5rem 0 0;
}
.inspiration-file-list{
  list-style:none;
  margin:.75rem 0 0;
  padding:0;
  display:grid;
  gap:.5rem;
}
.inspiration-file-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  background:#fff8fb;
  border:1px solid #efd6df;
  border-radius:10px;
  padding:.5rem .75rem;
}
.inspiration-file-name{
  font:400 .85rem var(--sans);
  color:#714256;
  overflow-wrap:anywhere;
}
.inspiration-file-remove{
  flex-shrink:0;
  border:0;
  background:none;
  color:#b00020;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  padding:.2rem .4rem;
}
.inspiration-file-remove:hover{text-decoration:underline}
.inspiration-error{
  color:#b00020;
  font-size:.78rem;
  margin:.5rem 0 0;
  font-family:var(--sans);
}
.inspiration-error[hidden]{display:none}
.payment-fee-disclosure{
  box-sizing:border-box;
  max-width:760px;
  margin:1rem auto;
  padding:.75rem .9rem;
  border:1px solid rgba(201,162,75,.48);
  border-radius:10px;
  background:#fffaf0;
  color:#75552f;
  font:600 .78rem/1.5 var(--sans);
  text-align:left;
}
.payment-fee-disclosure p{
  margin:0;
}
.payment-fee-disclosure p + p{
  margin-top:.75rem;
}
#invoice-payment-form .payment-fee-disclosure{
  margin:.25rem 0;
}
.panel[style*="text-align:center"] .scheduling-notice{
  margin:1rem auto;
  text-align:center;
}

/* ===== OWNER PORTAL 2026 ===== */
.owner-hero{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:linear-gradient(135deg,#fff8fb,#f9e8ee);border:1px solid #efd1dc;border-radius:22px;padding:1.8rem 2rem;margin-bottom:1.4rem;box-shadow:0 14px 35px rgba(118,66,82,.08)}
.owner-kicker{font:700 .72rem/1.3 var(--sans);letter-spacing:.14em;color:#a44f69;margin:0 0 .45rem}
.owner-hero h2{font-family:"Cormorant Garamond",serif;font-size:clamp(2rem,4vw,3rem);line-height:1;margin:0;color:#714256}
.owner-summary{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;font-family:var(--sans);color:#7b5a66;margin:.7rem 0 0}
.owner-signout{border:1px solid #d8a7b8;background:#fff;color:#8f4d64;padding:.7rem 1rem;border-radius:999px;font:700 .78rem var(--sans);cursor:pointer;white-space:nowrap}
.snapshot-section,.week-section,.portal-actions{margin-top:1.6rem}
.section-heading-row{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:.9rem}
.section-heading-row h3,.portal-panel h2{font-family:"Cormorant Garamond",serif;color:#714256;font-size:clamp(1.8rem,3vw,2.5rem);margin:.1rem 0 0}
.snapshot-month{font:600 .78rem var(--sans);color:#8a6874;background:#f7e8ed;padding:.45rem .75rem;border-radius:999px}
.snapshot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.snapshot-card{background:#fff;border:1px solid #ead6dd;border-radius:18px;padding:1.1rem;box-shadow:0 8px 22px rgba(118,66,82,.06);min-height:150px}
.snapshot-card.accent{background:#fff2f6;border-color:#e8bdcb}
.snapshot-icon{font-size:1.35rem}
.snapshot-card p{font:700 .73rem/1.35 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:#8a6874;margin:.6rem 0 .2rem}
.snapshot-card strong{display:block;font:700 2rem/1 "Cormorant Garamond",serif;color:#714256}
.snapshot-card small{display:block;font:.74rem var(--sans);color:#9a7a84;margin-top:.4rem}
.week-list{display:grid;gap:.65rem}
.week-item{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:1rem;background:#fff;border:1px solid #ead6dd;border-radius:16px;padding:.75rem 1rem}
.day-badge{background:#f8e1e8;border-radius:13px;text-align:center;padding:.45rem .3rem;color:#8d4f64}
.day-badge.soft{background:#f4eee9;color:#8a6e5d}
.day-badge strong{display:block;font:700 .65rem var(--sans);letter-spacing:.08em}.day-badge span{display:block;font:700 1.5rem "Cormorant Garamond",serif;line-height:1}
.week-copy h4{font:700 1.12rem "Cormorant Garamond",serif;color:#714256;margin:0}.week-copy p{font:.78rem var(--sans);color:#7d6870;margin:.18rem 0 .4rem}.week-time{font:700 .75rem var(--sans);color:#8d6070;text-align:right}
.status-pill{display:inline-flex;align-items:center;border:1px solid transparent;border-radius:999px;padding:.28rem .55rem;font:700 .64rem var(--sans);white-space:nowrap}.status-pill.paid{background:#dcfce7;color:#166534;border-color:#bbf7d0}.status-pill.balance{background:#ffedd5;color:#c2410c;border-color:#fdba74}.status-pill.deposit{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.status-pill.prep{background:#f3e7ec;color:#8c5268;border-color:#e5ced7}
.portal-status-badge,.payment-type-badge{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;max-width:100%;border:1px solid transparent;border-radius:999px;padding:.32rem .65rem;font:700 .64rem/1.1 var(--sans);white-space:nowrap;word-break:normal;overflow-wrap:normal}.portal-status-badge-neutral{background:#ece8ea;color:#655a5e;border-color:#ddd5d8}.order-status-new{background:#fff1f2;color:#9f1239;border-color:#fecdd3}.order-status-confirmed{background:#ede9fe;color:#6d28d9;border-color:#c4b5fd}.order-status-pending-approval{background:#fef3c7;color:#92400e;border-color:#fcd34d}.order-status-approved{background:#fbe3ec;color:#8c2f56;border-color:#eab8cf}.order-status-in-progress{background:#f5f3ff;color:#5b21b6;border-color:#ddd6fe}.order-status-ready{background:#fce7f3;color:#9d174d;border-color:#f9a8d4}.order-status-picked-up{background:#fae8ff;color:#86198f;border-color:#e879f9}.order-status-cancelled{background:#f3f4f6;color:#4b5563;border-color:#d1d5db}.order-status-needs-review{background:#fefce8;color:#854d0e;border-color:#fde68a}.payment-status-unpaid{background:#fee2e2;color:#b91c1c;border-color:#fecaca}.payment-status-deposit-paid{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.payment-status-paid-in-full{background:#dcfce7;color:#166534;border-color:#bbf7d0}.payment-status-remaining-balance{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}.payment-type-deposit{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.payment-type-balance{background:#fce7f3;color:#9d174d;border-color:#f9a8d4}.payment-type-full-payment{background:#d9c7ef;color:#55336f;border-color:#c5a9e3}.payment-type-refund{background:#fff1f2;color:#be123c;border-color:#fecdd3}
.refund-status-completed{background:#dcfce7;color:#166534;border-color:#bbf7d0}.refund-status-email-warning{background:#ffedd5;color:#c2410c;border-color:#fdba74}.refund-status-status-review{background:#fef3c7;color:#92400e;border-color:#fcd34d}.refund-status-recovery-needed{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
#refundSummaryCards{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){#refundSummaryCards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){#refundSummaryCards{grid-template-columns:1fr}}
.refund-order-results{display:grid;gap:.4rem;margin-top:.5rem}
.refund-order-result{display:block;width:100%;text-align:left;background:#fff8fb;border:1px solid #efd6df;border-radius:10px;padding:.55rem .75rem;font:.76rem var(--sans);color:#664554;cursor:pointer}
.refund-order-result:hover{border-color:#d8a8b8}
.refund-selected-line{background:#fff8fb;border:1px solid #efd6df;border-radius:10px;padding:.6rem .75rem}
.refund-payment-options{display:grid;gap:.5rem;margin-top:.5rem}
.refund-payment-option{display:flex;align-items:flex-start;gap:.6rem;background:#fff8fb;border:1px solid #efd6df;border-radius:11px;padding:.7rem .8rem;font:.74rem/1.5 var(--sans);color:#614f56;cursor:pointer}
.refund-payment-option input{margin-top:.25rem;accent-color:var(--pink-deep)}
.refund-row-new{background:#fdf1f2}

/* ---- New Refund slide-over: visual refinement (scoped, does not touch
   .order-detail-overlay/.order-detail/.order-detail-section/.manual-payment-*,
   all shared with the Order Details drawer and the Record Deposit form) ---- */
#refundOverlay.order-detail-overlay{align-items:center}
#refundOverlay .order-detail.refund-panel{
  width:min(50vw,calc(100vw - 28px));
  max-width:760px;
  height:calc(100vh - 32px);
  margin:20px 28px 20px 0;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(66,37,48,.28);
}
#refundOverlayContent{box-sizing:border-box;padding:1.1rem 1.25rem 1.5rem}
#refundOverlay .order-detail-close{position:absolute;top:1rem;right:1rem;float:none;width:36px;height:36px;font-size:1.35rem}
.refund-panel-header{padding:0 3rem .9rem 0;margin-bottom:1rem;border-bottom:1px solid #f0e1e6}
.refund-panel-header h2{font:700 clamp(1.6rem,4vw,2.1rem)/1.1 "Cormorant Garamond",serif;color:#714256;margin:.1rem 0 .4rem}
.refund-panel-header p{font:.8rem/1.5 var(--sans);color:#7d6870;margin:0}
.refund-step-card{box-shadow:0 2px 10px rgba(113,66,86,.07)}

.refund-search-row{display:flex;gap:.5rem;margin-top:.5rem}
.refund-search-row input{flex:1;margin:0}
.refund-selected-card{margin-top:.75rem}
.refund-selected-hint{margin:.5rem 0 0;color:#846e77;font:.7rem/1.4 var(--sans)}
.refund-order-result small{display:block;color:#9a7f89;font-size:.68rem;margin-top:.15rem;font-weight:400}

.refund-payment-options{display:grid;gap:.6rem;margin-top:.6rem}
.refund-payment-card{display:flex;gap:.65rem;align-items:flex-start;background:#fff;border:1px solid #ead6dd;border-radius:14px;padding:.85rem 1rem;cursor:pointer}
.refund-payment-card:hover{border-color:#d8a8b8}
.refund-payment-card.selected{background:#fdf1f2;border-color:var(--pink-deep);box-shadow:0 0 0 1px var(--pink-deep) inset}
.refund-payment-card input{margin-top:.3rem;accent-color:var(--pink-deep)}
.refund-payment-card-body{flex:1;min-width:0}
.refund-payment-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;font:700 .82rem var(--sans);color:#714256}
.refund-payment-card-date{margin:.2rem 0 0;color:#9a7f89;font:.68rem var(--sans)}
.refund-payment-card-fields{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:.25rem .6rem;margin:.55rem 0 0;font:.7rem/1.4 var(--sans)}
.refund-payment-card-fields dt{font-weight:700;color:#947986}
.refund-payment-card-fields dd{margin:0;color:#614f56}
.refund-payment-card-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}

.refund-details-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:1.1rem;margin-top:.75rem}
.refund-type-column{display:grid;gap:.6rem;align-content:start}
.refund-type-card{display:flex;gap:.55rem;align-items:flex-start;background:#fff8fb;border:1px solid #efd6df;border-radius:12px;padding:.75rem .85rem;cursor:pointer}
.refund-type-card:hover{border-color:#d8a8b8}
.refund-type-card.selected{background:#fdf1f2;border-color:var(--pink-deep);box-shadow:0 0 0 1px var(--pink-deep) inset}
.refund-type-card input{margin-top:.25rem;accent-color:var(--pink-deep)}
.refund-type-card strong{display:block;color:#714256;font:700 .8rem var(--sans)}
.refund-type-card small{display:block;color:#846e77;font:.68rem/1.4 var(--sans);margin-top:.2rem}
.refund-amount-column,.refund-reason-column{display:grid;gap:.7rem;align-content:start}
.refund-max-helper{margin:0;color:#846e77;font:.7rem/1.4 var(--sans)}
.refund-note-help{margin:0;color:#846e77;font:.68rem/1.45 var(--sans)}

.refund-warning-strip{display:flex;align-items:flex-start;gap:.6rem;background:#fdf1f2;border:1px solid #f3c6cf;border-radius:12px;padding:.85rem 1rem;margin-top:1.1rem}
.refund-warning-strip .refund-warning-icon{flex:0 0 auto;width:0;height:0;margin-top:.3rem;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid #a13a4e}
.refund-warning-strip p{margin:0;color:#a13a4e;font:.76rem/1.5 var(--sans)}
.refund-warning-strip .check-line{margin-top:.5rem}

.refund-preview-card{margin-top:1.1rem}
.refund-preview-card[hidden]{display:none!important}
.refund-preview-card h3{font-size:1.05rem}

.refund-review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:.75rem}
.refund-review-grid>.order-detail-card{min-width:0;padding:1.15rem}
.refund-review-list{display:flex;flex-wrap:wrap;gap:.55rem .9rem;margin:0;min-width:0}
.refund-review-list dt{flex:0 1 calc(50% - .45rem);min-width:0;overflow-wrap:break-word}
.refund-review-list dd{flex:0 1 calc(50% - .45rem);min-width:0;margin:0;text-align:right;overflow-wrap:break-word}
.refund-review-list .refund-amount-emphasis{white-space:nowrap}
.refund-amount-emphasis{color:var(--pink-deep)!important;font-weight:700}

#refundOverlay .order-detail.refund-panel:has(.manual-payment-confirmation:not([hidden]) .refund-review-step){
  width:min(94vw,1120px);
  max-width:1120px;
}

@media(max-width:1080px){
  #refundOverlay .order-detail.refund-panel{width:min(62vw,calc(100vw - 28px))}
}
@media(max-width:900px){
  #refundOverlay .order-detail.refund-panel{width:80vw;min-width:0;max-width:none}
  .refund-details-grid{grid-template-columns:1fr 1fr}
  .refund-reason-column{grid-column:1/-1}
  .refund-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  #refundOverlay .order-detail.refund-panel{width:calc(100vw - 24px);height:calc(100vh - 24px);margin:12px}
  #refundOverlayContent{padding:.9rem 1rem 1.25rem}
  #refundOverlay .order-detail-close{top:.8rem;right:.8rem}
  .refund-details-grid{grid-template-columns:1fr}
  .refund-review-grid{grid-template-columns:1fr}
  .refund-search-row{flex-direction:column}
  .refund-search-row button{width:100%}
}
.needs-review-list{display:grid;gap:.85rem;margin-top:.75rem}
.needs-review-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;margin:0 0 .7rem;padding-bottom:.45rem;border-bottom:1px solid #f0e1e6}
.needs-review-row-head h3{margin:0;padding:0;border:0;flex:1;min-width:0}
.text-link{background:none;border:0;color:#9a506a;font:700 .78rem var(--sans);cursor:pointer}
.portal-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.portal-nav button{display:grid;grid-template-columns:50px 1fr auto;align-items:center;text-align:left;gap:.8rem;border:1px solid #ead4dc;background:#fff;border-radius:18px;padding:1rem;cursor:pointer;transition:.2s ease;box-shadow:0 8px 18px rgba(118,66,82,.04)}
.portal-nav button:hover{transform:translateY(-2px);border-color:#d8a8b8;box-shadow:0 12px 24px rgba(118,66,82,.08)}
.tool-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#fae9ef;font-size:1.25rem}
.portal-nav strong{display:block;font:700 .9rem var(--sans);color:#714256}.portal-nav small{display:block;font:.72rem/1.35 var(--sans);color:#947986;margin-top:.2rem}.portal-nav b{font-size:1.5rem;color:#c48aa0}
.portal-panel{margin-top:1.2rem}
.portal-panel.active{display:block}
.portal-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;background:#fff8fb;border:1px solid #efd6df;border-radius:18px;padding:1.2rem 1.35rem;margin-bottom:1rem}
.portal-panel-head p{font-family:var(--sans);font-size:.8rem;color:#7d6870;max-width:62ch;margin:.3rem 0 0}.portal-panel-head h2{margin:0}
.back-dashboard{background:none;border:0;color:#9a506a;font:700 .78rem var(--sans);cursor:pointer;margin-bottom:.7rem;padding:0}
.btn.compact{padding:.65rem 1rem;font-size:.75rem;white-space:nowrap}
.filter-row,.gallery-category-chips{display:flex;gap:.45rem;flex-wrap:wrap;margin:1rem 0}
.filter-chip,.gallery-category-chips button{border:1px solid #dfbdc9;background:#fff;color:#865469;border-radius:999px;padding:.48rem .75rem;font:700 .7rem var(--sans);cursor:pointer}
.filter-chip.active,.gallery-category-chips button.active{background:#9f5570;color:#fff;border-color:#9f5570}
.admin-table-wrap{overflow:auto;border:1px solid #ead6dd;border-radius:16px;background:#fff}
.owner-table{width:100%;border-collapse:collapse;min-width:760px}.owner-table th{background:#f9edf1;color:#795566;text-align:left;padding:.75rem;font:700 .68rem var(--sans);text-transform:uppercase;letter-spacing:.05em}.owner-table td{padding:.8rem;border-top:1px solid #f0e4e8;font:.76rem var(--sans);color:#6e5b63;vertical-align:middle}.owner-table td strong{display:block;color:#664554}.owner-table td small{display:block;color:#9d8991;margin-top:.15rem}
.order-table-hint{font:600 .72rem var(--sans);color:#8b6d78;margin:.2rem 0 .6rem}.order-status-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}.order-row{cursor:pointer}.order-row:hover{background:#fff8fb}.order-event-date{display:block;white-space:nowrap;color:#4d3941}.order-date-label{display:block;margin-top:.15rem;color:#9a838c;font:600 .7rem/1.3 var(--sans);white-space:nowrap}.fulfillment-review{display:block;width:max-content;max-width:100%;margin-top:.35rem;padding:.22rem .42rem;border-radius:999px;background:#f3e7ec;color:#8c5268;font:700 .58rem/1.2 var(--sans);white-space:normal}.order-number-cell{white-space:nowrap;font-weight:700;color:#664554}.order-table th:last-child,.order-actions-cell,.payment-order-table th:last-child,.payment-actions-cell{text-align:center}.order-actions-cell,.payment-actions-cell{white-space:nowrap}.order-view-button{display:inline-flex;align-items:center;justify-content:center;margin:0;border:1px solid #dab6c3;background:#fff8fb;color:#8c5368;border-radius:8px;padding:.35rem .55rem;font:700 .64rem var(--sans);white-space:nowrap;cursor:pointer}.order-view-button:focus-visible{outline:3px solid #b9738d;outline-offset:2px}

/* Active Orders table: explicit CSS grid so header and body rows always
   share the exact same column template (a plain <table> auto-layout was
   letting Theme/Order collapse to one word per line while Payment
   Status/Order Status pills and the Actions button refused to shrink,
   since browser table auto-layout only compresses text columns). Scoped
   to .order-grid-table (added only to the active Orders <table>) so the
   unrelated Archived Records table -- same base .owner-table/.order-table
   classes, a different 10-column layout -- is completely unaffected. */
/* Container-based (not viewport-based) responsiveness -- this admin shell
   has a persistent 220-260px sidebar, so a viewport media query previously
   dropped to cards well before the actual available content width ran out.
   .order-table-wrap:has(.order-grid-table) is the same precise selector
   already used below to scope wrapper-only overrides to just this table. */
.order-table-wrap:has(.order-grid-table){container-type:inline-size;container-name:orders-list}
/* CSS Grid rows (.order-row) don't respect their block-level ancestor's
   width:100% cap when their own column minimums need more room -- they
   simply overflow it. That left the table's own box (and every plain
   display:block row that computes width:100% of it, i.e. the month
   heading and empty-state rows) narrower than the data rows beneath them,
   so the month bar visually stopped short of the actual table width. This
   min-width is the exact sum of the 7 approved column minimums (260 + 390
   + 120 + 150 + 150 + 145 + 56) plus the 6 column-gaps (.5rem each) -- not
   a new number, just making the table's own box match what its rows
   already require. */
.order-grid-table{display:block;width:100%;min-width:calc(260px + 390px + 120px + 150px + 150px + 145px + 56px + 6*0.5rem)}
.order-grid-table thead,.order-grid-table tbody{display:block;width:100%}
/* Theme/Order's minimum is 390px, not the requested 420px -- the row's
   7 minimums plus 6 column-gaps need 1349px, but this panel's own
   pre-existing width cap (body.admin-dashboard-active .page-body{width:
   min(1680px,100%)}) limits the table wrapper to 1336px at every browser
   width, even the widest possible (confirmed live up to 2200px viewport).
   Trimming 30px off the one column that still dominates by a wide margin
   removes the resulting persistent horizontal scrollbar entirely. */
.order-grid-table thead tr,.order-grid-table tbody tr.order-row{
  display:grid;
  grid-template-columns:
    minmax(260px,1.45fr)
    minmax(390px,2.9fr)
    minmax(120px,0.8fr)
    minmax(150px,1fr)
    minmax(150px,1fr)
    minmax(145px,0.9fr)
    56px;
  column-gap:.5rem;
  align-items:center;
}
/* An unconditional display:grid on tr.order-row beats the browser's native
   [hidden]{display:none} UA rule on specificity alone -- collapsing a
   month toggle correctly set the hidden attribute and correctly flipped
   aria-expanded, but every "hidden" row kept rendering at display:grid
   anyway (confirmed via getComputedStyle: hasAttribute("hidden")=true yet
   computedDisplay="grid"). This is the same [hidden]-vs-specificity bug
   pattern already fixed elsewhere on the Order Review page -- an explicit
   [hidden] override, at the same elevated specificity, is required. */
.order-grid-table tbody tr.order-row[hidden]{display:none}
.order-grid-table thead th,.order-grid-table tbody tr.order-row>td{
  display:block;
  width:auto;
  min-width:0;
  max-width:none;
  padding:24px 20px;
  white-space:normal;
  vertical-align:top;
  border-top:0;
}
/* Stronger blush header band than the shared .owner-table th default --
   scoped to this table only so Archived Records/New Requests/Payments
   tables (which also use .owner-table th) are unaffected. */
.order-grid-table thead th{background:#fbe4ec;color:#6f3f52}
/* Actions is a fixed 56px icon-only column -- the header's own "Actions"
   text plus the general 20px each-side padding needs more room than that
   (measured: 72px scrollWidth in a 56px column, a real -- if easy to miss
   -- 16px table-level overflow), so this one column keeps a tighter,
   text-appropriate horizontal padding instead of the generic 20px. */
.order-grid-table thead th:last-child,.order-grid-table tbody tr.order-row>td:last-child{padding-left:4px;padding-right:4px}
/* A per-cell border-top would draw a broken/segmented line (visible gaps
   at each column-gap) -- the divider between rows lives on the <tr> itself
   instead, so it's one continuous line, and only between two consecutive
   order rows (never doubling up against a month-heading row's own
   bottom border, since headings aren't .order-row so this adjacent-sibling
   selector never matches a heading-to-first-row transition). */
.order-grid-table tbody tr.order-row + tr.order-row{border-top:1px solid #f0e4e8}
/* Rows that aren't a 7-column order row (month heading, empty state) opt
   back out of the grid template entirely -- their one <td> just spans
   the row as a normal block, same as the old colspan intent. */
.order-grid-table tbody tr:not(.order-row){display:block}
.order-grid-table tbody tr:not(.order-row)>td{display:block;width:100%;padding:0}
.order-grid-table .order-actions-cell{display:flex;justify-content:center;align-items:center}
.order-details-cell{min-width:0}
.order-details-field{margin-top:.6rem}
.order-details-field-label{display:block;font:700 .62rem var(--sans);color:#947986;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.1rem}
.order-details-field-value{display:block}
/* Scoped override, not a change to the shared .order-summary__treats class
   (also used by the Order Details drawer) -- extra breathing room between
   the theme title and its treat list only in this table's compact row. */
.order-grid-table .order-summary__treats{margin-top:.65rem}
.order-requested-cell strong{display:block;color:#664554;font-weight:700}
.order-requested-cell small{display:block;color:#9d8991;margin-top:.1rem}
/* Every direct grid child stays free to shrink below its content's natural
   width (long customer names, treat lists) rather than overflowing the row. */
.order-grid-table thead th,.order-grid-table tbody tr.order-row>td{min-width:0}
/* TABLET: container (visible/border-box) width 700-999px -- compact
   3-column card (details | theme | balance/payment/order status/requested
   stacked, actions top-right of that same right-hand column) instead of
   stacking every field. Size container queries are evaluated against the
   container's CONTENT box, but .order-table-wrap (the query container) has
   a 1px border on each side in desktop mode -- confirmed live via
   getBoundingClientRect() (border box) vs the container query actually
   matching, so these thresholds are shifted in by that fixed, stable 2px
   (997/698 instead of 999/700) to make the boundary land on the visible
   border-box width the spec actually means, not 2px early. */
@container orders-list (max-width:997px) and (min-width:698px){
  .order-table-wrap:has(.order-grid-table){overflow:visible;border:0;background:transparent}
  .order-grid-table{display:block;min-width:0}
  .order-grid-table thead{display:none}
  .order-grid-table tbody{display:grid;gap:.75rem}
  .order-grid-table tbody tr.order-row{
    display:grid;
    grid-template-columns:
      minmax(170px,0.9fr)
      minmax(260px,1.6fr)
      minmax(170px,0.9fr);
    grid-template-areas:
      "details theme actions"
      "details theme balance"
      "details theme paymentstatus"
      "details theme orderstatus"
      "details theme requested";
    column-gap:.75rem;
    row-gap:.55rem;
    background:#fff;
    border:1px solid #ead6dd;
    border-radius:14px;
    padding:.9rem 1rem;
  }
  .order-grid-table tbody tr.order-row + tr.order-row{border-top:1px solid #ead6dd}
  .order-grid-table tbody tr.order-row>td,
  .order-grid-table tbody tr.order-row>td:first-child,
  .order-grid-table tbody tr.order-row>td:last-child{padding:0;width:auto;min-width:0}
  .order-grid-table tbody tr.order-row>td:nth-child(1){grid-area:details}
  .order-grid-table tbody tr.order-row>td:nth-child(2){grid-area:theme}
  .order-grid-table tbody tr.order-row>td:nth-child(3){grid-area:balance}
  .order-grid-table tbody tr.order-row>td:nth-child(4){grid-area:paymentstatus}
  .order-grid-table tbody tr.order-row>td:nth-child(5){grid-area:orderstatus}
  .order-grid-table tbody tr.order-row>td:nth-child(6){grid-area:requested}
  .order-grid-table tbody tr.order-row>td:nth-child(7){grid-area:actions;align-self:start;justify-self:end}
  /* Order Details (own internal Order#/Customer labels already) and
     Actions (icon-only) opt out of the generic label -- but the older,
     unrelated .order-table td::before{content:attr(data-label)} rule (still
     used by the Archived Records / other tables' own <=620px card mode) also
     matches these cells since they share the .order-table class, so it
     must be explicitly cancelled here or labels double up. */
  .order-grid-table tbody tr.order-row>td:first-child::before,
  .order-grid-table tbody tr.order-row>td:nth-child(7)::before{content:none}
  .order-grid-table tbody tr.order-row>td:nth-child(2)::before,
  .order-grid-table tbody tr.order-row>td:nth-child(3)::before,
  .order-grid-table tbody tr.order-row>td:nth-child(4)::before,
  .order-grid-table tbody tr.order-row>td:nth-child(5)::before,
  .order-grid-table tbody tr.order-row>td:nth-child(6)::before{
    content:attr(data-label);
    display:block;
    font:700 .62rem var(--sans);
    color:#947986;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:.15rem;
  }
  .order-grid-table tbody tr:not(.order-row){display:block}
  .order-grid-table tbody tr:not(.order-row)>td{display:block;width:100%}
  .order-grid-table .order-empty-cell{display:block;padding:1rem;text-align:center}
  .order-grid-table .order-empty-cell::before{content:none}
}
/* MOBILE: container (visible/border-box) width 699px or narrower --
   single-column card, Order Details + Actions share the top row (Actions
   top-right), everything else full width below, same shape as the
   previous card layout. Same 2px border-box-vs-content-box compensation
   as the tablet rule above (697 instead of 699). */
@container orders-list (max-width:697px){
  .order-table-wrap:has(.order-grid-table){overflow:visible;border:0;background:transparent}
  .order-grid-table{display:block;min-width:0}
  .order-grid-table thead{display:none}
  .order-grid-table tbody{display:grid;gap:.75rem}
  .order-grid-table tbody tr.order-row{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "details actions"
      "theme theme"
      "balance balance"
      "paymentstatus paymentstatus"
      "orderstatus orderstatus"
      "requested requested";
    column-gap:.75rem;
    row-gap:.55rem;
    background:#fff;
    border:1px solid #ead6dd;
    border-radius:14px;
    padding:.9rem 1rem;
  }
  .order-grid-table tbody tr.order-row + tr.order-row{border-top:1px solid #ead6dd}
  .order-grid-table tbody tr.order-row>td,
  .order-grid-table tbody tr.order-row>td:first-child,
  .order-grid-table tbody tr.order-row>td:last-child{padding:0;width:auto;min-width:0}
  .order-grid-table tbody tr.order-row>td:nth-child(1){grid-area:details}
  .order-grid-table tbody tr.order-row>td:nth-child(2){grid-area:theme}
  .order-grid-table tbody tr.order-row>td:nth-child(3){grid-area:balance}
  .order-grid-table tbody tr.order-row>td:nth-child(4){grid-area:paymentstatus}
  .order-grid-table tbody tr.order-row>td:nth-child(5){grid-area:orderstatus}
  .order-grid-table tbody tr.order-row>td:nth-child(6){grid-area:requested}
  .order-grid-table tbody tr.order-row>td:nth-child(7){grid-area:actions;align-self:start;justify-self:end}
  .order-grid-table tbody tr.order-row>td:first-child::before,
  .order-grid-table tbody tr.order-row>td:nth-child(7)::before{content:none}
  .order-grid-table tbody tr.order-row>td:nth-child(2)::before,
  .order-grid-table tbody tr.order-row>td:nth-child(3)::before,
  .order-grid-table tbody tr.order-row>td:nth-child(4)::before,
  .order-grid-table tbody tr.order-row>td:nth-child(5)::before,
  .order-grid-table tbody tr.order-row>td:nth-child(6)::before{
    content:attr(data-label);
    display:block;
    font:700 .62rem var(--sans);
    color:#947986;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:.15rem;
  }
  .order-grid-table tbody tr:not(.order-row){display:block}
  .order-grid-table tbody tr:not(.order-row)>td{display:block;width:100%}
  .order-grid-table .order-empty-cell{display:block;padding:1rem;text-align:center}
  .order-grid-table .order-empty-cell::before{content:none}
}
.order-detail-open{overflow:hidden}.order-detail-overlay{position:fixed;inset:0;z-index:12000;background:rgba(63,43,50,.58);display:flex;justify-content:flex-end}.order-detail-overlay[hidden]{display:none}.order-detail{box-sizing:border-box;position:relative;width:min(680px,100%);height:100%;overflow:auto;background:#fffafc;padding:2rem;box-shadow:-16px 0 45px rgba(66,37,48,.2)}.order-detail-close{position:sticky;top:0;z-index:1;float:right;width:42px;height:42px;border:1px solid #ddb9c6;border-radius:50%;background:#fff;color:#8d5368;font:400 1.7rem/1 var(--sans);cursor:pointer}.order-detail-header{padding-right:3.5rem}.order-detail-header h2{font:700 clamp(1.9rem,5vw,2.625rem)/1.05 "Cormorant Garamond",serif;color:#714256;margin:.2rem 0;overflow-wrap:anywhere}.order-detail-header>p:last-child{font:.8rem var(--sans);color:#7d6870}.order-detail-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.2rem 0}.order-detail-card{background:#fff;border:1px solid #ead6dd;border-radius:14px;padding:1rem}.order-detail-card h3{font:700 1.25rem "Cormorant Garamond",serif;color:#714256;margin:0 0 .7rem;padding-bottom:.45rem;border-bottom:1px solid #f0e1e6}.order-detail-card dl,.order-request-list{display:grid;grid-template-columns:minmax(88px,max-content) minmax(0,1fr);gap:.55rem .8rem;margin:0;font:.74rem/1.45 var(--sans)}.order-detail-card dt,.order-request-list dt{font-weight:700;color:#947986}.order-detail-card dd,.order-request-list dd{margin:0;color:#614f56;overflow-wrap:anywhere;white-space:pre-wrap}.order-detail-section{background:#fff;border:1px solid #ead6dd;border-radius:16px;padding:1rem;margin-top:.85rem}.order-detail-section h3{font:700 1.35rem "Cormorant Garamond",serif;color:#714256;margin:0}.order-detail-section>p{font:.72rem/1.45 var(--sans);color:#846e77;margin:.2rem 0 .75rem}.order-treat-list{margin-top:.8rem;color:#614f56;font:.78rem/1.75 var(--sans);overflow-wrap:anywhere;white-space:pre-wrap}.order-request-list{margin-top:.9rem;gap:.7rem 1rem}.order-request-list dt{color:#714256}.order-detail-section textarea{width:100%;box-sizing:border-box;margin-bottom:.7rem}.order-detail-status-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.order-detail-controls{display:flex;align-items:center;gap:.7rem}.order-detail-controls select{margin:0;flex:1}.linked-payment-list{display:grid;gap:.55rem;margin-top:.8rem}.linked-payment-list article{background:#fff8fb;border:1px solid #efd6df;border-radius:11px;padding:.8rem}.linked-payment-summary{display:flex;align-items:center;justify-content:space-between;gap:.65rem}.linked-payment-summary strong{font:700 1rem var(--sans);color:#714256;white-space:nowrap}.linked-payment-details{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.28rem .65rem;margin:.7rem 0 0;font:.68rem/1.4 var(--sans)}.linked-payment-details dt{font-weight:700;color:#947986}.linked-payment-details dd{min-width:0;margin:0;color:#614f56;overflow-wrap:anywhere}.linked-payment-list .btn{margin-top:.6rem}
.order-detail-summary>.order-detail-card:first-child dl{grid-template-columns:70px minmax(0,1fr)}
.order-detail-summary>.order-detail-card:first-child dd:nth-of-type(2){font-size:.7rem;white-space:nowrap;word-break:normal;overflow-wrap:normal}
.linked-payment-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.manual-payment-form{box-sizing:border-box;margin-top:.9rem;padding:1rem;border:1px solid #ead6dd;border-radius:12px;background:#fff8fb}
.manual-payment-form[hidden],.manual-payment-confirmation[hidden],.linked-payment-heading .btn[hidden],.manual-payment-actions[hidden],.manual-payment-actions .btn[hidden]{display:none}
.manual-payment-form>p:first-child{margin:0 0 .8rem;color:#765f68;font:.72rem/1.45 var(--sans)}
.manual-payment-order-summary{display:grid;grid-template-columns:minmax(105px,max-content) minmax(0,1fr);gap:.4rem .7rem;margin:0 0 .9rem;padding:.75rem;border:1px solid #ead6dd;border-radius:10px;background:#fff;font:.7rem/1.4 var(--sans)}
.manual-payment-order-summary dt{font-weight:700;color:#947986}.manual-payment-order-summary dd{min-width:0;margin:0;color:#614f56;overflow-wrap:anywhere}
.manual-payment-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.manual-payment-fields label{display:grid;gap:.3rem;color:#714256;font:700 .68rem var(--sans);text-transform:uppercase;letter-spacing:.04em}
.manual-payment-fields input,.manual-payment-fields select{box-sizing:border-box;width:100%;min-width:0;margin:0;padding:.65rem;border:1px solid #dfbdc9;border-radius:8px;background:#fff;color:#614f56;font:.75rem var(--sans)}
.manual-payment-fields input[readonly]{background:#f3e9ed;color:#714256}
.manual-payment-help{margin:.65rem 0 0;color:#846e77;font:.68rem/1.45 var(--sans)}
.manual-payment-actions{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;margin-top:.8rem}
.manual-payment-actions .btn.ghost{background:#fff;color:#8c5368;border:1px solid #dab6c3;box-shadow:none}
.manual-payment-confirmation{margin-top:.8rem;padding:.8rem;border:1px solid #d8b3c0;border-radius:10px;background:#fff}
.manual-payment-confirmation>p{margin:0;color:#614f56;font:700 .74rem/1.5 var(--sans)}
.manual-payment-success{white-space:pre-line}
.manual-payment-form[aria-busy="true"]{opacity:.72}
#customerDetailOverlay .order-detail{width:min(720px,calc(100vw - 32px));height:calc(100vh - 32px);margin:16px 20px 16px 0;border-radius:18px}
#customerDetailContent{box-sizing:border-box;padding:1.1rem 1.25rem 1.5rem}
#customerDetailOverlay .order-detail-header{padding:0 3rem .9rem 0;margin-bottom:1rem;border-bottom:1px solid #f0e1e6}
#customerDetailOverlay .order-detail-close{position:absolute;top:1rem;right:1rem;float:none;width:36px;height:36px;font-size:1.35rem}
.manual-order-card{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:#f9eef2;border:1px dashed #d9adbd;border-radius:16px;padding:1rem 1.2rem;margin-top:1rem}.manual-order-card h3{font-family:"Cormorant Garamond",serif;color:#714256;font-size:1.6rem;margin:.1rem 0}.manual-order-card p{font:.78rem var(--sans);color:#7d6870;margin:.15rem 0}
.owner-form{background:#fff;border:1px solid #ead6dd;border-radius:16px;padding:1.1rem;margin-top:1rem}.owner-form label,.settings-card label{font:700 .72rem var(--sans);color:#704d5b}.owner-form textarea,.settings-card textarea{width:100%;box-sizing:border-box}
.calendar-note{text-align:center;max-width:64ch;margin:0 auto 1rem;font-family:var(--sans);font-size:.8rem;color:#765c66}
.inventory-summary,.money-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:1rem 0}.inventory-summary>div,.money-cards article{background:#fff;border:1px solid #ead6dd;border-radius:15px;padding:.9rem}.inventory-summary span,.money-cards span{display:block;font:700 .68rem var(--sans);text-transform:uppercase;color:#947986}.inventory-summary strong,.money-cards strong{display:block;font:700 1.7rem "Cormorant Garamond",serif;color:#714256;margin-top:.2rem}.money-cards small{font:.7rem var(--sans);color:#9a7f89}.money-cards .attention{background:#fff3e6;border-color:#edd2b1}
.inventory-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.inventory-card{background:#fff;border:1px solid #ead6dd;border-radius:17px;padding:1rem}.inventory-top{display:flex;gap:.7rem;align-items:center}.inventory-top>span{font-size:1.5rem}.inventory-top h3{font:700 1.1rem "Cormorant Garamond",serif;color:#714256;margin:0}.inventory-top p{font:.72rem var(--sans);color:#8d7480;margin:.1rem 0}.stock-meter{height:8px;background:#f1e3e8;border-radius:99px;margin:.9rem 0;overflow:hidden}.stock-meter div{height:100%;background:#b9738d;border-radius:99px}.stock-numbers{display:flex;justify-content:space-between;gap:.5rem;font:.67rem var(--sans);color:#8f7881}.stock-numbers strong{color:#674856}.stock-actions{display:flex;gap:.4rem;margin-top:.8rem}.stock-actions button,.edit-btn{border:1px solid #dab6c3;background:#fff8fb;color:#8c5368;border-radius:9px;padding:.45rem .6rem;font:700 .66rem var(--sans);cursor:pointer}
.menu-admin-list{display:grid;gap:.65rem}.menu-admin-list article{display:grid;grid-template-columns:48px 1fr auto auto;align-items:center;gap:.8rem;background:#fff;border:1px solid #ead6dd;border-radius:15px;padding:.8rem 1rem}.menu-admin-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fae8ef;font-size:1.2rem}.menu-admin-list h3{font:700 1.05rem "Cormorant Garamond",serif;color:#714256;margin:0}.menu-admin-list p{font:.75rem var(--sans);color:#6f5d64;margin:.12rem 0}.menu-admin-list span{font:.67rem var(--sans);color:#9a818b}.menu-off{opacity:.58}.limited-tag{color:#9a506a!important;font-weight:700!important}.switch{position:relative;display:inline-block;width:42px;height:24px}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#d9c7cd;border-radius:99px;cursor:pointer}.switch span:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+span{background:#a85d76}.switch input:checked+span:before{transform:translateX(18px)}.menu-item-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.customer-search input{min-width:240px}.customer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.customer-grid article{display:grid;grid-template-columns:1fr;align-items:center;gap:.8rem;background:#fff;border:1px solid #ead6dd;border-radius:16px;padding:.9rem}.customer-grid article.customer-card{cursor:pointer;grid-template-columns:auto 1fr}.customer-grid article.customer-card:hover,.customer-grid article.customer-card:focus-visible{border-color:#d8a8b8}.customer-grid h3{font:700 1.05rem "Cormorant Garamond",serif;color:#714256;margin:0}.customer-grid p,.customer-grid small{font:.7rem var(--sans);color:#7f6972;margin:.1rem 0}.customer-select{display:flex;margin:0;cursor:pointer}.customer-select input{margin:0;accent-color:var(--pink-deep);cursor:pointer}.customer-bulk-bar{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin-bottom:.8rem}.customer-select-all{display:flex;align-items:center;gap:.4rem;font:700 .78rem var(--sans);color:#714256;cursor:pointer}.customer-select-all input{margin:0;accent-color:var(--pink-deep);cursor:pointer}.customer-bulk-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font:700 .78rem var(--sans);color:#7f6972}.customer-bulk-actions[hidden]{display:none}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.settings-card{background:#fff;border:1px solid #ead6dd;border-radius:16px;padding:1rem}.settings-card h3{font:700 1.2rem "Cormorant Garamond",serif;color:#714256;margin:0 0 .7rem}.settings-card p{font:.74rem var(--sans);color:#7f6c73}.settings-card input,.settings-card textarea{margin-bottom:.65rem}.check-line{display:flex!important;align-items:center;gap:.45rem}.check-line input{width:auto!important;margin:0!important}.input-suffix{display:flex;align-items:stretch;margin-bottom:.65rem}.input-suffix input{margin:0;border-radius:8px 0 0 8px}.input-suffix span{display:grid;place-items:center;background:#f5e8ed;border:1px solid #dfc8d1;border-left:0;padding:0 .7rem;border-radius:0 8px 8px 0;font:700 .72rem var(--sans);color:#7f6170}.prefix-dollar span{border-left:1px solid #dfc8d1;border-right:0;border-radius:8px 0 0 8px}.prefix-dollar input{border-radius:0 8px 8px 0}
#panelSweetStop .stock-actions{flex-wrap:wrap}
#panelSweetStop .stock-actions button{box-sizing:border-box;flex:1 1 84px;min-height:38px;padding:.5rem .65rem}
@media(max-width:900px){.snapshot-grid,.inventory-summary,.money-cards{grid-template-columns:repeat(2,1fr)}.portal-nav,.inventory-grid,.customer-grid,.settings-grid,.gal-admin-list{grid-template-columns:1fr}.portal-panel-head{flex-direction:column}.week-item{grid-template-columns:60px 1fr}.week-time{grid-column:2;text-align:left}.menu-admin-list article{grid-template-columns:44px 1fr auto}.menu-admin-list .menu-item-actions{grid-column:2/4;justify-self:start}}
@media(max-width:620px){.owner-hero{align-items:flex-start;padding:1.2rem}.owner-signout{padding:.5rem .7rem}.snapshot-grid,.inventory-summary,.money-cards{grid-template-columns:1fr 1fr}.snapshot-card{min-height:125px}.portal-nav button{grid-template-columns:44px 1fr auto;padding:.8rem}.week-item{grid-template-columns:52px 1fr;padding:.65rem}.section-heading-row{align-items:flex-start}.snapshot-month{display:none}.manual-order-card{align-items:flex-start;flex-direction:column}.settings-grid{grid-template-columns:1fr}.order-detail{padding:1rem}.order-detail-summary{grid-template-columns:1fr}.order-request-list{grid-template-columns:1fr;gap:.15rem}.order-request-list dd{margin-bottom:.55rem}.order-detail-controls{align-items:stretch;flex-direction:column}.order-detail-controls .btn{width:100%}.order-detail-section>.btn{width:100%}.linked-payment-heading{align-items:stretch;flex-direction:column}.linked-payment-heading .btn{width:100%}.manual-payment-fields{grid-template-columns:1fr}.manual-payment-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.manual-payment-actions .btn{width:100%;min-width:0;padding:.6rem .5rem}}
@media(max-width:620px){
  #customerDetailOverlay .order-detail{width:calc(100vw - 24px);height:calc(100vh - 24px);margin:12px;border-radius:18px}
  #customerDetailContent{padding:.9rem 1rem 1.25rem}
  #customerDetailOverlay .order-detail-close{top:.8rem;right:.8rem}
  .page-body>.panel{min-width:0}
  .order-table-wrap{overflow:visible;border:0;background:transparent}
  .order-table{display:block;min-width:0}
  .order-table thead{display:none}
  .order-table tbody{display:grid;gap:.75rem}
  .order-table tr{display:block;background:#fff;border:1px solid #ead6dd;border-radius:14px;padding:.25rem .75rem}
  .order-table td{display:grid;grid-template-columns:minmax(92px,36%) minmax(0,1fr);gap:.4rem;width:auto!important;padding:.55rem 0;border-top:1px solid #f0e4e8}
  .order-table td:first-child{border-top:0}
  .order-table td::before{content:attr(data-label);font:700 .65rem var(--sans);color:#947986;text-transform:uppercase;letter-spacing:.04em}
  .order-table td>small,.order-table .order-view-button{grid-column:2}
  .order-table .order-event-date,.order-table .fulfillment-review{grid-column:2}
  .order-table .order-actions-cell .order-view-button{justify-self:start}
  .order-table .order-empty-cell{display:block;padding:1rem;text-align:center}
  .order-table .order-empty-cell::before{content:none}
  .payment-table-wrap{overflow:visible;border:0;background:transparent}
  .payment-order-table{display:block;min-width:0}
  .payment-order-table thead{display:none}
  .payment-order-table tbody{display:grid;gap:.75rem}
  .payment-order-table tr{display:block;background:#fff;border:1px solid #ead6dd;border-radius:14px;padding:.25rem .75rem}
  .payment-order-table td{display:grid;grid-template-columns:minmax(92px,36%) minmax(0,1fr);gap:.4rem;width:auto!important;padding:.55rem 0;border-top:1px solid #f0e4e8}
  .payment-order-table td:first-child{border-top:0}
  .payment-order-table td::before{content:attr(data-label);font:700 .65rem var(--sans);color:#947986;text-transform:uppercase;letter-spacing:.04em}
  .payment-order-table .payment-record-button{grid-column:2;justify-self:start}
  .payment-order-table .order-event-date,.payment-order-table .order-date-label,.payment-order-table .fulfillment-review{grid-column:2}
  .payment-order-table td[colspan]{display:block;text-align:center}
  .payment-order-table td[colspan]::before{content:none}
}
@media(max-width:480px){.gal-admin-item{grid-template-columns:72px minmax(0,1fr)}.gal-admin-thumb{width:72px;height:58px}.gallery-status{grid-column:2;justify-self:start}}





/* Refined gallery collection tabs — blush, ivory and gold */
/* Gallery category ribbons — bow-inspired to match the homepage gift-wrap aesthetic */

.gallery-folder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2rem 0 1.5rem}
.gallery-folder{appearance:none;position:relative;text-align:left;border:1px solid rgba(201,162,75,.42);background:linear-gradient(135deg,rgba(255,253,250,.98),rgba(255,247,248,.98));border-radius:18px;padding:1.3rem 1.15rem 1.15rem 6.8rem;display:flex;align-items:center;min-height:112px;box-shadow:0 10px 24px rgba(109,67,58,.07),inset 0 0 0 4px rgba(255,255,255,.68);cursor:pointer;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.gallery-folder::before{content:"";position:absolute;inset:0 auto 0 0;width:5.9rem;background-image:linear-gradient(90deg,rgba(255,250,247,.02) 58%,rgba(255,250,247,.98) 100%),url('../assets/bow-bg.jpg');background-size:360px auto;background-position:4% 4%;background-repeat:no-repeat;opacity:.92}
.gallery-folder::after{content:"";position:absolute;left:5.65rem;top:18%;bottom:18%;width:1px;background:linear-gradient(180deg,transparent,rgba(201,162,75,.65),transparent)}
.folder-number{display:none!important}
.folder-copy{display:block;position:relative;z-index:1;min-width:0}
.gallery-folder strong{display:block;font:700 1.08rem/1.18 var(--serif);color:var(--choc);margin:0}
.gallery-folder small{display:block;margin-top:.38rem;font:600 .66rem/1.35 var(--sans);letter-spacing:.055em;color:#94766c;text-transform:none}
.gallery-folder:hover,.gallery-folder.active{transform:translateY(-3px);box-shadow:0 15px 30px rgba(120,70,50,.12),inset 0 0 0 4px rgba(255,255,255,.8);border-color:#d887a3}
.gallery-folder.active{background:linear-gradient(135deg,#fffafc 0%,#f8e5eb 100%);box-shadow:0 16px 32px rgba(154,83,108,.15),inset 0 0 0 4px rgba(255,255,255,.8)}
.gallery-folder.active::after{background:linear-gradient(180deg,transparent,rgba(190,132,38,.9),transparent)}
@media(max-width:900px){.gallery-folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gallery-folder-grid{grid-template-columns:1fr}.gallery-folder{padding:.9rem 1rem;min-height:78px}.gallery-results-head{align-items:center}.gallery-results-head h3{font-size:1.35rem}}
.gallery-dropdown-wrap{position:relative;margin:2rem auto 1.75rem;max-width:760px;padding:1.4rem 1.5rem 1.55rem 7.2rem;border:1px solid rgba(201,162,75,.42);border-radius:22px;background:linear-gradient(135deg,rgba(255,253,250,.98),rgba(255,247,248,.98));box-shadow:0 14px 34px rgba(109,67,58,.08),inset 0 0 0 4px rgba(255,255,255,.72);overflow:hidden}
.gallery-dropdown-accent{position:absolute;left:0;top:0;bottom:0;width:6.3rem;background-image:linear-gradient(90deg,rgba(255,250,247,.03) 58%,rgba(255,250,247,.98) 100%),url('../assets/bow-bg.jpg');background-size:390px auto;background-position:4% 5%;background-repeat:no-repeat}
.gallery-dropdown-wrap label{display:block;margin:0 0 .55rem;font:700 .78rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#b5832f}
.gallery-select-shell{position:relative}
.gallery-category-select{width:100%;appearance:none;-webkit-appearance:none;border:1px solid rgba(216,135,163,.55);border-radius:14px;background:linear-gradient(180deg,#fffefd,#fff7fa);padding:1rem 3.2rem 1rem 1.15rem;font:700 1.02rem/1.35 var(--serif);color:var(--choc);box-shadow:0 7px 18px rgba(120,70,50,.07);cursor:pointer;outline:none}
.gallery-category-select:focus{border-color:#cf7596;box-shadow:0 0 0 4px rgba(216,135,163,.15),0 8px 20px rgba(120,70,50,.08)}
.gallery-select-arrow{position:absolute;right:1.15rem;top:50%;transform:translateY(-56%);font:700 1.55rem/1 var(--serif);color:#c1863a;pointer-events:none}
@media(max-width:640px){.gallery-dropdown-wrap{padding:1.1rem 1rem 1.2rem;margin-top:1.5rem}.gallery-dropdown-accent{display:none}.gallery-category-select{font-size:.95rem;padding-right:2.8rem}}


/* About page typography refinement */
.about-script-title{
  font-family: 'Great Vibes', cursive;
  color:#d47990;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  margin-bottom:1rem;
}
.about-tagline{
  font-family:var(--serif);
  color:#c2556e;
  font-size:clamp(1.05rem,2vw,1.35rem);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:.35rem 0 0;
}


/* Gallery image lightbox */
.gallery-card img{cursor:zoom-in;transition:transform .25s ease,filter .25s ease}
.gallery-card:hover img{transform:scale(1.025);filter:saturate(1.03)}
body.lightbox-open{overflow:hidden}
.gallery-lightbox[hidden]{display:none}
.gallery-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:2rem 5.5rem;background:rgba(52,34,30,.9);backdrop-filter:blur(8px)}
.gallery-lightbox-content{max-width:min(1100px,86vw);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.gallery-lightbox-content img{display:block;max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 22px 70px rgba(0,0,0,.4);background:#fff}
.gallery-lightbox-content p{margin:0;padding:.55rem 1rem;color:#fff;font-family:var(--sans);font-size:.9rem;letter-spacing:.02em;text-align:center}
.gallery-lightbox-close,.gallery-lightbox-nav{position:absolute;border:1px solid rgba(255,255,255,.55);background:rgba(255,250,247,.95);color:var(--choc);box-shadow:0 8px 24px rgba(0,0,0,.2);cursor:pointer;display:grid;place-items:center;transition:transform .2s ease,background .2s ease}
.gallery-lightbox-close:hover,.gallery-lightbox-nav:hover{transform:scale(1.06);background:#fff}
.gallery-lightbox-close{top:1.25rem;right:1.5rem;width:48px;height:48px;border-radius:50%;font:400 2rem/1 var(--serif)}
.gallery-lightbox-nav{top:50%;transform:translateY(-50%);width:52px;height:72px;border-radius:999px;font:400 2.7rem/1 var(--serif)}
.gallery-lightbox-nav:hover{transform:translateY(-50%) scale(1.06)}
.gallery-lightbox-prev{left:1.25rem}
.gallery-lightbox-next{right:1.25rem}
@media(max-width:700px){
  .gallery-lightbox{padding:4.5rem .75rem 1.25rem}
  .gallery-lightbox-content{max-width:94vw;max-height:84vh}
  .gallery-lightbox-content img{max-height:72vh;border-radius:10px}
  .gallery-lightbox-close{top:.8rem;right:.8rem}
  .gallery-lightbox-nav{top:auto;bottom:1.2rem;width:46px;height:46px;font-size:2.1rem}
  .gallery-lightbox-nav:hover{transform:scale(1.06)}
  .gallery-lightbox-prev{left:calc(50% - 58px)}
  .gallery-lightbox-next{right:calc(50% - 58px)}
  .gallery-lightbox-content p{padding-bottom:3.5rem;font-size:.8rem}
}

.gallery-category-description{
  margin: -.35rem 0 1.5rem;
  text-align: center;
  color: var(--text, #5b4b4f);
  font-size: 1rem;
  line-height: 1.7;
}

/* Mobile heading spacing refinement — tighter, cleaner typography */
@media (max-width: 640px){
  .headline-pink,
  .panel .headline-pink,
  .feature h3{
    letter-spacing:.055em;
    word-spacing:0;
    line-height:1.08;
  }
  .panel .headline-pink{
    font-size:clamp(1.75rem,8vw,2.25rem);
  }
  .feature h3{
    letter-spacing:.07em;
    line-height:1.12;
  }
}

/* Preserve the full portrait composition for tall product photos. */
.gallery-card--full-view{
  position:relative;
  overflow:hidden;
  background:#f7eee9;
  isolation:isolate;
}
.gallery-card--full-view::before{
  content:"";
  position:absolute;
  inset:-18px;
  background-image:var(--card-bg);
  background-size:cover;
  background-position:center;
  filter:blur(16px);
  opacity:.32;
  transform:scale(1.08);
  z-index:0;
}
.gallery-card--full-view::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,250,247,.46);
  z-index:0;
}
.gallery-card--full-view img{
  position:relative;
  z-index:1;
  object-fit:contain;
  object-position:center;
  background:transparent;
  padding:.18rem;
}

/* Gallery color-accuracy fix: preserve every uploaded photo's original brightness. */
.gallery-card img,
.gallery-lightbox-content img,
#galleryLightboxImage{
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
  background-color:transparent;
  color-scheme:normal;
}

/* Avoid Safari/iPhone backdrop-filter compositing that can dim modal children. */
.gallery-lightbox{
  background:rgba(52,34,30,.92);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  isolation:isolate;
}
.gallery-lightbox-content{
  position:relative;
  z-index:2;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
}
.gallery-lightbox-content img{
  position:relative;
  z-index:3;
  box-shadow:0 22px 70px rgba(0,0,0,.4);
}

/* Hover may zoom, but must never recolor or darken the photos. */
.gallery-card:hover img{
  transform:scale(1.025);
  filter:none !important;
  -webkit-filter:none !important;
}

/* Final gallery brightness restoration — exact source pixels, isolated from modal overlay. */
.gallery-lightbox{z-index:11000 !important;background:#3b2824 !important;}
.gallery-lightbox::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(52,34,30,.90);
  z-index:0;
  pointer-events:none;
}
.gallery-lightbox-content,
.gallery-lightbox-close,
.gallery-lightbox-nav{z-index:2 !important;}
.gallery-card img,
.gallery-lightbox img,
#galleryLightboxImage{
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  forced-color-adjust:none;
}
@media (prefers-color-scheme: dark){
  .gallery-card img,.gallery-lightbox img,#galleryLightboxImage{filter:none !important;opacity:1 !important;}
}


/* Preserve original uploaded gallery photo appearance */
.gallery-grid img,
.gallery-card img,
.lightbox img,
#galleryLightboxImage {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}

/* Netlify color-safety: preserve uploaded image appearance */
html, body { color-scheme: only light !important; }
img {
  color-scheme: only light !important;
  forced-color-adjust: none !important;
}
.gallery-card img,
.gallery-card:hover img,
.gallery-lightbox img,
#galleryLightboxImage {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
}

/* ---------- Launch visual-polish pass (public pages) ---------- */
.cal-nav:disabled{opacity:.55}
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-nav:focus-visible,
.order-detail-close:focus-visible{
  outline:3px solid #b9738d;
  outline-offset:2px;
}

@media (max-width:640px){
  .page-banner{padding:.65rem 0 .15rem}
  img.mini-logo{width:min(176px,47vw);margin-bottom:.1rem}
  .page-banner h1{font-size:clamp(1.45rem,7vw,1.9rem);line-height:1.12}
  .page-banner .script-line{font-size:clamp(1.35rem,7vw,1.7rem);margin:.45rem 0 .7rem}
  .page-body{padding-top:.75rem;gap:1.35rem}

  .pay-page .page-body{padding-top:.35rem}
  .pay-page .panel{padding:1.25rem}
  .pay-page .panel>.lede{font-size:1.02rem;line-height:1.5}
  .pay-page .card-grid{gap:.55rem;margin-top:.8rem}
  .pay-page .card{padding:.75rem .9rem}
  .pay-page .card h3{font-size:1.05rem}
  .pay-page .card p{font-size:.9rem;line-height:1.45}
  .pay-page .gold-divider{margin:.8rem auto}
  .pay-page #invoice-payment-form{margin-top:.9rem}

  .thank-you-page .page-body .headline-pink{
    font-size:1.25rem;
    letter-spacing:.045em;
    line-height:1.15;
    margin-bottom:.65rem;
  }

  .treats-page .page-body>.panel:first-child .headline-pink{
    font-size:clamp(1.6rem,7.6vw,1.95rem);
    letter-spacing:.035em;
    line-height:1.08;
  }
  .contact-page .page-body>.panel:first-child .headline-pink{
    font-size:clamp(1.6rem,7.4vw,1.95rem);
    letter-spacing:.04em;
    margin-bottom:.65rem;
  }
  .contact-page .page-body>.panel:first-child>.lede{line-height:1.5;margin-bottom:.25rem}
  .order-page .page-body>.panel:first-child .headline-pink{
    font-size:clamp(1.6rem,7.5vw,1.95rem);
    letter-spacing:.04em;
    margin-bottom:.65rem;
  }
  .order-page .page-body>.panel:first-child>.lede{line-height:1.5}
  .order-page .page-body>.panel:first-child>form{margin-top:.9rem}

  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
}

@media (max-width:350px){
  .gallery-grid{grid-template-columns:1fr}
}

/* ================================================================
   CUSTOMER-FACING VISUAL POLISH — Alignment & Rhythm Pass
   Presentation only: no business/booking/pricing/payment logic, form
   field names, or JS-referenced IDs are touched. Scoped per page via
   body classes (home-page, gallery-page, availability-page, about-page,
   faq-page, plus the existing treats-page/pay-page/contact-page) so
   order.html and admin.html keep their current layout untouched.
   Standard: eyebrow -> heading -> intro copy centered; forms, long
   body copy, accordion text, and the price table stay left-aligned
   (currency column stays right-aligned) where usability benefits.
   ================================================================ */

/* ---- Shared eyebrow/heading/intro rhythm ---- */
.home-page .panel > .eyebrow,
.home-page .panel > .headline-pink,
.gallery-page .panel > .eyebrow,
.gallery-page .panel > .headline-pink,
.gallery-page .panel > .lede,
.availability-page .panel > .eyebrow,
.availability-page .panel > .headline-pink,
.availability-page .panel > .lede,
.faq-page .panel > .eyebrow,
.faq-page .panel > .headline-pink,
.faq-page .panel > .lede,
.treats-page .panel > .eyebrow,
.treats-page .panel > .headline-pink,
.treats-page .panel > .lede,
.pay-page .panel > .eyebrow,
.pay-page .panel > .headline-pink,
.pay-page .panel > .lede,
.contact-page .panel > .eyebrow,
.contact-page .panel > .headline-pink,
.contact-page .panel > .lede{
  text-align:center;
}
.gallery-page .panel > .lede,
.availability-page .panel > .lede,
.faq-page .panel > .lede,
.treats-page .panel > .lede,
.pay-page .panel > .lede,
.contact-page .panel > .lede{
  margin-left:auto;
  margin-right:auto;
}

/* ---- Home: "How It Works" step sequence centered, narrower, number
   circle vertically centered against (possibly multi-line) step text.
   .steps/.step are only used on index.html. ---- */
.home-page .panel .steps{
  max-width:640px;
  margin:1.4rem auto 0;
}
.home-page .step{
  align-items:center;
  position:relative;
}
.home-page .step::before{
  content:"";
  height:38px;
  padding:0;
}
.home-page .step::after{
  content:counter(step);
  position:absolute;
  top:50%;
  left:calc(1.3rem + 19px);
  transform:translate(-50%,calc(-50% - 2px));
  color:#fff;
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:700;
  line-height:1;
  pointer-events:none;
}
.home-page .payment-fee-disclosure{
  text-align:center;
}

/* ---- Home: "What We Create" showcase cards — exact structure pass.
   Image centered with equal left/right white space (the shared
   .card img.card-photo rule bleeds the image to the card edges with
   negative margins; overridden here so it sits inside the card's own
   padding instead), a fixed title-area minimum height so a two-line
   title never pushes one card's description lower than its neighbors',
   a small centered gold-heart divider, and a narrow centered
   description column. One spacing system (image→title, title→divider,
   divider→description) applies identically to every card. Only layout
   changes here -- the images themselves, their crop/aspect-ratio, and
   every card's wording are untouched. ---- */
.custom-treat-grid .card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:1.6rem 1.5rem 1.8rem;
}
.custom-treat-grid .card img.card-photo{
  width:100%;
  margin:0 0 1.2rem;
  border-radius:10px;
}
.custom-treat-grid .card h3{
  min-height:2.4em;
  margin:0 0 .3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.2;
}
.custom-treat-grid .card .card-gold-divider{
  width:104px;
  margin:0 auto .75rem;
  color:var(--gold);
  font-size:.8rem;
}
.custom-treat-grid .card p{
  max-width:28ch;
  margin:0 auto;
}

/* ---- Gallery: "Browse By Treat Type" control reads as one centered
   component (label centered above the select, select itself centered
   within its available width) instead of stretching flush to one side. ---- */
.gallery-page .gallery-dropdown-wrap label{
  text-align:center;
}
.gallery-page .gallery-select-shell{
  max-width:420px;
  margin-inline:auto;
}
/* Category heading + photo count centered together, matching the
   already-centered .gallery-category-description beneath them. */
.gallery-page .gallery-results-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:.4rem .8rem;
  text-align:center;
  margin-top:1.8rem;
}
.gallery-page .gallery-results-head h3{
  margin:0;
}
.gallery-page .gallery-results-head span{
  font:600 .85rem var(--sans);
  color:#8a5a3b;
}

/* ---- Pay: showcase-style info cards get centered titles/descriptions
   and are vertically balanced within their (grid-stretched, already-
   equal-height) card box. Treats & Pricing's Add-Ons/Packaging cards
   are left as structured lists on purpose — centering multi-line
   bulleted pricing text would hurt scanability there. Contact's own
   four info cards were removed entirely (see contact.html). ---- */
.pay-page .card-grid .card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* ---- Pay: lift the payment form itself as the page's primary action. ---- */
.pay-form-card{
  background:#fff;
  border:1px solid rgba(201,162,75,.35);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(120,70,50,.1);
  padding:1.6rem 1.7rem;
}

@media (max-width:640px){
  .gallery-page .gallery-results-head{gap:.25rem .6rem}
  .pay-form-card{padding:1.2rem 1.25rem}
}

/* ================================================================
   TREATS & PRICING — reference-match pass (scoped to .treats-page only)
   Wider main panel, a pricing table intentionally narrower than that
   panel (centered, with visible side gutters), and Add-Ons/Packaging
   rows converted from an inline-dash paragraph to a real two-column
   name/price layout. No prices, names, or wording changed anywhere
   below -- markup only reorganizes existing text into rows.
   ================================================================ */
.treats-page .wrap{
  width:min(1280px, 94vw);
}
.treats-page .price-table{
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}
.treats-page .card h3{
  text-align:center;
}
.treats-page .addon-price-list{
  display:grid;
  gap:.6rem;
  margin-top:1rem;
}
.treats-page .addon-price-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.9rem;
}
.treats-page .addon-price-row span{
  flex:1 1 auto;
  min-width:0;
  text-align:left;
}
.treats-page .addon-price-row strong{
  flex:0 0 auto;
  white-space:nowrap;
  text-align:right;
}
.treats-page .card-grid .card:first-child .addon-price-list{
  grid-template-columns:minmax(0,1fr) max-content;
  column-gap:.9rem;
  align-items:baseline;
}
.treats-page .card-grid .card:first-child .addon-price-row{
  display:contents;
}
.treats-page .card-grid .card:first-child .addon-price-row strong{
  text-align:left;
}

@media (max-width:640px){
  .treats-page .price-table{max-width:none}
  .treats-page .addon-price-row{gap:.6rem}
  .treats-page .card-grid .card:first-child .addon-price-list{column-gap:.6rem}
}

/* ================================================================
   ABOUT — reference-match pass (scoped to .about-page only)
   Wider main panel, matching the same treatment already applied to
   Treats & Pricing. The photo column's own track (set inline in
   about.html) was switched from a fixed px cap to minmax(240px,34%)
   so the photo holds a steady ~32-36% share of the row across the
   whole desktop/tablet range, instead of a fixed px cap that read
   fine at 1440 but ballooned toward 45%+ at 1024. Everything else
   here (top alignment, left-aligned body copy, CTA centered within
   the text column, signature position) was already correct and is
   left untouched.
   ================================================================ */
.about-page .wrap{
  width:min(1280px, 94vw);
}
/* Two columns now hold down to 700px (tablet, per the requested
   breakpoint set) instead of the old shared 860px collapse -- moved
   here, scoped, and narrowed from the site-wide rule that used to
   carry these two about-only selectors (it also collapses the Home
   hero and centers the header nav, so it had to stay untouched at
   860px for those). Below 700px, same single-column/centered-photo
   fallback as before. */
@media (max-width: 700px){
  .about-page .panel > div[style*='grid-template-columns']{ display:block !important; }
  .about-page .panel img[src*='jenniel']{ max-width:320px; margin:0 auto 1.4rem; }
  /* Mobile only: ABOUT + Meet Jenniel center under the now-centered
     photo. Body paragraphs and the signature stay left-aligned. */
  .about-page .panel .eyebrow,
  .about-page .about-script-title{ text-align:center; }
}

/* ================================================================
   CUSTOM ORDER REQUEST FORM — alignment pass (scoped to .order-page)
   Every field row, fieldset, textarea, the estimate box, and the
   acknowledgments box already share one left/right edge (confirmed
   live: 179/1261 at 1440px) via the existing form/fieldset rules --
   nothing needed there. Two real gaps found by measuring the actual
   rendered page:
   1) .scheduling-notice and .payment-fee-disclosure are shared with
      other pages (Availability, Pay, Home), so their base
      max-width:760px stays untouched globally -- here they're
      widened to match this form's content edges specifically.
   2) <select> renders ~2px taller than <input> in the same row even
      with identical padding/border/font-size (confirmed via
      getComputedStyle -- a native Chrome rendering quirk, not a CSS
      mismatch); trimming select's vertical padding by 1px per side
      brings Preferred Contact Method's height back in line with its
      row-mates.
   3) The native select arrow (appearance:auto) sits almost flush
      against the right border and doesn't respond to padding-right
      the way an author would expect, because Chromium reserves its
      own fixed-width box for the native arrow glyph regardless of
      author padding -- increasing padding-right alone just pads the
      *text*, the arrow itself doesn't move. Switched to
      appearance:none with a small inline SVG chevron (brand gold,
      same technique already used for .gallery-category-select) so
      padding-right actually controls the arrow's inset -- height is
      unchanged, only the arrow's position and the padding around it.
   ================================================================ */
.order-page .scheduling-notice{
  max-width:none;
}
.order-page .payment-fee-disclosure{
  max-width:none;
  margin-left:0;
  margin-right:0;
  text-align:center;
}
.order-page .payment-fee-disclosure > p{
  display:block;
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}
.order-page select{
  padding-top:11px;
  padding-bottom:11px;
  padding-right:2.4rem;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23c9a24b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:11px 7px;
}
.order-page #event-date,
.order-page #pickup{
  height:46.5px;
}
/* Label-to-field gap only, ~11px (was 5.6px) -- excludes any label
   carrying the shared .choice class (treat/add-on/upgraded-stick/
   acknowledgment checkbox rows all use tighter, deliberately
   different spacing rules elsewhere) so only the plain field labels
   -- Full Name, Email, Event Type, etc. -- are affected. */
.order-page label:not(.choice){
  margin-bottom:.7rem;
}
/* Top intro block only (eyebrow/heading/lede, direct children of the
   form's single .panel) -- centered, matching the approved reference.
   The form itself and every field row below stay exactly where they
   are; this only affects the three text elements above the form. */
.order-page .panel > .eyebrow,
.order-page .panel > .headline-pink,
.order-page .panel > .lede{
  text-align:center;
}
.order-page .panel > .lede{
  margin-left:auto;
  margin-right:auto;
}
/* Inspiration Photos fieldset: center its content (helper sentence,
   upload button, limit text) but explicitly force the legend back to
   left -- fieldset-level text-align can otherwise be inherited by the
   legend in some browsers, and it must stay exactly where it is. */
.order-page #inspiration-photos{
  text-align:center;
}
.order-page #inspiration-photos > legend{
  text-align:left;
}