/* ==========================================================
   SIGNATURE ZINEB — stylesheet
   Design tokens
   - Ink      #1B120D   near-black warm espresso (Moroccan base)
   - Gold     #C6A15B   antique gold (Moroccan accent)
   - Gold-lt  #E9CD8C   pale gold (Moroccan highlight)
   - Emerald  #0E3B36   deep jewel emerald (secondary accent)
   - Bordeaux #6E1423   deep wine (secondary accent)
   - Cream    #F6EEDD   ivory (Italian base)
   - Cobalt   #1C4E80   Mediterranean blue (Italian accent)
   - Terra    #C1592B   terracotta (Italian accent)
   Type
   - Display: 'Cormorant Garamond' — the wordmark & all headings
   - Body:    'Jost' — paragraphs, nav, buttons
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --ink:#1B120D;
  --ink-2:#241A12;
  --gold:#C6A15B;
  --gold-lt:#E9CD8C;
  --emerald:#0E3B36;
  --bordeaux:#6E1423;
  --cream:#F6EEDD;
  --cream-2:#EFE4CB;
  --cobalt:#1C4E80;
  --terra:#C1592B;

  --bg: var(--ink);
  --bg-2: var(--ink-2);
  --fg: var(--cream);
  --fg-dim: #C9BBA3;
  --accent: var(--gold);
  --accent-lt: var(--gold-lt);

  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .6s;
  --maxw: 1240px;
}

.theme-italian{
  --bg: var(--cream);
  --bg-2: var(--cream-2);
  --fg: #2B241C;
  --fg-dim: #6B5F4E;
  --accent: var(--cobalt);
  --accent-lt: var(--terra);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Jost', sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

h1,h2,h3,h4{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  letter-spacing:.01em;
  margin:0 0 .4em;
  color:var(--fg);
}
h1{ font-size:clamp(2.6rem,6vw,5rem); font-weight:500; }
h2{ font-size:clamp(1.9rem,4vw,3rem); }
h3{ font-size:clamp(1.3rem,2.4vw,1.8rem); }
p{ margin:0 0 1em; color:var(--fg-dim); }
a{ color:inherit; text-decoration:none; }

.eyebrow{
  font-family:'Jost',sans-serif;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); display:inline-block; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,4vw,3rem); }
.section{ padding:clamp(4rem,9vw,8rem) 0; position:relative; }

img{ max-width:100%; display:block; }

::selection{ background:var(--accent); color:var(--ink); }

/* ---------- ornament (zellige star) ---------- */
.star{
  width:34px; height:34px;
  color:var(--accent);
  animation:spin 40s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.divider{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin:2.4rem 0;
  color:var(--accent);
}
.divider::before,.divider::after{
  content:""; height:1px; width:clamp(40px,10vw,140px);
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ---------- nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.4rem 0;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  transition:background .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.solid{
  background:rgba(27,18,13,.92);
  backdrop-filter:blur(8px);
  padding:.8rem 0;
  box-shadow:0 1px 0 rgba(198,161,91,.25);
}
.theme-italian .site-header.solid{ background:rgba(246,238,221,.94); box-shadow:0 1px 0 rgba(28,78,128,.2); }

.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand{
  font-family:'Cormorant Garamond', serif;
  font-size:1.5rem;
  letter-spacing:.14em;
  display:flex; align-items:center; gap:.6rem;
  color:var(--fg);
}
.brand .star{ width:22px; height:22px; animation-duration:24s; }

.nav-links{ display:flex; align-items:center; gap:clamp(1rem,2vw,2.2rem); font-size:.85rem; letter-spacing:.06em; }
.nav-links a{ position:relative; padding:.3rem 0; color:var(--fg); opacity:.88; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--accent);
  transition:right .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ opacity:1; }

.cart-link{ display:flex; align-items:center; gap:.4rem; border:1px solid var(--accent); padding:.45rem .9rem; border-radius:var(--radius); }
.cart-link svg{ width:16px; height:16px; }

.nav-toggle{ display:none; background:none; border:none; color:var(--fg); cursor:pointer; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    background:var(--ink); flex-direction:column; align-items:flex-start; justify-content:center;
    padding:2rem; gap:1.6rem; transform:translateX(100%); transition:transform .45s var(--ease);
  }
  .theme-italian .nav-links{ background:var(--cream); }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative; padding-top:6rem;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(198,161,91,.14), transparent 60%),
    repeating-linear-gradient(45deg, rgba(198,161,91,.05) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.theme-italian .hero::before{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(28,78,128,.12), transparent 60%),
    repeating-linear-gradient(45deg, rgba(28,78,128,.05) 0 2px, transparent 2px 26px);
}
.hero-inner{ position:relative; z-index:2; max-width:760px; }
.hero .star{ width:52px; height:52px; margin:0 auto 1.4rem; }
.hero h1{ opacity:0; transform:translateY(24px); animation:rise .9s .15s var(--ease) forwards; }
.hero .eyebrow{ opacity:0; transform:translateY(14px); animation:rise .8s 0s var(--ease) forwards; margin-bottom:1rem; }
.hero p.tagline{ opacity:0; transform:translateY(18px); animation:rise .9s .32s var(--ease) forwards; font-size:1.1rem; max-width:520px; margin:0 auto 2rem; }
.hero .cta-row{ opacity:0; transform:translateY(18px); animation:rise .9s .48s var(--ease) forwards; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
}
.scroll-cue .line{ width:1px; height:34px; background:var(--accent); overflow:hidden; position:relative; }
.scroll-cue .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--accent-lt); animation:drip 1.8s ease-in-out infinite; }
@keyframes drip{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.9rem; border:1px solid var(--accent);
  font-family:'Jost',sans-serif; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg); background:transparent; cursor:pointer; border-radius:var(--radius);
  transition:background .35s var(--ease), color .35s var(--ease), transform .3s var(--ease);
}
.btn:hover{ background:var(--accent); color:var(--ink); transform:translateY(-2px); }
.btn.solid{ background:var(--accent); color:var(--ink); }
.btn.solid:hover{ background:var(--accent-lt); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* ---------- runway frieze (the signature element) ---------- */
.frieze{
  position:relative; padding:2.4rem 0; overflow:hidden;
  background:var(--bg-2);
  border-top:1px solid rgba(198,161,91,.25);
  border-bottom:1px solid rgba(198,161,91,.25);
}
.theme-italian .frieze{ border-color:rgba(28,78,128,.2); }
.frieze-track{
  display:flex; gap:2.2rem; width:max-content;
  animation:drift 55s linear infinite;
}
.frieze:hover .frieze-track{ animation-play-state:paused; }
@keyframes drift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.arch{
  position:relative; width:180px; height:250px; flex:none;
  border-radius:90px 90px 6px 6px;
  overflow:hidden; border:1px solid var(--accent);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.arch img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05); transition:transform 8s var(--ease); }
