/* Khunji Store — storefront styles */
:root{
  --bg:#f7f4ee; --paper:#fffdf9; --ink:#14130f; --ink-2:#4a463d; --muted:#857e70;
  --line:#e5ddcf; --gold:#a8834a; --gold-2:#8a6a36; --sale:#a33a2b; --ok:#2f6b47;
  --radius:4px; --shadow:0 12px 32px -18px rgba(20,19,15,.35);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,-apple-system,Segoe UI,sans-serif;
}
.rtl{--serif:'Tajawal',sans-serif;--sans:'Tajawal',system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--gold-2)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(2rem,4.2vw,3.2rem)} h2{font-size:clamp(1.6rem,3vw,2.2rem)} h3{font-size:1.35rem}
.rtl h1,.rtl h2,.rtl h3{font-weight:700;letter-spacing:0}
input,select,textarea,button{font:inherit;color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.muted{color:var(--muted)} .small{font-size:.875rem} .center{text-align:center}
.sr-only,.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.eyebrow{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);margin:0 0 .8em}
.rtl .eyebrow{letter-spacing:0}

/* header */
.announce{background:var(--ink);color:#efe7d6;text-align:center;font-size:.8rem;letter-spacing:.06em;padding:8px 16px}
.site-header{background:rgba(247,244,238,.92);backdrop-filter:blur(10px);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:22px;height:72px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand img{max-height:48px;width:auto}
.brand-mark{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.75rem;letter-spacing:.32em}
.brand-mark.light{color:#f4ecdc}
.brand-sub{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);margin-top:4px}
.main-nav{display:flex;gap:22px;flex:1}
.main-nav a{font-size:.9rem;letter-spacing:.04em;padding:6px 0;border-bottom:1px solid transparent}
.main-nav a.on,.main-nav a:hover{border-color:var(--gold);color:var(--ink)}
.nav-mobile-only{display:none}
.head-actions{display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:0 6px 0 14px}
.search input{border:0;background:none;outline:none;width:170px;height:38px;font-size:.88rem}
.search button{border:0;background:none;cursor:pointer;padding:6px;display:flex}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;cursor:pointer;position:relative}
.lang{font-size:.85rem;padding:6px 10px;border:1px solid var(--line);border-radius:999px}
.cart-count{position:absolute;top:2px;inset-inline-end:0;background:var(--gold);color:#fff;font-size:.68rem;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.menu-toggle{display:none}
.nav-scrim{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#f7f1e4;border:1px solid var(--ink);padding:13px 26px;border-radius:var(--radius);cursor:pointer;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;transition:.2s}
.rtl .btn{letter-spacing:0}
.btn:hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-wide{width:100%}
.btn-line{display:block;text-align:center;border:1px solid var(--line);background:none;padding:9px;border-radius:var(--radius);font-size:.8rem;letter-spacing:.06em;cursor:pointer;width:100%;color:var(--ink-2)}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}
.link-btn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:.82rem}

/* alerts */
.alert{padding:12px 16px;border-radius:var(--radius);margin:16px 0;border:1px solid}
.alert-success{background:#edf5ef;border-color:#cfe3d5;color:var(--ok)}
.alert-error{background:#f9ece9;border-color:#ecc9c2;color:var(--sale)}

/* hero */
.hero{padding:56px 0 40px;border-bottom:1px solid var(--line);background:radial-gradient(1200px 400px at 85% 0%,#efe6d3 0,transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:500}
.rtl .hero h1{font-weight:700}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.hero-cta.center{justify-content:center}
.hero-points{list-style:none;padding:0;margin:0;display:flex;gap:20px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-2)}
.hero-points li::before{content:"✓";color:var(--gold);margin-inline-end:6px}
.hero-art img{border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-collage{position:relative;aspect-ratio:1/1;max-width:540px;margin-inline-start:auto}
.hc{position:absolute;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--paper)}
.hc img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.hc:hover img{transform:scale(1.04)}
.hc0{inset:0 32% 22% 0}.hc1{inset:12% 0 42% 72%}.hc2{inset:58% 0 0 44%}
.hero-seal{position:absolute;left:6%;bottom:2%;width:118px;height:118px;border-radius:50%;background:var(--ink);color:#efe2c8;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.hero-seal span{font-family:var(--serif);font-size:2.2rem;letter-spacing:0;color:#d9b97c;line-height:1}

/* sections */
.section{padding:56px 20px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:12px}
.sec-head h2{margin:0}
.sec-head a{font-size:.85rem;color:var(--gold-2)}
.page-head{padding:36px 0 12px}
.crumbs{font-size:.82rem;color:var(--muted);margin:0 0 8px}
.crumbs a:hover{text-decoration:underline}

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat-grid .cat-tile{aspect-ratio:5/4}
.cat-tile{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--paper)}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cat-tile:hover img{transform:scale(1.05)}
.cat-tile span{position:absolute;inset-inline:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(20,19,15,.78));color:#fff;font-family:var(--serif);font-size:1.5rem;display:flex;justify-content:space-between;align-items:baseline}
.cat-tile small{font-family:var(--sans);font-size:.8rem;opacity:.8}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 20px}
.card{display:flex;flex-direction:column}
.card-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper);border-radius:var(--radius)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .card-img img{transform:scale(1.04)}
.badges{position:absolute;top:10px;inset-inline-start:10px;display:flex;gap:6px;flex-wrap:wrap}
.badge{background:var(--paper);color:var(--ink);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:2px}
.badge-sale{background:var(--sale);color:#fff}
.badge-out{background:var(--ink);color:#fff}
.card-body{padding:12px 2px 0;display:flex;flex-direction:column;gap:6px;flex:1}
.card-title{font-size:.98rem}
.price{display:flex;gap:8px;align-items:baseline;font-size:.95rem}
.price s{color:var(--muted);font-size:.85em}
.price b{font-weight:500}
.card-body .btn-line{margin-top:auto}
.sale-band{background:#efe8da;padding:56px 0;border-block:1px solid var(--line)}

.story{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.story-card{background:var(--paper);border:1px solid var(--line);padding:28px;border-radius:var(--radius)}
.story-card hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.big-num{font-family:var(--serif);font-size:4rem;color:var(--gold);line-height:1}
.prose p{color:var(--ink-2);font-size:1.05rem}
.map{width:100%;height:220px;border:0;border-radius:var(--radius);margin-top:12px}

/* shop toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:8px 0 14px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);padding:7px 14px;border-radius:999px;font-size:.85rem;background:var(--paper)}
.chip.on,.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sort label{font-size:.85rem;display:flex;gap:8px;align-items:center}
.sort select{border:1px solid var(--line);background:var(--paper);padding:8px 10px;border-radius:var(--radius)}
.empty{text-align:center;padding:60px 0}

/* product page */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;padding-bottom:30px}
.g-main{aspect-ratio:4/5;background:var(--paper);border-radius:var(--radius);overflow:hidden}
.g-main img{width:100%;height:100%;object-fit:cover}
.g-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.g-thumbs button{width:72px;height:90px;padding:0;border:1px solid var(--line);background:var(--paper);cursor:pointer;border-radius:2px;overflow:hidden}
.g-thumbs button.on{border-color:var(--ink)}
.g-thumbs img{width:100%;height:100%;object-fit:cover}
.pdp-info h1{font-size:clamp(2rem,3.4vw,2.8rem);margin-bottom:.2em}
.price.big{font-size:1.4rem;margin-bottom:6px}
.stock{font-size:.9rem;color:var(--ok);margin:0 0 18px}
.stock.out{color:var(--sale)}
.opts{border:0;padding:0;margin:0 0 18px}
.sg-link{text-transform:none;letter-spacing:0;color:var(--gold-2);text-decoration:underline;margin-inline-start:10px}
.opts legend{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;color:var(--ink-2)}
.opt{display:inline-block;margin:0 6px 6px 0}
.opt input{position:absolute;opacity:0}
.opt span{display:inline-block;min-width:48px;text-align:center;padding:9px 14px;border:1px solid var(--line);background:var(--paper);border-radius:var(--radius);cursor:pointer;font-size:.9rem}
.opt input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.opt input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.buy-row{display:flex;gap:12px;align-items:stretch}
.qty{display:flex;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.qty button{width:40px;border:0;background:none;cursor:pointer;font-size:1.1rem}
.qty input{width:46px;text-align:center;border:0;background:none;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.small-qty{height:38px}
.pdp-points{list-style:none;padding:18px 0;margin:22px 0;border-block:1px solid var(--line);display:grid;gap:8px;font-size:.92rem;color:var(--ink-2)}
.pdp-points li::before{content:"—";color:var(--gold);margin-inline-end:8px}
.desc p{color:var(--ink-2)}
.wa-line{color:#1f8a4c;font-size:.92rem}

/* cart & checkout */
.cart-grid,.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:36px;align-items:start;padding-bottom:40px}
.line{display:grid;grid-template-columns:84px 1fr auto auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.line-img img{width:84px;height:105px;object-fit:cover;border-radius:2px;background:var(--paper)}
.line-title{font-size:1rem}
.line-total{min-width:90px;text-align:end}
.cart-actions{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.summary{background:var(--paper);border:1px solid var(--line);padding:24px;border-radius:var(--radius);position:sticky;top:96px}
.totals{margin:16px 0;display:grid;gap:8px}
.totals div{display:flex;justify-content:space-between}
.totals dt,.totals dd{margin:0}
.totals .disc{color:var(--ok)}
.totals .grand{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;font-size:1.15rem;font-weight:500}
.coupon{display:flex;gap:8px;margin-top:14px}
.coupon input{flex:1;min-width:0;border:1px solid var(--line);padding:10px;border-radius:var(--radius);background:var(--bg);text-transform:uppercase}
.coupon .btn{padding:10px 14px}
.freebar{height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:6px}
.freebar div{height:100%;background:var(--gold)}
.panel{background:var(--paper);border:1px solid var(--line);padding:24px;border-radius:var(--radius);margin-bottom:20px}
.panel.left{text-align:start}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:22px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--ink-2)}
.form-grid .full{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea{border:1px solid var(--line);background:var(--bg);padding:11px 12px;border-radius:var(--radius);font-size:.95rem;color:var(--ink)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--gold);background:#fff}
.pay-option{display:flex;gap:14px;align-items:center;border:1px solid var(--ink);padding:16px;border-radius:var(--radius);background:#fff}
.pay-option span{flex:1;display:flex;flex-direction:column}
.pay-option small{color:var(--muted)}
.pay-option svg{color:var(--gold)}
.mini-lines{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.mini-lines li{display:flex;align-items:center;gap:10px;font-size:.9rem}
.mini-lines img{width:44px;height:55px;object-fit:cover;border-radius:2px}
.mini-lines span{flex:1;display:flex;flex-direction:column}
.mini-lines small{color:var(--muted)}
.mini-lines b{font-weight:500}

.success{text-align:center;padding:50px 20px}
.tick{width:72px;height:72px;border-radius:50%;background:var(--ok);color:#fff;font-size:2rem;display:grid;place-items:center;margin:0 auto 18px}
.order-no{font-size:1.2rem;letter-spacing:.08em;color:var(--gold-2)}
.steps{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.steps li{text-align:center;font-size:.82rem;color:var(--muted);position:relative}
.steps li span{display:block;width:16px;height:16px;border-radius:50%;background:var(--line);margin:0 auto 8px;position:relative;z-index:1}
.steps li::before{content:"";position:absolute;top:7px;inset-inline-start:-50%;width:100%;height:2px;background:var(--line)}
.steps li:first-child::before{display:none}
.steps li.done{color:var(--ink)}
.steps li.done span,.steps li.done::before{background:var(--gold)}
.history{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--line)}
.history li{padding:10px 0;border-bottom:1px dashed var(--line)}
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;padding-bottom:40px}

/* trust + footer */
.trust-strip{border-top:1px solid var(--line);background:var(--paper)}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-block:26px}
.trust-row div{display:flex;flex-direction:column;font-size:.85rem}
.trust-row strong{font-weight:500;font-size:.95rem}
.trust-row span{color:var(--muted)}
.site-footer{background:var(--ink);color:#cfc6b4;padding:56px 0 20px;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:36px}
.site-footer h4{color:#f4ecdc;font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.site-footer a{display:block;padding:3px 0}
.site-footer .muted{color:#9a917f}
.site-footer p a{display:inline}
.social{display:flex;gap:14px;margin-top:10px}
.newsletter{display:flex;border:1px solid #3a372f;border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.newsletter input{flex:1;min-width:0;background:none;border:0;padding:11px 12px;color:#fff;outline:none}
.newsletter button{background:var(--gold);color:#fff;border:0;padding:0 16px;cursor:pointer}
.foot-bottom{display:flex;justify-content:space-between;border-top:1px solid #2c2a24;margin-top:36px;padding-top:18px;font-size:.8rem;color:#8d8576}
.pay-badge{border:1px solid #3a372f;padding:3px 10px;border-radius:999px}
.wa-float{position:fixed;bottom:20px;inset-inline-end:20px;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);z-index:50}
.wa-float:hover{color:#fff;transform:scale(1.05)}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--radius);z-index:60;transition:transform .3s;font-size:.9rem}
.toast.show{transform:translate(-50%,0)}
.toast a{color:#d9b97c;margin-inline-start:10px;text-decoration:underline}

/* responsive */
@media (max-width:1060px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .search input{width:120px}
  .main-nav{gap:14px}
}
@media (max-width:900px){
  .menu-toggle{display:inline-flex}
  .head-row{gap:10px}
  .brand{flex:1;align-items:center}
  .main-nav{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(300px,82vw);background:var(--paper);flex-direction:column;gap:0;padding:80px 24px 24px;transform:translateX(-105%);transition:transform .3s;z-index:45;box-shadow:var(--shadow)}
  .rtl .main-nav{transform:translateX(105%)}
  .nav-open .main-nav{transform:none}
  .main-nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-mobile-only{display:block}
  .nav-open .nav-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:44}
  .search{display:none}
  .hero-grid,.pdp,.story,.contact-grid,.cart-grid,.checkout-grid{grid-template-columns:1fr}
  .hero{padding-top:32px}
  .hero-collage{margin:0 auto;max-width:440px}
  .summary{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .trust-row{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .wrap{padding:0 16px}
  .section{padding:40px 16px}
  .grid,.cat-grid{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .cat-grid .cat-tile{aspect-ratio:4/5}
  .cat-tile span{font-size:1.15rem;padding:30px 12px 12px}
  .hide-sm{display:none}
  .form-grid{grid-template-columns:1fr}
  .line{grid-template-columns:64px 1fr auto;grid-template-areas:"img info total" "img qty rm"}
  .line-img{grid-area:img}.line-img img{width:64px;height:80px}
  .line-info{grid-area:info}.line-total{grid-area:total}.small-qty{grid-area:qty;justify-self:start}.line .link-btn{grid-area:rm;justify-self:end}
  .buy-row{flex-direction:column}
  .qty{align-self:flex-start;height:44px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;gap:8px}
  .brand-mark{font-size:1.4rem;letter-spacing:.24em}
  .brand-sub{display:none}
  .steps{font-size:.7rem}
}