/* Athar Al Nakhl — light theme: off-white & desert sand, desert-gold + palm-green accents.
   Based on observed Saudi/Gulf conventions (see /workspace/athar/design-research.md). */
:root{
  --bg:#FAF7F0; --white:#FFFFFF; --sand:#F3EBDD; --sand2:#E8DCC4; --card:#FFFFFF;
  --line:rgba(154,118,67,.22); --line2:rgba(154,118,67,.42);
  --gold:#B8935A; --gold-d:#8C6A3A; --gold-l:#D9C29A;
  --green:#1F4D2B; --green-d:#163A20; --green-l:#2B6A3C;
  --text:#1E2A22; --muted:#6B6457;
  --f-ar:"Tajawal","Segoe UI",Tahoma,sans-serif; --f-ar-d:"Amiri","Times New Roman",serif;
  --f-en:"Tajawal","Helvetica Neue",Arial,sans-serif; --f-en-d:"Cormorant Garamond",Georgia,serif;
  --r:16px; --shadow:0 1px 2px rgba(60,45,20,.05),0 10px 30px -12px rgba(60,45,20,.18);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--text);font:400 17px/1.8 var(--f-ar);-webkit-font-smoothing:antialiased}
html[lang="en"] body{font-family:var(--f-en);font-size:16.5px;line-height:1.7}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700;line-height:1.25;text-wrap:balance;color:var(--green-d)}
h1,h2{font-family:var(--f-ar-d)}
html[lang="en"] h1,html[lang="en"] h2{font-family:var(--f-en-d);font-weight:600}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
h3{font-size:1.12rem}
.wrap{max-width:1160px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left))}
.skip{position:fixed;inset-inline-start:8px;top:-60px;background:var(--green);color:#fff;padding:8px 12px;border-radius:8px;z-index:99}
.skip:focus{top:8px}
:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px;border-radius:6px}
.eyebrow{color:var(--gold-d);font-size:.88rem;font-weight:700;letter-spacing:.03em;margin-bottom:.7rem;display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--gold);transform:rotate(45deg);flex:none;box-shadow:12px 0 0 -1px var(--gold-l)}
html[dir="rtl"] .eyebrow::before{box-shadow:-12px 0 0 -1px var(--gold-l)}
.eyebrow::before{margin-inline-end:10px}
html[lang="en"] .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem}
.lead{color:var(--muted);font-size:1.08rem;max-width:56ch}
.muted{color:var(--muted)} .small{font-size:.85rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1.45rem;border-radius:999px;font:700 1rem/1 inherit;font-family:inherit;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 8px 20px -10px rgba(31,77,43,.6)}
.btn-gold:hover{background:var(--green-l);border-color:var(--green-l)}
.btn-line{background:transparent;color:var(--gold-d);border-color:var(--gold)}
.btn-line:hover{background:rgba(184,147,90,.1)}
.btn-wa{background:var(--green);border-color:var(--green);color:#fff}
.btn-wa:hover{background:var(--green-l)}
.btn-sm{padding:.6rem 1rem;font-size:.9rem}
.btn-block{width:100%}
.wa-ico{width:1.15em;height:1.15em;flex:none;background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2c-1.5 0-3-.4-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.6-.3Z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2c-1.5 0-3-.4-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.6-.3Z"/></svg>') center/contain no-repeat}

[hidden]{display:none!important}
html.noscroll{overflow:hidden}
.center{text-align:center;margin-inline:auto}
.center .eyebrow{justify-content:center}
.linkish{all:unset;cursor:pointer}
.linkish:hover{color:var(--green)}
.linkish:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px;border-radius:4px}
picture{display:block}
.hero-frame picture,.hero-detail-img picture,.cat-img picture,.card-media picture,.story-img picture,.ws-img picture,.pm-thumb picture{width:100%;height:100%}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(250,247,240,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:1.4rem;height:76px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:54px;width:auto}
.nav{display:flex;gap:1.6rem;margin-inline-start:auto}
.nav a{text-decoration:none;color:var(--text);font-size:.96rem;font-weight:500;opacity:.8;transition:color .2s,opacity .2s;position:relative}
.nav a:hover{color:var(--green);opacity:1}
.top-actions{display:flex;align-items:center;gap:.6rem}
.lang{background:var(--white);border:1px solid var(--line2);color:var(--gold-d);border-radius:999px;padding:.5rem .9rem;font:700 .85rem/1 var(--f-ar);cursor:pointer;min-width:56px}
.lang:hover{border-color:var(--gold)}
@media (max-width:920px){.nav{display:none}.top-actions{margin-inline-start:auto}}
@media (max-width:440px){.top-in{height:64px}.brand img{height:42px}.top-actions .btn-wa span:last-child{display:none}.top-actions .btn-wa{padding:.6rem .7rem}}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,var(--sand) 100%);border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(520px 380px at 85% 10%,rgba(232,220,196,.95),transparent 70%)}
html[dir="rtl"] .hero::before{background:radial-gradient(520px 380px at 15% 10%,rgba(232,220,196,.95),transparent 70%)}
.hero-in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(40px,6vw,84px)}
.hero h1{margin-bottom:1rem;font-size:clamp(2.3rem,5vw,3.9rem)}
.hero h1::after{content:"";display:block;width:84px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-l));margin-top:1.1rem}
html[dir="rtl"] .hero h1::after{background:linear-gradient(-90deg,var(--gold),var(--gold-l))}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-facts{list-style:none;padding:0;margin:1.9rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;color:var(--muted);font-size:.95rem}
.hero-facts li{display:flex;align-items:center;gap:.5rem}
.dot{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}
.hero-art{position:relative;justify-self:center;width:min(500px,100%)}
.hero-frame{position:relative;border-radius:260px 260px 22px 22px;overflow:hidden;aspect-ratio:4/5;background:var(--sand2);
  box-shadow:0 30px 60px -30px rgba(60,45,20,.45);outline:1px solid var(--line2);outline-offset:10px}
