/* ═══════════════════════════════════════════════════════════════
   DIACONI by Alexandru — app.css
   Public frontend stylesheet
   ═══════════════════════════════════════════════════════════════ */


/* ── 1. VARIABLES ─────────────────────────────────────────────── */

:root {
  --logo:   #c9c5bc;
  --logot:  #999a96;
  --black:  #141210;
  --dark:   #201D19;
  --mid:    #4A4642;
  --warm:   #B8976A;
  --gold:   #C8A96E;
  --cream:  #F0EBE0;
  --white:  #FAF8F4;
  --light:  #E8E2D6;
  --border: rgba(184, 151, 106, 0.18);
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Jost', system-ui, sans-serif;
}


/* ── 2. RESET & BASE ──────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


/* ── 3. NOISE TEXTURE OVERLAY ─────────────────────────────────── */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .018;
  pointer-events: none;
  z-index: 999;
  mix-blend-mode: overlay;
}


/* ── 4. NAVIGATION ────────────────────────────────────────────── */

#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 1.6rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .5s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(20, 18, 16, .6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border);
  padding: 1rem 4rem;
}

.nav-logo {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  font-weight: 300;
}
.nav-links {
  display: flex;
  gap: 3rem;
  list-style: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav-links a {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, .7);
  text-decoration: none;
  transition: color .25s;
  font-weight: 300;
}
.nav-links a:hover,
.nav-links a.active { color: var(--cream); }
.nav-links a.active {
  border-bottom: 1px solid rgba(184, 151, 106, .6);
  padding-bottom: 2px;
}


/* ── 5. MOBILE NAV ────────────────────────────────────────────── */

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  flex-direction: column;
  gap: 5px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--cream);
  transition: all .3s;
}
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 16, .98);
  z-index: 490;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-size: 1rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, .75);
  text-decoration: none;
  transition: color .2s;
}
.nav-mobile a:hover { color: var(--cream); }
.nav-mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  background: none;
  border: none;
  color: rgba(240, 235, 224, .55);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}


/* ── 6. TYPOGRAPHY ────────────────────────────────────────────── */

.t-label {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--warm);
  font-weight: 300;
  font-family: var(--sans);
}
.t-section {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.15;
}
.t-body {
  font-size: 1.02rem;
  line-height: 1.9;
  color: rgba(240, 235, 224, .82);
  font-weight: 300;
  letter-spacing: .01em;
}
.t-price {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: .06em;
}


/* ── 7. LAYOUT ────────────────────────────────────────────────── */

.section    { padding: 8rem 6rem; }
.section-sm { padding: 5rem 6rem; }
.container  { max-width: 1400px; margin: 0 auto; }
.grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }


/* ── 8. BUTTONS ───────────────────────────────────────────────── */

.btn-ghost {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  border: 1px solid rgba(184, 151, 106, .35);
  padding: .85rem 2.4rem;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: all .3s;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost:hover { border-color: rgba(184, 151, 106, .65); color: var(--warm); }

.btn-solid {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .95rem 2.6rem;
  background: var(--cream);
  color: var(--black);
  cursor: pointer;
  transition: all .25s;
  border: 1px solid var(--cream);
  text-decoration: none;
  display: inline-block;
}
.btn-solid:hover { background: var(--warm); border-color: var(--warm); color: var(--black); }


/* ── 9. DIVIDER ───────────────────────────────────────────────── */

.divider      { display: flex; align-items: center; gap: 1.5rem; margin: 1.2rem 0; }
.divider-line { flex: 1; height: 1px; background: var(--border); max-width: 60px; }
.divider-text { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(184, 151, 106, .65); }


/* ── 10. SUBCAT NAV ───────────────────────────────────────────── */

.subcat-nav  { display: flex; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.subcat-link {
  flex: 1;
  text-align: center;
  padding: 2rem 1rem;
  text-decoration: none;
  border-right: 1px solid var(--border);
  transition: background .25s;
}
.subcat-link:last-child { border-right: none; }
.subcat-link:hover,
.subcat-link.active     { background: rgba(184, 151, 106, .06); }
.subcat-brand {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(184, 151, 106, .7);
  display: block;
  margin-bottom: .4rem;
  font-family: var(--sans);
}
.subcat-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: rgba(240, 235, 224, .75);
  display: block;
  font-weight: 300;
}
.subcat-link.active .subcat-name { color: var(--cream); }


/* ── 11. PRODUCT GRID ─────────────────────────────────────────── */

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px; }
.product-card {
  background: #1E1B17;
  cursor: pointer;
  transition: background .3s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}
