/* gallery.css — ANAHIT · DOMUS ARTIS design skin (loaded AFTER style.css).
   DESIGN ONLY: re-colours and re-styles the existing Vinum markup into an art
   gallery. Does NOT change structure, menu, cart or admin-managed content —
   every element keeps its id/class so all admin panels still drive the site.
   Three palettes switch via <html data-theme="ivory|noir|rose">. */

:root{
  --bg:#f4f0e9; --surface:#faf7f1; --ink:#1d1a16; --muted:#6b6257;
  --line:#e4dccc; --accent:#9a7b3f; --accent-ink:#fffdf8;
  --shadow:0 18px 50px rgba(40,30,15,.12);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', 'Segoe UI', sans-serif;
}
:root[data-theme="noir"]{
  --bg:#141210; --surface:#1d1a16; --ink:#efe8db; --muted:#a79d8c;
  --line:#2e2a23; --accent:#c9a24b; --accent-ink:#141210;
  --shadow:0 20px 60px rgba(0,0,0,.5);
}
:root[data-theme="rose"]{
  --bg:#efe5e0; --surface:#f8f0ec; --ink:#39282c; --muted:#7f6a66;
  --line:#e6d4cc; --accent:#b0784c; --accent-ink:#fff7f1;
  --shadow:0 18px 50px rgba(90,50,40,.14);
}

/* ---- base ---- */
body{ background:var(--bg)!important; color:var(--ink)!important;
  font-family:var(--sans); font-weight:300; transition:background .4s,color .4s; }
h1,h2,h3,.legend-title{ font-family:var(--serif)!important; font-weight:500; letter-spacing:.01em; }

/* ---- header (maroon bar -> airy) ---- */
header{ background:var(--bg)!important; color:var(--ink)!important;
  border-bottom:1px solid var(--line); padding:14px 20px 22px!important; }
header h1{ color:var(--ink)!important; font-size:clamp(40px,8vw,78px)!important;
  font-weight:500!important; letter-spacing:.14em!important; }
header p{ color:var(--accent)!important; font-family:var(--sans)!important;
  font-size:12px!important; letter-spacing:.34em!important; text-transform:uppercase; }
#main-stamp{ animation:none!important; opacity:.95; }

/* ---- nav / menu buttons (admin-managed, keep as links) ---- */
nav{ gap:26px!important; margin-top:12px; }
nav a, .login-button, .client-name{
  background:none!important; color:var(--muted)!important; padding:6px 2px!important;
  border-radius:0!important; font-weight:400!important; font-family:var(--sans)!important;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid transparent; transition:.2s; }
nav a:hover, .login-button:hover, .client-name:hover{
  background:none!important; color:var(--ink)!important; border-bottom-color:var(--accent); }
.client-dropdown{ background:var(--surface)!important; border:1px solid var(--line)!important; }
.client-dropdown a{ color:var(--ink)!important; }
.client-dropdown a:hover{ background:var(--bg)!important; }

/* language + currency + search controls — one aligned, centered row */
.lang-currency-wrapper{ display:flex!important; justify-content:center!important;
  align-items:center!important; flex-wrap:wrap; gap:10px 16px!important; padding:10px 20px 4px!important; }
.lang-switch{ display:inline-flex; align-items:center; gap:4px; margin:0!important; }
#vsr-search-form{ margin:0!important; display:inline-flex; align-items:center; gap:6px; }
#currency-rate{ margin-left:0!important; }
/* equalise heights so the whole row sits on one perfect baseline */
.lang-switch button, #currency-select,
#vsr-search-form input[type="search"], #vsr-search-form button{
  height:34px!important; box-sizing:border-box!important; vertical-align:middle; margin:0!important; }
#vsr-search-form button{ width:auto!important; padding:0 12px!important; }
@media(min-width:820px){ .lang-currency-wrapper{ flex-wrap:nowrap!important; } }
.lang-switch button{ background:none!important; border:1px solid transparent!important;
  color:var(--muted)!important; border-radius:2px!important; padding:5px 10px!important;
  font-size:12px!important; letter-spacing:.12em; text-transform:uppercase; }
.lang-switch button:hover{ background:none!important; color:var(--ink)!important;
  border-color:var(--line)!important; }
#currency-select{ background:var(--surface)!important; color:var(--ink)!important;
  border:1px solid var(--line)!important; }
#currency-rate{ color:var(--muted)!important; }
#vsr-search-form input[type="search"]{ background:var(--surface)!important; color:var(--ink)!important;
  border:1px solid var(--line)!important; }
#vsr-search-form input[type="search"]::placeholder{ color:var(--muted)!important; }

/* ---- section titles ---- */
h2{ border-bottom:none!important; text-align:center; color:var(--ink)!important;
  font-size:clamp(28px,5vw,46px)!important; font-weight:500!important; margin:54px 0 6px!important; }
h2::after{ content:""; display:block; width:58px; height:1px; background:var(--accent); margin:14px auto 4px; }
section#wines > p{ color:var(--ink)!important; }

