/*
Theme Name: Jalin Moble
Theme URI: https://jalinmoble.ir
Author: Jalin Moble
Author URI: https://jalinmoble.ir
Description: قالب اختصاصی فروشگاه مبلمان جالین مبل. طراحی کلاسیک و مدرن با پالت طلایی و تیره، فونت‌های Amiri و Vazirmatn، مناسب فروشگاه‌های مبلمان و دکوراسیون لوکس.
Version: 1.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jalin-moble
*/


/* ============================================================
   JALIN MOBLE — Design tokens
   Color: deep gilded night (#120e09 / #1c160d) + warm gold (#c9a45c)
   Type:  Amiri (classic Naskh display) + Vazirmatn (modern Farsi UI)
   Signature: gilded corner-bracket frame — echoes carved gold wood
   ============================================================ */
:root{
  --deep:#100c08;
  --panel:#1a140c;
  --panel-2:#211a10;
  --cream-bg:#f8f4ec;
  --cream:#f4ecd9;
  --ink:#2a2014;
  --gold:#c9a45c;
  --gold-bright:#e9cd8f;
  --gold-dim:#7c6636;
  --line:rgba(201,164,92,.28);
  --serif:"Amiri", serif;
  --sans:"Vazirmatn", sans-serif;
  --container:1180px;
  --radius:2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--deep);
  color:var(--cream);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 28px;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- gilded frame signature ---------- */
.frame{position:relative;}
.frame::before,.frame::after,
.frame .c2::before,.frame .c2::after{content:"";position:absolute;width:22px;height:22px;border:1.5px solid var(--gold);opacity:.85;}
.frame::before{top:10px;right:10px;border-left:none;border-bottom:none;}
.frame::after{bottom:10px;left:10px;border-right:none;border-top:none;}
.frame .c2{position:absolute; inset:0;}
.frame .c2::before{top:10px;left:10px;border-right:none;border-bottom:none;}
.frame .c2::after{bottom:10px;right:10px;border-left:none;border-top:none;}

/* ---------- placeholder art panels ---------- */
.art{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(201,164,92,.16), transparent 60%),
    repeating-linear-gradient(135deg, rgba(201,164,92,.05) 0 2px, transparent 2px 26px),
    linear-gradient(160deg,#241c10,#140f09 70%);
  display:flex; align-items:center; justify-content:center;
}
.art svg{width:38%; max-width:120px; stroke:var(--gold); opacity:.8;}
.art.light{background:
    radial-gradient(120% 140% at 70% 0%, rgba(201,164,92,.22), transparent 60%),
    repeating-linear-gradient(135deg, rgba(201,164,92,.06) 0 2px, transparent 2px 26px),
    linear-gradient(160deg,#2b2213,#17120a 70%);}

/* ---------- eyebrow / section title ---------- */
.eyebrow{display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold); font-size:.78rem; letter-spacing:.18em; margin-bottom:10px;}
.eyebrow span{display:block; width:34px; height:1px; background:var(--line);}
.section-title{font-family:var(--serif); font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem); text-align:center; color:var(--gold-bright);}
.section-head{margin-bottom:46px;}

