/* ============================================================
   Cast Iron Range Cookers — bespoke theme on vanilla Bootstrap 5
   Our own clean code. Palette/feel kept equivalent to the first
   mockup (serene, warm), so this is a like-for-like to compare.
   ============================================================ */

:root{
  --ink:#2b2420;
  --stone:#6d655d;
  --accent:#9a5b34;
  --accent-dark:#7d4526;
  --cream:#f7f4ef;
  --line:#e9e3da;
  /* Live header height. This value is only the FALLBACK: inc/footer.php measures the
     real header and overwrites it on load and on resize
     (setProperty('--hdr', header.offsetHeight)), so the runtime value is always
     correct whatever the header ends up being.

     It still earns being accurate, because it is what the first paint uses before
     that script runs — a wrong number here shows as a jump. Raised 150 -> 178 when
     the logo went to 80px: info-bar 42 + menu-bar 96 (80px logo + navbar py-2)
     + ticker 40, measured from the rendered page.

     Consumers: .hero height, .product-side sticky top, .faq-nav sticky top and
     .faq-section scroll-margin-top. */
  --hdr:178px;
  /* --bar is the brand burgundy: the top info-bar, and the red accents everywhere else
     (Make an enquiry, newsletter button, Stop press / Ask us, chat header).
     #6b0c0a is measured from the logo plaque itself (images/logo-circ-header.png, the
     dominant plaque tone). It was #800000, the live site's theme colour, which reads as a
     brighter red than the logo beside it — client, 7 Oct 2026. */
  --bar:#6b0c0a;
  --bar-text:#efe9e2;
  /* Was .5, which blends to roughly #b87571 on the burgundy — about 2.3:1, well
     under the 4.5:1 needed for body text, and the client reported the footer's
     secondary lines as hard to read. At .82 it lands near 6.3:1 and still reads
     as secondary against full --bar-text. */
  --bar-muted:rgba(239,233,226,.82);
  /* Footer: dark charcoal as on the current site (its .footer is #343434), with burgundy
     kept for accents only — client, 7 Oct 2026. --bar-text / --bar-muted read as well on
     it as they did on the burgundy. */
  --footer-bg:#343434;
  /* The Reviews button's gold. Also the thin outline on the burgundy buttons, so they
     hold their edge where they float over the charcoal footer. */
  --gold:#e0a520;
}

body{ font-family:'Nunito',system-ui,sans-serif; color:var(--ink); }
h1,h2,h3,h4,h5{ font-family:'Jost',system-ui,sans-serif; font-weight:400; }
a{ text-decoration:none; }
.text-accent{ color:var(--accent) !important; }
.bg-cream{ background:var(--cream); }
.eyebrow{ text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--accent); }
/* THE site button: logo burgundy, white text, thin gold outline — the same look as the
   floating buttons and the newsletter button. Client, 13 Oct 2026: "all the buttons across
   the site will have the same look", so every public call to action uses this one class
   (the tan .btn-accent was retired the same day). Set through Bootstrap's own --bs-btn-*
   variables so hover, focus, active and disabled all follow; the gold edge stays throughout. */
.btn-brand{
  --bs-btn-color:#fff; --bs-btn-bg:var(--bar); --bs-btn-border-color:var(--gold);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:color-mix(in srgb, var(--bar) 82%, #000); --bs-btn-hover-border-color:var(--gold);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:color-mix(in srgb, var(--bar) 75%, #000); --bs-btn-active-border-color:var(--gold);
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--bar); --bs-btn-disabled-border-color:var(--gold);
  --bs-btn-focus-shadow-rgb:224,165,32;
}

/* ===== STATIC HEADER — info bar + menu, both fixed ===== */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:1040; }

.info-bar{ background:var(--bar); color:var(--bar-text); font-size:.82rem; }
.info-bar a{ color:var(--bar-text); }
.info-bar a:hover{ color:#e8a33d; }
.info-bar .bi{ color:var(--bar-text); margin-right:.35rem; }
.info-bar .sep{ opacity:.28; margin:0 .8rem; }
/* Social icons each sit in a small white box, as on the current site, so they don't
   disappear into the burgundy (client, 7 Oct 2026). */
.info-bar .soc{ width:26px; height:26px; border-radius:3px; background:#fff;
  display:inline-flex; align-items:center; justify-content:center; margin-left:.35rem;
  transition:background .2s ease; }
.info-bar .soc .bi{ color:var(--bar); margin:0; }
.info-bar .soc:hover{ background:var(--gold); }
.info-bar .soc:hover .bi{ color:var(--ink); }

.menu-bar{ background:#fff; box-shadow:0 2px 14px rgba(0,0,0,.07); }
.menu-bar .nav-link{ font-family:'Jost',sans-serif; color:var(--ink); font-size:1.12rem; padding:.45rem .7rem; letter-spacing:.01em; }
@media (min-width:992px) and (max-width:1199px){ .menu-bar .nav-link{ font-size:1.02rem; padding:.45rem .45rem; } }
.menu-bar .nav-link:hover, .menu-bar .nav-item.show > .nav-link{ color:var(--accent); }
.dropdown-menu{ border:none; border-radius:6px; box-shadow:0 14px 40px rgba(0,0,0,.14); font-size:.92rem; }
.dropdown-item:active{ background:var(--accent); }

/* mega-menu for The Cookers */
.mega{ left:auto; right:0; width:min(1120px,96vw); max-height:74vh; overflow:auto; padding:1.4rem 1.6rem; }
.mega h6{ font-family:'Jost'; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem;
  color:var(--accent); border-bottom:1px solid var(--line); padding-bottom:.4rem; margin-bottom:.5rem; }
.mega a{ display:block; color:var(--stone); padding:.16rem 0; font-size:.85rem; }
.mega a:hover{ color:var(--accent); }
@media (min-width:992px){ .menu-bar .dropdown:hover > .dropdown-menu{ display:block; margin-top:0; } }

/* ===== TICKER — smooth continuous scroll (pauses on hover) ===== */
.tk-bar{ background:var(--cream); border-top:1px solid var(--line); font-size:.9rem; }
/* Logo burgundy, white text, thin gold outline — the floating buttons' look (client, 13 Oct 2026). */
.tk-tag{ background:var(--bar); color:#fff; border:1px solid var(--gold); font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
  padding:3px 11px; border-radius:20px; margin-right:14px; white-space:nowrap; flex:0 0 auto; }
.tk-scroll-mask{ flex:1 1 auto; overflow:hidden; }
/* --tk-dur is set per page by inc/ticker.php from the length of the text, so the ticker
   moves at a steady reading speed however many messages it carries. A fixed duration made
   it faster with every message added (7 items at 32s was ~180px/s). */
.tk-scroll-track{ display:inline-flex; gap:3rem; white-space:nowrap; will-change:transform; animation:tkscroll var(--tk-dur, 32s) linear infinite; }
.tk-scroll-el:hover .tk-scroll-track{ animation-play-state:paused; }
.tk-scroll-track .bi{ color:var(--accent); margin-right:.4rem; }
@keyframes tkscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===== LOGO — the recognisable brand plaque (restored per client) ===== */
.menu-bar .navbar-brand{ padding-top:0; padding-bottom:0; }
/* 80px matches the live site, which renders s-circ-header.jpg at its natural 80px
   (its .raleway-logo rule has the width/height commented out). v2 was at 50px,
   which is why the logo read as small against live with air above and below.
   Mobile is 60px rather than a proportional 67px: at 80px the plaque is 281px
   wide, which crowds the burger toggle on a 375px screen. */
.menu-bar .navbar-brand img{ height:80px; width:auto; display:block; }
@media (max-width:575px){ .menu-bar .navbar-brand img{ height:60px; } }

/* ===== HERO carousel (Bootstrap) — no text overlay ===== */
.hero .carousel, .hero .carousel-inner, .hero .carousel-item{ height:calc(100vh - var(--hdr)); min-height:440px; }
.hero-slide{ height:100%; background-size:cover; background-position:center; }
.hero .carousel-control-prev, .hero .carousel-control-next{ width:6%; opacity:.65; }
.hero .carousel-control-prev:hover, .hero .carousel-control-next:hover{ opacity:1; }
.scroll-cue{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3; color:#fff;
  opacity:.85; font-size:1.5rem; animation:bob 2s infinite; }
@keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(8px); } }

