/* ============================================================
   Bourkes Florist — production stylesheet (shared chrome + blog)
   ------------------------------------------------------------
   Recreated from the high-fidelity DC prototype. The prototype is
   inline-styled; here the design tokens are lifted into CSS custom
   properties and components are built against them (per ARCHITECTURE.md §5).
   No prototype runtime — plain semantic HTML + this stylesheet + site.js.
   ============================================================ */

/* ----------------------------- TOKENS ----------------------------- */
:root {
  /* Ink / text */
  --ink:        #1A1A1A;
  --ink-900:    #111111;
  --grey-700:   #374151;
  --grey-600:   #56544f;
  --grey-500:   #6B7280;
  --grey-400:   #8a847a;
  --grey-350:   #9a948a;

  /* Paper / surfaces */
  --paper:      #ffffff;
  --cream:      #FAF7F0;

  /* Borders / hairlines */
  --border:     #E5E0D5;
  --border-2:   #F0ECE3;
  --gold-line:  #FBF5DC;

  /* Gold (heritage) */
  --gold:       #C9A227;
  --gold-soft:  #F5D87A;
  --gold-cta:   #E8D48A;

  /* Green (delivery / trust) */
  --green:      #2D6A4F;
  --green-700:  #255a42;
  --green-900:  #10332C;

  /* Type */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Shape */
  --r-card: 12px;
  --r-card-sm: 10px;
  --r-pill: 100px;
  --gutter: 48px;

  --shadow-menu: 0 16px 48px rgba(0,0,0,.14);
  --shadow-card: 0 6px 24px rgba(0,0,0,.08);
  --shadow-card-lg: 0 12px 36px rgba(0,0,0,.09);
}

/* ----------------------------- RESET ----------------------------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { overflow-x:hidden; }
body { font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.5; }
img, svg, video { max-width:100%; display:block; }
a { color:inherit; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
h1,h2,h3,h4,h5 { font-weight:700; line-height:1.1; }
:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

/* ----------------------------- LAYOUT ----------------------------- */
.container { max-width:1180px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ====================== TRUST BAR ====================== */
.trustbar { background:var(--green); display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  color:rgba(255,255,255,.9); font-size:12px; }
.trustbar > * { padding:9px 24px; border-right:1px solid rgba(255,255,255,.12); }
.trustbar strong { color:#fff; }
.trustbar a { color:var(--gold-cta); text-decoration:none; border-right:none; }

/* ====================== HEADER ====================== */
.site-header { position:relative; z-index:400; }
.headrow { background:#fff; border-bottom:1px solid var(--border); padding:0 var(--gutter); height:88px;
  display:flex; align-items:center; justify-content:space-between; }
.brand img { width:232px; height:auto; }

/* primary nav */
.nav { display:flex; align-items:stretch; height:88px; }
.nav-item { position:relative; display:flex; align-items:center; }
.nav-link { text-decoration:none; font:500 13px var(--sans); color:var(--grey-700);
  padding:0 16px; height:88px; display:flex; align-items:center; gap:5px;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s; }
.nav-item:hover > .nav-link,
.nav-link:hover { color:var(--green); }
.nav-item:hover > .nav-link[data-mega] { border-bottom-color:var(--green); }

/* mega menu */
.mega { position:absolute; top:100%; left:50%; transform:translateX(-50%); width:760px;
  background:#fff; border:1px solid var(--border); border-top:3px solid var(--green);
  border-radius:0 0 12px 12px; box-shadow:var(--shadow-menu); z-index:300; overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s ease; }
.nav-item:hover .mega { opacity:1; visibility:visible; pointer-events:auto; }
.mega-cols { display:flex; }
.mega-col { padding:26px; flex:1; border-right:1px solid var(--border); }
.mega-col:last-child { border-right:none; }
.mega-head { font:700 9px var(--sans); letter-spacing:2.5px; text-transform:uppercase; color:var(--gold);
  margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--gold-line); }
.mega-link { text-decoration:none; display:flex; align-items:center; gap:10px; font:400 13px var(--sans);
  color:var(--grey-700); padding:8px 10px; border-radius:7px; transition:background .12s,color .12s; }
.mega-link:hover { background:var(--cream); color:var(--green); }
.mega-ico { width:30px; height:30px; border-radius:7px; background:var(--cream); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex:none; }
.mega-link strong { display:block; font-weight:500; }
.mega-link .sub { display:block; font-size:11px; color:var(--grey-500); }
.mega-all { text-decoration:none; display:inline-block; margin-top:12px; font:700 12px var(--sans); color:var(--green); }
.mega-cities { display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; }
.mega-city { text-decoration:none; display:flex; align-items:center; gap:8px; font:400 13px var(--sans);
  color:var(--grey-700); padding:7px 9px; border-radius:7px; }
.mega-city:hover { background:var(--cream); color:var(--green); }
.mega-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex:none; }
.mega-feature { width:210px; flex:none; padding:24px 20px; background:var(--cream);
  display:flex; flex-direction:column; justify-content:space-between; }