/* =========================== TOP BAR =========================== */
.topbar{background:#0b0805; border-bottom:1px solid var(--line); font-size:.8rem; color:#cdbb96;}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:40px; gap:18px;}
.topbar .left, .topbar .right{display:flex; align-items:center; gap:18px;}
.topbar .item{display:flex; align-items:center; gap:6px; white-space:nowrap;}
.topbar svg{width:14px; height:14px; stroke:var(--gold);}
.topbar .right{overflow:hidden; text-overflow:ellipsis;}

/* =========================== HEADER =========================== */
header.site{position:sticky; top:0; z-index:50; background:rgba(16,12,8,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:padding .25s ease;}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:84px; transition:height .25s ease;}
header.shrink .nav-row{height:64px;}
.logo{display:flex; align-items:center; gap:12px; font-family:var(--serif);}
.logo .crown{width:34px; height:34px; stroke:var(--gold); flex-shrink:0;}
.logo .name{font-size:1.35rem; font-weight:700; color:var(--gold-bright); letter-spacing:.02em;}
.logo .sub{display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.32em; color:var(--gold-dim); margin-top:1px;}
nav.main{display:flex; gap:34px; font-size:.92rem;}
nav.main a{position:relative; padding:6px 0; color:#e9dfc8; transition:color .2s;}
nav.main a::after{content:""; position:absolute; right:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .25s;}
nav.main a:hover{color:var(--gold-bright);}
nav.main a:hover::after{width:100%;}
.head-icons{display:flex; align-items:center; gap:20px;}
.head-icons .ico{position:relative; width:22px; height:22px; stroke:#e9dfc8; transition:stroke .2s;}
.head-icons a:hover .ico{stroke:var(--gold-bright);}
.badge{position:absolute; top:-8px; left:-10px; background:var(--gold); color:#1a140c; font-size:.62rem; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.burger{display:none; width:26px; height:20px; position:relative;}
.burger span{position:absolute; right:0; left:0; height:2px; background:var(--gold); border-radius:2px;}
.burger span:nth-child(1){top:0;} .burger span:nth-child(2){top:9px;} .burger span:nth-child(3){top:18px;}

/* =========================== HERO =========================== */
.hero{position:relative; padding:90px 0 70px; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 80% 20%, rgba(201,164,92,.10), transparent 70%); pointer-events:none;}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;}
.hero-art{aspect-ratio:6/5; border-radius:var(--radius);}
.hero-copy h1{font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem); color:var(--gold-bright); line-height:1.25;}
.hero-copy h2{font-family:var(--sans); font-weight:500; font-size:clamp(1.15rem,2.1vw,1.5rem); color:var(--cream); margin-top:16px; line-height:1.7;}
.ornament{display:flex; align-items:center; gap:16px; margin:26px 0; color:var(--gold);}
.ornament span{display:block; width:60px; height:1px; background:linear-gradient(to right, transparent, var(--gold));}
.ornament span:last-child{background:linear-gradient(to left, transparent, var(--gold));}
.tagline{color:#cdbb96; font-size:1.02rem; margin-bottom:34px;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 30px; font-size:.95rem; font-weight:600; border-radius:var(--radius); transition:transform .25s, box-shadow .25s, background .25s, color .25s;}
.btn-gold{background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#1a140c; position:relative; overflow:hidden;}
.btn-gold::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-120%);}
.btn-gold:hover::after{transform:translateX(120%); transition:transform .7s ease;}
.btn-gold:hover{box-shadow:0 10px 28px rgba(201,164,92,.35); transform:translateY(-2px);}
.btn-outline{border:1px solid var(--gold-dim); color:var(--gold-bright);}
.btn-outline:hover{background:rgba(201,164,92,.1); border-color:var(--gold);}
.btn svg{width:17px; height:17px; stroke:currentColor;}
.dots{display:flex; gap:7px; margin-top:36px;}
.dots span{width:7px; height:7px; border-radius:50%; background:var(--gold-dim);}
.dots span.on{background:var(--gold-bright); width:20px; border-radius:4px;}

/* =========================== CATEGORY STRIP =========================== */
.cats{padding:8px 0 70px;}
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.cat-card{background:var(--panel); border:1px solid var(--line); padding:34px 30px; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; transition:transform .3s, border-color .3s, background .3s;}
.cat-card .cat-icon{width:30px; height:30px; stroke:var(--gold); margin-bottom:6px;}
.cat-card h3{font-family:var(--serif); font-size:1.25rem; color:var(--gold-bright); font-weight:700;}
.cat-card p{color:#bfae8a; font-size:.9rem;}
.cat-card .go{margin-top:8px; width:34px; height:34px; border:1px solid var(--gold-dim); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .25s, border-color .25s;}
.cat-card .go svg{width:15px; height:15px; stroke:var(--gold-bright); transform:scaleX(-1);}
.cat-card:hover{transform:translateY(-6px); border-color:var(--gold); background:var(--panel-2);}
.cat-card:hover .go{background:var(--gold); border-color:var(--gold);}
.cat-card:hover .go svg{stroke:#1a140c;}

/* =========================== PRODUCTS =========================== */
.products{padding:20px 0 80px;}
.prod-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.prod-card{background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .3s, border-color .3s;}
.prod-card:hover{transform:translateY(-6px); border-color:var(--gold);}
.prod-thumb{aspect-ratio:1/1; position:relative;}
.wish{position:absolute; top:12px; right:12px; width:32px; height:32px; background:rgba(16,12,8,.65); border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:2;}
.wish svg{width:15px; height:15px; stroke:var(--gold-bright);}
.prod-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.prod-body h4{font-size:1rem; font-weight:600; color:var(--cream);}
.prod-body .price{color:var(--gold-bright); font-weight:700; font-size:.98rem; margin-bottom:6px;}
.prod-body .price small{color:#a89469; font-weight:400; font-size:.78rem; margin-right:4px;}
.btn-line{margin-top:auto; text-align:center; padding:10px; font-size:.84rem; border:1px solid var(--gold-dim); color:var(--gold-bright); transition:background .25s,color .25s;}
.btn-line:hover{background:var(--gold); color:#1a140c;}
.see-all{display:flex; justify-content:center; margin-top:40px;}

/* =========================== FEATURES =========================== */
.features{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:48px 0;}
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.feat{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:0 18px; position:relative;}
.feat:not(:last-child)::after{content:""; position:absolute; left:0; top:8%; bottom:8%; width:1px; background:var(--line);}
.feat .ico-circ{width:54px; height:54px; border:1px solid var(--gold-dim); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
.feat .ico-circ svg{width:24px; height:24px; stroke:var(--gold);}
.feat h5{color:var(--gold-bright); font-size:1rem; font-weight:700;}
.feat p{color:#a89469; font-size:.85rem;}

/* =========================== GALLERY =========================== */
.gallery{padding:90px 0;}
.gal-row{display:grid; grid-template-columns:1fr .85fr; gap:50px; align-items:center;}
.gal-shots{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; direction:ltr;}
.gal-shots .art{aspect-ratio:3/4; border-radius:var(--radius);}
.gal-shots .art svg{width:55%;}
.gal-copy{order:2; text-align:right;}
.gal-copy h3{font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.2rem); color:var(--gold-bright); line-height:1.5; margin-bottom:26px;}

/* =========================== TESTIMONIALS =========================== */
.testi{background:var(--cream-bg); color:var(--ink); padding:90px 0;}
.testi .section-title{color:var(--ink);}
.testi .eyebrow{color:var(--gold-dim);}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi-card{background:#fff; border:1px solid #e7dcc4; padding:32px 28px; position:relative;}
.testi-card .quote{width:30px; height:30px; stroke:var(--gold); opacity:.7; margin-bottom:14px;}
.testi-card p.txt{font-size:.94rem; color:#4a3f2c; min-height:90px;}
.testi-foot{display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid #eee2c8;}
.avatar{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#1a140c; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0;}
.testi-foot .nm{font-weight:700; font-size:.92rem; color:#221c10;}
.testi-foot .city{font-size:.78rem; color:#8a7a55;}
.t-dots{display:flex; justify-content:center; gap:7px; margin-top:40px;}
.t-dots span{width:6px; height:6px; border-radius:50%; background:#d8c89c;}
.t-dots span.on{background:var(--gold-dim);}

/* =========================== FOOTER CTA STRIP =========================== */
footer.site{background:#0b0805; border-top:1px solid var(--line); padding:64px 0 0;}
.foot-grid{display:grid; grid-template-columns:1fr 1.1fr 1fr; gap:40px; align-items:center; padding-bottom:54px; border-bottom:1px solid var(--line);}
.foot-grid h6{color:var(--gold-bright); font-size:1.02rem; font-weight:700; margin-bottom:18px;}
.contact-list li{display:flex; align-items:center; gap:10px; margin-bottom:13px; font-size:.9rem; color:#cdbb96;}
.contact-list svg{width:16px; height:16px; stroke:var(--gold);}
.cta-mid{text-align:center;}
.cta-mid p{font-size:1.15rem; color:var(--cream); margin-bottom:22px; line-height:1.9;}
.hours{display:flex; gap:16px; align-items:center; justify-content:flex-start;}
.hours .clock{width:46px; height:46px; border:1px solid var(--gold-dim); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.hours .clock svg{width:22px; height:22px; stroke:var(--gold);}
.hours .t1{font-weight:700; color:var(--gold-bright);}
.hours .t2{font-size:.8rem; color:#a89469; margin-top:2px;}
.bottom-bar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:22px 0; font-size:.8rem; color:#8a7a55;}
.bottom-bar .links{display:flex; gap:22px;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

/* =========================== RESPONSIVE =========================== */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-art{order:-1; aspect-ratio:16/10;}
  .cat-grid{grid-template-columns:1fr 1fr;}
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .feat-grid{grid-template-columns:repeat(2,1fr); row-gap:30px;}
  .feat:nth-child(2)::after{display:none;}
  .gal-row{grid-template-columns:1fr;}
  .gal-copy{order:0; text-align:center;}
  .foot-grid{grid-template-columns:1fr; gap:36px; text-align:center;}
  .hours{justify-content:center;}
  .contact-list li{justify-content:center;}
}
@media (max-width:720px){
  .topbar .left .item:nth-child(2){display:none;}
  nav.main{position:fixed; inset:64px 0 0 0; background:#0d0905; flex-direction:column; padding:30px 28px; gap:6px; transform:translateY(-110%); transition:transform .35s ease; z-index:40;}
  nav.main.open{transform:translateY(0);}
  nav.main a{padding:14px 0; border-bottom:1px solid var(--line); width:100%;}
  .burger{display:block;}
  .cat-grid, .prod-grid{grid-template-columns:1fr 1fr;}
  .feat-grid{grid-template-columns:1fr; }
  .feat:not(:last-child)::after{display:none;}
  .testi-grid{grid-template-columns:1fr;}
  .gal-shots{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .cat-grid, .prod-grid{grid-template-columns:1fr;}
  .cta-row{flex-direction:column; align-items:stretch;}
  .btn{justify-content:center;}
}