/* ==========================================================================
   Hlofume theme — beige, olive green and brown.
   Loaded by _chrome.php AFTER store.css (and any account brand colours), on every storefront page.
   Light is the default; the dark toggle becomes a deep-brown night theme with the same olive accent.
   ========================================================================== */
:root{
  --hf-beige:#f3ebdd; --hf-beige-2:#ebe0ca; --hf-cream:#faf6ec; --hf-sand:#d9cdb5;
  --hf-olive:#5b6a38; --hf-olive-deep:#444f2a; --hf-olive-soft:#8a9a5b;
  --hf-brown:#4a3426; --hf-brown-2:#6b4a35; --hf-bronze:#a98557;
  --hf-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;

  --accent:#5b6a38; --accent-hover:#6f7f45; --accent-deep:#444f2a; --accent-tint:#e6e0c9; --accent-ink:#444f2a;
  --bar-bg:rgba(243,235,221,.84); --sheet-bg:#f6efe2;
  --ink:#3b2a1e; --ink-soft:rgba(59,42,30,.82); --ink-big:#4a3426; --ink-dim:#857262;
  --curtain:rgba(74,52,38,.28); --hairline:#d9cdb5; --focus:rgba(91,106,56,.7); --frame:#d9cdb5;
}
html[data-theme="dark"]{
  --hf-beige:#1c140e; --hf-beige-2:#241a12; --hf-cream:#2c2017; --hf-sand:#4a382a;
  --accent:#76874a; --accent-hover:#899b58; --accent-deep:#b7c47f; --accent-tint:#353220; --accent-ink:#b7c47f;
  --bar-bg:rgba(32,23,17,.84); --sheet-bg:#241a12;
  --ink:#f1e8d6; --ink-soft:rgba(241,232,214,.8); --ink-big:#f1e8d6; --ink-dim:#a89580;
  --curtain:rgba(20,13,9,.6); --hairline:#4a382a; --focus:rgba(183,196,127,.7); --frame:#3b2c20;
  --d-bg:#1c140e; --d-surface:#241a12; --d-surface-2:#2c2017; --d-edge:#3b2c20;
  --d-text:#f1e8d6; --d-text-2:#b9a68f; --d-link:#b7c47f; --d-tint:#353220; --d-tag:#c9b37a;
}

body{background:var(--hf-beige);color:var(--ink)}
html[data-theme="dark"] body{background:var(--d-bg)}
::selection{background:var(--hf-olive-soft);color:#fff}

/* Headings in a refined serif */
.ct-head h1,.c2-head h1,.pd h1,.bg h1,.ct-h2,.gn-chip-title,.gn-bag-title,.ct-usp-item h3,.gn-big a{
  font-family:var(--hf-serif);font-weight:600;letter-spacing:-.005em}

/* Wordmark (replaces the "Logo" pill until a real logo is uploaded) */
.gn-wordmark{display:inline-flex;align-items:center;gap:9px;font-family:var(--hf-serif);font-size:16px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-big);white-space:nowrap;line-height:1}
.gn-wordmark svg{width:11px;height:15px;fill:var(--accent);flex:none}
@media(max-width:600px){.gn-wordmark{font-size:14px;letter-spacing:.24em}}

/* Navigation */
.gn-link{color:var(--ink-big)}
.gn-burger .l1,.gn-burger .l2{background:var(--ink-big)}
.gn-chip{background:var(--hf-cream);border-color:var(--hairline);color:var(--ink)}
.gn-chip:hover{border-color:var(--hf-brown-2)}
.gn-chip-fill,.gn-chip-fill:hover{background:var(--hf-brown);border-color:var(--hf-brown);color:var(--hf-cream)}
.gn-card-img{background:var(--hf-cream)}

/* Buttons and pills */
.pd-buy,.gn-bagbtn{box-shadow:0 8px 20px -10px rgba(68,79,42,.7)}
.pd-buy.is-added{background:var(--hf-brown);color:var(--hf-cream)}
.rs-fbadge{background:var(--hf-brown);color:var(--hf-cream)}
.rs-fsummary:hover{background:var(--hf-beige-2)}

/* Cards, bands, product page */
.ct-band{background:var(--hf-beige-2)}
.ct-card,.c2-card{background:var(--hf-cream)}
.ct-chip,.c2-chip,.c2-fbtn{background:var(--hf-cream);color:var(--ink)}
.ct-chip:hover,.c2-chip:hover{border-color:var(--hf-brown-2)}
.c2-chip.on,.ct-chip.on{background:var(--hf-brown);border-color:var(--hf-brown);color:var(--hf-cream)}
.pd-art{background:var(--hf-beige-2)}
.pd-subnote{background:#ece8d3;color:var(--ink-big)}
.pd-desc,.ct-usp-item p{color:#5a4637}
.pd-opt select,.pd-opt input,.bg-email,.bg-qty{background:var(--hf-cream);color:var(--ink)}
.bg-msg{background:#efe4c8;color:#6a4b1c}
.ct-dots i:nth-child(1),.c2-dots i:nth-child(1){background:#b9c48d}
.ct-dots i:nth-child(2),.c2-dots i:nth-child(2){background:#8a9a5b}
.ct-dots i:nth-child(3),.c2-dots i:nth-child(3){background:#5b6a38}
footer.rs-foot{background:var(--hf-beige-2)}

/* Dark: keep body copy readable on the brown surfaces */
html[data-theme="dark"] .pd-desc,html[data-theme="dark"] .ct-usp-item p{color:var(--d-text-2)}
html[data-theme="dark"] .pd-subnote{background:var(--d-tint);color:var(--d-text-2)}
html[data-theme="dark"] .bg-msg{background:#3a2a12;color:#f5c07a}
html[data-theme="dark"] .gn-card-img{background:var(--d-surface-2)}