.frieze:hover .arch img{ transform:scale(1.08); }
.arch::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.15);
  pointer-events:none;
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in-view > *{ opacity:1; transform:none; }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.35s; }

/* ---------- category picker (home) ---------- */
.category-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:760px){ .category-grid{ grid-template-columns:1fr; } }
.category-card{
  position:relative; height:460px; overflow:hidden; border-radius:var(--radius);
  display:flex; align-items:flex-end; padding:2.2rem;
}
.category-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.category-card:hover img{ transform:scale(1.06); }
.category-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.1) 55%); }
.category-card .cc-body{ position:relative; z-index:2; color:#F6EEDD; }
.category-card .eyebrow{ color:var(--gold-lt); }

/* ---------- product grid ---------- */
.toolbar{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  margin-bottom:2.4rem;
}
.search{
  display:flex; align-items:center; gap:.6rem;
  border-bottom:1px solid var(--accent); padding:.5rem .1rem; min-width:240px; flex:1;
}
.search input{
  background:none; border:none; outline:none; color:var(--fg); font-family:'Jost',sans-serif; font-size:.95rem; width:100%;
}
.search svg{ width:16px; height:16px; color:var(--accent); flex:none; }

.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.8rem; }
.card{
  display:block; position:relative; border:1px solid transparent; transition:border-color .4s var(--ease);
}
.card-media{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.card:hover .card-media img{ transform:scale(1.07); }
.card-media::after{
  content:""; position:absolute; inset:0; border:1px solid var(--accent); opacity:0; transition:opacity .4s var(--ease);
}
.card:hover .card-media::after{ opacity:1; }
.card-body{ padding-top:.9rem; display:flex; justify-content:space-between; gap:.6rem; align-items:baseline; }
.card-body h3{ font-size:1.15rem; }
.card-price{ color:var(--accent); font-family:'Jost',sans-serif; font-size:.95rem; white-space:nowrap; }
.card-cat{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); }

.empty-state{ text-align:center; padding:4rem 0; color:var(--fg-dim); }

