/* =========================================================
   NOVINPLUS — Porcelain Slab Collections
   Design tokens — inspired by Emilgroup: clean white,
   editorial sans, photography-led, mega-menu navigation
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Vazirmatn:wght@400;500;600;700&family=Tajawal:wght@400;500;700&display=swap');

:root{
  --bg:       #ffffff;
  --panel:    #f5f5f3;   /* soft panel background */
  --line-c:   #ececea;
  --ink:      #121212;
  --ink-2:    #2a2a2a;
  --muted:    #6f6f6c;
  --accent:   #121212;   /* monochrome brand — photography carries the colour */
  --line:     rgba(18,18,18,0.14);
  --line-soft:rgba(18,18,18,0.08);
  --paper:    var(--bg);
  --stone:    var(--panel);
  --stone-2:  var(--line-c);

  --f-display: 'Inter', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-fa:      'Vazirmatn', sans-serif;
  --f-ar:      'Tajawal', sans-serif;

  --container: 1320px;
}

html.lang-fa{ --f-active-display: var(--f-fa); --f-active-body: var(--f-fa); }
html.lang-en{ --f-active-display: var(--f-display); --f-active-body: var(--f-body); }
html.lang-ar{ --f-active-display: var(--f-ar); --f-active-body: var(--f-ar); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-active-body, var(--f-body));
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{ font-family:var(--f-active-body); }

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--f-active-display, var(--f-display));
  font-weight:300;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
  color:var(--ink);
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4{
  font-family:var(--f-active-body); font-weight:600; letter-spacing:0;
}
p{margin:0 0 1em; color:var(--muted);}
.container{max-width:var(--container); margin:0 auto; padding:0 40px;}

/* language visibility toggle --------------------------------- */
html.lang-en .t-fa, html.lang-en .t-ar{display:none !important;}
html.lang-fa .t-en, html.lang-fa .t-ar{display:none !important;}
html.lang-ar .t-en, html.lang-ar .t-fa{display:none !important;}

/* buttons — thin uppercase links, Italian-brand style ----------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:14px 30px;
  border:1px solid var(--ink);
  border-radius:0;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  font-family:var(--f-active-body, var(--f-body));
  font-weight:500;
  transition:background .25s ease, color .25s ease;
  cursor:pointer; background:none; color:var(--ink);
}
html[dir="rtl"] .btn{ letter-spacing:0; text-transform:none; font-size:14px; font-family:var(--f-active-body);}
.btn:hover{background:var(--ink); color:#fff;}
.btn.solid{background:var(--ink); border-color:var(--ink); color:#fff;}
.btn.solid:hover{background:var(--muted); border-color:var(--muted);}
.btn.ghost-light{border-color:rgba(255,255,255,.6); color:#fff;}
.btn.ghost-light:hover{background:#fff; color:var(--ink);}

/* text-link style used inside photo captions ("Discover more") */
.text-link{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  border-bottom:1px solid currentColor; padding-bottom:2px; display:inline-block;
}
html[dir="rtl"] .text-link{letter-spacing:0; text-transform:none;}

/* utility row for button groups (used in contact band, hero) -------- */
.hero-cta-row{display:flex; gap:16px; flex-wrap:wrap;}

/* =========================================================
   HEADER + MEGA MENU
   ========================================================= */
header.site{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line-soft);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.logo img{height:22px; width:auto;}
nav.primary{display:flex; gap:32px; align-items:center; flex-wrap:wrap;}
nav.primary > a{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 0; border-bottom:1px solid transparent; color:var(--ink-2); font-weight:500;
  position:relative;
}
html[dir="rtl"] nav.primary > a{letter-spacing:0; text-transform:none; font-size:14.5px;}
nav.primary > a:hover{border-color:var(--ink); color:var(--ink);}

/* mega dropdown ---------------------------------------------------- */
.has-mega{position:relative;}
.mega{
  position:fixed; left:0; right:0; top:73px;
  background:#fff; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  box-shadow:0 24px 48px -20px rgba(18,18,18,.15);
  padding:44px 0; display:none; z-index:150;
}
.has-mega:hover .mega{display:block;}
.mega .container{display:grid; grid-template-columns:repeat(4,1fr); gap:40px;}
.mega-col h5{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin-bottom:18px; font-weight:600;
}
html[dir="rtl"] .mega-col h5{letter-spacing:0; text-transform:none;}
.mega-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.mega-col a{font-size:13.5px; color:var(--ink-2);}
.mega-col a:hover{color:var(--ink); text-decoration:underline;}