/* ===== cooker grid ===== */
/* ===== hero overlay =====
   One line and one button over the carousel. The scrim is load-bearing, not decoration:
   the five slides are drawn daily from a pool that mixes light and dark backgrounds, so
   the text has no fixed image to be checked against. The gradient sits under the words
   only — the top of the picture stays clean, which is the point of a big hero. */
.hero{ position:relative; }
.hero-overlay{ position:absolute; inset:auto 0 0 0; z-index:2; padding:0 0 clamp(3rem,9vh,6rem);
  background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.44) 45%, rgba(0,0,0,0) 100%);
  pointer-events:none; }
.hero-overlay .container{ pointer-events:auto; }
.hero-headline{ color:#fff; font-family:'Jost',sans-serif; font-weight:500;
  font-size:clamp(1.6rem,4.2vw,2.9rem); line-height:1.15; margin:0 0 1.1rem;
  text-shadow:0 2px 18px rgba(0,0,0,.45); max-width:18ch; }
.hero-cta{ padding:.7rem 1.8rem; font-size:1.02rem; }/* The scroll cue and the arrows sit above the scrim, not under it. */
.hero .scroll-cue, .hero .carousel-control-prev, .hero .carousel-control-next{ z-index:3; }
@media (max-width:575px){
  .hero-overlay{ padding-bottom:clamp(2.2rem,7vh,3.5rem); }
  .hero-headline{ max-width:14ch; }
}

/* ===== strapline band =====
   The bricks-and-mortar claim, out of the paragraph and next to the evidence. */
.strapline-band{ background:var(--cream); }
.strapline{ font-family:'Jost',sans-serif; font-weight:500; color:var(--ink);
  font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.3; }
.strapline-photo, .strapline-band picture img{ width:100%; height:auto; border-radius:4px;
  box-shadow:0 10px 30px rgba(43,36,32,.14); }

/* ===== "Hi, I'm Andy" on the Journal page ===== */
.author-card{ display:flex; align-items:center; gap:1.25rem; max-width:44rem; margin:0 auto;
  padding:1.1rem 1.4rem; background:var(--cream); border-radius:6px; }
/* 140px at the client's request (16 Sep 2026) — the photo read too small. The source
   is andy-journal.jpg at 1000x1251, so there is roughly 7x of headroom left and no
   risk of softening. */