/* ---------- product detail ---------- */
.product-detail{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:flex-start; padding-top:7.5rem; }
@media (max-width:860px){ .product-detail{ grid-template-columns:1fr; } }
.pd-media{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--accent); }
.pd-media img{ width:100%; }
.pd-price{ font-size:1.4rem; color:var(--accent); margin-bottom:1.2rem; }
.pd-row{ margin:1.6rem 0; }
.pd-label{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:.7rem; display:block; }
.size-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.size-btn{
  padding:.6rem 1.1rem; border:1px solid var(--fg-dim); background:none; color:var(--fg);
  cursor:pointer; font-family:'Jost',sans-serif; border-radius:var(--radius); transition:all .25s var(--ease);
}
.size-btn.active, .size-btn:hover{ border-color:var(--accent); color:var(--accent); }
.qty-row{ display:flex; align-items:center; gap:1rem; }
.qty-row button{ width:38px; height:38px; border:1px solid var(--accent); background:none; color:var(--accent); font-size:1.1rem; cursor:pointer; border-radius:var(--radius); }
.qty-row span{ min-width:2ch; text-align:center; }
.pd-actions{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.pd-note{ margin-top:1rem; font-size:.85rem; color:var(--accent); min-height:1.4em; }

/* ---------- cart ---------- */
.cart-table{ width:100%; border-collapse:collapse; margin-bottom:2rem; }
.cart-table th{ text-align:left; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); padding-bottom:1rem; border-bottom:1px solid rgba(198,161,91,.3); }
.cart-table td{ padding:1.2rem 0; border-bottom:1px solid rgba(198,161,91,.15); vertical-align:middle; }
.theme-italian .cart-table th, .theme-italian .cart-table td{ border-color:rgba(28,78,128,.18); }
.cart-item-media{ width:70px; height:90px; object-fit:cover; border-radius:var(--radius); }
.cart-item-name{ display:flex; gap:1rem; align-items:center; }
.remove-link{ color:var(--fg-dim); font-size:.8rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.remove-link:hover{ color:var(--bordeaux); }
.cart-summary{ display:flex; justify-content:flex-end; }
.cart-summary-box{ min-width:280px; }
.cart-summary-row{ display:flex; justify-content:space-between; padding:.5rem 0; }
.cart-summary-row.total{ font-size:1.2rem; color:var(--accent); border-top:1px solid var(--accent); margin-top:.6rem; padding-top:1rem; }
#paypal-button-container{ margin-top:1.6rem; max-width:320px; margin-left:auto; }

/* ---------- forms ---------- */
.form-grid{ display:grid; gap:1.4rem; }
.form-grid.two{ grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .form-grid.two{ grid-template-columns:1fr; } }
label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); display:block; margin-bottom:.5rem; }
input, textarea, select{
  width:100%; background:transparent; border:1px solid rgba(198,161,91,.4); color:var(--fg);
  padding:.85rem 1rem; font-family:'Jost',sans-serif; font-size:.95rem; border-radius:var(--radius); outline:none;
  transition:border-color .3s var(--ease);
}
.theme-italian input, .theme-italian textarea, .theme-italian select{ border-color:rgba(28,78,128,.3); }
input:focus, textarea:focus, select:focus{ border-color:var(--accent); }
textarea{ resize:vertical; min-height:120px; }

/* ---------- footer ---------- */
.site-footer{ background:var(--bg-2); border-top:1px solid rgba(198,161,91,.25); padding:4rem 0 2rem; }
.theme-italian .site-footer{ border-color:rgba(28,78,128,.2); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:3rem; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid a{ display:block; margin-bottom:.6rem; color:var(--fg-dim); transition:color .3s; }
.footer-grid a:hover{ color:var(--accent); }
.footer-bottom{ text-align:center; font-size:.78rem; color:var(--fg-dim); padding-top:2rem; border-top:1px solid rgba(198,161,91,.15); }
.socials{ display:flex; gap:1rem; margin-top:1rem; }
.socials a{ width:38px; height:38px; border:1px solid var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.socials svg{ width:16px; height:16px; }

/* ---------- misc ---------- */
.badge-count{ min-width:1.2em; text-align:center; }
.toast{
  position:fixed; bottom:1.6rem; right:1.6rem; z-index:200;
  background:var(--accent); color:var(--ink); padding:.9rem 1.4rem; border-radius:var(--radius);
  font-size:.85rem; letter-spacing:.03em; transform:translateY(20px); opacity:0; pointer-events:none;
  transition:all .4s var(--ease);
}
.toast.show{ transform:translateY(0); opacity:1; }

.founder-block{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:820px){ .founder-block{ grid-template-columns:1fr; } }
.founder-block img{ border-radius:var(--radius); border:1px solid var(--accent); }

.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; }
@media (max-width:760px){ .info-grid{ grid-template-columns:1fr; } }
.info-grid .star{ margin:0 auto .8rem; }