.nav-actions{display:flex; align-items:center; gap:18px;}
.search-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:none; background:none; cursor:pointer; color:var(--ink);
  border-radius:50%; transition:background .2s ease;
}
.search-icon-btn:hover{background:var(--panel);}
.search-icon-btn svg{width:18px; height:18px;}
.lang-switch{ display:flex; border:1px solid var(--line-c); border-radius:20px; overflow:hidden; font-size:11px; }
.lang-switch button{ border:none; background:none; padding:6px 14px; cursor:pointer; font-family:var(--f-body); color:var(--muted); }
.lang-switch button.active{background:var(--ink); color:#fff;}
.burger{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.burger span{display:block; width:22px; height:1px; background:var(--ink); margin:6px 0;}

@media (max-width:980px){
  .mega{display:none !important;}
  nav.primary{
    position:fixed; inset:64px 0 0 0; background:var(--bg);
    flex-direction:column; align-items:flex-start; padding:32px;
    gap:20px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:all .25s ease; overflow:auto;
  }
  nav.primary.open{transform:translateY(0); opacity:1; pointer-events:all;}
  nav.primary a{font-size:15px;}
  .burger{display:block;}
}

/* =========================================================
   IMAGE FRAME — full-bleed rectangle, no signature crop
   (Emilgroup uses plain rectangular photography, no arches)
   ========================================================= */
.arch{ position:relative; overflow:hidden; border-radius:0; background:var(--line-c); }
.arch img{width:100%; height:100%; object-fit:cover; display:block;}

/* =========================================================
   HERO — full-bleed banner carousel with overlay caption
   ========================================================= */
.hero{ position:relative; }
.hero-slides{ position:relative; height:78vh; min-height:560px; overflow:hidden; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease; z-index:1; }
.hero-slide.active{ opacity:1; z-index:2; }
.hero-slide img{width:100%; height:100%; object-fit:cover;}
.hero-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.42), rgba(0,0,0,0) 55%); }
.hero-caption{
  position:absolute; left:0; right:0; bottom:56px; z-index:2;
  color:#fff; text-align:center;
}
.hero-caption h1{ color:#fff; font-size:clamp(28px,3.4vw,44px); font-weight:300; margin-bottom:18px; }
.hero-caption .text-link{color:#fff;}
.hero-eyebrow{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:14px; display:block; }
html[dir="rtl"] .hero-eyebrow{letter-spacing:0; text-transform:none;}

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.15); backdrop-filter:blur(4px); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.hero-arrow:hover{background:rgba(0,0,0,.4); border-color:#fff;}
.hero-arrow.prev{left:24px;}
.hero-arrow.next{right:24px;}
.hero-arrow svg{width:18px; height:18px;}
html[dir="rtl"] .hero-arrow.prev{left:auto; right:24px; transform:translateY(-50%) scaleX(-1);}
html[dir="rtl"] .hero-arrow.next{right:auto; left:24px; transform:translateY(-50%) scaleX(-1);}

.hero-dots{ display:flex; gap:8px; justify-content:center; margin-top:22px; position:relative; z-index:3; }
.hero-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.hero-dots span.active{background:#fff; transform:scale(1.3);}

.hero-strip{ background:var(--ink); color:#fff; padding:18px 0; }
.hero-strip .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 40px; }
.hero-strip .item{ display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.03em; color:rgba(255,255,255,.85); }
.hero-strip .item svg{flex:none; width:15px; height:15px; opacity:.9;}

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section{padding:100px 0;}
.section.tight{padding:64px 0;}
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; }
.section-head h2{font-size:clamp(26px,3vw,36px); font-weight:300;}
.section-head .kicker{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:14px; font-weight:600;
}
html[dir="rtl"] .section-head .kicker{letter-spacing:0; text-transform:none;}
.section-head .desc{max-width:60ch; color:var(--muted);}
.section-head-center{text-align:center; max-width:760px; margin:0 auto 56px;}

/* =========================================================
   COLLECTIONS GRID (home) — image cards, no arches, tight grid
   ========================================================= */
.collections-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line-c); }
.collection-card{display:block; background:#fff;}
.collection-card .arch{aspect-ratio:3/4; margin-bottom:0;}
.collection-card .cc-body{padding:20px 4px;}
.collection-card h3{font-size:16px; margin-bottom:4px; font-weight:500;}
.collection-card .meta{font-size:11.5px; color:var(--muted); letter-spacing:.02em;}
@media (max-width:1080px){ .collections-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .collections-grid{grid-template-columns:1fr;} }

/* "All the effects" icon row --------------------------------------- */
.effects-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line-c); border:1px solid var(--line-c); }
.effect-item{
  background:#fff; padding:30px 12px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.effect-item .ic{ width:34px; height:34px; color:var(--ink); opacity:.8;}
.effect-item span{font-size:12px; letter-spacing:.03em; color:var(--ink-2);}
@media (max-width:980px){ .effects-row{grid-template-columns:repeat(4,1fr);} }
@media (max-width:560px){ .effects-row{grid-template-columns:repeat(2,1fr);} }

/* =========================================================
   PRODUCT GRID (category pages, related, featured)
   ========================================================= */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;}
