/* Hiba Gallery — home décor boutique. Warm-neutral luxury, RTL. */
:root{
  --cream:#FAF7F2; --cream-2:#F3ECE2; --white:#ffffff;
  --ink:#2B2724; --ink-soft:#5A5149; --muted:#8A7F73;
  --camel:#B8926A; --camel-deep:#A97E52; --espresso:#4A3B2E;
  --line:#EAE2D6; --line-2:#DED3C3;
  --sale:#9A5B3B;
  --shadow:0 18px 50px -24px rgba(74,59,46,.34);
  --shadow-sm:0 8px 24px -16px rgba(74,59,46,.4);
  --radius:14px; --radius-lg:22px;
  --serif:"Cormorant Garamond",serif;
  --serif-he:"Frank Ruhl Libre",serif;
  --sans:"Assistant",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3{margin:0; font-weight:600; line-height:1.15; letter-spacing:-.01em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.eyebrow{font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--camel-deep); font-weight:600}
.serif{font-family:var(--serif-he)}

/* ---------- announcement bar ---------- */
.announce{background:var(--espresso); color:#F2E7D8; font-size:.86rem; letter-spacing:.02em}
.announce .wrap{display:flex; align-items:center; justify-content:center; gap:10px; min-height:40px; text-align:center; padding-block:7px}
.announce a{color:#F2E7D8; text-decoration:underline; text-underline-offset:3px; font-weight:600}
.announce .spark{color:var(--camel)}

/* ---------- header ---------- */
.header{position:sticky; top:0; z-index:60; background:rgba(250,247,242,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.header .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; min-height:78px}
.nav{display:flex; gap:26px; align-items:center; font-size:.98rem; font-weight:600}
.nav a{position:relative; padding:6px 0; color:var(--ink-soft); transition:color .2s}
.nav a::after{content:""; position:absolute; inset-inline:0; bottom:-2px; height:1.5px; background:var(--camel-deep); transform:scaleX(0); transform-origin:right; transition:transform .28s}
.nav a:hover{color:var(--ink)} .nav a:hover::after{transform:scaleX(1)}
.brand{grid-column:2; text-align:center; line-height:1}
.brand .mark{font-family:var(--serif); font-size:2rem; font-weight:600; letter-spacing:.02em; color:var(--ink)}
.brand .sub{font-size:.62rem; letter-spacing:.42em; text-transform:uppercase; color:var(--camel-deep); margin-top:3px}
.header-actions{display:flex; gap:8px; align-items:center; justify-content:flex-start}
.icon-btn{width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); background:var(--white); color:var(--ink-soft); transition:.2s}
.icon-btn:hover{border-color:var(--camel); color:var(--camel-deep); transform:translateY(-1px)}
.icon-btn svg{width:19px; height:19px}
.burger{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:999px; font-weight:700; font-size:.98rem; border:1px solid transparent; transition:.22s; letter-spacing:.01em}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--espresso); color:#F6ECDE}
.btn-primary:hover{background:#3a2e23; transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-outline:hover{background:var(--ink); color:var(--cream)}
.btn-wa{background:#25D366; color:#fff}
.btn-wa:hover{background:#1eb856; transform:translateY(-2px); box-shadow:0 10px 26px -12px rgba(37,211,102,.7)}
.btn-ghost{padding:10px 0; font-weight:700; color:var(--camel-deep); border-bottom:1.5px solid transparent}
.btn-ghost:hover{border-color:var(--camel-deep)}

/* ---------- hero ---------- */
.hero{padding:70px 0 40px; position:relative}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center}
.hero-copy .eyebrow{margin-bottom:20px; display:block}
.hero h1{font-family:var(--serif-he); font-size:clamp(2.5rem,5.4vw,4.1rem); font-weight:500; letter-spacing:-.02em}
.hero h1 em{font-style:normal; color:var(--camel-deep)}
.hero .tagline{font-family:var(--serif); font-size:1.5rem; color:var(--espresso); margin:18px 0 6px; direction:rtl}
.hero .tagline .ar{font-family:var(--sans); display:block; font-size:1.05rem; color:var(--muted); direction:rtl; margin-top:2px}
.hero p.lead{color:var(--ink-soft); font-size:1.08rem; max-width:46ch; margin:20px 0 32px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-figure{position:relative}
.hero-figure .frame{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5}
.hero-figure .frame img{width:100%; height:100%; object-fit:cover}
.hero-badge{position:absolute; inset-block-start:24px; inset-inline-start:-22px; background:var(--white); border:1px solid var(--line); border-radius:16px; padding:14px 20px; box-shadow:var(--shadow-sm); text-align:center}
.hero-badge b{font-family:var(--serif); font-size:1.7rem; color:var(--camel-deep); display:block; line-height:1}
.hero-badge span{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.hero-badge.two{inset-block-start:auto; inset-block-end:26px; inset-inline-start:auto; inset-inline-end:-20px}

/* ---------- value strip ---------- */
.values{border-block:1px solid var(--line); background:var(--white)}
.values .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding-block:26px}
.value{display:flex; gap:13px; align-items:center; justify-content:center; text-align:right}
.value svg{width:26px; height:26px; color:var(--camel-deep); flex:none}
.value b{display:block; font-size:.98rem}
.value small{color:var(--muted); font-size:.82rem}

/* ---------- section head ---------- */
.section{padding:76px 0}
.section.tight{padding:56px 0}
.sec-head{text-align:center; max-width:620px; margin:0 auto 46px}
.sec-head .eyebrow{margin-bottom:14px; display:block}
.sec-head h2{font-family:var(--serif-he); font-size:clamp(2rem,3.6vw,2.9rem); font-weight:500}
.sec-head p{color:var(--ink-soft); margin-top:14px}
.sec-head .rule{width:54px; height:2px; background:var(--camel); margin:20px auto 0}

/* ---------- categories ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.cat{position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow-sm)}
.cat img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cat:hover img{transform:scale(1.07)}
.cat::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(43,39,36,.6),rgba(43,39,36,.06) 55%,transparent)}
.cat-label{position:absolute; inset-inline:0; bottom:0; z-index:2; padding:22px; color:#fff}
.cat-label b{font-family:var(--serif-he); font-size:1.4rem; font-weight:500; display:block}
.cat-label span{font-size:.82rem; opacity:.9; display:inline-flex; align-items:center; gap:6px; margin-top:4px}

/* ---------- products ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:.28s}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2)}
.card-media{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--cream-2)}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-media img{transform:scale(1.06)}
.tag{position:absolute; inset-block-start:12px; inset-inline-start:12px; z-index:2; background:var(--espresso); color:#F4E9DA; font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:6px 12px; border-radius:999px}
.tag.sale{background:var(--sale); color:#fff}
.tag.new{background:var(--camel-deep)}
.card-fav{position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:2; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.9); border:none; display:grid; place-items:center; color:var(--ink-soft); opacity:0; transform:translateY(-4px); transition:.25s}
.card:hover .card-fav{opacity:1; transform:none}
.card-fav:hover{color:var(--sale)} .card-fav svg{width:17px;height:17px}
.card-body{padding:17px 17px 19px; display:flex; flex-direction:column; gap:7px; flex:1}
.card-body .cat-eyebrow{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600}
.card-body h3{font-family:var(--serif-he); font-size:1.24rem; font-weight:500; color:var(--ink)}
.price{display:flex; align-items:baseline; gap:10px; margin-top:2px}
.price .now{font-weight:700; font-size:1.12rem; color:var(--espresso)}
.price .now.sale{color:var(--sale)}
.price .was{color:var(--muted); text-decoration:line-through; font-size:.95rem}
.price .ask{color:var(--ink-soft); font-weight:600; font-size:.98rem}
.card .wa-order{margin-top:auto; padding-top:14px}
.card .wa-order a{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px; border-radius:10px; background:var(--cream); border:1px solid var(--line-2); color:var(--ink); font-weight:700; font-size:.92rem; transition:.2s}
.card .wa-order a:hover{background:#25D366; border-color:#25D366; color:#fff}
.card .wa-order svg{width:17px;height:17px}
.more-row{text-align:center; margin-top:44px}

/* ---------- feature / sale band ---------- */
.feature{background:linear-gradient(120deg,var(--espresso),#5c4a39); color:#F4E9DA; border-radius:var(--radius-lg); overflow:hidden; margin:0 24px}
.feature-in{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch}
.feature-copy{padding:64px 56px}
.feature-copy .eyebrow{color:var(--camel)}
.feature-copy h2{font-family:var(--serif-he); font-size:clamp(2rem,3.4vw,2.8rem); font-weight:500; margin:16px 0 14px; color:#fff}
.feature-copy p{color:#E4D6C4; max-width:42ch}
.feature-price{display:flex; align-items:baseline; gap:14px; margin:22px 0 30px}
.feature-price .now{font-family:var(--serif); font-size:3rem; color:var(--camel); font-weight:600; line-height:1}
.feature-price .was{text-decoration:line-through; color:#B8A891; font-size:1.3rem}
.feature-price .off{background:var(--sale); color:#fff; font-size:.82rem; font-weight:700; padding:5px 11px; border-radius:999px; align-self:center}
.feature-figure{min-height:420px; background-size:cover; background-position:center}

/* ---------- about / showroom ---------- */
.about .wrap{display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center}
.about-figure{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3}
.about-figure img{width:100%; height:100%; object-fit:cover}
.about-copy .eyebrow{display:block; margin-bottom:14px}
.about-copy h2{font-family:var(--serif-he); font-size:clamp(2rem,3.5vw,2.8rem); font-weight:500; margin-bottom:8px}
.about-copy .quote{font-family:var(--serif); font-size:1.5rem; color:var(--camel-deep); direction:rtl; margin:6px 0 18px}
.about-copy p{color:var(--ink-soft); margin-bottom:16px}
.about-stats{display:flex; gap:34px; margin-top:26px; flex-wrap:wrap}
.about-stats .st b{font-family:var(--serif); font-size:2.1rem; color:var(--espresso); display:block; line-height:1}
.about-stats .st span{font-size:.82rem; color:var(--muted); letter-spacing:.06em}

/* ---------- lifestyle / instagram ---------- */
.insta{background:var(--white); border-block:1px solid var(--line)}
.insta-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px}
.insta-grid a{position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; display:block}
.insta-grid img{width:100%;height:100%;object-fit:cover; transition:transform .6s}
.insta-grid a:hover img{transform:scale(1.08)}
.insta-grid a::after{content:""; position:absolute; inset:0; background:rgba(43,39,36,0); transition:.3s}
.insta-grid a:hover::after{background:rgba(43,39,36,.22)}

/* ---------- contact ---------- */
.contact{background:var(--cream-2)}
.contact .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.contact-copy h2{font-family:var(--serif-he); font-size:clamp(2rem,3.5vw,2.7rem); font-weight:500; margin:14px 0}
.contact-copy p{color:var(--ink-soft); max-width:44ch; margin-bottom:26px}
.contact-methods{display:flex; flex-direction:column; gap:14px}
.cmethod{display:flex; gap:15px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:16px 20px; transition:.2s}
.cmethod:hover{border-color:var(--camel); transform:translateX(-4px)}
.cmethod svg{width:24px;height:24px;color:var(--camel-deep); flex:none}
.cmethod b{display:block} .cmethod span{color:var(--muted); font-size:.9rem}
.form-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-sm)}
.form-card h3{font-family:var(--serif-he); font-size:1.5rem; font-weight:500; margin-bottom:6px}
.form-card p.hint{color:var(--muted); font-size:.9rem; margin-bottom:20px}
.field{margin-bottom:15px}
.field label{display:block; font-size:.86rem; font-weight:600; margin-bottom:6px; color:var(--ink-soft)}
.field input,.field select,.field textarea{width:100%; padding:12px 14px; border:1px solid var(--line-2); border-radius:10px; font-family:inherit; font-size:.98rem; background:var(--cream); color:var(--ink)}
.field input:focus,.field select,.field textarea:focus{outline:2px solid var(--camel); border-color:var(--camel)}
.form-card .btn-wa{width:100%; justify-content:center; margin-top:6px}

/* ---------- footer ---------- */
.footer{background:var(--espresso); color:#D9CDBD; padding:66px 0 26px; font-size:.95rem}
.footer .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px}
.footer .mark{font-family:var(--serif); font-size:1.9rem; color:#fff}
.footer .sub{font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; color:var(--camel); margin:2px 0 16px}
.footer p{color:#B8A891; max-width:34ch}
.footer h4{color:#fff; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 16px; font-weight:700}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.footer ul a:hover{color:var(--camel)}
.footer .social{display:flex; gap:10px; margin-top:6px}
.footer .social a{width:40px;height:40px;border-radius:50%; border:1px solid #6b5844; display:grid; place-items:center; transition:.2s}
.footer .social a:hover{background:var(--camel); border-color:var(--camel); color:var(--espresso)}
.footer .social svg{width:18px;height:18px}
.footer-bottom{border-top:1px solid #6b5844; margin-top:44px; padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:#A89880; font-size:.85rem}
.footer-bottom a:hover{color:var(--camel)}

/* ---------- floating WA ---------- */
.wa-float{position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:80; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6); transition:.25s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px}

/* ---------- mobile nav ---------- */
.mnav{position:fixed; inset:0; z-index:70; background:var(--cream); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1); padding:90px 32px 40px; display:flex; flex-direction:column; gap:6px}
.mnav.open{transform:none}
.mnav a{font-family:var(--serif-he); font-size:1.5rem; padding:14px 0; border-bottom:1px solid var(--line)}
.mnav .close{position:absolute; top:22px; inset-inline-start:24px; width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--white); display:grid;place-items:center}
.mnav .mnav-cta{margin-top:20px}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .insta-grid{grid-template-columns:repeat(4,1fr)}
  .footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav{display:none}
  .header .wrap{grid-template-columns:auto 1fr auto; min-height:66px}
  .brand{grid-column:2}
  .brand .mark{font-size:1.6rem}
  .header-actions .icon-btn.hide-sm{display:none}
  .burger{display:grid}
  .hero .wrap{grid-template-columns:1fr; gap:38px}
  .hero-figure{order:-1; max-width:440px; margin:0 auto}
  .hero-badge.two{display:none}
  .values .wrap{grid-template-columns:1fr 1fr; gap:22px}
  .cat-grid{grid-template-columns:1fr 1fr; gap:14px}
  .prod-grid{grid-template-columns:1fr 1fr; gap:16px}
  .feature-in{grid-template-columns:1fr}
  .feature-figure{min-height:280px; order:-1}
  .feature-copy{padding:44px 30px}
  .about .wrap,.contact .wrap{grid-template-columns:1fr; gap:34px}
  .about-figure{order:-1}
  .insta-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .section{padding:54px 0}
  .card-body h3{font-size:1.12rem}
  .hero{padding:40px 0 20px}
  .feature-price .now{font-size:2.3rem}
  .footer .cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none}}