/* ---- product / gallery cards ---- */
.wine-container, .grape-container{ gap:28px!important; max-width:1200px; margin:0 auto; }
.wine-item, .grape-item{
  background:var(--surface)!important; border:1px solid var(--line)!important;
  border-radius:4px!important; box-shadow:none!important; padding:0 0 18px!important;
  min-height:auto!important; flex:0 0 280px!important; overflow:hidden; transition:.3s; }
.wine-item:hover, .grape-item:hover{ transform:translateY(-6px)!important; box-shadow:var(--shadow)!important; }
.wine-item img, .grape-item img{
  width:100%!important; height:330px!important; max-height:330px!important;
  object-fit:contain!important; background:var(--bg)!important; padding:14px!important;
  margin:0 0 6px!important; border-radius:0!important; box-sizing:border-box; }
.wine-item img.gift-card-thumb{ object-fit:cover!important; padding:0!important; height:200px!important; }
.wine-item h3, .grape-item h3{ font-family:var(--serif)!important; font-size:25px!important;
  color:var(--ink)!important; margin:8px 18px 4px!important; }
.wine-item h3 a, .grape-item h3 a{ color:var(--ink)!important; }
.wine-item p, .grape-item p{ color:var(--muted)!important; font-size:13px!important; margin:3px 18px!important; }

/* ---- buttons -> gallery buttons ---- */
button{ background:var(--accent)!important; color:var(--accent-ink)!important;
  border:1px solid var(--accent)!important; border-radius:2px!important;
  font-family:var(--sans)!important; font-size:12px!important; letter-spacing:.14em;
  text-transform:uppercase; padding:10px 18px!important; transition:.25s; }
button:hover{ background:var(--ink)!important; border-color:var(--ink)!important; color:var(--bg)!important; }
.wine-item button, .grape-item button{ margin:12px 18px 2px!important; }

/* ---- re-skin leftover Vinum maroon on inner pages (gift/wine/grape/awards/legal) ----
   These pages carry their own <style> blocks + some inline maroon; gallery.css loads
   AFTER them, so these rules win. One place to keep every button on-palette. */
.btn-back, .gift-cta, .wine-cta, .search-btn, button.search-btn,
.actions a, .rank-badge, .lang-row a.active,
[style*="background:#611411"], [style*="background: #611411"],
[style*="background-color:#611411"], [style*="background-color: #611411"]{
  background:var(--accent)!important; color:var(--accent-ink)!important;
  border-color:var(--accent)!important; }
.btn-back:hover, .gift-cta:hover, .wine-cta:hover, .search-btn:hover, .actions a:hover{
  background:var(--ink)!important; color:var(--bg)!important; }
.overlay-close:hover{ background:var(--accent)!important; }
/* maroon emphasis text -> palette accent */
.gift-price, .qty-subtotal, .section-title, .gift-hero-info h1, .wine-hero h1,
.wp-toolbar a{ color:var(--accent)!important; }
.qty-btn{ background:var(--surface)!important; color:var(--accent)!important; border:1px solid var(--line)!important; }
/* keep the themed search field from being repainted by the inline catch above */
#vsr-search-form input[type="search"]{ background:var(--surface)!important; color:var(--ink)!important; }

/* ---- sold counter ---- */
#global-sold-counter{ background:var(--surface)!important; border:1px solid var(--line)!important; box-shadow:none!important; }
#global-sold-counter span{ color:var(--accent)!important; border-right-color:var(--line)!important;
  font-family:var(--serif)!important; text-shadow:none!important; }

/* ---- legend / details / forms ---- */
.legend-block, .details, .legend-text{ background:var(--surface)!important; }
.legend-text-paragraph{ color:var(--ink)!important; font-family:var(--sans)!important; }
input[type="text"], input[type="email"], select, textarea{
  background:var(--surface)!important; color:var(--ink)!important; border:1px solid var(--line)!important; }

/* ---- notice marquee ---- */
.vsr-marquee-wrap{ background:var(--ink)!important; border-color:var(--line)!important; }
.vsr-marquee{ color:var(--bg)!important; font-family:var(--sans)!important; }

/* ---- footer (maroon -> gallery) ---- */
footer{ background:var(--surface)!important; color:var(--muted)!important;
  border-top:1px solid var(--line); }
footer a, footer div{ color:var(--muted)!important; }
footer a:hover{ color:var(--ink)!important; text-decoration:none; }

/* ---- age overlay (keep behaviour, theme it) ---- */
#age-check-overlay{ background:color-mix(in srgb, var(--ink) 93%, transparent)!important; color:var(--bg)!important; }
#age-check-overlay h2{ color:var(--bg)!important; }
#age-check-overlay h2::after{ display:none; }

/* Palette is chosen in the admin (Site Constructor → Appearance) and applied
   via <html data-theme> at render time — no front-end switcher on the site. */

/* ---- chat widget themed to the palette (maroon -> gallery) ---- */
#chat-toggle{ background:var(--accent)!important; color:var(--accent-ink)!important; }
#chat-header{ background:var(--ink)!important; color:var(--bg)!important; font-family:var(--serif)!important; }
#chat-box{ border-color:var(--line)!important; }
#chat-input button{ background:var(--accent)!important; color:var(--accent-ink)!important; }
#chat-input button:hover{ background:var(--ink)!important; }