.mega-feature.is-green { background:var(--green); color:#fff; justify-content:center; }
.mega-feature .kicker { font:700 9px var(--sans); letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.mega-feature.is-green .kicker { color:var(--gold-cta); }
.mega-feature .fimg { border-radius:8px; overflow:hidden; margin-bottom:10px; border:1px solid var(--border); aspect-ratio:4/5; }
.mega-feature .fimg img { width:100%; height:100%; object-fit:cover; }
.mega-feature .ftitle { font:700 14px var(--serif); margin-bottom:3px; }
.mega-feature .fprice { font:700 14px var(--sans); color:var(--green); margin-bottom:10px; }
.mega-feature .fbtn { text-decoration:none; display:block; text-align:center; background:var(--green); color:#fff;
  font:600 11.5px var(--sans); padding:10px; border-radius:6px; }
.mega-feature.is-green .fhead { font:700 22px var(--serif); line-height:1.2; margin-bottom:8px; }
.mega-feature.is-green .fsub { font:400 13px/1.6 var(--sans); color:rgba(255,255,255,.78); margin-bottom:16px; }
.mega-feature .fbtn-gold { text-decoration:none; display:block; text-align:center; background:var(--gold-cta);
  color:var(--ink); font:700 11.5px var(--sans); padding:11px; border-radius:6px; }

/* header actions */
.header-actions { display:flex; align-items:center; gap:16px; }
.action-link { text-decoration:none; font:400 13px var(--sans); color:var(--grey-500); }
.action-search { font:400 13px var(--sans); color:var(--grey-500); display:inline-flex; align-items:center; gap:5px; }
.btn-cart { text-decoration:none; background:var(--ink); color:#fff; font:600 12px var(--sans);
  padding:9px 16px; border-radius:var(--r-pill); display:flex; align-items:center; gap:7px; }
.cart-badge { background:var(--gold); color:var(--ink); font-size:10px; font-weight:700; min-width:17px; height:17px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* mobile actions */
.mobile-actions { display:none; align-items:center; gap:8px; }
.btn-cart--sm { padding:8px 13px; font-size:11px; }
.btn-cart--sm .cart-badge { font-size:9px; min-width:15px; height:15px; }
.hamburger { display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  font-size:24px; line-height:1; color:var(--ink); }

/* ====================== SEARCH OVERLAY ====================== */
.overlay-scrim { position:fixed; inset:0; background:rgba(26,26,26,.5); z-index:700; }
.search-panel { position:fixed; top:0; left:0; right:0; z-index:701; background:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.18); padding:26px var(--gutter); }
.search-inner { max-width:760px; margin:0 auto; }
.search-bar { display:flex; gap:14px; align-items:center; border-bottom:2px solid var(--green); padding-bottom:12px; }
.search-bar .ico { font-size:20px; color:var(--green); }
.search-bar input { flex:1; border:none; outline:none; font:400 20px var(--serif); color:var(--ink); background:transparent; }
.search-bar .close { cursor:pointer; color:var(--grey-350); font-size:18px; }
.search-hint { margin-top:16px; font:400 14px var(--sans); color:var(--grey-350); padding:10px 4px; }

/* ====================== MOBILE DRAWER ====================== */
.drawer { position:fixed; top:0; right:0; bottom:0; width:330px; max-width:88vw; z-index:721; background:#fff;
  box-shadow:-8px 0 40px rgba(0,0,0,.25); display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .25s ease; }
.drawer.is-open { transform:translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.drawer-logo { font:700 18px var(--serif); }
.drawer-logo span { color:var(--gold); }
.drawer-close { cursor:pointer; color:var(--grey-350); font-size:22px; line-height:1; }
.drawer-body { flex:1; overflow-y:auto; padding:6px 0 14px; }
.drawer-search { display:flex; align-items:center; gap:10px; margin:12px 16px 8px; padding:11px 14px;
  border:1px solid var(--border); border-radius:8px; color:var(--grey-500); font:400 14px var(--sans); cursor:pointer; }
.drawer-acc { display:flex; align-items:center; justify-content:space-between; width:100%; cursor:pointer;
  color:var(--ink); font:600 15px var(--sans); padding:13px 16px; border-top:1px solid var(--border-2); text-align:left; }
.drawer-acc .caret { color:var(--grey-350); font-size:12px; }
.drawer-panel { display:none; padding:0 8px 8px; background:var(--cream); }
.drawer-panel.is-open { display:block; }
.drawer-sublink { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--grey-700);
  font:400 14px var(--sans); padding:9px 16px; }
.drawer-link { display:block; text-decoration:none; color:var(--ink); font:600 15px var(--sans);
  padding:13px 16px; border-top:1px solid var(--border-2); }
.drawer-more { display:block; text-decoration:none; color:var(--green); font:700 13px var(--sans); padding:9px 16px 2px; }
.drawer-foot { border-top:1px solid var(--border); padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.drawer-cta { text-decoration:none; text-align:center; background:var(--green); color:#fff; font:700 14px var(--sans); padding:13px; border-radius:6px; }
.drawer-tel { text-decoration:none; text-align:center; color:var(--ink); font:600 13px var(--sans); }

/* ====================== STICKY CTA ====================== */
.sticky-cta { position:fixed; top:0; left:0; right:0; z-index:600; background:var(--ink);
  display:flex; align-items:center; justify-content:space-between; padding:10px var(--gutter);
  box-shadow:0 2px 12px rgba(0,0,0,.2); transform:translateY(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.sticky-cta.is-visible { transform:translateY(0); }
.sticky-brand { font:700 17px var(--serif); color:#fff; }
.sticky-brand span { color:var(--gold); }
.sticky-msg { font:400 12.5px var(--sans); color:rgba(255,255,255,.75); }
.sticky-msg strong { color:var(--gold); }
.sticky-shop { text-decoration:none; background:var(--gold); color:var(--ink); font:700 12px var(--sans);
  letter-spacing:.5px; padding:8px 20px; border-radius:4px; white-space:nowrap; }
.sticky-close { width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); }

/* ====================== BLOG HERO ====================== */
.blog-hero { padding:48px var(--gutter) 36px; text-align:center; max-width:720px; margin:0 auto; }
.eyebrow { font:600 11px var(--sans); letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.blog-hero h1 { font:700 46px var(--serif); letter-spacing:-.4px; margin-bottom:12px; }
.blog-hero p { font:400 16px/1.7 var(--sans); color:var(--grey-500); }

/* ====================== BLOG BODY ====================== */
.blog-body { padding:20px var(--gutter) 64px; max-width:1180px; margin:0 auto; }

/* tabs */
.tabs { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px; }
.tab { cursor:pointer; font:600 12.5px var(--sans); padding:9px 18px; border-radius:var(--r-pill);
  transition:all .15s; background:#fff; color:var(--grey-600); border:1px solid var(--border); text-decoration:none; }
.tab:hover { border-color:var(--green); color:var(--green); }
.tab.is-active { background:var(--green); color:#fff; border-color:var(--green); }

/* featured */
.featured { text-decoration:none; color:var(--ink); display:grid; grid-template-columns:1.2fr 1fr; gap:32px;
  align-items:center; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; margin-bottom:40px;
  transition:box-shadow .18s; }
.featured:hover { box-shadow:var(--shadow-card-lg); }
.featured .media { aspect-ratio:16/10; overflow:hidden; background:var(--cream); }
.featured .media img { width:100%; height:100%; object-fit:cover; }
.featured .body { padding:40px 40px 40px 0; }
.cat-badge { display:inline-block; background:var(--green); color:#fff; font:700 9.5px var(--sans);
  letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:3px; }
.featured h2 { font:700 30px/1.2 var(--serif); margin:16px 0 10px; }
.featured .excerpt { font:400 14.5px/1.7 var(--sans); color:var(--grey-500); margin-bottom:14px; }
.featured .meta { font:400 12px var(--sans); color:var(--grey-350); }

/* grid */
.post-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.post-card { text-decoration:none; color:var(--ink); border:1px solid var(--border); border-radius:var(--r-card-sm);
  overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .18s; }
.post-card:hover { box-shadow:var(--shadow-card); }
.post-card.is-hidden { display:none; }
.post-card .media { height:190px; overflow:hidden; position:relative; background:var(--cream); }
.post-card .media img { width:100%; height:100%; object-fit:cover; }
.post-card .cat-badge { position:absolute; top:12px; left:12px; z-index:2; }
.post-card .body { padding:20px; }
.post-card .meta { font:400 11px var(--sans); color:var(--grey-350); margin-bottom:8px; }
.post-card .title { font:700 18px/1.3 var(--serif); margin-bottom:8px; }
.post-card .excerpt { font:400 13px/1.55 var(--sans); color:var(--grey-500); margin-bottom:12px; }
.post-card .more { font:600 12px var(--sans); color:var(--green); margin-top:auto; }
.no-results { display:none; text-align:center; padding:60px 20px; font:400 15px var(--sans); color:var(--grey-350); }
.no-results.is-visible { display:block; }

/* ====================== FOOTER ====================== */
.foot-email { background:var(--green); padding:0 var(--gutter); display:grid; grid-template-columns:1fr 1fr; min-height:300px; }
.foot-email .left { padding:56px 56px 56px 0; border-right:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; justify-content:center; }
.foot-email .kicker { font:600 9.5px var(--sans); letter-spacing:2.5px; text-transform:uppercase; color:var(--gold-soft);
  margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.foot-email .kicker span { width:24px; height:2px; background:var(--gold-soft); }
.foot-email h2 { font:700 34px/1.1 var(--serif); color:#fff; margin-bottom:12px; letter-spacing:-.5px; }
.foot-email h2 em { font-style:italic; color:var(--gold-soft); }
.foot-email .blurb { font:300 14px/1.7 var(--sans); color:rgba(255,255,255,.6); }
.foot-email .right { padding:56px 0 56px 56px; display:flex; flex-direction:column; justify-content:center; }
.foot-offer { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:10px;
  padding:24px; margin-bottom:22px; text-align:center; }
.foot-offer .pct { font:700 48px var(--serif); color:var(--gold-soft); line-height:1; margin-bottom:4px; }
.foot-offer .lbl { font:500 11px var(--sans); letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.55); }
.foot-email input { width:100%; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.2); color:#fff;
  font:400 14px var(--sans); padding:14px 18px; border-radius:7px; outline:none; margin-bottom:10px; }
.foot-email input::placeholder { color:rgba(255,255,255,.6); }
.foot-email .submit { display:block; width:100%; background:var(--gold-soft); color:var(--ink); font:700 14px var(--sans);
  padding:15px; border-radius:7px; text-align:center; cursor:pointer; }
.foot-done { background:rgba(245,216,122,.12); border:1px solid rgba(245,216,122,.4); border-radius:7px; padding:18px;
  text-align:center; font:600 14px var(--sans); color:var(--gold-soft); }

.foot-reminder { background:var(--ink); padding:20px var(--gutter); display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-reminder .copy { display:flex; align-items:center; gap:16px; }
.foot-reminder .ico { font-size:25px; line-height:1; }
.foot-reminder .t { font:700 17px var(--serif); color:#fff; }
.foot-reminder .s { font:300 13px var(--sans); color:rgba(255,255,255,.55); }
.foot-reminder .btn { background:var(--gold-soft); color:var(--ink); font:700 13.5px var(--sans);
  padding:13px 26px; border-radius:7px; white-space:nowrap; }

.footer { background:var(--ink-900); padding:52px var(--gutter) 0; }
.footer-cols { display:grid; grid-template-columns:1.6fr 1fr 1.1fr 1fr 1.1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-cols img { width:208px; height:auto; margin-bottom:18px; }
.footer-about { font:300 13px/1.65 var(--sans); color:rgba(255,255,255,.38); margin-bottom:20px; max-width:280px; }
.footer-social { display:flex; gap:8px; font-size:13px; color:rgba(255,255,255,.45); }
.footer h5 { font:600 10px var(--sans); letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:16px; }
.footer-links { display:flex; flex-direction:column; gap:10px; font:400 13.5px var(--sans); }
.footer-links a { text-decoration:none; color:rgba(255,255,255,.52); }
.footer-links a:hover { color:#fff; }
.footer-contact p { font:400 13px var(--sans); color:rgba(255,255,255,.45); margin-bottom:9px; }
.footer-contact strong { color:rgba(255,255,255,.72); font-weight:500; }
.footer-contact a { color:rgba(255,255,255,.45); text-decoration:none; }
.footer-hours { font:400 12px/1.6 var(--sans); color:rgba(255,255,255,.25); margin-top:14px; }

.footer-band { padding:22px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.footer-band .inline { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:11px 24px; font:400 13px var(--sans); }
.footer-band .inline.rows-2 { grid-template-rows:repeat(2,auto); }
.footer-band .inline.rows-3 { grid-template-rows:repeat(3,auto); }
.footer-band a { text-decoration:none; color:rgba(255,255,255,.5); }
.footer-band a:hover { color:#fff; }
.footer-band .areas-all { display:inline-block; margin-top:14px; text-decoration:none; color:var(--gold-cta); font:600 13px var(--sans); }

.footer-disclaimer { padding:18px 0 6px; border-top:1px solid rgba(255,255,255,.05); }
.footer-disclaimer p { font:400 11px/1.6 var(--sans); color:rgba(255,255,255,.26); max-width:760px; }
.footer-legal { padding:18px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-legal .copy { font:400 11.5px var(--sans); color:rgba(255,255,255,.2); }
.footer-legal .copy a { color:rgba(255,255,255,.35); text-decoration:none; }
.footer-pay { display:flex; gap:6px; }
.footer-pay span { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:4px 10px;
  border-radius:3px; font:700 9.5px var(--sans); letter-spacing:.5px; color:rgba(255,255,255,.3); }

/* ====================== MODALS (popup + reminder) ====================== */
.modal-scrim { position:fixed; inset:0; z-index:9999; background:rgba(17,17,17,.62); display:flex;
  align-items:center; justify-content:center; padding:20px; }
.modal { background:#fff; border-radius:14px; width:100%; box-shadow:0 30px 80px rgba(0,0,0,.45); position:relative; overflow:hidden; }
.modal--offer { max-width:430px; }
.modal--reminder { max-width:460px; }
.modal-close { position:absolute; top:12px; right:16px; font:400 24px var(--sans); cursor:pointer; line-height:1; z-index:2; }
.modal-offer-head { background:var(--green); padding:30px 36px 26px; text-align:center; }
.modal-offer-head .k { font:600 9.5px var(--sans); letter-spacing:2.5px; text-transform:uppercase; color:var(--gold-soft); margin-bottom:8px; }
.modal-offer-head .big { font:700 54px var(--serif); color:var(--gold-soft); line-height:1; }
.modal-offer-head .sub { font:300 14px var(--sans); color:rgba(255,255,255,.7); margin-top:6px; }
.modal-offer-body { padding:26px 36px 30px; }
.modal-offer-body h3 { font:700 21px var(--serif); margin-bottom:6px; text-align:center; }
.modal-offer-body p { font:400 13.5px/1.6 var(--sans); color:var(--grey-500); text-align:center; margin-bottom:18px; }
.modal input { width:100%; border:1.5px solid var(--border); border-radius:7px; padding:14px 16px;
  font:400 14.5px var(--sans); outline:none; margin-bottom:10px; }
.modal input:focus { border-color:var(--green); }
.modal .primary { display:block; background:var(--green); color:#fff; font:700 14.5px var(--sans);
  padding:15px; border-radius:7px; text-align:center; cursor:pointer; width:100%; }
.modal .dismiss { text-align:center; margin-top:14px; font:400 12.5px var(--sans); color:var(--grey-350); cursor:pointer; }
.modal-reminder-body { padding:32px 36px 34px; }
.modal-reminder-body .k { font:600 9.5px var(--sans); letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.modal-reminder-body h3 { font:700 25px var(--serif); margin-bottom:6px; }
.modal-reminder-body > p { font:400 13.5px/1.6 var(--sans); color:var(--grey-500); margin-bottom:22px; }
.rem-field { margin-bottom:12px; }
.rem-label { font:600 11px var(--sans); letter-spacing:.4px; color:var(--grey-350); margin-bottom:9px; }
.rem-chips { display:flex; flex-wrap:wrap; gap:8px; }
.rem-chip { display:inline-flex; align-items:center; gap:6px; font:600 13px var(--sans); padding:9px 14px;
  border-radius:var(--r-pill); cursor:pointer; transition:all .15s; white-space:nowrap;
  background:#fff; border:1.5px solid #E7E2D7; color:#5b5648; }
.rem-chip.is-active { background:var(--green); border-color:var(--green); color:#fff; }
.rem-note { font:400 11.5px var(--sans); color:#a8a294; text-align:center; margin-top:4px; }
.is-hidden { display:none !important; }

/* ====================== RESPONSIVE ====================== */
@media (max-width:1024px) {
  .nav, .header-actions { display:none !important; }
  .mobile-actions { display:flex !important; }
  .brand img { width:168px; }
  .headrow { height:66px; padding:0 26px; }
  .trustbar { font-size:11px; }
  .trustbar > * { padding:8px 14px; }
}
@media (max-width:860px) {
  :root { --gutter:26px; }
  .post-grid { grid-template-columns:repeat(2, 1fr) !important; }
  .featured { grid-template-columns:1fr !important; }
  .featured .media { aspect-ratio:16/9; }
  .featured .body { padding:24px 28px 32px; }
  .foot-email { grid-template-columns:1fr !important; }
  .foot-email .left { border-right:none; padding:48px 0 24px; }
  .foot-email .right { padding:0 0 48px; }
  .footer-cols { grid-template-columns:repeat(2, 1fr) !important; }
  .footer-band .inline { grid-auto-flow:row !important; grid-template-columns:repeat(2,1fr) !important; grid-template-rows:none !important; }
}
@media (max-width:560px) {
  :root { --gutter:18px; }
  .post-grid { grid-template-columns:1fr !important; }
  .blog-hero { padding:32px 18px 24px; }
  .blog-hero h1 { font-size:30px; line-height:1.14; }
  .footer-cols { grid-template-columns:1fr !important; }
  .footer-band .inline { grid-template-columns:1fr !important; }
  .foot-reminder { flex-direction:column; align-items:flex-start; }
}

/* ====================== full-site additions ====================== */
/* hover utilities (replace the prototype's DC `style-hover`) */
.hov-shadow{transition:box-shadow .18s ease;} .hov-shadow:hover{box-shadow:0 10px 32px rgba(0,0,0,.1);}
.hov-shadow-sm{transition:box-shadow .18s ease;} .hov-shadow-sm:hover{box-shadow:0 6px 24px rgba(0,0,0,.08);}
.hov-shadow-lg{transition:box-shadow .18s ease;} .hov-shadow-lg:hover{box-shadow:0 12px 36px rgba(0,0,0,.09);}
.hov-gold{transition:border-color .15s, box-shadow .15s;} .hov-gold:hover{border-color:var(--gold)!important;box-shadow:0 4px 14px rgba(0,0,0,.06);}
.hov-ring{transition:border-color .15s;} .hov-ring:hover{border-color:var(--gold)!important;}
.hov-under:hover{text-decoration:underline;}

/* header search typeahead results */
.search-results{margin-top:14px;display:flex;flex-direction:column;gap:2px;max-height:56vh;overflow-y:auto;}
.search-results:empty{display:none;}
.search-result{display:flex;gap:14px;align-items:center;padding:10px;border-radius:8px;text-decoration:none;color:var(--ink);}
.search-result:hover{background:var(--cream);}
.search-result .thumb{width:48px;height:56px;flex:none;border-radius:5px;overflow:hidden;border:1px solid var(--border);}
.search-result .thumb img{width:100%;height:100%;object-fit:cover;}
.search-result .name{font:600 15px var(--sans);}
.search-result .cat{font:400 12px var(--sans);color:var(--grey-350);}
.search-result .price{font:700 14px var(--sans);color:var(--green);margin-left:auto;}
.search-results.has-results ~ .search-hint{display:none;}

/* product sticky mobile add-to-cart */
.bf-sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--border);box-shadow:0 -6px 24px rgba(0,0,0,.08);padding:11px 14px;display:none;align-items:center;gap:12px;}
@media(max-width:768px){ .bf-sticky-buy{display:flex;} body.has-sticky-buy{padding-bottom:76px;} }

/* small helpers used by ported pages */
.section{padding:52px var(--gutter);}
.wrap{max-width:1180px;margin:0 auto;}
a.plain{text-decoration:none;color:inherit;}
.toast{position:fixed;bottom:24px;left:24px;z-index:599;background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 20px rgba(0,0,0,.12);max-width:290px;transform:translateY(12px);opacity:0;transition:.3s;}
.toast.is-visible{transform:none;opacity:1;}