.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-detail{position:absolute;margin:0;bottom:-18px;inset-inline-start:-34px;width:168px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:8px 8px 10px;box-shadow:var(--shadow);text-align:center}
.hero-detail-img{border-radius:12px;overflow:hidden;aspect-ratio:1}
.hero-detail-img img{width:100%;height:100%;object-fit:cover}
.hero-detail figcaption{font-size:.78rem;color:var(--gold-d);font-weight:700;margin-top:6px;line-height:1.3}
@media (max-width:820px){
  .hero-in{grid-template-columns:1fr;gap:1.6rem;padding-top:22px}
  .hero-art{order:-1;width:100%}
  .hero-frame{aspect-ratio:5/4;border-radius:180px 180px 18px 18px;outline-offset:6px}
  .hero-frame img{object-position:50% 25%}
  .hero-detail{width:112px;bottom:-14px;inset-inline-start:10px;padding:5px 5px 7px;border-radius:14px}
  .hero-detail figcaption{font-size:.68rem}
  .hero h1{font-size:clamp(2rem,8.4vw,2.6rem)}
}

/* sections */
.sec{padding-block:clamp(60px,8.5vw,108px)}
.sec-alt{background:var(--white);border-block:1px solid var(--line)}
.sec-head{margin-bottom:2.2rem;max-width:720px}
.sec-head .sub{color:var(--muted);margin-top:.7rem}

