/* ============================================================
   Colțul Pictorilor — bază globală (toate paginile)
   Jetoane de culoare (mood-swing) · header · ambient · primitive
   ============================================================ */

/* ---------- 1. Jetoane de culoare (mood implicit: Lut cald) ---------- */
:root{
  --bg1:#f7efe6; --bg2:#f1e2d2; --bg3:#ecd7c3;
  --ink:#38291f; --muted:#8c7363; --line:#e6d4c1;
  --accent:#c2744f; --accent-ink:#fffaf4;
  --surface:#fbf5ee; --plaque:#f2e5d6; --frame:#2c231d;
  --spot:255,214,170;          /* culoarea reflectorului (rgb) */
  --shadow:46,31,22;           /* umbra caldă (rgb) */
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw:1220px;
  --header-h:82px;
}
body[data-mood="lavanda"]{
  --bg1:#f6f1f8; --bg2:#eadff1; --bg3:#e1d2ec;
  --ink:#352a3f; --muted:#897d96; --line:#e4d7ee;
  --accent:#9a76b4; --accent-ink:#fcf9ff;
  --surface:#faf6fc; --plaque:#efe5f6; --frame:#2c2336;
  --spot:228,205,247; --shadow:45,32,55;
}
body[data-mood="salvie"]{
  --bg1:#f1f5ee; --bg2:#e4ece0; --bg3:#d7e3d0;
  --ink:#2b3528; --muted:#78856d; --line:#dde8d7;
  --accent:#7c9a6d; --accent-ink:#f8fbf4;
  --surface:#f6faf2; --plaque:#e7efe0; --frame:#283023;
  --spot:214,233,195; --shadow:30,42,27;
}
body[data-mood="apus"]{
  --bg1:#fdf0e8; --bg2:#f9dccd; --bg3:#f3c6af;
  --ink:#43291f; --muted:#9c6e5b; --line:#f1d2bf;
  --accent:#df8059; --accent-ink:#fff6f0;
  --surface:#fef4ee; --plaque:#fbe1d2; --frame:#39241b;
  --spot:255,198,156; --shadow:64,34,22;
}
body[data-mood="nocturn"]{
  --bg1:#241c18; --bg2:#2d231c; --bg3:#191210;
  --ink:#f3e7d6; --muted:#b7a48d; --line:#3d3026;
  --accent:#d8a860; --accent-ink:#241c18;
  --surface:#2b211b; --plaque:#31271f; --frame:#0e0a07;
  --spot:255,198,122; --shadow:0,0,0;
}

/* ---------- 2. Suprafețe „galerie" (home + WooCommerce) ---------- */
body.cp-surface{
  background:var(--bg1);
  color:var(--ink);
  font-family:var(--sans);
  transition:background .7s ease, color .5s ease;
  overflow-x:hidden;
}
body.cp-surface #page{ position:relative; z-index:1; background:transparent; }
body.cp-surface #content,
body.cp-surface .site-content{ background:transparent; }
body.cp-surface h1,
body.cp-surface h2,
body.cp-surface h3{ color:var(--ink); }

/* ---------- 3. Ambient — jocuri de lumină / gradient ---------- */
.cp-ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.cp-ambient::after{ /* vignetă caldă + degrade de bază */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(var(--spot),.22), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  transition:background .7s ease;
}
.cp-pool{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; mix-blend-mode:soft-light; transition:background .7s ease; }
.cp-pool-1{ width:46vw; height:46vw; top:-8vw; left:-6vw;  background:radial-gradient(circle, rgba(var(--spot),.9), transparent 68%); animation:cpDrift1 26s ease-in-out infinite; }
.cp-pool-2{ width:38vw; height:38vw; top:28vh; right:-8vw;  background:radial-gradient(circle, rgba(var(--spot),.7), transparent 66%); animation:cpDrift2 32s ease-in-out infinite; }
.cp-pool-3{ width:34vw; height:34vw; bottom:-10vw; left:24vw; background:radial-gradient(circle, rgba(var(--spot),.5), transparent 70%); animation:cpDrift3 38s ease-in-out infinite; }
body[data-mood="nocturn"] .cp-pool{ mix-blend-mode:screen; opacity:.4; }
body[data-mood="nocturn"] .cp-ambient::after{ background:
  radial-gradient(120% 80% at 50% -6%, rgba(var(--spot),.16), transparent 58%),
  linear-gradient(180deg, var(--bg1), var(--bg2) 50%, var(--bg3)); }

