/* =========================================================
   THEME-NEUTRAL BASELINE
   Prepended to every theme's CSS. Covers behavior that must work
   regardless of theme (anchor-scroll to the quote form under a sticky
   topbar) and a plain fallback for arbitrary site-authored HTML inside
   CONFIG["cost_body"] (tables, lists) that a theme's own CSS doesn't
   otherwise style.
========================================================= */
*{ box-sizing: border-box; }

/* Browsers default <figure> to `margin: 1em 40px`, which throws off any
   grid/flex pairing it sits in (e.g. an image beside a quote-form box) —
   the sibling box ends up looking like it "sticks out" below the image. */
figure{ margin: 0; }

html, body{ max-width: 100%; overflow-x: clip; }

html, body{
  scroll-behavior: smooth;
  scroll-padding-top: calc(110px + env(safe-area-inset-top));
}

#quote-panel{
  scroll-margin-top: calc(110px + env(safe-area-inset-top));
}

@media (min-width: 900px){
  html, body{ scroll-padding-top: 80px; }
  #quote-panel{ scroll-margin-top: 80px; }
}

[hidden]{ display: none !important; }

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

/* Fallback styling for arbitrary CONFIG["cost_body"] markup (tables, lists)
   that a theme's own stylesheet doesn't specifically target. */
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 14px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  overflow: hidden;
}
thead th{
  background: rgba(0,0,0,.04);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.12);
  white-space: nowrap;
  font-size: 13px;
}
td{
  padding: 10px 12px;
  vertical-align: top;
  border-bottom: 1px solid rgba(0,0,0,.10);
  font-size: 14px;
}
tbody tr:last-child td{ border-bottom: none; }
.table-scroll{ max-width: 100%; }
@media (max-width: 640px){
  .table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll table{ min-width: 720px; }
}

/* Apothecary theme: bottle-green paneled walls, walnut shelves, gilt and
   cream labels. Cormorant SC for label lettering, Spectral for reading. */
:root{
  --wall:#14352a; --wall-2:#1b4436; --glass:#235a47; --glass-d:#103026; --cream:#f5ead0; --cream-2:#ead9b2;
  --gold:#c9a24a; --gold-l:#ecd38d; --gold-d:#8f6c24; --ink:#1f1a12; --soft:#5f533c; --wood:#6b3f22; --wood-d:#43260f; --red:#9c2a1f;
}
body{
  margin:0; color:var(--cream); background:var(--wall);
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 120px), linear-gradient(var(--wall-2), var(--wall));
  font:17px/1.6 Spectral, Georgia, serif;
}
a{ color:inherit; }
.apth-rx__k, .city-group__title{ font-family:'Cormorant SC', Georgia, serif; font-weight:700; letter-spacing:.12em; }

