/* ==========================================================
   Themes — three visually unrelated skins over one skeleton.
   store.css paints only with tokens, so each block below can
   change palette, typography, shape, density AND the structure
   of the header / cards / buttons without touching the markup.

   html[data-theme="mono"]  editorial black & white   (default)
   html[data-theme="warm"]  boutique cream & terracotta
   html[data-theme="bold"]  high-contrast marketplace
   ========================================================== */

/* ==========================================================
   1. MONO — editorial. Hairline borders, square corners,
   pure black on white, tight tracking. (store.css defaults)
   ========================================================== */
html[data-theme="mono"]{
  --brand-case:none;
}
html[data-theme="mono"] .brand span{border-bottom-width:3px}


/* ==========================================================
   2. WARM — boutique. Cream paper, cocoa ink, terracotta
   accent, Heebo headings, big soft radii, shadows
   instead of borders, generous airy spacing.
   ========================================================== */
html[data-theme="warm"]{
  --ink:#33261d;
  --surface:#fdfaf4;
  --soft:#f3ebdf;
  --line:#e5d9c8;
  --line-2:#ded0bb;
  --muted:#8a7360;
  --muted-2:#9c8672;
  --muted-3:#b3a08d;
  --ph:#cbb9a3;
  --ph-2:#cbb9a3;
  --prose:#4a3a2e;
  --danger:#a4402c;
  --ok:#4f7a3f;
  --pick:#b5623c;
  --accent:#b5623c;
  --accent-ink:#fdfaf4;
  --bar:#33261d;
  --bar-ink:#f3ebdf;
  --sk-a:#f3ebdf;
  --sk-b:#e8dccb;
  --scrim:rgba(51,38,29,.38);
  --glass:rgba(253,250,244,.95);
  --cap:rgba(51,38,29,.8);
  /* type — Heebo everywhere, identical to the mono theme */
  --font:'Heebo',-apple-system,'Segoe UI',Arial,sans-serif;
  --font-head:var(--font);
  --head-weight:700;
  --head-track:-.015em;
  --brand-weight:900;
  --brand-track:-.03em;
  --body-size:16px;
  --body-line:1.65;
  /* shape — soft and rounded everywhere */
  --radius:10px;
  --radius-lg:14px;
  --radius-pill:999px;
  --btn-weight:600;
  --btn-pad:15px 32px;
  /* density — noticeably airier than mono */
  --sec-pad:84px;
  --hero-pad:110px 0 96px;
  --grid-gap:34px;
  --header-h:92px;
  --card-border:1px solid transparent;
  --card-radius:14px;
  --card-shadow:0 2px 14px rgba(51,38,29,.07);
  --card-shadow-h:0 10px 30px rgba(51,38,29,.13);
  --max:1180px;
}
/* header: brand centred on its own line, nav centred underneath */
html[data-theme="warm"] header.site{border-bottom:1px solid var(--line)}
/* Two stacked rows: the brand line, then the category nav. A grid rather than a
   wrapped flex row because the icons are placed in the SAME cell as the brand
   (below) — that is what keeps them optically aligned with it. */
html[data-theme="warm"] .header-row{
  display:grid;grid-template-columns:100%;grid-template-rows:auto auto;
  align-items:center;height:auto;padding:22px 0 0;gap:0;
  position:relative;
}
html[data-theme="warm"] .brand{
  grid-area:1/1;align-self:center;text-align:center;font-size:31px;
  /* keeps a long name or a wide logo clear of the icons parked in both corners */
  padding-inline:104px;
}
html[data-theme="warm"] .brand span{border-bottom:none;padding:0}
/* the logo owns the centre of the header, so give it room to breathe */
html[data-theme="warm"] .brand-logo{max-width:100%}
html[data-theme="warm"] nav.main{
  grid-area:2/1;flex:0 1 auto;justify-content:center;gap:34px;
  padding:14px 0 16px;font-size:14.5px;font-weight:600;letter-spacing:.02em;
}
html[data-theme="warm"] nav.main a{border-bottom:none;position:relative;padding:4px 0}
html[data-theme="warm"] nav.main a::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transition:transform .18s
}
html[data-theme="warm"] nav.main a:hover::after,
html[data-theme="warm"] nav.main a.active::after{transform:scaleX(1)}
/* The icons share the brand's grid cell (1/1) rather than being pinned to a
   fixed distance from the top of the header. That is the whole point: the cell
   is as tall as the brand, so `align-self:center` centres the icons against the
   logo automatically — at 24px or at 120px, and equally for a text brand. A
   fixed `top` offset could only ever line up with one logo height.

   The bar spans the full width to push the two groups into opposite corners:
   browsing controls (hamburger + search) in the leading corner — the right, in
   RTL — and the cart in the other. Grouping "find things" together and giving
   the cart its own corner means a customer never mistakes one for the other. */