.filter-chip{
  padding:9px 20px; border:1px solid var(--line-c); border-radius:30px;
  font-size:12px; letter-spacing:.03em; cursor:pointer; background:none; color:var(--muted);
  transition:all .2s ease;
}
html[dir="rtl"] .filter-chip{font-size:13.5px;}
.filter-chip:hover{border-color:var(--ink); color:var(--ink);}
.filter-chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}

.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line-c); }
.product-card{display:block; background:#fff;}
.product-card .frame{ position:relative; overflow:hidden; border-radius:0; background:var(--line-c); aspect-ratio:3/4; margin-bottom:0; }
.product-card .frame img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.product-card:hover .frame img{transform:scale(1.035);}
.product-card .tag{
  position:absolute; top:14px; inset-inline-start:14px;
  background:#fff; padding:4px 11px;
  font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
}
html[dir="rtl"] .product-card .tag{letter-spacing:0; text-transform:none;}
.product-card .pc-body{padding:16px 4px 6px;}
.product-card h4{font-size:14.5px; margin-bottom:2px; font-weight:500;}
.product-card .sub{font-size:12px; color:var(--muted);}

@media (max-width:980px){ .product-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:680px){ .product-grid{grid-template-columns:repeat(2,1fr);} }

/* category hero banner ------------------------------------------ */
.cat-hero{position:relative; height:52vh; min-height:380px; overflow:hidden;}
.cat-hero img{width:100%; height:100%; object-fit:cover;}
.cat-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,18,18,.1), rgba(18,18,18,.55)); }
.cat-hero .inner{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:56px 0; }
.cat-hero h1{color:#fff; font-size:clamp(30px,4.2vw,48px); margin-bottom:8px; font-weight:300;}
.cat-hero .meta{color:rgba(255,255,255,.82); font-size:12.5px; letter-spacing:.03em;}
.breadcrumb{font-size:11.5px; color:rgba(255,255,255,.75); margin-bottom:14px;}
.breadcrumb a:hover{text-decoration:underline;}

/* =========================================================
   PRODUCT DETAIL
   ========================================================= */
.product-hero{padding:48px 0 0;}
.product-hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:60px;}
.product-hero .arch{aspect-ratio:4/5;}
.product-info .tags{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap;}
.product-info .tags span{
  border:1px solid var(--line-c); padding:6px 14px; font-size:11.5px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted);
}
html[dir="rtl"] .product-info .tags span{letter-spacing:0; text-transform:none; font-size:13px;}
.product-info h1{font-size:clamp(28px,3.4vw,40px); margin-bottom:8px; font-weight:300;}
.product-info .cat-line{font-size:12.5px; color:var(--muted); letter-spacing:.05em; margin-bottom:26px; display:block; text-transform:uppercase;}
html[dir="rtl"] .product-info .cat-line{letter-spacing:0; text-transform:none;}
.spec-table{width:100%; border-collapse:collapse; margin:28px 0 32px;}
.spec-table tr{border-bottom:1px solid var(--line-c);}
.spec-table td{padding:14px 0; font-size:13.5px;}
.spec-table td:first-child{color:var(--muted); width:42%;}
.spec-table td:last-child{font-weight:500; color:var(--ink);}
.product-info .actions{display:flex; gap:14px; flex-wrap:wrap;}

