/* hb (Claude, 2026-10-12): honeyblooms.org's look for GPT's product demo. Ours, loaded after his
   product-demo.css + product-viewer.css; his layout, markup and behaviour are unchanged.
   Rhythm (brand kit C): a dark heading band, the product on the warm light ground, a dark close.
   The 3D lighting default stays "Neutral studio" (colour accuracy); the stage backdrop is only a pale,
   barely-warm card so the product reads true. Every text pair here is >= 4.5:1 (measured). */
:root{--hb-dark:#17120e;--hb-ink:#1C1208;--hb-ink2:#241809;--hb-ink3:#2E1F0E;--hb-cream:#F3E8CE;--hb-cream-soft:#F3E8CEc7;
  --hb-text:#35281B;--hb-soft:#6A503A;--hb-honey:#C8860A;--hb-honey2:#F0A830;--hb-honey-ink:#895810;
  --hb-ground:#F5EAD0;--hb-card:#FCF7EA;--hb-band:#EEDFBE;--hb-pad:clamp(1.25rem,5vw,6rem);
  --hb-inline:max(var(--hb-pad),calc((100% - 1248px) / 2));
  font-family:Figtree,'Segoe UI',system-ui,sans-serif;color:var(--hb-text);background:var(--hb-dark)}
body{background:var(--hb-dark);color:var(--hb-text)}
.skip{background:var(--hb-honey);color:var(--hb-ink);font-weight:700;border-radius:0 0 6px 0}
main{max-width:none;padding:0}