/* categories */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.cat{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--white);transition:border-color .2s,transform .2s,box-shadow .2s}
.cat:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.cat-img{aspect-ratio:1;background:#fff;overflow:hidden;border-bottom:1px solid var(--line)}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat:hover .cat-img img{transform:scale(1.04)}
.cat-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.cat h3{color:var(--green-d);font-size:1.12rem}
.cat p{color:var(--muted);font-size:.9rem;line-height:1.6;flex:1}
.cat-count{color:var(--gold-d);font-size:.82rem;font-weight:700;margin-top:6px}
@media (max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.cats{gap:.7rem}.cat-body{padding:10px 11px 13px}.cat h3{font-size:1rem}.cat p{font-size:.82rem}}

/* products */
.chips{display:flex;gap:.5rem;margin-bottom:1.6rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--white);border:1px solid var(--line2);color:var(--text);border-radius:999px;padding:.55rem 1rem;font:500 .92rem/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.chip i{font-style:normal;font-size:.75rem;background:var(--sand);color:var(--gold-d);border-radius:999px;padding:.15rem .45rem;min-width:1.4em;text-align:center}
.chip:hover{border-color:var(--gold)}
.chip.on{background:var(--green);color:#fff;border-color:var(--green)}
.chip.on i{background:rgba(255,255,255,.18);color:#fff}
@media (max-width:600px){
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;padding-bottom:4px}
  .chips::-webkit-scrollbar{display:none}
}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
@media (max-width:1060px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}}
.card{border:1px solid var(--line);border-radius:18px;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.card:hover{box-shadow:var(--shadow);border-color:var(--line2)}
.card-media{all:unset;cursor:zoom-in;position:relative;display:block;aspect-ratio:1;background:#fff;overflow:hidden}
.card-media:focus-visible{outline:2px solid var(--gold-d);outline-offset:-4px}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-media img{transform:scale(1.035)}
.badge{position:absolute;top:10px;inset-inline-start:10px;background:var(--green);color:#fff;font-size:.75rem;font-weight:700;border-radius:999px;padding:.25rem .65rem;line-height:1.4}
.pcount{position:absolute;bottom:10px;inset-inline-end:10px;background:rgba(255,255,255,.92);color:var(--muted);font-size:.72rem;border-radius:999px;padding:.15rem .55rem;border:1px solid var(--line)}
.card-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1}
.card .cat-tag{font-size:.76rem;color:var(--gold-d);font-weight:700}
.card h3{margin:4px 0 12px;font-size:1.02rem;line-height:1.45;color:var(--text);flex:1}
.card .acts{display:grid;grid-template-columns:1fr;gap:.45rem}
.card .acts .btn{padding:.6rem .6rem;font-size:.85rem}
.empty{grid-column:1/-1;color:var(--muted);text-align:center;padding:2rem}
.img-note{color:var(--muted);font-size:.82rem;margin-top:1.4rem;text-align:center}
@media (max-width:440px){.card-body{padding:10px 10px 12px}.card h3{font-size:.92rem}.card .acts .btn{font-size:.8rem;padding:.55rem .4rem}.badge{top:7px;inset-inline-start:7px;font-size:.7rem}.pcount{display:none}}

/* story */
.story{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.story-img{border-radius:22px 22px 220px 22px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 60px -34px rgba(60,45,20,.5)}
html[dir="rtl"] .story-img{border-radius:22px 22px 22px 220px}
.story-img img{width:100%;height:100%;object-fit:cover}
.story-copy>p:not(.eyebrow){color:var(--muted);margin-top:1rem;max-width:60ch}
.story-copy h2{margin-bottom:.4rem}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.8rem}
.pillar{border:1px solid var(--line);border-radius:16px;padding:1rem 1rem 1.1rem;background:var(--white)}
.pi{color:var(--gold);font-size:.8rem}
.pillar h3{color:var(--green);margin:.2rem 0 .3rem;font-size:1rem}
.pillar p{color:var(--muted);font-size:.88rem;line-height:1.6}
@media (max-width:820px){.story{grid-template-columns:1fr}.story-img{aspect-ratio:4/3}.pillars{grid-template-columns:1fr}}

/* why us — quality · packaging · lead time · audits */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.why-card{border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.2rem 1.4rem;background:var(--bg);transition:border-color .2s,transform .2s}
.why-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.why-ic{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--sand);color:var(--gold-d);border:1px solid var(--line2);margin-bottom:.8rem}
.why-card h3{color:var(--green);font-size:1.05rem;margin-bottom:.35rem}
.why-card p{color:var(--muted);font-size:.9rem;line-height:1.65}
@media (max-width:980px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}

/* wholesale — the one deep-green band */
.wholesale{background:radial-gradient(600px 300px at 90% 0%,rgba(184,147,90,.18),transparent 70%),var(--green-d);color:#F3EBDD}
.wholesale h2{color:#FAF7F0}
.wholesale .eyebrow{color:var(--gold-l)}
.wholesale .lead{color:rgba(243,235,221,.82)}
.ws-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.ws-moq{display:flex;align-items:center;gap:.6rem;margin-top:1.2rem;background:rgba(217,194,154,.14);border:1px solid rgba(217,194,154,.45);border-radius:12px;padding:.75rem 1rem;color:#FAF7F0;font-weight:700}
.ws-list{list-style:none;margin:1.2rem 0 0;padding:0;border:1px solid rgba(217,194,154,.35);border-radius:var(--r);background:rgba(250,247,240,.05)}
.ws-list li{display:grid;grid-template-columns:150px 1fr;gap:1rem;padding:.9rem 1.2rem;border-bottom:1px solid rgba(217,194,154,.2)}
.ws-list li:last-child{border-bottom:0}
.ws-list b{color:var(--gold-l)}
.ws-list span{color:#FAF7F0;opacity:.9}
.ws-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.ws-img{border-radius:220px 220px 20px 20px;overflow:hidden;aspect-ratio:4/5;outline:1px solid rgba(217,194,154,.45);outline-offset:10px}
.ws-img img{width:100%;height:100%;object-fit:cover}
.wholesale .btn-gold{background:var(--gold);border-color:var(--gold);color:#1E2A22;box-shadow:none}
.wholesale .btn-gold:hover{background:var(--gold-l);border-color:var(--gold-l)}
.wholesale .btn-line{color:#FAF7F0;border-color:rgba(217,194,154,.6)}
.wholesale .btn-line:hover{background:rgba(250,247,240,.08)}
@media (max-width:820px){.ws-in{grid-template-columns:1fr}.ws-img{order:-1;aspect-ratio:16/10;border-radius:140px 140px 18px 18px;outline-offset:6px}.ws-list li{grid-template-columns:1fr;gap:.2rem}}

/* contact + form */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start}
.contact-ways{display:grid;gap:.7rem;margin-top:1.8rem}
.way{display:flex;align-items:center;gap:.9rem;text-decoration:none;border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;background:var(--bg);margin:0}
a.way:hover{border-color:var(--gold)}
.way .wa-ico,.way .ico{width:40px;height:40px;flex:none;border-radius:50%}
.way .wa-ico{background:#25D366;-webkit-mask-size:60%;mask-size:60%}
.way .ico{display:grid;place-items:center;background:var(--sand);color:var(--gold-d);font-size:1.05rem}
.way b{display:block;font-size:.98rem}
.way small{color:var(--muted);font-size:.9rem}
.socials{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.socials a{text-decoration:none;border:1px solid var(--line2);border-radius:999px;padding:.45rem .95rem;color:var(--gold-d);font-size:.9rem;font-weight:500;background:var(--white)}
.socials a:hover{border-color:var(--gold)}
.form{border:1px solid var(--line2);border-radius:20px;padding:clamp(18px,3vw,32px);background:var(--bg);display:grid;gap:1rem;box-shadow:var(--shadow)}
.form label{display:grid;gap:.35rem;font-size:.93rem;font-weight:500}
.form input:not([type=radio]):not([type=checkbox]),.form select,.form textarea{width:100%;background:var(--white);border:1px solid var(--sand2);color:var(--text);border-radius:10px;padding:.78rem .9rem;font:inherit;font-size:1rem;font-weight:400}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,147,90,.2)}
.form ::placeholder{color:#A49B8A}
.form .invalid{border-color:#B5503C!important;box-shadow:0 0 0 3px rgba(181,80,60,.12)!important}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
legend{font-size:.93rem;font-weight:500;margin-bottom:.45rem;padding:0;width:100%}
fieldset label{display:inline-flex!important;align-items:center;gap:.45rem!important;border:1px solid var(--sand2);background:var(--white);border-radius:999px;padding:.45rem .95rem;cursor:pointer;font-size:.9rem!important;font-weight:400!important}
fieldset label:has(input:checked){background:rgba(31,77,43,.07);border-color:var(--green);color:var(--green-d)}
fieldset input{accent-color:var(--green);margin:0}
.req{color:var(--gold-d);font-style:normal}
.hp{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;opacity:0}
.form-msg{min-height:1.4em;font-size:.95rem}
.form-msg.ok{color:#1F6B35;font-weight:500}.form-msg.err{color:#A2412F}
.form-msg a{color:var(--green);font-weight:700}
.offline-note{margin:0;background:#FFF6E0;border:1px solid var(--gold-l);border-radius:10px;padding:.6rem .8rem;font-size:.86rem;color:#6B4E1E}
.fine{color:var(--muted);font-size:.8rem}
@media (max-width:820px){.contact{grid-template-columns:1fr;gap:2rem}}
@media (max-width:520px){.row2{grid-template-columns:1fr}}

.ref-pill{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;background:var(--sand);border:1px solid var(--line2);border-radius:12px;padding:.55rem .8rem;font-size:.88rem;margin:0}
.ref-pill button{all:unset;cursor:pointer;margin-inline-start:auto;color:var(--gold-d);font-size:1.2rem;line-height:1;padding:0 .3rem}

/* footer */
.foot{background:var(--sand);border-top:1px solid var(--line);padding:52px 0 96px}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;align-items:start}
.foot-brand img{width:210px;height:auto;margin-bottom:.6rem}
.foot-brand p{max-width:36ch;font-size:.92rem}
.foot-nav,.foot-contact{display:grid;gap:.45rem;font-size:.93rem}
.foot-nav a,.foot-contact a{text-decoration:none;color:var(--text);opacity:.85}
.foot-nav a:hover,.foot-contact a:hover{color:var(--green);opacity:1}
.foot-contact span{color:var(--muted)}
.foot-copy{margin-top:2rem}
.foot-copy::before{content:"";display:block;border-top:1px solid var(--line);margin-bottom:1.2rem}
@media (max-width:720px){.foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* product modal */
.pm{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px}
.pm-backdrop{position:absolute;inset:0;background:rgba(30,42,34,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s}
.pm.open .pm-backdrop{opacity:1}
.pm-box{position:relative;width:min(1080px,100%);max-height:calc(100dvh - 48px);overflow:auto;background:var(--bg);border-radius:22px;display:grid;grid-template-columns:1.15fr .85fr;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);transform:translateY(10px);opacity:0;transition:transform .25s,opacity .25s}
.pm.open .pm-box{transform:none;opacity:1}
.pm-x{position:absolute;top:12px;inset-inline-end:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:var(--white);font-size:1.5rem;line-height:1;cursor:pointer;color:var(--text)}
.pm-gallery{background:#fff;padding:16px;border-inline-end:1px solid var(--line);min-width:0}
.pm-stage{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#fff}
.pm-main,.pm-main picture{width:100%;height:100%}
.pm-main img{width:100%;height:100%;object-fit:contain}
.pm-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.92);font-size:1.6rem;line-height:1;cursor:pointer;color:var(--green-d);display:grid;place-items:center}
.pm-prev{inset-inline-start:8px}.pm-next{inset-inline-end:8px}
html[dir="rtl"] .pm-nav span{display:inline-block;transform:scaleX(-1)}
.pm-count{position:absolute;bottom:10px;inset-inline-start:50%;transform:translateX(-50%);background:rgba(30,42,34,.7);color:#fff;font-size:.75rem;border-radius:999px;padding:.15rem .6rem}
html[dir="rtl"] .pm-count{transform:translateX(50%)}
.pm-thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pm-thumb{flex:none;width:68px;height:68px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:#fff;cursor:pointer;opacity:.75}
.pm-thumb.on{border-color:var(--gold);opacity:1}
.pm-thumb img{width:100%;height:100%;object-fit:cover}
.pm-info{padding:28px 28px 24px;display:flex;flex-direction:column;min-width:0}
.pm-cat{color:var(--gold-d);font-size:.82rem;font-weight:700;margin-inline-end:44px}
.pm-info h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:.3rem 0 .8rem;margin-inline-end:30px}
.pm-desc{color:var(--muted)}
.pm-h{font-size:.95rem;margin:1.3rem 0 .5rem;color:var(--green)}
.pm-specs{margin:0;padding:0;list-style:none;display:grid;gap:.35rem}
.pm-specs li{display:flex;gap:.55rem;align-items:baseline;font-size:.95rem}
.pm-specs li::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none;position:relative;top:-2px}
.pm-sku{margin-top:1rem;font-size:.85rem;color:var(--muted)}
.pm-acts{display:grid;gap:.55rem;margin-top:1.4rem}
.pm-form{margin-top:.8rem;color:var(--green);font-weight:700;font-size:.9rem;text-decoration:none}
.pm-form:hover{text-decoration:underline}
.pm-note{margin-top:auto;padding-top:1.2rem;font-size:.76rem;color:var(--muted)}
@media (max-width:820px){
  .pm{padding:0;place-items:end stretch}
  .pm-box{grid-template-columns:1fr;max-height:94dvh;border-radius:20px 20px 0 0}
  .pm-gallery{border-inline-end:0;border-bottom:1px solid var(--line);padding:12px}
  .pm-info{padding:18px 18px 22px}
  .pm-thumb{width:56px;height:56px}
}

/* floating whatsapp */
.wa-float{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));inset-inline-end:18px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -6px rgba(20,60,30,.45);z-index:30}
.wa-float .wa-ico{width:28px;height:28px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* new this week — data-driven from products.json ("new", "launch_week") */
.sec-new{position:relative;background:linear-gradient(180deg,var(--white) 0%,var(--bg) 100%);padding-block:clamp(48px,6.5vw,84px)}
.new-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:1.8rem}
.new-head .sec-head{margin-bottom:0}
.new-pill{display:inline-block;background:#B4442E;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:.2rem .6rem;line-height:1.4;margin-inline-end:.15rem}
html[lang="en"] .new-pill{letter-spacing:.12em}
.new-week{flex:none;background:var(--sand);border:1px solid var(--line2);color:var(--gold-d);font-weight:700;font-size:.88rem;border-radius:999px;padding:.45rem 1rem;white-space:nowrap}
.badge-new{position:absolute;top:10px;inset-inline-end:10px;background:#B4442E;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;border-radius:999px;padding:.22rem .6rem;line-height:1.4;box-shadow:0 4px 10px -4px rgba(120,40,20,.5)}
.new-grid .card{background:var(--white);border-color:var(--line2)}
.new-follow{margin-top:1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem 1.6rem;flex-wrap:wrap;background:var(--sand);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.3rem}
.new-follow-t{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--green-d);font-size:1.02rem}
.new-follow-cta{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap}
.new-follow-cta small{font-size:.8rem;max-width:34ch;line-height:1.5}
.new-prev{margin-top:1.2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.new-prev summary{cursor:pointer;padding:.85rem 1.2rem;font-weight:700;color:var(--gold-d);list-style:none;display:flex;align-items:center;gap:.5rem}
.new-prev summary::-webkit-details-marker{display:none}
.new-prev summary::after{content:"+";margin-inline-start:auto;font-size:1.2rem;line-height:1}
.new-prev[open] summary::after{content:"–"}
.new-prev summary i{font-style:normal;font-size:.75rem;background:var(--sand);border-radius:999px;padding:.1rem .5rem}
#newPrevList{padding:0 1.2rem 1.2rem}
.new-prev-h{font-size:.95rem;color:var(--green);margin:1rem 0 .7rem}
.new-prev-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem}
.new-prev-grid .acts{display:none}
.new-prev-grid .card h3{font-size:.88rem;margin-bottom:0}
@media (max-width:900px){.new-prev-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.new-follow{flex-direction:column;align-items:flex-start}.new-week{white-space:normal}}
@media (max-width:440px){.badge-new{top:7px;inset-inline-end:7px;font-size:.66rem}.new-prev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* why us — wide 5th card (weekly new designs / R&D) */
.why-wide{grid-column:1/-1;display:flex;align-items:center;gap:1rem 1.4rem;background:var(--sand);border-color:var(--line2)}
.why-wide .why-ic{margin-bottom:0;flex:none;background:var(--white)}
.why-wide-txt{flex:1}
.why-wide .btn{flex:none}
@media (max-width:720px){.why-wide{flex-direction:column;align-items:flex-start}}
.hero-new{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.1rem;padding:.3rem .9rem .3rem .35rem;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.75);color:var(--green-d);font-weight:700;font-size:.88rem;text-decoration:none;transition:border-color .2s,background .2s}
html[dir="rtl"] .hero-new{padding:.3rem .35rem .3rem .9rem}
.hero-new:hover{border-color:var(--gold);background:#fff}
.hero-new .new-pill{margin:0}
.hero-new-arr{color:var(--gold-d);display:inline-block}
html[dir="ltr"] .hero-new-arr{transform:scaleX(-1)}