.product-card:hover { background: #252118; }
.product-img {
  aspect-ratio: 4 / 5;
  background: #221F1B;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.product-card:hover .product-img img { transform: scale(1.04); }
.product-img-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1E1B17 0%, #2A2520 100%);
}
.product-body   { padding: 1.6rem; }
.product-cat    { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(184, 151, 106, .75); margin-bottom: .4rem; font-family: var(--sans); }
.product-name   { font-family: var(--serif); font-size: 1.2rem; font-weight: 300; color: var(--cream); margin-bottom: .4rem; letter-spacing: .03em; }
.product-mat    { font-size: .82rem; color: rgba(240, 235, 224, .58); letter-spacing: .04em; margin-bottom: 1rem; font-family: var(--sans); font-weight: 300; }
.product-footer { display: flex; justify-content: space-between; align-items: center; padding-top: .9rem; border-top: 1px solid rgba(184, 151, 106, .12); }


/* ── 12. PRODUCT STATUS BADGES ────────────────────────────────── */

.product-status {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .38rem .8rem;
  font-family: var(--sans);
  font-weight: 300;
}
.st-avail { background: rgba(14, 13, 12, .85); color: rgba(184, 151, 106, 1);    border: 1px solid rgba(184, 151, 106, .4);  }
.st-order { background: rgba(184, 151, 106, .18); color: var(--warm);            border: 1px solid rgba(184, 151, 106, .45); }
.st-sold  { background: rgba(14, 13, 12, .85); color: rgba(240, 235, 224, .55);  border: 1px solid rgba(240, 235, 224, .18); }


/* ── 13. FORMS ────────────────────────────────────────────────── */

.form-field { margin-bottom: 1.5rem; }
.form-label {
  display: block;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, .55);
  margin-bottom: .6rem;
}
.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(240, 235, 224, .22);
  padding: .8rem 0;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  outline: none;
  transition: border-color .25s;
}
.form-input::placeholder   { color: rgba(240, 235, 224, .32); }
.form-input:focus          { border-bottom-color: rgba(184, 151, 106, .6); }
select.form-input option   { background: var(--dark); }


/* ── 14. HERO ─────────────────────────────────────────────────── */

#hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-slide        { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; }
.hero-slide.active { opacity: 1; }
.hero-content      { position: relative; z-index: 2; text-align: center; padding: 2rem; }
.hero-tagline      { margin-bottom: 2.5rem; opacity: .55; }
.hero-bg-video     { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hero-dot {
  width: 28px;
  height: 1px;
  background: rgba(184, 151, 106, .22);
  border: none;
  cursor: pointer;
  padding: 3px 0;
  background-clip: content-box;
  transition: background .3s;
  display: block;
}
.hero-dot.active { background: rgba(184, 151, 106, .7); }
#heroDots {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .8rem;
  z-index: 3;
}
.hero-scroll {
  position: absolute;
  bottom: 2.8rem;
  right: 4rem;
  font-size: .5rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(184, 151, 106, .35);
  writing-mode: vertical-rl;
  z-index: 3;
}


/* ── 15. STUDIO SECTION ───────────────────────────────────────── */

.section-studio {
  padding: 7rem 6rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.studio-inner { text-align: center; max-width: 680px; margin: 0 auto; }
.t-quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  line-height: 1.55;
  letter-spacing: .02em;
  margin-bottom: 2rem;
}


/* ── 16. SECTION HEADER ───────────────────────────────────────── */

.section-header { text-align: center; margin-bottom: 5rem; }


/* ── 17. LANGUAGE SWITCH ──────────────────────────────────────── */