/* ---- the heading: dark band, Georgia display with the italic honey accent ---- */
.product-heading{margin:0;padding:clamp(2.75rem,6vw,5.5rem) var(--hb-inline) clamp(2.75rem,5vw,4.25rem);color:var(--hb-cream);
  background:radial-gradient(120% 140% at 30% -20%,#F0A8301a 0%,#F0A83000 55%),var(--hb-dark)}
.product-heading .eyebrow{color:var(--hb-honey2);font-size:11px;font-weight:700;letter-spacing:.22em}
.product-heading h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.02em;line-height:1.06;color:var(--hb-cream);max-width:none}
.product-heading h1 em,.product-notes h2 em{font-style:italic;font-weight:400}
.product-heading h1 em{color:var(--hb-honey2)}
.product-heading>p{color:var(--hb-cream-soft)}
.product-heading a:focus-visible{outline-color:var(--hb-honey2)}

/* ---- the product: warm light ground, bridged from the dark band (no butt joint) ---- */
section[data-product]{padding:clamp(5.5rem,9vw,8rem) var(--hb-inline) clamp(3.5rem,6vw,5.5rem);color:var(--hb-text);color-scheme:light;
  background:linear-gradient(180deg,var(--hb-dark) 0,var(--hb-ink3) clamp(1.5rem,2.5vw,2.25rem),#d9c8a6 clamp(3.25rem,5.5vw,4.75rem),var(--hb-ground) clamp(4.5rem,7.5vw,6.5rem));
  --product-ink:var(--hb-text);--product-muted:var(--hb-soft);--product-line:#6A503A40;--product-accent:var(--hb-honey-ink)}
[data-product-stage]{border-radius:8px;border:1px solid #6A503A26;box-shadow:0 18px 44px #2e1f0e1a;
  background:radial-gradient(ellipse at 50% 40%,#FFFDF8 0%,#F7F1E6 58%,#EAE0CE 100%);
  -webkit-touch-callout:none}   /* iOS long-press menu; GPT's viewer (2026-10-13) handles selection, drag and cursors */
[data-product-stage]::after{background:#2E1F0E1f}
/* GPT's viewer (2026-10-15) seats the base on --product-ground at every stage shape; the scene's shadow follows
   it too (AE's groundPct estimate predates that and would lift the shadow on phones) */
section[data-product] [data-product-stage][data-scene-active]::after{bottom:var(--product-ground,9%)}
/* the numbers: an ink disc with a honey ring and cream figures (15:1), readable over the gold body, the red cap
   and the black base alike; the outer shadow ring separates it from the backdrop */
.product-hotspot{background:var(--hb-ink);color:var(--hb-cream);border:2px solid var(--hb-honey2);
  box-shadow:0 0 0 2px #1C120859,0 3px 10px #1C12084d;font-family:Figtree,'Segoe UI',system-ui,sans-serif;font-weight:700;
  transition:transform .18s ease}
.product-hotspot:hover{background:var(--hb-ink3);transform:translate(-50%,-50%) scale(1.08)}
[data-product] :focus-visible{outline:3px solid var(--hb-honey-ink);outline-offset:4px}
/* the numbers' keyboard ring: cream with an ink halo, so it reads on the light card, the dark product and the
   dark scenes behind it alike (review 2026-10-13: the honey-ink ring alone fell to ~1.5:1 on the cabin/campsite) */
.product-hotspot:focus-visible{outline:3px solid var(--hb-cream);outline-offset:3px;box-shadow:0 0 0 3px var(--hb-ink),0 0 0 9px var(--hb-ink)}

/* controls: the site's pill chips on light (card fill, warm border, honey-ink on hover) */
.product-controls button,.product-tools button,.product-tools select{background:var(--hb-card);color:var(--hb-text);
  border:1px solid #6A503A59;font-family:Figtree,'Segoe UI',system-ui,sans-serif;font-size:.9375rem}
.product-controls button:hover:not(:disabled),.product-tools button:hover:not(:disabled),.product-tools select:hover:not(:disabled){border-color:var(--hb-honey-ink);background:#FFFBF2}
[data-product] button:disabled,[data-product] select:disabled{color:#6f5843;background:#EFE4CC;border-color:#d8c7a5}
.product-help,.product-loading,[data-product-status]{color:var(--hb-soft)}
.product-tools label{color:var(--hb-text)}
[data-product-progress]{accent-color:var(--hb-honey-ink)}

/* the notes column */
.product-number{color:var(--hb-honey-ink);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.product-notes h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.01em;line-height:1.12;color:var(--hb-text)}
.product-notes h2 em{color:var(--hb-honey-ink)}
.product-label-intro{color:var(--hb-soft)}
[data-product-labels] summary{color:var(--hb-text)}
[data-product-labels] summary::before{color:var(--hb-honey-ink);font-weight:700}
[data-product-labels] summary::after{color:var(--hb-honey-ink)}
[data-product-labels] details p{color:var(--hb-soft)}
/* the site's primary button: honey fill, ink label (6:1) */
.product-cta{background:var(--hb-honey);color:var(--hb-ink);border-radius:3px;font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;padding:15px 26px;transition:transform .18s}
.product-cta:hover{background:var(--hb-honey2);transform:translateY(-2px)}
.product-credit{color:var(--hb-soft)}

/* ---- the close: back to dark ---- */
.product-closing{margin:0;padding:clamp(5rem,8vw,7rem) var(--hb-inline) clamp(3rem,5vw,4.5rem);border-top:0;color:var(--hb-cream);
  background:linear-gradient(180deg,var(--hb-ground) 0,#d9c8a6 clamp(1.25rem,2vw,1.75rem),var(--hb-ink3) clamp(2.75rem,4.5vw,3.75rem),var(--hb-dark) clamp(4rem,6.5vw,5.5rem))}
.product-closing p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.4;color:var(--hb-cream)}
.product-closing a{color:var(--hb-honey2);font-weight:700;gap:.35em}   /* GPT's inline-flex drops the space before the arrow */
.product-closing a:focus-visible,.site-footer a:focus-visible{outline:3px solid var(--hb-honey2);outline-offset:4px}
.site-footer{border-top:1px solid #F0A8301f;color:var(--hb-cream-soft);background:var(--hb-dark);padding-inline:var(--hb-inline)}
.site-footer a{color:var(--hb-cream)}
.site-footer a:hover,.product-closing a:hover{color:var(--hb-honey2)}

@media(max-width:700px){
  .product-notes{background:var(--hb-card);border:1px solid #0000000d;border-radius:6px;position:relative}
  .product-notes::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--hb-honey);border-radius:6px 6px 0 0}
  [data-product-labels] details[open]{background:var(--hb-ground)}
  [data-product-stage]{border-radius:8px}
}
@media(prefers-reduced-motion:reduce){.product-hotspot,.product-cta{transition:none}.product-hotspot:hover{transform:translate(-50%,-50%)}.product-cta:hover{transform:none}}
@media(forced-colors:active){.product-hotspot{border-color:ButtonText}}