.apth-btn, .btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:8px 20px;
  font:700 18px/1.1 'Cormorant SC', Georgia, serif; letter-spacing:.1em; text-decoration:none; cursor:pointer; text-align:center;
  color:#fff7e4; background:var(--red); border:2px solid var(--gold); border-radius:3px; box-shadow:0 0 0 2px var(--red); white-space:nowrap;
}
.apth-btn:hover, .btn:hover{ background:#7d1f16; }
.apth-btn:focus-visible, .btn:focus-visible{ outline:3px solid var(--gold-l); outline-offset:4px; }
.apth-btn--big{ font-size:22px; min-height:56px; width:100%; }
.btn.ghost{ color:var(--ink); background:transparent; border-color:var(--ink); box-shadow:none; }

/* shop grid: hero + rail, then shelves + rail */
.apth-shop{
  display:grid; grid-template-columns:minmax(0,1fr) 320px; grid-template-areas:"hero rail" "main rail" "area area" "foot foot";
  max-width:1240px; margin:0 auto; column-gap:34px; padding:0 30px;
}

/* ---------- hero ---------- */
.apth-hero{ grid-area:hero; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:34px; align-items:center; padding:20px 0 40px; }
.apth-hero__l{ display:flex; flex-direction:column; gap:24px; }
.apth-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; font:700 22px/1.1 'Cormorant SC', serif; letter-spacing:.06em; color:var(--gold-l); }
.apth-brand img{ display:block; width:40px; height:40px; border-radius:50%; border:2px solid var(--gold); background:var(--cream); }
.apth-gilt{
  padding:22px 26px 24px; color:var(--ink); background:radial-gradient(ellipse at 50% 30%, #fbf3dc, var(--cream-2));
  border:2px solid var(--gold-d); box-shadow:0 0 0 5px var(--cream-2), 0 0 0 7px var(--gold), 0 14px 30px -10px rgba(0,0,0,.6);
  border-radius:4px; text-align:center; margin:8px 7px;
}
.apth-gilt h1{ margin:0; font:700 44px/1.05 'Cormorant SC', Georgia, serif; letter-spacing:.02em; }
.apth-drawers{ display:flex; gap:8px; }
.apth-drawer{
  position:relative; display:flex; align-items:center; justify-content:center; min-height:52px; padding:6px 12px 16px;
  background:linear-gradient(180deg, #7a4927, var(--wood) 60%, #5a3318); border:2px solid var(--wood-d); border-radius:3px;
  box-shadow:inset 0 0 0 3px rgba(255,220,170,.08), 0 3px 0 var(--wood-d); text-decoration:none;
}
.apth-drawer > span{ padding:2px 14px; background:var(--cream); color:var(--ink); border:2px solid var(--gold); font:700 16px 'Cormorant SC', serif; letter-spacing:.12em; }
.apth-drawer::after{ /* brass pull */
  content:""; position:absolute; bottom:4px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--gold-l), var(--gold-d));
}
.apth-drawer[aria-current="page"] > span{ background:var(--gold-l); }
.apth-drawer:hover{ filter:brightness(1.1); }
.apth-drawer--cta{
  min-height:52px; padding:6px 22px 16px; font:700 19px/1.1 'Cormorant SC', serif; letter-spacing:.08em; color:#fff7e4; text-align:center;
  background:linear-gradient(180deg, #b23527, var(--red) 60%, #7a1d14); border-color:#5c140d;
}

.apth-bottle{ position:relative; margin:30px 10px 0; }
.apth-bottle__neck{ position:absolute; z-index:1; top:-30px; left:50%; width:36%; height:36px; margin-left:-18%; background:linear-gradient(90deg, #3d2a1a, #6b4a2f 40%, #3d2a1a); border-radius:6px 6px 2px 2px; box-shadow:0 4px 0 #26180d; }
.apth-bottle img{
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  border-radius:44% 44% 12% 12% / 22% 22% 6% 6%; border:6px solid var(--glass);
  box-shadow:0 0 0 2px var(--gold-d), 0 22px 40px -12px rgba(0,0,0,.7);
}
.apth-bottle::after{ /* glass highlight */
  content:""; position:absolute; left:14%; top:8%; width:12%; height:70%; border-radius:40px;
  background:linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events:none;
}

/* ---------- prescription rail ---------- */
.apth-rail{ grid-area:rail; padding:44px 0 30px; }
.apth-rx{
  position:sticky; top:100px; color:var(--ink); background:#fbf6e6; padding:18px 20px 20px; border-radius:4px;
  border:2px solid var(--ink); box-shadow:0 0 0 4px #fbf6e6, 0 0 0 5px var(--ink), 0 20px 40px -14px rgba(0,0,0,.7);
}
.apth-rx__k{ margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid var(--ink); font-size:15px; }
.apth-rx__zip{
  display:block; width:100%; height:54px; padding:0 6px; border:0; border-bottom:2px dotted var(--ink); background:transparent;
  font:600 32px Spectral, serif; letter-spacing:.24em; color:var(--ink);
}
.apth-rx__zip::placeholder{ color:#cbbf9f; letter-spacing:.04em; }
.apth-rx__zip:focus{ outline:2px solid var(--red); outline-offset:3px; }
.apth-rx .apth-btn{ width:100%; margin-top:16px; }

/* ---------- shelves ---------- */
.apth-main{ grid-area:main; padding:0 0 10px; }
.apth-intro{ margin:0 0 30px; padding:0 4px; }
.apth-intro p{ margin:0 0 12px; font-size:21px; line-height:1.55; color:#efe2c4; font-style:italic; }
.apth-shelves{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:0; }
.apth-slot{ position:relative; display:flex; padding:30px 14px 34px; }
.apth-slot::after{ /* the plank */
  content:""; position:absolute; left:-12px; right:-12px; bottom:0; height:18px;
  background:linear-gradient(180deg, #8a5530, var(--wood) 40%, var(--wood-d)); box-shadow:0 8px 14px -4px rgba(0,0,0,.6);
}
.apth-slot:nth-child(odd)::after{ left:-16px; } .apth-slot:nth-child(even)::after{ right:-16px; }
.apth-jar{
  position:relative; flex:1 1 auto; padding:30px 16px 18px; border-radius:44px 44px 14px 14px;
  background:linear-gradient(90deg, var(--glass-d), var(--glass) 30%, #2c6a55 50%, var(--glass) 75%, var(--glass-d));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}
.apth-jar::before{ /* lid */
  content:""; position:absolute; top:-14px; left:24%; right:24%; height:18px; border-radius:6px 6px 3px 3px;
  background:linear-gradient(90deg, #3d2a1a, #7a5536 45%, #3d2a1a);
}
.apth-label{
  color:var(--ink); background:var(--cream); padding:14px 16px 8px; border:1.5px solid var(--gold-d);
  box-shadow:0 0 0 3px var(--cream), 0 0 0 4.5px var(--gold-d); border-radius:3px; margin:4px;
}
.apth-label h2{ margin:0 0 8px; text-align:center; font:700 22px/1.15 'Cormorant SC', Georgia, serif; letter-spacing:.02em; }
.apth-label__body p{ margin:0 0 8px; font-size:15px; }
.apth-label__body ul{ margin:0 0 8px; padding-left:18px; font-size:15px; }
.apth-label__body li{ margin:0 0 3px; }
.apth-label strong{ color:var(--red); font-size:18px; }
.apth-slot:has(.table-scroll){ grid-column:1 / -1; }
.apth-label .table-scroll table{ margin:6px 0 10px; background:#fffaf0; border:1px solid var(--gold-d); border-radius:0; }
.apth-label .table-scroll th{ font:700 13px 'Cormorant SC', serif; letter-spacing:.08em; background:var(--cream-2); }

/* ---------- branch dispensaries ---------- */
.apth-area{ grid-area:area; margin:40px 0 0; padding:20px 22px; border:1px solid rgba(201,162,74,.4); background:rgba(0,0,0,.18); }
.apth-area h2{ margin:0 0 4px; font:700 32px/1.1 'Cormorant SC', serif; color:var(--gold-l); }
.muted{ margin:0 0 6px; color:#cdbf9e; font-size:15px; font-style:italic; }
.city-group__title{ margin:14px 0 4px; font-size:14px; color:var(--gold); border-bottom:1px solid rgba(201,162,74,.35); }
.city-grid{ list-style:none; margin:0; padding:0; columns:6 150px; column-gap:18px; }
.city-grid li{ break-inside:avoid; }
.city-grid a{ display:block; padding:2px 0; font-size:14px; color:#eadfc4; text-decoration:none; }
.city-grid a:hover{ color:var(--gold-l); text-decoration:underline; }

/* ---------- footer ---------- */
.apth-foot{ grid-area:foot; margin-top:34px; padding:22px 0 28px; border-top:2px solid var(--gold-d); }
.apth-foot__cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.apth-foot__links{ display:flex; gap:18px; margin:16px 0 4px; font-size:15px; }
.apth-foot__copy{ margin:0; font-size:14px; color:#cdbf9e; }

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .apth-shop{ grid-template-columns:minmax(0,1fr) 290px; column-gap:24px; }
  .apth-hero{ grid-template-columns:minmax(0,1fr); }
  .apth-bottle{ display:none; }
}
@media (max-width:860px){
  .apth-shop{ grid-template-columns:minmax(0,1fr); grid-template-areas:"hero" "rail" "main" "area" "foot"; padding:0 14px; }
  .apth-hero{ grid-template-columns:minmax(0,1fr) 120px; gap:16px; padding:16px 0 18px; align-items:end; }
  .apth-hero__l{ display:contents; }
  .apth-bar__in{ padding:10px 14px; gap:8px; }
  .apth-brand{ flex:1 1 100%; font-size:19px; }
  .apth-drawers{ flex:1 1 100%; gap:6px; }
  .apth-drawer{ flex:0 0 auto; min-height:48px; padding:6px 8px 14px; }
  .apth-drawer > span{ font-size:14px; padding:1px 8px; }
  .apth-drawer::after{ width:9px; height:9px; margin-left:-4px; bottom:3px; }
  .apth-drawer--cta{ flex:1 1 auto; font-size:17px; min-height:48px; padding-bottom:14px; }
  .apth-gilt{ grid-column:1; grid-row:1; padding:14px 12px 16px; }
  .apth-gilt h1{ font-size:26px; }
  .apth-bottle{ display:block; grid-column:2; grid-row:1; margin:22px 0 8px; }
  .apth-bottle__neck{ top:-18px; height:22px; }
  .apth-bottle img{ border-width:4px; }
  .apth-rail{ padding:6px 4px 26px; }
  .apth-rx{ position:static; }
  .apth-intro p{ font-size:18px; }
  .apth-shelves{ grid-template-columns:minmax(0,1fr); }
  .apth-slot{ padding:28px 6px 32px; }
  .apth-slot::after, .apth-slot:nth-child(odd)::after, .apth-slot:nth-child(even)::after{ left:-8px; right:-8px; }
  .city-grid{ columns:2; column-gap:12px; }
}

/* =========================================================
   STANDALONE (estimate wizard + legal pages)
========================================================= */
.est-page{ min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; max-width:1080px; margin:0 auto; padding:0 26px; }
.topbar--estimate{ padding:20px 0 14px; border-bottom:2px solid var(--gold-d); }
.topbar-inner--estimate{ display:flex; justify-content:center; }
.brand--estimate{ display:flex; align-items:center; gap:12px; text-decoration:none; font:700 24px/1.1 'Cormorant SC', serif; letter-spacing:.06em; color:var(--gold-l); }
.brand-logo--estimate{ display:block; width:40px; height:40px; border-radius:50%; border:2px solid var(--gold); background:var(--cream); }
.est-main{ padding:34px 0 44px; }
.est-weave{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:40px; align-items:center; }
.est-weave-media img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:44% 44% 12% 12% / 22% 22% 6% 6%; border:6px solid var(--glass); box-shadow:0 0 0 2px var(--gold-d); }
.est-shell{ min-width:0; color:var(--ink); background:#fbf6e6; padding:22px 24px; border-radius:4px; border:2px solid var(--ink); box-shadow:0 0 0 4px #fbf6e6, 0 0 0 5px var(--ink); }
.est-title{ margin:0 0 12px; font:700 34px/1.1 'Cormorant SC', serif; }
.est-header{ margin-bottom:12px; }
.est-progress{ height:10px; border:1.5px solid var(--ink); background:var(--cream-2); }
.est-bar{ height:100%; width:20%; background:var(--glass); transition:width .25s; }
.est-error{ margin:10px 0; padding:8px 12px; border-left:4px solid var(--red); background:#f6e2d6; color:var(--red); font-size:15px; }
.est-panel label{ display:block; margin:12px 0; font:italic 400 16px Spectral, serif; color:var(--soft); }
.est-panel input, .est-panel select, .est-panel textarea{
  display:block; width:100%; margin-top:4px; padding:10px 4px; border:0; border-bottom:2px dotted var(--ink); background:transparent;
  font:18px Spectral, serif; font-style:normal; color:var(--ink);
}
.est-panel textarea{ border:1.5px solid var(--ink); background:#fffaf0; resize:vertical; }
.est-panel input:focus, .est-panel select:focus, .est-panel textarea:focus{ outline:2px solid var(--red); outline-offset:2px; }
.est-row{ display:grid; grid-template-columns:1fr 110px 110px; gap:10px; }
.est-tcpa{ margin:12px 0 0; font-size:11px; line-height:1.4; color:var(--soft); }
.est-actions{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.est-thanks{ padding:16px; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); font:700 22px/1.2 'Cormorant SC', serif; }
.legal-copy p{ margin:0 0 12px; font-size:16px; }
.est-page footer{ padding:14px 0 22px; border-top:2px solid var(--gold-d); font-size:14px; color:#cdbf9e; text-align:center; }
@media (max-width:820px){
  .est-page{ padding:0 14px; }
  .est-weave{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .est-weave-media{ width:150px; margin:0 auto; }
  .est-row{ grid-template-columns:1fr; }
  .est-shell{ padding:18px 16px; }
  .est-title{ font-size:28px; }
}

/* Slash-joined service names ("Handyman/Repair/Maintenance") are one long
   unbreakable word; render_page passes its length as --h1w so phones can fit it. */
@media (max-width:760px){ h1[style*="--h1w"]{ font-size:calc((100vw - 200px) / (var(--h1w) * .52)) !important; } }

/* keep a wide (min-width:720px) cost table from widening its grid column;
   it scrolls inside its wrapper instead */
.table-scroll{ contain:inline-size; }

/* ---------- sticky top bar ----------
   Brand and drawers sit on a strip of the paneled wall that stays pinned
   while the shop scrolls; a soft shadow fades in once content passes under
   it (scroll-driven where supported). */
.apth-bar{
  position:sticky; top:0; z-index:50;
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 120px), var(--wall-2);
}
.apth-bar__in{
  max-width:1240px; margin:0 auto; padding:12px 30px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap;
}
.topbar--estimate{ position:sticky; top:0; z-index:50; background:var(--wall-2); }
@supports (animation-timeline: scroll()){
  .apth-bar, .topbar--estimate{ animation:apth-lift linear both; animation-timeline:scroll(root); animation-range:0 80px; }
  @keyframes apth-lift{ to{ box-shadow:0 8px 16px -10px rgba(0,0,0,.55); } }
}
@supports not (animation-timeline: scroll()){
  .apth-bar, .topbar--estimate{ box-shadow:0 8px 16px -10px rgba(0,0,0,.55); }
}