.lang-switch     { font-size: .56rem; letter-spacing: .18em; }
.lang-switch a   { text-decoration: none; transition: color .2s; }
.lang-switch a.on  { color: rgba(240, 235, 224, 1); }
.lang-switch a.off { color: rgba(184, 151, 106, .6); }


/* ── 18. FOOTER ───────────────────────────────────────────────── */

#footer {
  padding: 5rem 6rem 3rem;
  border-top: 1px solid var(--border);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 4rem;
}
.footer-brand      { text-align: center; }
.footer-brand-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 300;
}
.footer-links    { list-style: none; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a  {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, .5);
  text-decoration: none;
  transition: color .2s;
}
.footer-links a:hover { color: var(--warm); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.footer-copy { font-size: .66rem; letter-spacing: .08em; color: rgba(240, 235, 224, .38); }


/* ── 19. TOAST ────────────────────────────────────────────────── */

#toast {
  position: fixed;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--dark);
  border: 1px solid var(--border);
  color: var(--cream);
  padding: .9rem 2rem;
  font-size: .8rem;
  letter-spacing: .06em;
  opacity: 0;
  transition: all .35s;
  z-index: 9999;
  white-space: nowrap;
  pointer-events: none;
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.ok   { border-color: rgba(93, 202, 165, .3); }
#toast.err  { border-color: rgba(226, 75, 74, .3); }


/* ── 20. CATEGORY THEMES ──────────────────────────────────────── */
/*
   Applied as <body class="cat-theme-X">.
   dark:       default — no overrides needed.
   light:      full cream inversion.
   warm:       deep amber-brown gradient.
   slate:      cool blue-indigo gradient.
   forest:     deep moss-green gradient.
   terracotta: earthy burnt-sienna gradient.
   stone:      warm neutral-grey gradient.
   ivory:      pale warm gradient (soft light variant).
*/

/* ·· light ·· */

