:root{
  --bg:#fff; --fg:#111; --muted:#6b7280; --accent:#111; --accent2:#f3f4f6;
  --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.06);
}

/* Dark preferențial (fallback dacă nu e setată tema manual) */
@media (prefers-color-scheme:dark){
  :root{ --bg:#0c0c0c; --fg:#f5f5f5; --muted:#a1a1aa; --accent:#f5f5f5; --accent2:#171717; }
}

/* Override explicit prin atribut (are prioritate peste preferința sistemului) */
:root[data-theme='light']{
  --bg:#ffffff; --fg:#111111; --muted:#6b7280; --accent:#111111; --accent2:#f3f4f6;
}
:root[data-theme='dark']{
  --bg:#0c0c0c; --fg:#f5f5f5; --muted:#a1a1aa; --accent:#f5f5f5; --accent2:#171717;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.container{width:min(1120px,92vw); margin:0 auto}

/* Header + Nav */
header{
  position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(8px);
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--fg) 10%, transparent)
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.nav-links{display:flex; gap:18px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:999px;
  border:1px solid var(--fg); background:var(--fg); color:var(--bg); box-shadow:var(--shadow)
}
.btn.secondary{background:transparent; color:var(--fg)}

/* Mobile menu */
.menu-toggle{display:none; background:transparent; border:none; padding:8px;}
@media (max-width: 860px){
  .nav-links{display:none;}
  .menu-toggle{display:inline-flex;}
  .mobile-panel{position:fixed; inset:0; display:none; background:rgba(0,0,0,.55);}
  .mobile-sheet{
    position:absolute; inset-inline:0; top:0; background:var(--bg);
    border-bottom:1px solid color-mix(in srgb, var(--fg) 10%, transparent);
    box-shadow:var(--shadow); padding:16px 24px 24px;
  }
  .mobile-links{display:grid; gap:14px; padding-block:8px;}
  .mobile-actions{display:flex; gap:10px; padding-top:4px; flex-wrap:wrap;}
}

/* Sections / Layout */
.hero{padding: clamp(24px, 6vw, 64px) 0}
.hero-grid{
  display:grid; grid-template-columns:1.2fr .8fr;
  gap: clamp(16px, 3vw, 32px); align-items:center
}
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr }
  .nav-links{gap:12px}
}
.kicker{font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:700}
h1{font-size: clamp(28px, 5vw, 52px); line-height:1.06; margin:.35em 0 .4em}
.muted{color:var(--muted)}

section{padding: clamp(26px, 6vw, 68px) 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px}

/* Grid + Cards */
.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 2vw, 18px)}
.col-4{grid-column: span 4} .col-6{grid-column: span 6} .col-12{grid-column: 1/-1}
@media (max-width: 900px){ .col-4{grid-column: span 6} }
@media (max-width: 640px){ .col-4, .col-6{grid-column: 1/-1} }

.card{background:var(--accent2); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card-body{padding:14px; display:grid; gap:6px}
.price{font-weight:800}

/* Panels / Forms */
.panel{background:var(--accent2); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.field{display:grid; gap:6px}
.input, .textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  background:var(--bg); color:var(--fg)
}
.textarea{min-height:120px; resize:vertical}
.error{color:#b91c1c}
.success{color:#166534}

/* Tables (size guide, future use) */
table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:12px; box-shadow:var(--shadow)}
th, td{padding:10px 12px; text-align:left; border-bottom:1px solid color-mix(in srgb, var(--fg) 10%, transparent)}
thead th{background:var(--accent2)}

/* Footer */
footer{border-top:1px solid color-mix(in srgb, var(--fg) 10%, transparent); padding:18px 0 40px}
.foot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:14px}

/* News (blog) */
.news-list{ display:grid; gap:16px; }
.news-card{ padding:0; overflow:hidden; }
.news-figure{ margin:0; }
.news-img{ width:100%; height:auto; display:block; cursor:zoom-in; aspect-ratio: 16/9; object-fit:cover; }
.news-details{ display:block; padding:14px; }
.news-summary{ list-style:none; cursor:pointer; }
.news-summary::-webkit-details-marker { display:none; }
.news-title{ font-weight:800; font-size:18px; margin-bottom:6px; }
.news-meta{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.news-excerpt{ color:var(--fg); margin-bottom:8px; }
.news-toggle{ display:inline-block; font-weight:700; font-size:14px; color:var(--accent); }

/* Lightbox */
.lb-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.85); z-index:1000; padding:20px;
}
.lb-overlay.open{ display:flex; }
.lb-img{ max-width:90vw; max-height:90vh; display:block; }
.lb-close{
  position:absolute; top:12px; right:16px; border:none; background:transparent; color:#fff;
  font-size:32px; line-height:1; cursor:pointer;
}
/* Gallery */
.gal-thumb{ transition: transform .2s ease; }
.gal-thumb:hover{ transform: scale(1.02); }

/* ==== Our Collections: force multi-column cards on desktop ==== */
.collections-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  align-items: stretch;
}

/* Let cards actually shrink within the grid column */
.collections-grid .card{
  display:flex;
  min-width:0;               /* prevents contents from forcing full width */
  height:100%;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow, 0 2px 16px rgba(0,0,0,.07));
}

/* Tidy vertical spacing inside */
.collections-grid .card .card-body{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  padding:16px;
}

/* Prevent pill buttons from becoming 100% width */
.collections-grid .btn{
  display:inline-flex !important;   /* override any global .btn {display:block} */
  width:auto !important;            /* override any global width:100% */
  white-space:nowrap;
  align-self:flex-start;
}

/* Optional: compact headings */
.collections-grid h3{ margin:0 0 6px 0; font-size:18px; line-height:1.25; }

/* Responsive tweaks (optional, if you prefer 4/3/2/1) */
@media (min-width:1200px){ .collections-grid{ grid-template-columns:repeat(4, minmax(280px,1fr)); } }
@media (max-width:1100px){ .collections-grid{ grid-template-columns:repeat(3, minmax(260px,1fr)); } }
@media (max-width:860px) { .collections-grid{ grid-template-columns:repeat(2, minmax(240px,1fr)); } }
@media (max-width:560px) { .collections-grid{ grid-template-columns:1fr; } }