.author-photo{ flex:0 0 auto; width:140px; height:140px; border-radius:50%; object-fit:cover;
  object-position:center 18%; border:3px solid #fff; box-shadow:0 3px 12px rgba(0,0,0,.16); }
.author-words{ font-family:'Jost',sans-serif; font-size:clamp(1rem,2vw,1.18rem);
  line-height:1.45; color:var(--ink); }
@media (max-width:575px){
  .author-card{ flex-direction:column; text-align:center; gap:.9rem; }
  .author-photo{ width:110px; height:110px; }
}

/* Andy at the top of every note. Same round treatment as the Journal index, but sitting on
   a photographic hero band rather than a flat panel — hence the heavier ring and shadow,
   which is what keeps a face legible over an unpredictable background. */
.jr-hero-photo{ width:88px; height:88px; border-radius:50%; object-fit:cover;
  object-position:center 18%; border:3px solid #fff;
  box-shadow:0 4px 18px rgba(0,0,0,.35); }
@media (max-width:575px){ .jr-hero-photo{ width:72px; height:72px; } }

/* ===== the small face on the Journal tile =====
   The ring is what keeps it legible: the tile photo behind it is chosen at random. */
/* 96px at the client's request (16 Sep 2026) — it read too small on the tile. The
   source is andy-portrait.jpg at 401x401, so 96px still has ~4x of headroom and
   stays crisp on a high-DPI screen. */
.cooker-tile .tile-avatar{ position:absolute; top:14px; right:14px; z-index:2;
  width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:center 22%;
  border:3px solid #fff; box-shadow:0 3px 12px rgba(0,0,0,.3); transition:none; }
.cooker-tile:hover .tile-avatar{ transform:none; }
@media (max-width:575px){ .cooker-tile .tile-avatar{ width:76px; height:76px; top:10px; right:10px; } }

.cooker-tile{ position:relative; display:block; overflow:hidden; border-radius:4px; }
.cooker-tile img{ width:100%; height:340px; object-fit:cover; transition:transform .7s ease; }
.cooker-tile:hover img{ transform:scale(1.06); }
.cooker-tile .cap{ position:absolute; inset:auto 0 0 0; padding:26px 22px 18px; color:#fff;
  background:linear-gradient(to top, rgba(20,15,12,.78), rgba(20,15,12,0)); }
.cooker-tile .cap h3{ color:#fff; margin:0; font-weight:500; }
.cooker-tile .cap span{ font-size:.82rem; opacity:.85; text-transform:uppercase; letter-spacing:.14em; }

/* ===== video grid ===== */
.video-tile{ position:relative; display:block; overflow:hidden; border-radius:4px; cursor:pointer; }
.video-tile img{ width:100%; height:180px; object-fit:cover; filter:brightness(.9); transition:.4s; }
.video-tile:hover img{ filter:brightness(1); transform:scale(1.04); }
.video-tile .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.video-tile .play span{ width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.92);
  color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }

/* ===== video captions ===== */
/* Homepage "Watch & learn": the title sits under the thumbnail. */
.video-tile-title{ font-family:'Jost',sans-serif; font-size:.95rem; color:var(--ink);
  margin:.6rem 0 0; line-height:1.35; }

/* Product sidebar: the caption sits over the foot of the thumbnail, so a
   column of videos stays compact. The gradient keeps it readable whatever the
   frame behind it happens to be. */
.video-card{ position:relative; display:block; }
.video-card .video-caption{ position:absolute; left:0; right:0; bottom:0;
  padding:1.6rem .7rem .55rem; text-align:left; color:#fff; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.55) 55%, transparent); }
.video-card .video-caption-title{ display:block; font-family:'Jost',sans-serif;
  font-size:.86rem; line-height:1.3; }
.video-card .video-caption-desc{ display:block; font-size:.74rem; line-height:1.3;
  color:rgba(255,255,255,.82); margin-top:.15rem; }

/* ===== floating actions ===== */
.floating-actions{ position:fixed; right:22px; bottom:22px; z-index:1030; display:flex; flex-direction:column; gap:12px; }
.floating-actions button{ border:none; border-radius:40px; padding:12px 20px; font-weight:600; font-size:.85rem;
  box-shadow:0 6px 20px rgba(0,0,0,.18); cursor:pointer; }
/* Stop press (and the Ask us launcher, below) in the logo burgundy with a thin gold
   outline to match Reviews — client, 7 Oct 2026. The outline is what keeps them visible
   when they scroll over the charcoal footer. `.floating-actions .fab-press` rather than
   `.fab-press`, to outrank the `border:none` on `.floating-actions button`. */
.floating-actions .fab-press{ background:var(--bar); color:#fff; border:1px solid var(--gold); }
.floating-actions .fab-press:hover{ background:color-mix(in srgb, var(--bar) 82%, #000); color:#fff; }
/* Reviews gets the gold of a star rating rather than another brand colour, so it reads as
   what it is at a glance. Deep gold with near-black text, NOT gold with white: white on
   amber lands around 2:1 contrast and fails WCAG AA, and this is a button people are meant
   to find. #2b2420 on #e0a520 clears 7:1.
   Note the two buttons also shared bi-star-fill, which is half of why they looked alike —
   Stop press now uses a megaphone. */
.fab-reviews{ background:var(--gold); color:var(--ink); }
.fab-reviews:hover{ background:#c88f17; color:var(--ink); }

/* Newsletter button, anchored in the footer's Opening hours column. Burgundy is the
   footer's accent now the footer itself is charcoal, with the same thin gold outline as
   the floating buttons so it stands out (client, 7 Oct 2026). */
.footer-news{ display:inline-flex; align-items:center; margin-top:.2rem;
  background:var(--bar); border:1px solid var(--gold);
  border-radius:40px; padding:.55rem 1.15rem; color:#fff; font:inherit;
  font-weight:600; font-size:.9rem; cursor:pointer; text-align:left;
  transition:background .2s ease; }
.footer-news:hover, .footer-news:focus-visible{ background:color-mix(in srgb, var(--bar) 82%, #000); color:#fff; }

/* reviews panel — live Google rating + curated testimonials */
.reviews-rating{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem; text-decoration:none;
  background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:.75rem 1rem; margin-bottom:1.1rem; color:var(--ink); }
.reviews-rating:hover{ border-color:var(--accent); }
.reviews-stars{ color:#e8a33d; letter-spacing:1px; }
.reviews-score strong{ font-size:1.2rem; }
.reviews-count{ color:var(--stone); font-size:.9rem; }
.reviews-link{ margin-left:auto; color:var(--accent); font-weight:600; font-size:.85rem; white-space:nowrap; }
.review-item{ padding:.95rem 0; border-bottom:1px solid var(--line); }
.review-item:last-child{ border-bottom:0; padding-bottom:0; }
.review-stars{ color:#e8a33d; letter-spacing:1px; font-size:.95rem; }
.review-quote{ margin:.35rem 0; font-size:.98rem; line-height:1.55; color:var(--ink); }
.review-by{ font-size:.85rem; color:var(--stone); font-weight:600; }

/* testimonials shown ON a page (Why Choose Us) — cards, not the panel's divided list */
.page-reviews .review-card{ background:var(--cream); border:1px solid var(--line); border-radius:8px;
  padding:1.1rem 1.2rem; margin:0; display:flex; flex-direction:column; }
.page-reviews .review-quote{ font-size:1rem; flex:1 1 auto; }
.page-reviews .review-by{ margin-top:.4rem; }

/* cookie consent gate */
.cookie-consent{ position:fixed; left:0; right:0; bottom:0; z-index:1080; background:var(--ink); color:#fff;
  box-shadow:0 -6px 24px rgba(0,0,0,.25); }
.cookie-consent[hidden]{ display:none; }
.cookie-consent .cc-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; padding:.9rem 1rem; }
.cookie-consent .cc-text{ flex:1 1 320px; margin:0; font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.9); }
.cookie-consent .cc-text a{ color:#f0c9ac; }
.cookie-consent .cc-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.cookie-consent .cc-btn{ border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff;
  border-radius:40px; padding:.5rem 1.15rem; font-size:.85rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.cookie-consent .cc-reject:hover{ background:rgba(255,255,255,.12); }
.cookie-consent .cc-accept{ background:var(--bar); border-color:var(--gold); }
.cookie-consent .cc-accept:hover{ filter:brightness(1.08); }
@media (max-width:575.98px){ .cookie-consent .cc-actions{ width:100%; } .cookie-consent .cc-btn{ flex:1; text-align:center; } }

/* ===== footer ===== */
.site-footer{ background:var(--footer-bg); color:var(--bar-text); font-size:.9rem; }
.site-footer h4{ color:var(--bar-text); font-size:1.05rem; margin-bottom:1rem; }
.site-footer a{ color:var(--bar-text); }
.site-footer a:hover{ color:#e8a33d; }
.site-footer .bi{ color:var(--bar-text); }
.site-footer .list-unstyled li{ padding:.15rem 0; }
.site-footer .footer-showroom{ border-bottom:1px solid color-mix(in srgb, var(--bar-text) 14%, transparent); }
.site-footer .footer-showroom p{ color:var(--bar-text); }
.site-footer .copyright{ border-top:1px solid color-mix(in srgb, var(--bar-text) 14%, transparent); color:var(--bar-muted); font-size:.82rem; }

@media (max-width:991.98px){ .info-bar .d-hide-sm{ display:none !important; } }

/* ===== extended spacing — vanilla Bootstrap ships only 0–5 ===== */
.pt-6{ padding-top:5rem; } .pb-6{ padding-bottom:5rem; } .py-6{ padding-top:5rem; padding-bottom:5rem; }
.pt-7{ padding-top:7rem; } .pb-7{ padding-bottom:7rem; } .py-7{ padding-top:7rem; padding-bottom:7rem; }
@media (min-width:768px){ .py-md-6{ padding-top:5rem; padding-bottom:5rem; } }

/* stop-press count badge on the floating button */
.fab-badge{ background:#fff; color:var(--bar); border-radius:20px; font-size:.72rem; font-weight:800; padding:1px 7px; margin-left:6px; }

/* ===== PRODUCT PAGE ===== */
.product-hero{ position:relative; background:var(--ink); background-size:cover; background-position:center;
  min-height:300px; display:flex; align-items:flex-end; padding:2.5rem 0; }
.product-hero::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,15,12,.82), rgba(20,15,12,.28)); }
.product-hero .container{ position:relative; z-index:1; }
.product-hero .eyebrow{ color:#f0c9ac; }
.product-hero h1{ color:#fff; font-size:2.3rem; max-width:22ch; }

.product-subtitle{ font-size:1.5rem; color:var(--ink); }
.product-price{ color:var(--accent); font-size:1.1rem; }
.product-price strong{ font-weight:700; }

/* body copy from the DB — keep embedded media tidy */
.product-copy{ color:#4a423b; line-height:1.75; }
.product-copy p{ margin-bottom:1rem; }
.product-copy a{ color:var(--accent); }
.product-copy img{ max-width:100%; height:auto; border-radius:4px; }
.product-copy iframe{ max-width:100%; aspect-ratio:16/9; height:auto; border-radius:6px; margin:.5rem 0 1rem; }
.product-copy h2,.product-copy h3,.product-copy h4{ margin-top:1.5rem; margin-bottom:.6rem; }
/* spec tables in product copy — label column left, values right */
.product-copy table{ width:100%; border-collapse:collapse; margin-bottom:1rem; font-size:.95rem; }
.product-copy th,.product-copy td{ padding:.45rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; }
.product-copy th{ color:var(--ink); font-weight:600; white-space:nowrap; }
/* a quotation in product copy (Lacanche: Jean-Christophe Novelli, sql/036) */
.product-copy blockquote{ margin:0 0 1rem; padding-left:1rem; border-left:3px solid var(--accent); font-style:italic; }
.product-copy blockquote > :last-child{ margin-bottom:0; }

/* gallery grid + lightbox */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:575.98px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
.gallery-thumb{ border:none; padding:0; background:none; overflow:hidden; border-radius:4px; cursor:pointer; aspect-ratio:1; }
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-thumb:hover img{ transform:scale(1.07); }
.gallery-full{ width:auto; max-width:100%; max-height:82vh; object-fit:contain; }
.gallery-close{ position:absolute; top:-2.4rem; right:0; z-index:3; }

/* ===== product body — masonry board ===== */
/* responsive_img() wrapper — lay out the inner <img> as if the <picture> weren't
   there, so every existing `.x img` rule (cover crops, hovers, sizing) still applies */
picture.rimg{ display:contents; }

.masonry{ columns:2; column-gap:1rem; }
@media (max-width:767.98px){ .masonry{ columns:1; } }
.m-tile{ break-inside:avoid; margin:0 0 1rem; }
.m-tile--text{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:1.15rem 1.3rem; }
.m-tile--text .product-copy > :last-child{ margin-bottom:0; }
.m-tile--lead{ background:#fff; }
.m-tile--lead .product-copy{ font-size:1.12rem; color:var(--ink); }
/* image tiles are <button>s (open the lightbox) — reset button chrome */
.m-tile--img{ display:block; width:100%; padding:0; border:none; background:none; text-align:left;
  cursor:pointer; margin:0 0 1rem; border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(43,36,32,.10); }
.m-tile--img img{ display:block; width:100%; height:auto; transition:transform .6s ease; }
.m-tile--img:hover img{ transform:scale(1.05); }
.m-tile--img:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ===== image gallery — filterable masonry + lightbox ===== */
.gallery-filter{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:2.2rem; }
.gallery-filter button{ border:1px solid var(--line); background:#fff; color:var(--stone);
  font-family:'Jost',sans-serif; font-size:.9rem; padding:.45rem 1.15rem; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:.45rem; transition:color .2s, background .2s, border-color .2s; }
.gallery-filter button .n{ font-size:.72rem; opacity:.6; }
.gallery-filter button:hover{ border-color:var(--accent); color:var(--ink); }
.gallery-filter button.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.gallery-filter button.active .n{ color:#fff; opacity:.8; }

.gallery-masonry{ columns:4; column-gap:14px; }
@media (max-width:1199.98px){ .gallery-masonry{ columns:3; } }
@media (max-width:767.98px){ .gallery-masonry{ columns:2; } }
@media (max-width:479.98px){ .gallery-masonry{ columns:1; } }
.g-tile{ display:block; width:100%; break-inside:avoid; margin:0 0 14px; padding:0; border:none;
  background:none; cursor:pointer; border-radius:10px; overflow:hidden; position:relative; }
.g-tile img{ display:block; width:100%; height:auto; transition:transform .6s ease; }
.g-tile:hover img{ transform:scale(1.06); }
.g-tile::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(43,36,32,.6), transparent 45%); opacity:0; transition:opacity .3s; }
.g-tile:hover::after{ opacity:1; }
.g-cap{ position:absolute; left:12px; bottom:10px; z-index:2; color:#fff; font-family:'Jost',sans-serif;
  font-size:.85rem; letter-spacing:.02em; opacity:0; transform:translateY(6px);
  transition:opacity .3s, transform .3s; display:inline-flex; align-items:center; gap:.4rem; }
.g-tile:hover .g-cap{ opacity:1; transform:none; }

.glx{ position:fixed; inset:0; z-index:2000; background:rgba(20,16,14,.92);
  display:none; align-items:center; justify-content:center; }
.glx.open{ display:flex; }
.glx > img{ max-width:92vw; max-height:86vh; object-fit:contain; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.glx-cap{ position:absolute; bottom:22px; left:0; right:0; text-align:center; color:#efe9e2;
  font-family:'Jost',sans-serif; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; }
.glx-btn{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:none; background:rgba(255,255,255,.12); color:#fff; font-size:1.35rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s; }
.glx-btn:hover{ background:rgba(255,255,255,.26); }
.glx-prev{ left:20px; } .glx-next{ right:20px; }
.glx-close{ top:20px; right:20px; transform:none; width:44px; height:44px; font-size:1.5rem; line-height:1; }
@media (max-width:575.98px){ .glx-btn{ width:42px; height:42px; } .glx-prev{ left:8px; } .glx-next{ right:8px; } }

/* sidebar CTA card */
.product-side{ position:sticky; top:calc(var(--hdr) + 20px); }
.side-card{ background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:1.3rem 1.4rem; }
.side-title{ font-size:1.05rem; color:var(--ink); margin-bottom:.9rem; }
.side-cta .bi{ color:var(--accent); }
.side-cta a{ color:var(--accent); }
.side-cta .btn-brand{ color:#fff; }
/* sidebar section-nav (About Us group, etc.) */
.side-nav{ margin-bottom:1.4rem; }
.side-nav-list{ list-style:none; margin:0; padding:0; }
.side-nav-list li + li{ border-top:1px solid var(--line); }
.side-nav-list a{ display:block; padding:.6rem .2rem; color:var(--stone); font-family:'Jost',sans-serif;
  font-size:.98rem; text-decoration:none; transition:color .2s, padding-left .2s; }
.side-nav-list a:hover{ color:var(--ink); padding-left:.45rem; }
.side-nav-list a.active{ color:var(--accent); font-weight:600; }
/* brochure download grid (section/download.html) */
.brochure-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:991.98px){ .brochure-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479.98px){ .brochure-grid{ grid-template-columns:1fr; } }
.brochure-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;
  transition:box-shadow .2s, transform .2s; }
.brochure-card:hover{ box-shadow:0 8px 24px rgba(43,36,32,.12); transform:translateY(-2px); }
.brochure-cover{ display:block; background:var(--cream); aspect-ratio:3/4; overflow:hidden; }
.brochure-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.brochure-cover--ph{ display:flex; align-items:center; justify-content:center; color:var(--stone); font-size:2.8rem; }
.brochure-meta{ padding:.85rem 1rem; display:flex; flex-direction:column; gap:.35rem; }
.brochure-name{ font-family:'Jost',sans-serif; font-weight:500; font-size:1rem; line-height:1.3; }
.brochure-dl{ font-size:.85rem; color:var(--accent); display:inline-flex; align-items:center; gap:.35rem; }

/* pre-owned stock list (section/pre-owned.html) */
.preowned-item{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:1.4rem 1.5rem; }
.preowned-item + .preowned-item{ margin-top:1.5rem; }
.preowned-title{ font-size:1.45rem; margin-bottom:.35rem; }
.preowned-price{ color:var(--accent); font-family:'Jost',sans-serif; font-weight:600; font-size:1.15rem; margin-bottom:1rem; }
.preowned-photos{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-bottom:1.2rem; }
@media (max-width:575.98px){ .preowned-photos{ grid-template-columns:repeat(2,1fr); } }
.preowned-photo{ display:block; padding:0; border:none; background:var(--cream); border-radius:8px; overflow:hidden;
  aspect-ratio:1/1; cursor:zoom-in; }
.preowned-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.preowned-photo:hover img{ transform:scale(1.05); }
.preowned-photo:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.preowned-notes{ border-top:1px solid var(--line); padding-top:.9rem; margin-top:.9rem; }
.preowned-none{ background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; }

/* Brochure-by-post request form (reinstated) */
.brochure-post{ border-top:1px solid var(--line); padding-top:1.6rem; }
.bp-toggle{ display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; font-size:1rem; }
.bp-toggle input{ margin-top:.25rem; width:1.1rem; height:1.1rem; flex:0 0 auto; accent-color:var(--accent); }
.brochure-request .bp-brochures{ border:1px solid var(--line); border-radius:8px; padding:1rem 1.1rem; }
.brochure-request .bp-brochures legend{ float:none; width:auto; font-family:'Jost',sans-serif; font-size:.9rem;
  color:var(--stone); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.6rem; padding:0; }
.bp-check{ display:flex; align-items:center; gap:.55rem; font-size:.95rem; padding:.22rem 0; cursor:pointer; }
.bp-check input{ width:auto; margin:0; accent-color:var(--accent); }

/* sidebar video card */
.side-video .video-card{ position:relative; display:block; width:100%; padding:0; border:none; background:none;
  border-radius:6px; overflow:hidden; cursor:pointer; margin-bottom:.7rem; }
.side-video .video-card:last-child{ margin-bottom:0; }
.side-video .video-card img{ width:100%; height:auto; display:block; filter:brightness(.92); transition:filter .3s ease, transform .5s ease; }
.side-video .video-card:hover img{ filter:brightness(1); transform:scale(1.04); }
.side-video .video-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.side-video .video-play i{ width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.92);
  color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:1.3rem; }

/* FAQ accordion (themed to the palette) */
.faq-section h2{ font-size:1.5rem; }
.faq-accordion{
  --bs-accordion-color:var(--ink);
  --bs-accordion-bg:#fff;
  --bs-accordion-btn-color:var(--ink);
  --bs-accordion-active-color:var(--accent);
  --bs-accordion-active-bg:var(--cream);
  --bs-accordion-border-color:var(--line);
  --bs-accordion-btn-focus-box-shadow:none;
}
.faq-accordion .accordion-item{ border:1px solid var(--line); border-radius:8px !important; margin-bottom:.7rem; overflow:hidden; }
.faq-accordion .accordion-button{ font-family:'Jost',sans-serif; font-weight:500; }
.faq-accordion .accordion-body{ color:#4a423b; line-height:1.7; }

/* breadcrumbs */
.crumbs{ background:var(--cream); border-bottom:1px solid var(--line); font-size:.85rem; padding:.6rem 0; }
.crumbs .bi{ color:var(--stone); font-size:.68rem; margin:0 .5rem; opacity:.6; }
.crumbs a{ color:var(--stone); }
.crumbs a:hover{ color:var(--accent); }
.crumbs span{ color:var(--ink); }

/* brand pager (prev / next through the range) */
.brand-pager-wrap{ border-top:1px solid var(--line); padding:1.6rem 0 3rem; }
.brand-pager{ display:flex; justify-content:space-between; gap:1rem; }
.brand-pager a{ display:flex; align-items:center; gap:.75rem; color:var(--ink); text-decoration:none;
  padding:.7rem 1.1rem; border:1px solid var(--line); border-radius:8px; max-width:47%;
  transition:border-color .2s ease, background .2s ease; }
.brand-pager a:hover{ border-color:var(--accent); background:var(--cream); }
.brand-pager .bi{ color:var(--accent); font-size:1.25rem; flex:0 0 auto; }
.brand-pager small{ display:block; text-transform:uppercase; letter-spacing:.1em; font-size:.62rem; color:var(--stone); }
.brand-pager strong{ display:block; font-weight:600; font-size:.98rem; }
.pager-next{ text-align:right; margin-left:auto; }

/* ===== FAQ archive page ===== */
.faq-hero{ background:var(--cream); border-bottom:1px solid var(--line); }

/* ===== page hero band — random letterbox bg for non-product pages ===== */
.page-hero{ position:relative; background:var(--ink); background-size:cover; background-position:center;
  border-bottom:1px solid var(--line); }
.page-hero::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,15,12,.86), rgba(20,15,12,.5)); }
.page-hero > .container{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; }
.page-hero .eyebrow{ color:#f0c9ac; }
.page-hero .text-secondary{ color:rgba(255,255,255,.86) !important; }

/* available-colours swatch grid (Everhot). Each image is a square studio shot with
   the colour name baked in, so no separate caption is needed. */
.colour-swatches{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1rem; }
.colour-swatches li{ margin:0; }
.colour-swatches img{ display:block; width:100%; height:auto; border-radius:8px;
  border:1px solid var(--line); background:#fff; transition:transform .18s ease, box-shadow .18s ease; }
.colour-swatches img:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.08); }

.faq-nav{ position:sticky; top:var(--hdr); z-index:1020; background:#fff;
  border-bottom:1px solid var(--line); box-shadow:0 4px 14px rgba(0,0,0,.04); }
.faq-nav-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.4rem; padding:.75rem 0; }
.faq-search{ position:relative; flex:1 1 240px; max-width:340px; }
.faq-search .bi{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--stone); font-size:.9rem; }
.faq-search input{ width:100%; border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1rem .5rem 2.35rem; font-family:'Nunito',sans-serif; font-size:.92rem;
  color:var(--ink); background:var(--cream); }
.faq-search input:focus{ outline:none; border-color:var(--accent); background:#fff; }
.faq-jumps{ display:flex; flex-wrap:wrap; gap:.5rem; }
.faq-jumps a{ font-family:'Jost',sans-serif; font-size:.85rem; color:var(--stone);
  border:1px solid var(--line); border-radius:999px; padding:.3rem .85rem;
  display:inline-flex; align-items:center; gap:.4rem; transition:color .2s, background .2s, border-color .2s; }
.faq-jumps a .n{ font-size:.72rem; opacity:.55; }
.faq-jumps a:hover{ border-color:var(--accent); color:var(--ink); }
.faq-jumps a.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.faq-jumps a.active .n{ color:#fff; opacity:.85; }

.faq-wrap{ max-width:860px; padding-top:2.4rem; padding-bottom:4rem; }
.faq-section{ scroll-margin-top:calc(var(--hdr) + 66px); }
.faq-section + .faq-section{ margin-top:2.6rem; }
.faq-section-head{ margin-bottom:1.1rem; }
.faq-section-head h2{ font-size:1.6rem; display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:.35rem; }
.faq-count{ font-family:'Nunito',sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--accent); }
.faq-accordion .accordion-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.faq-accordion .accordion-body p:last-child{ margin-bottom:0; }
.faq-noresults{ text-align:center; color:var(--stone); padding:2.5rem 0; }
.btn-link-accent{ border:none; background:none; color:var(--accent); text-decoration:underline;
  cursor:pointer; font:inherit; padding:0; }

/* ===== Contact page ===== */
.contact-form label{ display:block; font-family:'Jost',sans-serif; font-size:.85rem; color:var(--ink);
  margin-bottom:.35rem; }
.contact-form .req{ color:var(--accent); }
.contact-form input, .contact-form textarea{ width:100%; border:1px solid var(--line); border-radius:8px;
  padding:.6rem .8rem; font-family:'Nunito',sans-serif; font-size:.95rem; color:var(--ink);
  background:#fff; transition:border-color .2s ease; }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--accent); }
.contact-form textarea{ resize:vertical; min-height:130px; }
.contact-form .btn-brand{ padding:.6rem 1.6rem; }
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-status{ margin-top:1.1rem; border-radius:8px; padding:.9rem 1.1rem; font-size:.95rem; }
.contact-status.ok{ background:#eef5ec; border:1px solid #cfe3c8; color:#2f5427; }
.contact-status.err{ background:#f9ece6; border:1px solid #e7c9b9; color:#8a3f1f; }

.contact-card{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:1.6rem 1.7rem; }
.contact-card h3{ font-size:1.25rem; margin-bottom:1.1rem; }
.contact-card hr{ border:none; border-top:1px solid var(--line); margin:1.1rem 0; }
.contact-line{ display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.8rem; color:var(--ink); font-size:.95rem; line-height:1.5; }
.contact-line:last-of-type{ margin-bottom:0; }
.contact-line .bi{ color:var(--accent); font-size:1.05rem; margin-top:.1rem; flex:0 0 auto; }
.contact-line a{ color:var(--ink); }
.contact-line a:hover{ color:var(--accent); }
.contact-note{ margin-top:1rem; color:var(--stone); font-size:.88rem; font-style:italic; }

.contact-map iframe{ display:block; width:100%; height:380px; border:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ===== Andy's Journal — editorial card wall + reader overlay ===== */
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:991.98px){ .journal-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px){ .journal-grid{ grid-template-columns:1fr; } }

.jr-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:12px; overflow:hidden; color:var(--ink); text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.jr-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(43,36,32,.14); border-color:var(--line); color:var(--ink); }
.jr-card-img{ display:block; overflow:hidden; aspect-ratio:16/10; background:var(--cream); }
.jr-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.jr-card:hover .jr-card-img img{ transform:scale(1.05); }
.jr-card-body{ display:flex; flex-direction:column; gap:.5rem; padding:1.15rem 1.25rem 1.3rem; flex:1 1 auto; }
.jr-card-flag{ align-self:flex-start; font-family:'Nunito',sans-serif; font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:#fff; background:var(--accent); border-radius:20px; padding:2px 10px; }
.jr-card-title{ font-family:'Jost',sans-serif; font-size:1.15rem; line-height:1.3; color:var(--ink); }
.jr-card-teaser{ color:var(--stone); font-size:.92rem; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.jr-card-more{ margin-top:auto; font-family:'Jost',sans-serif; font-size:.85rem; color:var(--accent);
  display:inline-flex; align-items:center; gap:.4rem; transition:gap .2s ease; }
.jr-card:hover .jr-card-more{ gap:.65rem; }

/* featured (latest) — spans two columns, image beside the copy on wide screens */
.jr-card--featured{ grid-column:span 2; }
@media (min-width:768px){
  .jr-card--featured{ flex-direction:row; }
  .jr-card--featured .jr-card-img{ flex:0 0 55%; aspect-ratio:auto; }
  .jr-card--featured .jr-card-body{ justify-content:center; padding:2rem 2.2rem; }
  .jr-card--featured .jr-card-title{ font-size:1.7rem; }
  .jr-card--featured .jr-card-teaser{ -webkit-line-clamp:4; font-size:1rem; }
}
@media (max-width:575.98px){ .jr-card--featured{ grid-column:span 1; } }

/* ---- a single journal note, as its own page ---------------------------- */
.jr-single{ padding-bottom:1rem; }
/* Journal note hero — .page-hero does the background, overlay and white text;
   this only softens the H1, since note titles are sentences rather than the
   two or three words a section page carries. */
.jr-hero h1{ font-size:clamp(1.5rem,3.2vw,2.2rem); line-height:1.25; }
/* the archived emails are 2000s-era HTML: keep them inside the column and stop
   fixed-width tables and oversized images breaking the page */
.jr-single-body{ font-size:1.05rem; line-height:1.75; }
.jr-single-body::after{ content:""; display:block; clear:both; }   /* contain the float */

/* the note's own picture, floated into the text. Campaign artwork is small
   (median 600px) so it is never asked to be bigger than it is. */
.jr-figure{ margin:.35rem 0 1.1rem; max-width:min(44%,360px); }
.jr-figure img{ width:100%; height:auto; display:block; border-radius:8px;
  border:1px solid var(--line); }
.jr-figure--left{ float:left; margin-right:1.75rem; }
.jr-figure--right{ float:right; margin-left:1.75rem; }
/* portrait artwork held narrower: at the full float width a 400x600 shot pushes
   570px of text sideways and leaves a hole down the page */
.jr-figure--portrait{ max-width:min(32%,250px); }
@media (max-width:767.98px){
  .jr-figure,.jr-figure--portrait{ float:none; max-width:100%; margin:1.4rem 0; }
}
.jr-single-body img{ max-width:100%; height:auto; border-radius:6px; }
.jr-single-body table{ max-width:100%; width:auto !important; height:auto !important; }
.jr-single-body td,.jr-single-body th{ width:auto !important; }
.jr-single-body > :first-child{ margin-top:0; }
.jr-single-back{ margin:2.6rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line); }
.jr-single-back a{ font-family:'Jost',sans-serif; color:var(--accent); display:inline-flex;
  align-items:center; gap:.5rem; transition:gap .2s ease; }
.jr-single-back a:hover{ gap:.75rem; }

/* reader overlay — retained for now; nothing uses it since the journal moved to
   real pages, and it can go once that has been signed off */
.jr-reader{ position:fixed; inset:0; z-index:2000; background:rgba(20,16,14,.82);
  display:none; align-items:flex-start; justify-content:center; padding:4vh 16px; }
.jr-reader.open{ display:flex; }
.jr-reader-scroll{ background:#fff; width:min(760px,100%); max-height:92vh; overflow-y:auto;
  border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.jr-reader-body{ padding:2.4rem clamp(1.3rem,4vw,3rem) 3rem; }
.jr-reader-body .jr-post > :first-child{ margin-top:0; }
.jr-reader-body img{ max-width:100%; height:auto; border-radius:6px; }
.jr-reader-body table{ max-width:100%; }
.jr-reader-body h3:first-child{ font-family:'Jost',sans-serif; font-size:1.7rem; color:var(--ink); margin-bottom:1rem; }

.jr-btn{ position:fixed; z-index:2001; border:none; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .2s ease; }
.jr-btn:hover{ background:rgba(255,255,255,.28); }
.jr-close{ top:18px; right:18px; width:44px; height:44px; font-size:1.6rem; line-height:1; }
.jr-nav{ top:50%; transform:translateY(-50%); width:50px; height:50px; font-size:1.4rem; }
.jr-prev{ left:20px; } .jr-next{ right:20px; }
@media (max-width:820px){ .jr-nav{ display:none; } }

.jr-loading{ display:flex; gap:6px; justify-content:center; padding:3rem 0; }
.jr-loading span{ width:8px; height:8px; border-radius:50%; background:var(--accent); opacity:.5;
  animation:circ-bounce 1.2s infinite; }
.jr-loading span:nth-child(2){ animation-delay:.15s; } .jr-loading span:nth-child(3){ animation-delay:.3s; }

/* ===== AI assistant widget (bottom-left, clear of the bottom-right FABs) ===== */
.circ-chat-launcher{ position:fixed; left:22px; bottom:22px; z-index:1035; border:1px solid var(--gold);
  background:var(--bar); color:#fff; border-radius:40px; padding:12px 20px; font-family:'Jost',sans-serif;
  font-weight:500; font-size:.9rem; display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  box-shadow:0 6px 22px rgba(43,36,32,.28); transition:background .2s, transform .2s; }
.circ-chat-launcher:hover{ background:color-mix(in srgb, var(--bar) 82%, #000); transform:translateY(-1px); }

/* Hover note on the launcher.
   CSS only, from a data attribute — Bootstrap's tooltip would need its own JS init for one
   label, and a native title= appears after about a second, unstyled, and would sit alongside
   this one. Shown on :focus-visible as well as :hover so it is reachable from the keyboard.
   Hidden on touch (no hover), where a tooltip cannot be read anyway and the panel is one tap. */
.circ-chat-launcher{ position:fixed; }        /* tooltip is positioned against it */
.circ-chat-launcher[data-hint]::after{
  content:attr(data-hint);
  position:absolute; left:0; bottom:calc(100% + 12px);
  width:max-content; max-width:17rem; text-align:left;
  background:var(--ink); color:#fff; font-size:.82rem; font-weight:400; line-height:1.4;
  padding:.6rem .8rem; border-radius:6px; box-shadow:0 6px 22px rgba(0,0,0,.28);
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.circ-chat-launcher[data-hint]::before{       /* the little arrow */
  content:""; position:absolute; left:18px; bottom:calc(100% + 6px);
  border:6px solid transparent; border-top-color:var(--ink);
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.circ-chat-launcher[data-hint]:hover::after,
.circ-chat-launcher[data-hint]:focus-visible::after{ opacity:1; transform:translateY(0); }
.circ-chat-launcher[data-hint]:hover::before,
.circ-chat-launcher[data-hint]:focus-visible::before{ opacity:1; }
/* Panel open: the launcher becomes "close", so the note would be wrong. */
.circ-chat-launcher[aria-expanded="true"]::after,
.circ-chat-launcher[aria-expanded="true"]::before{ content:none; }
@media (hover:none){
  .circ-chat-launcher[data-hint]::after, .circ-chat-launcher[data-hint]::before{ content:none; }
}
@media (prefers-reduced-motion:reduce){
  .circ-chat-launcher[data-hint]::after{ transition:none; transform:none; }
}
.circ-chat-launcher .bi{ font-size:1.05rem; }

.circ-chat-panel{ position:fixed; left:22px; bottom:22px; z-index:1036; width:min(380px, calc(100vw - 44px));
  height:min(560px, calc(100vh - 120px)); background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 50px rgba(43,36,32,.28); display:none; flex-direction:column; overflow:hidden; }
.circ-chat-panel.open{ display:flex; }

.circ-chat-head{ background:var(--bar); color:var(--bar-text); padding:.9rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between; }
.circ-chat-head .t{ font-family:'Jost',sans-serif; font-size:1.02rem; }
.circ-chat-head .sub{ font-size:.76rem; color:var(--bar-muted); margin-top:1px; }
.circ-chat-close{ border:none; background:none; color:var(--bar-text); font-size:1.5rem; line-height:1;
  cursor:pointer; opacity:.8; }
.circ-chat-close:hover{ opacity:1; color:var(--accent); }

.circ-chat-log{ flex:1 1 auto; overflow-y:auto; padding:1rem; background:var(--cream);
  display:flex; flex-direction:column; gap:.6rem; }
.circ-msg{ max-width:85%; padding:.6rem .85rem; border-radius:14px; font-size:.92rem; line-height:1.5;
  word-wrap:break-word; }
.circ-msg.bot{ align-self:flex-start; background:#fff; border:1px solid var(--line); color:var(--ink);
  border-bottom-left-radius:4px; }
.circ-msg.user{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px;
  white-space:pre-wrap; }
.circ-msg.bot a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.circ-msg.bot strong{ font-weight:700; }

.circ-typing{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px;
  border-bottom-left-radius:4px; padding:.7rem .85rem; display:inline-flex; gap:4px; }
.circ-typing span{ width:6px; height:6px; border-radius:50%; background:var(--stone); opacity:.5;
  animation:circ-bounce 1.2s infinite; }
.circ-typing span:nth-child(2){ animation-delay:.15s; } .circ-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes circ-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:.9; } }

.circ-chat-compose{ display:flex; align-items:flex-end; gap:.5rem; padding:.7rem; border-top:1px solid var(--line);
  background:#fff; }
.circ-chat-compose textarea{ flex:1 1 auto; resize:none; border:1px solid var(--line); border-radius:12px;
  padding:.55rem .8rem; font-family:'Nunito',sans-serif; font-size:.92rem; color:var(--ink); max-height:120px;
  line-height:1.4; }
.circ-chat-compose textarea:focus{ outline:none; border-color:var(--accent); }
.circ-chat-send{ flex:0 0 auto; border:1px solid var(--gold); background:var(--bar); color:#fff; width:38px; height:38px;
  border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; }
.circ-chat-send:hover{ background:color-mix(in srgb, var(--bar) 82%, #000); }
.circ-chat-send:disabled{ opacity:.5; cursor:default; }
.circ-chat-note{ font-size:.68rem; color:var(--stone); text-align:center; padding:.45rem .7rem; background:#fff;
  border-top:1px solid var(--line); }

/* "Andy's online" handoff offer inside the chat log */
.circ-offer{ align-self:stretch; background:#f4efe7; border:1px solid var(--line); border-radius:12px;
  padding:.85rem .95rem; margin:.2rem 0; }
.circ-offer-head{ font-family:'Jost',sans-serif; font-size:.9rem; color:var(--ink);
  display:flex; align-items:center; gap:.45rem; margin-bottom:.6rem; }
.circ-offer-head .bi-check-circle-fill{ color:#2f8f4e; }
.circ-online-dot{ width:9px; height:9px; border-radius:50%; background:#2f8f4e; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(47,143,78,.5); animation:circ-online 1.8s infinite; }
@keyframes circ-online{ 0%,100%{ box-shadow:0 0 0 0 rgba(47,143,78,.5); } 50%{ box-shadow:0 0 0 6px rgba(47,143,78,0); } }
.circ-offer-actions{ display:flex; flex-wrap:wrap; gap:.5rem; }
.circ-offer-btn{ flex:1 1 auto; border:1px solid var(--bar); background:#fff; color:var(--bar);
  border-radius:999px; padding:.45rem .8rem; font-family:'Jost',sans-serif; font-size:.85rem; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; white-space:nowrap; }
.circ-offer-btn:hover{ background:var(--bar); border-color:var(--gold); color:#fff; }
.circ-offer-btn.call{ background:var(--bar); border-color:var(--gold); color:#fff; }
.circ-offer-btn.call:hover{ background:color-mix(in srgb, var(--bar) 82%, #000); color:#fff; }
.circ-offer-btn.full{ flex-basis:100%; margin-top:.2rem; }
.circ-cb-input{ width:100%; border:1px solid var(--line); border-radius:8px; padding:.45rem .7rem;
  font-family:'Nunito',sans-serif; font-size:.9rem; margin-bottom:.5rem; }
.circ-cb-input:focus{ outline:none; border-color:var(--accent); }
.circ-cb-status{ font-size:.8rem; color:#8a3f1f; margin-top:.4rem; }
.circ-offer-btn.live{ background:var(--bar); color:#fff; border-color:var(--gold); font-weight:600; }
.circ-offer-btn.live:hover{ background:color-mix(in srgb, var(--bar) 82%, #000); color:#fff; }

/* Andy's live replies + system notes in the chat log */
.circ-msg.andy{ align-self:flex-start; background:#fff; border:1px solid var(--accent); color:var(--ink);
  border-bottom-left-radius:4px; }
.circ-andy-tag{ display:block; font-family:'Jost',sans-serif; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--accent); margin-bottom:.2rem; }
.circ-note{ align-self:center; text-align:center; font-size:.78rem; color:var(--stone);
  background:var(--cream); border-radius:20px; padding:.3rem .85rem; margin:.25rem 0; max-width:90%; }

@media (max-width:479.98px){
  .circ-chat-panel{ left:0; right:0; bottom:0; width:100vw; height:82vh; border-radius:16px 16px 0 0; }
  .circ-chat-launcher span{ display:none; }
  .circ-chat-launcher{ padding:14px; border-radius:50%; }
}