html[data-theme="warm"] .header-actions{
  grid-area:1/1;align-self:center;justify-self:stretch;
  /* Spanning the full width lays an invisible box straight over the centred
     logo. Let clicks fall through it, or the logo stops working as the link
     home — only the buttons themselves take pointer events. */
  pointer-events:none;
}
html[data-theme="warm"] .header-actions .icon-btn{pointer-events:auto}
html[data-theme="warm"] #btn-cart{margin-inline-start:auto}
/* on phones the two corners eat most of a 360px row, so claw some back */
@media(max-width:720px){
  html[data-theme="warm"] .brand{padding-inline:92px;font-size:26px}
}
html[data-theme="warm"] .icon-btn{border-radius:999px}
html[data-theme="warm"] .icon-btn:hover{background:var(--soft);border-color:transparent}
html[data-theme="warm"] .cart-count{background:var(--accent)}
/* cards float on the page instead of being boxed in. The image keeps the
   square 1/1 crop used everywhere else so the owner's photos are framed
   identically in every version — only the inset and rounding differ here. */
html[data-theme="warm"] .card-img{
  margin:10px 10px 0;border-radius:10px
}
html[data-theme="warm"] .card-body{padding:16px 18px 20px;text-align:center;gap:6px}
/* Only the product page carries this label now; the grid card shows just the
   name and price. (The former order:-1 existed to lift it above the name inside
   the card's flex column and no longer has anything to reorder.) */
html[data-theme="warm"] .card-cat{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase
}
html[data-theme="warm"] .card-name{font-size:17px;font-weight:600}
html[data-theme="warm"] .price{font-weight:600;font-size:18px}
/* Centring belongs to the grid card only. Scoped to .card, because .price-row
   and .stock-note are reused on the product page, where the surrounding
   category/title/description are right-aligned RTL prose — centring them
   there left the column looking misaligned. */
html[data-theme="warm"] .card .price-row{justify-content:center;margin-top:8px}
html[data-theme="warm"] .card .stock-note{text-align:center}
/* hero + section headings centred */
html[data-theme="warm"] .section-head{
  flex-direction:column;align-items:center;text-align:center;gap:6px
}
html[data-theme="warm"] .features{background:var(--soft);border-top:none}
html[data-theme="warm"] .feature{border-inline-start-color:var(--line)}
html[data-theme="warm"] .badge{border-radius:999px;padding:5px 13px}
html[data-theme="warm"] .pdp-img,
html[data-theme="warm"] .gal-main{border-radius:14px;border-color:var(--line)}
html[data-theme="warm"] .gal-hint{border-radius:8px}
html[data-theme="warm"] .gal-nav{border-radius:999px;border-color:transparent}
html[data-theme="warm"] .qty{border-radius:999px;border-color:var(--line-2)}
html[data-theme="warm"] .qty input{border-inline-color:var(--line-2)}
html[data-theme="warm"] .qty button:hover{background:var(--accent);color:var(--accent-ink)}
html[data-theme="warm"] .opt-dot{border-color:var(--line-2)}
html[data-theme="warm"] .opt-dot.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
html[data-theme="warm"] .drawer,
html[data-theme="warm"] .drawer-head,
html[data-theme="warm"] .drawer-foot{border-color:var(--line)}
html[data-theme="warm"] footer.site{
  border-top:none;background:var(--soft);padding-top:60px
}
html[data-theme="warm"] .foot-grid h5{
  font-size:16px;letter-spacing:.06em;font-weight:700
}
html[data-theme="warm"] .foot-bottom{border-top-color:var(--line-2)}
html[data-theme="warm"] .thanks .tick{border-color:var(--accent);color:var(--accent)}
html[data-theme="warm"] .toast{border-radius:999px}
html[data-theme="warm"] .empty{border-radius:14px}


/* ==========================================================
   3. BOLD — marketplace. Cool near-black on white, electric
   indigo accent, geometric display face, zero radius, chunky
   filled blocks, dense grid, uppercase tracked micro-labels.
   ========================================================== */