body.cat-theme-light {--logo:  #1A1612; --logot:  #1A1612;  }
body.cat-theme-light { background: #F0EBE0; color: #1A1612; }
body.cat-theme-light #nav.scrolled {
  background: rgba(240, 235, 224, .95);
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(138, 104, 64, .2);
}
body.cat-theme-light .t-label   { color: #8A6840; }
body.cat-theme-light .t-section,
body.cat-theme-light .product-name,
body.cat-theme-light .product-cat,
body.cat-theme-light .product-mat,
body.cat-theme-light .subcat-name,
body.cat-theme-light .subcat-brand  { color: #1A1612; }
body.cat-theme-light .t-body        { color: rgba(26, 22, 18, .65); }
body.cat-theme-light .product-card  { background: #E0D9CF; }
body.cat-theme-light .product-card:hover { background: #D5CCC0; }
body.cat-theme-light .product-img   { background: #CBC2B5; }
body.cat-theme-light .nav-links a   { color: rgba(26, 22, 18, .5); }
body.cat-theme-light .nav-links a:hover,
body.cat-theme-light .nav-links a.active { color: #1A1612; }
body.cat-theme-light .btn-ghost     { color: #1A1612; border-color: rgba(138, 104, 64, .3); }
body.cat-theme-light .btn-ghost:hover { color: #8A6840; border-color: rgba(138, 104, 64, .5); }
body.cat-theme-light #footer        { background: #F0EBE0; color: #1A1612; }
body.cat-theme-light .footer-links a  { color: rgba(26, 22, 18, .4); }
body.cat-theme-light .footer-copy   { color: rgba(26, 22, 18, .3); }
body.cat-theme-light .subcat-nav,
body.cat-theme-light .subcat-link   { border-color: rgba(138, 104, 64, .2); }
body.cat-theme-light .subcat-link:hover,
body.cat-theme-light .subcat-link.active { background: rgba(138, 104, 64, .06); }

/* ·· warm — deep amber ·· */
body.cat-theme-warm { background: radial-gradient(ellipse at 35% 65%, #2E1E0A 0%, #120D06 100%); }
body.cat-theme-warm #footer { background: #120D06; }

/* ·· slate — cool blue-indigo ·· */
body.cat-theme-slate { background: radial-gradient(ellipse at 65% 35%, #12172A 0%, #0A0C14 100%); }
body.cat-theme-slate #footer { background: #0A0C14; }

/* ·· forest — deep moss green ·· */
body.cat-theme-forest { background: radial-gradient(ellipse at 40% 60%, #0C1B0E 0%, #070E08 100%); }
body.cat-theme-forest #footer { background: #070E08; }

/* ·· terracotta — earthy red-brown ·· */
body.cat-theme-terracotta { background: radial-gradient(ellipse at 40% 70%, #281410 0%, #100806 100%); }
body.cat-theme-terracotta #footer { background: #100806; }

/* ·· stone — warm neutral grey ·· */
body.cat-theme-stone { background: radial-gradient(ellipse at 50% 50%, #1C1A16 0%, #0C0B09 100%); }
body.cat-theme-stone #footer { background: #0C0B09; }

/* ·· ivory — pale warm (light variant) ·· */
body.cat-theme-ivory { background: radial-gradient(ellipse at 40% 40%, #EDE8DF 0%, #D8D0C4 100%); color: #1A1612; }
body.cat-theme-ivory #nav.scrolled {
  background: rgba(232, 226, 214, .95);
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(138, 104, 64, .18);
}
body.cat-theme-ivory .t-label   { color: #8A6840; }
body.cat-theme-ivory .t-section,
body.cat-theme-ivory .product-name,
body.cat-theme-ivory .product-cat,
body.cat-theme-ivory .product-mat,
body.cat-theme-ivory .subcat-name,
body.cat-theme-ivory .subcat-brand  { color: #1A1612; }
body.cat-theme-ivory .t-body        { color: rgba(26, 22, 18, .6); }
body.cat-theme-ivory .product-card  { background: #DDD8CE; }
body.cat-theme-ivory .product-card:hover { background: #D3CEC4; }
body.cat-theme-ivory .product-img   { background: #C8C2B8; }
body.cat-theme-ivory .nav-links a   { color: rgba(26, 22, 18, .5); }
body.cat-theme-ivory .nav-links a:hover,
body.cat-theme-ivory .nav-links a.active { color: #1A1612; }
body.cat-theme-ivory .btn-ghost     { color: #1A1612; border-color: rgba(138, 104, 64, .3); }
body.cat-theme-ivory .btn-ghost:hover { color: #8A6840; border-color: rgba(138, 104, 64, .5); }
body.cat-theme-ivory #footer        { background: #D8D0C4; color: #1A1612; }
body.cat-theme-ivory .footer-links a  { color: rgba(26, 22, 18, .4); }
body.cat-theme-ivory .footer-copy   { color: rgba(26, 22, 18, .3); }
body.cat-theme-ivory .subcat-nav,
body.cat-theme-ivory .subcat-link   { border-color: rgba(138, 104, 64, .2); }
body.cat-theme-ivory .subcat-link:hover,
body.cat-theme-ivory .subcat-link.active { background: rgba(138, 104, 64, .06); }


/* ── 21. RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .section, .section-sm, .section-studio { padding: 5rem 3rem; }
  #nav, #nav.scrolled     { padding: 1.2rem 2rem; }
  #footer                 { padding: 4rem 3rem 2rem; }
  .footer-top             { grid-template-columns: 1fr; gap: 2rem; }
  .footer-brand           { order: -1; }
  .grid-2                 { gap: 3rem; }
}
@media (max-width: 768px) {
  .nav-links              { display: none; }
  .nav-hamburger          { display: flex; }
  .product-grid           { grid-template-columns: 1fr 1fr; }
  .subcat-nav             { flex-wrap: wrap; }
  .grid-2                 { grid-template-columns: 1fr; gap: 2.5rem; }
  .section, .section-sm, .section-studio { padding: 4rem 1.8rem; }
  #footer                 { padding: 3rem 1.8rem 2rem; }
  .hero-scroll            { display: none; }
}
@media (max-width: 480px) {
  .product-grid           { grid-template-columns: 1fr; }
  #nav, #nav.scrolled     { padding: .9rem 1.4rem; }
}