@keyframes cpDrift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(4vw,3vh) scale(1.08);} }
@keyframes cpDrift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vw,-2vh) scale(1.12);} }
@keyframes cpDrift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(3vw,-4vh) scale(1.06);} }

.cp-grain{
  position:absolute; inset:0; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. Primitive (butoane, eyebrow, chip) ---------- */
.cp-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.cp-eyebrow{
  font-family:var(--sans); font-size:.74rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.6em;
}
.cp-eyebrow::before{
  content:""; width:30px; height:1px; background:var(--accent); display:inline-block; opacity:.7;
}

.cp-btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-weight:500; font-size:.92rem; letter-spacing:.02em;
  padding:.85em 1.6em; border-radius:999px; cursor:pointer;
  text-decoration:none; border:1px solid transparent; transition:all .3s ease;
}
.cp-btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 10px 26px -12px rgba(var(--shadow),.6); }
.cp-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(var(--shadow),.7); color:var(--accent-ink); }
.cp-btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.cp-btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

.cp-chip{
  display:inline-flex; align-items:center; gap:.45em; font-size:.72rem; letter-spacing:.06em;
  color:var(--muted); background:rgba(var(--spot),.18); border:1px solid var(--line);
  padding:.35em .85em; border-radius:999px;
}
.cp-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ---------- 5. Selector de atmosferă (mood-swing) ---------- */
.cp-mood{
  display:inline-flex; align-items:center; gap:.85rem;
  padding:.55rem .95rem; border-radius:999px;
  background:rgba(var(--spot),.14); border:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.cp-mood-label{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.cp-swatches{ display:inline-flex; gap:.5rem; }
.cp-swatch{
  width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid transparent; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow:0 2px 6px -1px rgba(var(--shadow),.3);
}
.cp-swatch:hover{ transform:scale(1.18); }
.cp-swatch[aria-pressed="true"]{ border-color:var(--ink); transform:scale(1.12); }
.cp-sw-lut{     background:linear-gradient(135deg,#efd9c4,#c2744f); }
.cp-sw-lavanda{ background:linear-gradient(135deg,#e1d2ec,#9a76b4); }
.cp-sw-salvie{  background:linear-gradient(135deg,#d7e3d0,#7c9a6d); }
.cp-sw-apus{    background:linear-gradient(135deg,#f3c6af,#df8059); }
.cp-sw-nocturn{ background:linear-gradient(135deg,#3a2d22,#d8a860); }

/* mini, pentru bara de header */
.cp-mood-mini{ padding:.4rem .6rem; gap:.5rem; }
.cp-mood-mini .cp-swatch{ width:18px; height:18px; }

/* ============================================================
   6. HEADER — bara de galerie (toate paginile)
   ============================================================ */
#masthead.cp-header{
  position:sticky; top:0; left:0; right:0; z-index:50;
  background:color-mix(in srgb, var(--bg1) 86%, transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--line);
  transition:background .5s ease, border-color .5s ease, padding .35s ease;
}
.cp-header-inner{
  display:flex; align-items:center; gap:1.4rem;
  min-height:var(--header-h);
}
.cp-brand{
  display:inline-flex; align-items:baseline; gap:.5rem; text-decoration:none;
  font-family:var(--serif); color:var(--ink); line-height:1; margin-right:auto;
}
.cp-brand-mark{
  font-size:1.15rem; color:var(--accent); transform:translateY(-1px);
  transition:transform .4s ease;
}
.cp-brand:hover .cp-brand-mark{ transform:translateY(-1px) rotate(45deg); }
.cp-brand-text{ font-size:1.42rem; font-weight:600; letter-spacing:.005em; }
.cp-brand-text em{ font-style:italic; font-weight:400; color:var(--accent); }

.cp-nav ul{ list-style:none; display:flex; align-items:center; gap:2rem; margin:0; padding:0; }
.cp-nav li{ margin:0; }
.cp-nav a{
  font-family:var(--sans); font-size:.92rem; font-weight:400; letter-spacing:.03em;
  color:var(--ink); text-decoration:none; position:relative; padding:.3em 0; opacity:.86;
  transition:opacity .3s ease, color .3s ease;
}
.cp-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
  background:var(--accent); transition:right .35s ease;
}
.cp-nav a:hover{ opacity:1; color:var(--accent); }
.cp-nav a:hover::after{ right:0; }
.cp-nav .current-menu-item > a{ opacity:1; color:var(--accent); }
.cp-nav .current-menu-item > a::after{ right:0; }

.cp-header-actions{ display:flex; align-items:center; gap:1rem; }
.cp-cart{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; color:var(--ink); text-decoration:none;
  border:1px solid var(--line); background:rgba(var(--spot),.12);
  transition:color .3s ease, border-color .3s ease, transform .3s ease;
}
.cp-cart:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.cp-cart svg{ width:18px; height:18px; }
.cp-cart .cp-cart-count{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.66rem; font-weight:600; line-height:1;
  color:var(--accent-ink); background:var(--accent); border-radius:999px;
}

/* hamburger (mobil) */
.cp-burger{
  display:none; width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:rgba(var(--spot),.12); padding:0;
  color:var(--ink); align-items:center; justify-content:center;
}
.cp-burger span{ position:relative; width:17px; height:1.6px; background:currentColor; display:block; transition:transform .3s ease, opacity .3s ease; }
.cp-burger span::before,.cp-burger span::after{ content:""; position:absolute; left:0; width:17px; height:1.6px; background:currentColor; transition:transform .3s ease; }
.cp-burger span::before{ top:-6px; }
.cp-burger span::after{ top:6px; }
.cp-burger[aria-expanded="true"] span{ background:transparent; }
.cp-burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.cp-burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* panoul mobil */
.cp-mobile-panel{
  display:none; overflow:hidden; max-height:0; opacity:0;
  border-top:1px solid transparent;
  transition:max-height .45s ease, opacity .35s ease, border-color .35s ease;
}
.cp-mobile-panel.open{ max-height:70vh; opacity:1; border-top-color:var(--line); }
.cp-mobile-panel ul{ list-style:none; margin:0; padding:1rem 0 1.4rem; }
.cp-mobile-panel li{ margin:0; }
.cp-mobile-panel a{
  display:block; padding:.85rem 24px; font-family:var(--serif); font-size:1.12rem;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);
}
.cp-mobile-panel a:hover{ color:var(--accent); }

/* header transparent, peste hero, doar pe home (până la scroll) */
body.home #masthead.cp-header{
  position:absolute; background:transparent; backdrop-filter:none; border-bottom-color:transparent;
}
body.home #masthead.cp-header.cp-scrolled{
  position:fixed;
  background:color-mix(in srgb, var(--bg1) 86%, transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom-color:var(--line);
  animation:cpHeaderDrop .45s ease;
}
@keyframes cpHeaderDrop{ from{ transform:translateY(-100%);} to{ transform:translateY(0);} }

/* ---------- 7. Footer — discret, în tonul galeriei ---------- */
body.cp-surface .site-footer,
body.cp-surface .ast-small-footer{
  background:var(--bg3) !important; border-top:1px solid var(--line);
  position:relative; z-index:1;
}
body.cp-surface .site-footer *{ color:var(--muted) !important; }
body.cp-surface .site-footer a:hover{ color:var(--accent) !important; }

/* ---------- 8. Mișcare redusă ---------- */
@media (prefers-reduced-motion:reduce){
  .cp-pool{ animation:none !important; }
  body.home #masthead.cp-header.cp-scrolled{ animation:none; }
}

/* ---------- 9. Responsive header ---------- */
@media (max-width:900px){
  .cp-nav{ display:none; }
  .cp-burger{ display:inline-flex; }
  .cp-mobile-panel{ display:block; }
  .cp-mood-mini{ display:none; }
  :root{ --header-h:70px; }
  .cp-brand-text{ font-size:1.25rem; }
}