html[data-theme="bold"]{
  --ink:#13131a;
  --surface:#fff;
  --soft:#f1f2f6;
  --line:#dcdee6;
  --line-2:#c9ccd8;
  --muted:#5c6070;
  --muted-2:#6b7080;
  --muted-3:#9aa0b0;
  --ph:#b9bdcc;
  --ph-2:#b9bdcc;
  --prose:#26262f;
  --danger:#d61f3d;
  --ok:#0a7d4b;
  --pick:#3a2ed8;
  --accent:#3a2ed8;
  --accent-ink:#fff;
  --bar:#3a2ed8;
  --bar-ink:#fff;
  --sk-a:#eceef4;
  --sk-b:#e0e3ec;
  --scrim:rgba(19,19,26,.5);
  --glass:rgba(255,255,255,.96);
  --cap:rgba(19,19,26,.85);
  /* type — geometric display, tight and loud */
  --font:'Rubik',-apple-system,'Segoe UI',Arial,sans-serif;
  --font-head:'Secular One',Impact,sans-serif;
  --head-weight:400;
  --head-track:-.01em;
  --brand-weight:400;
  --brand-track:0;
  --body-size:15.5px;
  --body-line:1.6;
  /* shape — hard edges, no rounding at all */
  --radius:0px;
  --radius-lg:0px;
  --radius-pill:0px;
  --btn-weight:400;
  --btn-pad:15px 30px;
  /* density — tighter and busier than mono */
  --sec-pad:52px;
  --hero-pad:64px 0 60px;
  --grid-gap:14px;
  --header-h:66px;
  --card-radius:0px;
  --card-border:1px solid transparent;
  --card-shadow:none;
  --max:1320px;
}
/* announcement bar is the loud indigo strip */
html[data-theme="bold"] .topbar{font-weight:500;letter-spacing:.04em;text-transform:uppercase}
html[data-theme="bold"] .topbar .wrap{height:34px;font-size:12px}
/* header: brand sits inside a filled indigo block */
html[data-theme="bold"] header.site{border-bottom:2px solid var(--ink)}
html[data-theme="bold"] .brand{font-size:22px;letter-spacing:.01em}
html[data-theme="bold"] .brand span{
  border-bottom:none;padding:7px 15px;background:var(--ink);color:var(--surface)
}
html[data-theme="bold"] nav.main{
  gap:6px;font-size:13.5px;font-weight:500;text-transform:uppercase;letter-spacing:.05em
}
html[data-theme="bold"] nav.main a{
  padding:8px 13px;border-bottom:none;background:var(--soft)
}
html[data-theme="bold"] nav.main a:hover,
html[data-theme="bold"] nav.main a.active{
  background:var(--accent);color:var(--accent-ink)
}
html[data-theme="bold"] .icon-btn{border:1px solid var(--line);width:40px;height:40px}
html[data-theme="bold"] .icon-btn:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
html[data-theme="bold"] .cart-count{border-radius:0}
/* cards: flat grey tile, no frame, hard-edged label block */
html[data-theme="bold"] .card{background:var(--soft)}
html[data-theme="bold"] .card:hover{box-shadow:inset 0 0 0 2px var(--accent)}
html[data-theme="bold"] .card-img{background:var(--surface)}
html[data-theme="bold"] .card-body{padding:13px 14px 15px;gap:5px}
html[data-theme="bold"] .card-cat{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--accent)
}
html[data-theme="bold"] .card-name{font-size:14.5px;font-weight:500}
/* Prices stay in the body face: Secular One draws ₪ (U+20AA) as a "שח"
   glyph, which reads as letters rather than a currency sign. */
html[data-theme="bold"] .price{font-size:19px;font-weight:700;letter-spacing:-.01em}
html[data-theme="bold"] .badge{background:var(--danger);letter-spacing:.06em}
/* headings shout */
html[data-theme="bold"] .hero h1{font-size:clamp(32px,5.6vw,58px)}
html[data-theme="bold"] .section-head h2{text-transform:none}
html[data-theme="bold"] .section-head{
  border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:22px
}
html[data-theme="bold"] .side h4,
html[data-theme="bold"] .foot-grid h5{
  text-transform:uppercase;letter-spacing:.1em;font-weight:500
}
html[data-theme="bold"] .features{background:var(--ink);border-top:none}
html[data-theme="bold"] .features .feature{color:var(--surface);border-inline-start-color:rgba(255,255,255,.16)}
html[data-theme="bold"] .features .feature i{color:var(--surface)}
html[data-theme="bold"] .btn:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)}
html[data-theme="bold"] .btn.outline{border-color:var(--ink);color:var(--ink)}
html[data-theme="bold"] .btn.outline:hover{background:var(--ink);color:var(--surface)}
html[data-theme="bold"] .opt-dot{border-radius:0}
html[data-theme="bold"] .opt-dot.on{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--accent)}
html[data-theme="bold"] footer.site{background:var(--soft);border-top:2px solid var(--ink);padding-top:44px}
html[data-theme="bold"] .thanks .tick{border-radius:0;border-color:var(--accent);color:var(--accent)}
html[data-theme="bold"] .cofield input,
html[data-theme="bold"] .cofield textarea,
html[data-theme="bold"] .ship-opt,
html[data-theme="bold"] .coupon-row input{border-radius:0}