@media (max-width:860px){ .product-hero-grid{grid-template-columns:1fr; gap:32px;} }

.related{background:var(--panel);}

/* =========================================================
   CARD SECTIONS: Projects / Inspirations (Emilgroup-style)
   ========================================================= */
.cards-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.info-card{ display:block; }
.info-card .frame{ aspect-ratio:4/5; background:var(--panel); overflow:hidden; margin-bottom:16px; position:relative;}
.info-card .frame img{width:100%; height:100%; object-fit:cover;}
.info-card .frame.placeholder{ display:flex; align-items:center; justify-content:center; border:1px dashed var(--line); }
.info-card .frame.placeholder span{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.info-card h4{font-size:15px; font-weight:500; margin-bottom:8px;}
.info-card .text-link{font-size:11px;}
@media (max-width:980px){ .cards-row{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .cards-row{grid-template-columns:1fr;} }

/* =========================================================
   CONTACT CTA — full width photo banner
   ========================================================= */
.contact-cta{ position:relative; height:52vh; min-height:380px; overflow:hidden; }
.contact-cta img{width:100%; height:100%; object-fit:cover;}
.contact-cta::before{ content:""; position:absolute; inset:0; background:rgba(18,18,18,.5); }
.contact-cta .inner{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px; }
.contact-cta h2{color:#fff; font-weight:300; margin-bottom:16px;}
.contact-cta p{color:rgba(255,255,255,.85); max-width:56ch; margin:0 auto 28px;}

/* newsletter band -------------------------------------------------- */
.newsletter{background:var(--panel); padding:80px 0;}
.newsletter .inner{max-width:640px; margin:0 auto; text-align:center;}
.newsletter .desc{color:var(--muted); margin-bottom:30px;}
.newsletter-form{ display:flex; gap:0; border-bottom:1px solid var(--ink); max-width:460px; margin:0 auto; }
.newsletter-form input{
  flex:1; border:none; background:none; padding:12px 4px; font-size:14px; font-family:var(--f-body); color:var(--ink);
}
.newsletter-form input:focus{outline:none;}
.newsletter-form button{ border:none; background:none; font-size:12px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; color:var(--ink); font-weight:600; padding:0 6px;}

/* =========================================================
   JOURNAL / ACADEMY (podcast teaser on home)
   ========================================================= */
.journal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-c);}
.journal-card{ border:none; padding:30px; background:#fff; display:flex; flex-direction:column; height:100%; }
.journal-card .num{font-size:12.5px; color:var(--muted); margin-bottom:14px; letter-spacing:.05em;}
.journal-card h4{font-size:16px; margin-bottom:10px; font-weight:500;}
.journal-card p{font-size:13.5px; color:var(--muted); margin-bottom:0; flex:1;}
@media (max-width:920px){ .journal-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .journal-grid{grid-template-columns:1fr;} }

/* =========================================================
   FOOTER
   ========================================================= */
.contact-band{background:var(--ink); color:#fff; padding:88px 0;}
.contact-band .grid{display:grid; grid-template-columns:1.2fr 1fr; gap:60px;}
.contact-band h2{font-size:clamp(26px,3.4vw,38px); color:#fff; font-weight:300;}
.contact-band .desc{color:rgba(255,255,255,.68); max-width:48ch; margin-bottom:30px;}
.contact-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:18px;}
.contact-list li{display:flex; gap:14px; align-items:flex-start; font-size:14px; color:rgba(255,255,255,.85);}
.contact-list svg{flex:none; width:18px; height:18px; margin-top:2px; opacity:.75;}
.contact-list a:hover{text-decoration:underline;}
@media (max-width:860px){ .contact-band .grid{grid-template-columns:1fr;} }

footer.site{background:var(--ink); color:rgba(255,255,255,.55); padding:34px 0; border-top:1px solid rgba(255,255,255,.12);}
footer.site .row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
footer.site .logo-f img{height:18px; filter:invert(1) brightness(1.7);}
footer.site .socials{display:flex; gap:18px;}
footer.site .socials a:hover{color:#fff;}
footer.site small{font-size:11.5px;}

/* misc ------------------------------------------------------------ */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
::selection{background:var(--ink); color:#fff;}

@media (max-width:600px){
  .section{padding:64px 0;}
  .container{padding:0 20px;}
}