:root{
  --black: #0b0a08;
  --panel: #17140f;
  --panel-2: #1f1a12;
  --gold: #c9a24b;
  --gold-light: #e8cd82;
  --gold-dim: #8a6f30;
  --emerald: #14352a;
  --emerald-light: #2a5c46;
  --ivory: #f6f1e6;
  --ivory-dim: #cfc6b0;
  --line: rgba(201,162,75,0.25);
  --shadow: 0 20px 50px rgba(0,0,0,0.45);
  --glow: 0 0 0 1px rgba(201,162,75,0.35), 0 18px 40px rgba(201,162,75,0.18);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ margin:0; background:var(--black); color:var(--ivory); font-family:'Cairo',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
html.lang-ar body{ direction:rtl; }
h1,h2,h3,.display{ font-family:'Marcellus','Amiri',serif; font-weight:400; letter-spacing:0.02em; }
html.lang-ar h1, html.lang-ar h2, html.lang-ar h3{ font-family:'Amiri','Marcellus',serif; font-weight:700; letter-spacing:0; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; min-width:0; display:block;}
.en{display:inline;} .ar{display:none;}
html.lang-ar .en{display:none;} html.lang-ar .ar{display:inline;}
.en-block{display:block;} .ar-block{display:none;}
html.lang-ar .en-block{display:none;} html.lang-ar .ar-block{display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ---------- header ---------- */
header{ position:sticky; top:0; z-index:50; background:rgba(11,10,8,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; min-height:74px; padding:14px 0; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:46px; width:46px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--gold-dim); }
.brand .name{ font-family:'Marcellus',serif; font-size:19px; letter-spacing:0.12em; color:var(--gold-light); text-transform:uppercase; line-height:1.1; }
.brand .name small{ display:block; font-size:10px; letter-spacing:0.28em; color:var(--ivory-dim); font-family:'Cairo',sans-serif; margin-top:2px; text-transform:none; }
nav.links{ display:flex; gap:30px; font-size:14.5px; }
nav.links a{ color:var(--ivory-dim); position:relative; padding:4px 0; transition:.25s; }
nav.links a:hover, nav.links a.active{ color:var(--gold-light); }
nav.links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:var(--gold); }
.nav-actions{ display:flex; align-items:center; gap:16px; }
.lang-toggle{ display:flex; border:1px solid var(--gold-dim); border-radius:20px; overflow:hidden; font-size:12.5px; }
.lang-toggle button{ background:transparent; border:none; color:var(--ivory-dim); padding:7px 15px; cursor:pointer; font-family:'Cairo',sans-serif; transition:.25s; }
.lang-toggle button.active{ background:var(--gold); color:var(--black); font-weight:700; }

/* ---------- currency selector (SAR / AED / USD) ---------- */
.currency-toggle{ position:relative; }
.currency-toggle-btn{ display:flex; align-items:center; gap:5px; border:1px solid var(--gold-dim); border-radius:20px; background:transparent; color:var(--ivory-dim); padding:7px 12px; font-size:12.5px; font-family:'Cairo',sans-serif; cursor:pointer; transition:.25s; }
.currency-toggle-btn:hover{ border-color:var(--gold); color:var(--gold-light); }
.currency-toggle-btn svg{ width:12px; height:12px; transition:transform .2s; }
.currency-toggle.open .currency-toggle-btn svg{ transform:rotate(180deg); }
.currency-menu{ position:absolute; top:calc(100% + 8px); inset-inline-start:0; min-width:84px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); z-index:60; display:none; flex-direction:column; overflow:hidden; }
.currency-toggle.open .currency-menu{ display:flex; animation:popIn .18s ease both; }
.currency-menu form{ margin:0; }
.currency-menu button{ width:100%; background:none; border:none; color:var(--ivory-dim); font-size:13px; font-family:'Cairo',sans-serif; padding:10px 14px; text-align:start; cursor:pointer; transition:.2s; }
.currency-menu button:hover{ background:rgba(201,162,75,0.1); color:var(--gold-light); }
.currency-menu button.active{ color:var(--gold-light); font-weight:700; }
.icon-btn{ position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.25s; }
.icon-btn:hover{ border-color:var(--gold); transform:translateY(-2px); }
.icon-btn svg{ width:17px; height:17px; stroke:var(--ivory-dim); }
.icon-btn:hover svg{ stroke:var(--gold-light); }
.cart-count{ position:absolute; top:-6px; right:-6px; background:var(--gold); color:var(--black); font-size:10px; font-weight:700; border-radius:50%; min-width:17px; height:17px; display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* ---------- flash messages ---------- */
.flash-stack{ padding-top:16px; display:grid; gap:10px; }
.flash{ padding:12px 16px; border-radius:4px; font-size:13.5px; border:1px solid var(--line); animation:slideDown .35s ease; }
.flash-success{ background:rgba(42,92,70,0.25); color:var(--ivory); }
.flash-error{ background:rgba(180,60,60,0.18); color:#f3c9c9; border-color:rgba(200,90,90,0.4); }
.flash-info{ background:rgba(201,162,75,0.1); }
@keyframes slideDown{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:2px; font-size:14px; cursor:pointer; border:1px solid transparent; transition:.3s cubic-bezier(.2,.8,.2,1); font-weight:600; background:transparent; position:relative; overflow:hidden; }
button{ font-family:'Cairo',sans-serif; }
.btn-gold{ background:var(--gold); color:var(--black); }
.btn-gold:hover{ background:var(--gold-light); box-shadow:var(--glow); transform:translateY(-2px); }
.btn-gold:active{ transform:translateY(0) scale(.98); }
.btn-ghost{ border-color:var(--gold-dim); color:var(--ivory); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-light); transform:translateY(-2px); }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:90px 0 70px; background:radial-gradient(ellipse at 20% 0%, rgba(201,162,75,0.12), transparent 55%), radial-gradient(ellipse at 85% 30%, rgba(42,92,70,0.2), transparent 55%), var(--black); border-bottom:1px solid var(--line); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><g fill="none" stroke="%23c9a24b" stroke-opacity="0.06" stroke-width="1"><circle cx="110" cy="110" r="90"/><circle cx="110" cy="110" r="60"/><path d="M110 20 L134 86 L200 110 L134 134 L110 200 L86 134 L20 110 L86 86 Z"/></g></svg>'); background-size:220px 220px; opacity:.7; animation:driftBg 40s linear infinite; }
@keyframes driftBg{ from{background-position:0 0;} to{background-position:220px 220px;} }
.hero-inner{ position:relative; text-align:center; max-width:760px; margin:0 auto; }
.eyebrow{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--gold-light); font-size:12.5px; letter-spacing:0.3em; text-transform:uppercase; margin-bottom:20px; animation:fadeUp .6s ease both; }
.eyebrow .line{ width:34px; height:1px; background:var(--gold-dim); }
.hero h1{ font-size:46px; line-height:1.15; margin:0 0 20px; animation:fadeUp .7s .05s ease both; }
.hero p.lead{ color:var(--ivory-dim); font-size:16px; line-height:1.85; max-width:600px; margin:0 auto 30px; animation:fadeUp .7s .12s ease both; }
.hero .cta-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; animation:fadeUp .7s .2s ease both; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

/* ---------- category strip ---------- */
.cat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:50px 0 70px; }
.cat-card{ position:relative; border:1px solid var(--line); padding:34px 26px; text-align:center; background:linear-gradient(180deg, rgba(201,162,75,0.04), transparent); transition:.35s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
.cat-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(201,162,75,0.16), transparent 60%); opacity:0; transition:.35s; }
.cat-card:hover{ border-color:var(--gold); transform:translateY(-6px); box-shadow:var(--shadow); }
.cat-card:hover::before{ opacity:1; }
.cat-card img.cat-icon{ width:56px; height:56px; margin:0 auto 16px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(201,162,75,0.25)); transition:.4s; }
.cat-card:hover img.cat-icon{ transform:scale(1.12) rotate(-3deg); }
.cat-card h3{ font-size:19px; color:var(--gold-light); margin:0 0 8px; }
.cat-card p{ font-size:12.5px; color:var(--ivory-dim); margin:0; }

/* ---------- section ---------- */
.section{ padding:80px 0; }
.section.alt{ background:var(--panel); }
.sec-head{ text-align:center; max-width:640px; margin:0 auto 50px; }
.sec-head h2{ font-size:34px; margin:0 0 12px; }
.sec-head p{ color:var(--ivory-dim); font-size:15px; line-height:1.8; }

/* ---------- product grid & cards ---------- */
.grid-products{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:26px; min-width:0; }
.grid-products > *{ min-width:0; }
.pcard{ background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; position:relative; opacity:0; transform:translateY(24px); transition:border-color .3s, box-shadow .3s, transform .5s cubic-bezier(.2,.8,.2,1); }
.pcard.in-view{ opacity:1; transform:translateY(0); }
.pcard:hover{ border-color:var(--gold); box-shadow:var(--shadow); transform:translateY(-8px); }
.pcard .badge{ position:absolute; top:14px; inset-inline-start:14px; z-index:2; background:var(--gold); color:var(--black); font-size:10.5px; font-weight:700; letter-spacing:0.05em; padding:5px 11px; text-transform:uppercase; animation:pulseBadge 2.4s ease-in-out infinite; }
@keyframes pulseBadge{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,162,75,0.5);} 50%{ box-shadow:0 0 0 6px rgba(201,162,75,0);} }
.pcard .pimg{ width:100%; min-height:180px; aspect-ratio:1/1; overflow:hidden; background:#0f0d0a; position:relative; }
.pcard .pimg img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
.pcard:hover .pimg img{ transform:scale(1.08); }
.pcard .pimg::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, transparent 40%, rgba(201,162,75,0.12) 50%, transparent 60%); background-size:250% 250%; background-position:120% 120%; opacity:0; transition:opacity .4s; pointer-events:none; }
.pcard:hover .pimg::after{ opacity:1; animation:shine 1.1s ease forwards; }
@keyframes shine{ from{background-position:120% 120%;} to{background-position:-20% -20%;} }
.pcard .pbody{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.pcard .cat-tag{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:8px; }
.pcard h3{ font-size:17px; margin:0 0 8px; line-height:1.4; font-family:'Cairo',sans-serif; font-weight:600; }
.pcard p.desc{ font-size:13px; color:var(--ivory-dim); line-height:1.7; margin:0 0 16px; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pcard .rating{ font-size:12px; color:var(--gold-light); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.pcard .pfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.price{ font-size:17px; color:var(--gold-light); font-weight:700; }
.price .was{ font-size:12px; color:var(--ivory-dim); text-decoration:line-through; margin-inline-start:6px; font-weight:400; }
.buy-btn{ border:1px solid var(--gold-dim); color:var(--gold-light); font-size:12px; padding:9px 16px; cursor:pointer; background:transparent; transition:.25s; font-weight:600; }
.buy-btn:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); transform:translateY(-2px); }
.buy-btn.added{ background:var(--emerald-light); border-color:var(--emerald-light); color:var(--ivory); }
.buy-btn.error{ background:#8a2f2f; border-color:#8a2f2f; color:var(--ivory); }

/* ---------- product detail ---------- */
.product-detail{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; padding:60px 0; }
/* NOTE: .product-gallery .thumbs is legacy/dead — the live product page
   markup uses .thumb-strip/.thumb-track (styled in product.html's inline
   <style>), not .thumbs. .main-img is still shared with product.html,
   but its object-fit is intentionally left to product.html's own
   `.main-img img{ object-fit:contain }` rule — this selector used to
   also set object-fit:cover here with a 3-class specificity that won by
   the cascade regardless of load order, silently center-CROPPING every
   product photo whose aspect ratio wasn't square (reported as "the
   image is cut off/hidden"). Removed here so contain wins and the full
   photo is always visible, letterboxed inside the square frame instead
   of cropped. */
.product-gallery .main-img{ border:1px solid var(--line); aspect-ratio:1/1; overflow:hidden; background:#0f0d0a; }
.product-gallery .thumbs{ display:flex; gap:10px; margin-top:12px; }
.product-gallery .thumbs img{ width:64px; height:64px; object-fit:cover; border:1px solid var(--line); cursor:pointer; transition:.25s; }
.product-gallery .thumbs img:hover, .product-gallery .thumbs img.active{ border-color:var(--gold); }
.product-info h1{ font-size:32px; margin:0 0 12px; }
.product-info .price-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:18px; }
.product-info .price-row .price{ font-size:26px; }
.product-info p.desc{ color:var(--ivory-dim); line-height:1.9; margin-bottom:24px; }
.qty-row{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line); }
.qty-stepper button{ width:34px; height:38px; background:transparent; border:none; color:var(--gold-light); font-size:16px; cursor:pointer; }
.qty-stepper button:hover{ background:var(--panel-2); }
.qty-stepper input{ width:44px; text-align:center; background:transparent; border:none; color:var(--ivory); font-size:14px; -moz-appearance:textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-stepper-sm{ background:var(--panel); }
.qty-stepper-sm button{ width:28px; height:32px; font-size:14px; }
.qty-stepper-sm input{ width:34px; font-size:13px; }
/* ---------- cart / checkout ---------- */
.cart-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:start; padding:60px 0; }
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table thead th{ text-align:start; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dim); font-weight:600; padding-bottom:16px; border-bottom:1px solid var(--line); }
.cart-item td{ padding:20px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.cart-prod{ display:flex; align-items:center; gap:16px; }
.cart-prod img{ width:72px; height:72px; object-fit:cover; border:1px solid var(--line); flex:none; }
.cart-prod-name{ font-size:14.5px; color:var(--ivory); font-weight:600; margin-bottom:4px; }
.cart-prod-cat{ font-size:11.5px; color:var(--ivory-dim); }
.cart-price{ color:var(--gold-light); font-weight:700; font-size:14.5px; }
.cart-price-label{ display:none; }
.remove-link{ font-size:12px; color:var(--ivory-dim); cursor:pointer; border-bottom:1px dotted var(--ivory-dim); background:none; border-top:none; border-left:none; border-right:none; padding:0; }
.remove-link:hover{ color:#e88; border-color:#e88; }
.summary-card{ background:var(--panel); border:1px solid var(--line); padding:28px 24px; position:sticky; top:100px; }
.summary-card h3{ font-size:18px; margin:0 0 20px; }
.summary-row{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--ivory-dim); padding:10px 0; border-bottom:1px solid var(--line); }
.summary-row span:last-child{ color:var(--ivory); }
.summary-total{ display:flex; justify-content:space-between; padding:18px 0 4px; font-size:17px; font-weight:700; }
.summary-total span:last-child{ color:var(--gold-light); }
.empty-cart{ text-align:center; padding:80px 20px; color:var(--ivory-dim); }
.cart-empty-wrap{ display:flex; justify-content:center; }
.cart-empty-wrap .empty-cart{ width:100%; max-width:520px; }

.checkout-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; padding:60px 0; }
.form-section{ margin-bottom:34px; }
.form-section h3{ font-size:16px; color:var(--gold-light); margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.form-section h3 .num{ width:24px; height:24px; border-radius:50%; border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; font-size:12px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.form-group.full{ grid-column:1 / -1; }
.form-group label{ font-size:12px; color:var(--ivory-dim); }
.form-group input, .form-group select{ background:var(--panel); border:1px solid var(--line); color:var(--ivory); padding:12px 14px; font-size:13.5px; border-radius:2px; outline:none; transition:.25s; }
.form-group input:focus, .form-group select:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,0.12); }
.form-error{ font-size:11.5px; color:#e88; }
.pay-options{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; }
.pay-option{ border:1px solid var(--line); padding:16px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:.25s; }
.pay-option:hover{ border-color:var(--gold-dim); }
.pay-option.selected{ border-color:var(--gold); background:rgba(201,162,75,0.06); }
.pay-option .plabel{ font-size:13.5px; color:var(--ivory); font-weight:600; }
.pay-option .psub{ font-size:11.5px; color:var(--ivory-dim); }
.confirmation{ text-align:center; padding:100px 20px; }
.confirmation .check-anim{ width:90px; height:90px; margin:0 auto 26px; border-radius:50%; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; animation:popIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes popIn{ from{ transform:scale(0.5); opacity:0;} to{ transform:scale(1); opacity:1;} }
.confirmation .check-anim svg{ width:40px; height:40px; stroke:var(--gold-light); }

/* ---------- footer ---------- */
/* The support chatbot widget is position:fixed at bottom:24px (54px fab +
   gap), so when a visitor scrolls all the way down, it sits ON TOP of the
   copyright row instead of below it — the page has no more room to
   scroll past that point. Reserve real space at the bottom of the page
   equal to the widget's height + clearance so the last footer row is
   never hidden behind it, and also account for the phone's own bottom
   browser chrome/gesture bar via env(safe-area-inset-bottom). */
footer{ background:var(--black); padding-top:60px; padding-bottom:calc(90px + env(safe-area-inset-bottom, 0px)); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:44px; border-bottom:1px solid var(--line); }
.foot-brand .brand{ margin-bottom:16px; }
.foot-brand p{ font-size:13px; color:var(--ivory-dim); line-height:1.8; max-width:280px; }
.foot-col h4{ font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-light); margin:0 0 16px; font-weight:700; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot-col a{ font-size:13.5px; color:var(--ivory-dim); transition:.25s; }
.foot-col a:hover{ color:var(--gold-light); }
.foot-social{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.foot-social a{ width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ivory-dim); transition:.25s; }
.foot-social svg{ width:15px; height:15px; stroke:var(--ivory-dim); fill:none; }
/* brand logo icons (Facebook/Instagram/X) are solid-fill glyphs, not
   outline strokes — render via fill:currentColor instead. */
.foot-social svg[fill="currentColor"]{ stroke:none; fill:currentColor; }
.foot-social a:hover{ border-color:var(--gold); color:var(--gold-light); }
.foot-social a:hover svg{ stroke:var(--gold-light); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:12px; color:var(--ivory-dim); flex-wrap:wrap; gap:10px; }
.pay-icons{ display:flex; gap:10px; align-items:center; }
.pay-badge{ display:inline-flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; line-height:0; }
.pay-badge svg{ width:42px; height:28px; display:block; }

@media (max-width:980px){
  nav.links{ display:none; }
  .cat-strip{ grid-template-columns:1fr; }
  .product-detail{ grid-template-columns:1fr; }
  .cart-layout, .checkout-layout{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  /* Tablets lose the nav.links row too (hidden above), so the header is
     effectively the same brand + lang-toggle + cart layout as mobile —
     give it the same taller, breathing-room min-height/padding treatment
     instead of only applying that fix at the narrower phone breakpoint. */
  .nav-row{ min-height:68px; padding:calc(18px + env(safe-area-inset-top, 0px)) 0 16px; }
  /* Same 90%-width containment as phones (previously only applied at
     max-width:760px) — an iPad in portrait is 834px wide, which is above
     that phone breakpoint but still needs the header/nav and page
     content constrained to 90% and centered instead of running edge to
     edge. */
  body{ width:100%; overflow-x:hidden; }
  .wrap{ width:90%; max-width:90%; margin:0 auto; padding:0; }
}
@media (max-width:768px){
  /* Below tablet, the header has to fit: logo+wordmark, a currency
     dropdown, the EN/AR toggle, AND the cart icon, all in one row on
     screens as narrow as ~360px. Shrinking the logo/name alone (as
     before) wasn't enough once the currency selector was added — the
     two pill-shaped buttons (currency + language) at their desktop
     padding/font-size were together wider than the remaining space,
     which is what visually "compressed" the logo and forced the
     wordmark to wrap onto 4-5 lines. Compact BOTH pill buttons here
     (smaller padding, smaller font, smaller dropdown chevron) instead
     of just the brand block. */
  .currency-toggle-btn{ padding:5px 8px; font-size:11px; gap:3px; }
  .currency-toggle-btn svg{ width:9px; height:9px; }
  .lang-toggle{ font-size:11px; }
  .lang-toggle button{ padding:5px 10px; }
  .nav-actions{ gap:8px; }
}
@media (max-width:560px){
  .grid-products{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
  .foot-grid{ grid-template-columns:1fr; }
  /* Smaller logo + tighter header on phones — the 46px logo + long
     "House of Arabs / Curated for Home & Family" text block was
     crowding narrow screens. Height/padding already inherit from the
     980px breakpoint above; phones just need smaller elements to fit
     the narrower width. */
  .nav-row{ min-height:64px; gap:8px; }
  .brand{ gap:8px; min-width:0; flex:1 1 auto; }
  .brand img{ height:32px; width:32px; flex:none; }
  /* Was white-space:nowrap + ellipsis, which silently clipped the
     wordmark to "HOUSE OF A..." on anything narrower than ~400px
     (iPhone SE and similar) since there just isn't 175px+ of text room
     left once the currency/lang/cart controls take their share. Letting
     it wrap onto 2 lines instead guarantees the full name is always
     readable at ANY width — the row simply grows taller (nav-row has no
     fixed height, only min-height) rather than ever cutting text off. */
  .brand .name{ font-size:12.5px; letter-spacing:0.06em; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }
  /* The "Curated for Home & Family" subtitle is the main thing that
     forced the wordmark to wrap across several lines on narrow phones
     — it adds no functional value at this size next to two selector
     pills and a cart icon, so hide it below 560px rather than shrinking
     it into illegibly small text. */
  .brand .name small{ display:none; }
  .nav-actions{ gap:6px; flex:none; }
  .currency-toggle-btn{ padding:4px 7px; font-size:10.5px; }
  .lang-toggle button{ padding:5px 8px; font-size:10.5px; }
  .icon-btn{ width:34px; height:34px; }

  /* Cart table → stacked cards. The 4-column table (Product / Qty /
     Price / Total) has no minimum-width floor for the Product column,
     so on narrow screens the browser squeezes it down to fit the fixed-
     width qty-stepper buttons and price text — the product name wraps
     to one word per line AND the qty stepper ends up rendered on top of
     it. Turning the table into a flex "card" per row (image+name on
     top, stepper below, price/total as a labeled line each) sidesteps
     the column-squeeze entirely instead of trying to shrink it further. */
  .cart-table thead{ display:none; }
  .cart-table, .cart-table tbody, .cart-table tr{ display:block; width:100%; }
  .cart-item{ display:flex; flex-direction:column; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); }
  .cart-item td{ display:block; padding:0; border-bottom:none; }
  .cart-prod img{ width:60px; height:60px; }
  .cart-price{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; }
  .cart-price-label{ display:inline; color:var(--ivory-dim); font-weight:400; font-size:12.5px; }
}
@media (max-width:400px){
  /* Very narrow phones (iPhone SE/mini, 375px and below): shrink the
     remaining pieces further so "House of Arabs" fits on one line
     instead of wrapping — wrapping (above) is the guaranteed fallback,
     this just makes the common case look tidier. */
  .brand img{ height:28px; width:28px; }
  .brand .name{ font-size:11px; letter-spacing:0.02em; }
  .currency-toggle-btn{ padding:3px 6px; font-size:10px; gap:2px; }
  .currency-toggle-btn svg{ width:8px; height:8px; }
  .lang-toggle button{ padding:4px 7px; font-size:10px; }
  .icon-btn{ width:30px; height:30px; }
  .cart-count{ min-width:15px; height:15px; font-size:9px; }
}

/* ---------- scroll-reveal sections ---------- */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.cat-strip .cat-card, .review-grid .review-card{ opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.reveal.in-view .cat-strip .cat-card, .reveal.in-view .review-grid .review-card{ opacity:1; transform:translateY(0); }

/* ---------- ad carousel (homepage) ---------- */
.ad-carousel-wrap{ padding:36px 0 0; background:var(--black); }
.ad-carousel{ position:relative; border:1px solid var(--line); overflow:hidden; background:var(--panel); }
/* Force the track to always lay out slides left-to-right, regardless of
   page language. The slider's index math (translateX(-index*100%)) assumes
   LTR order; without this, html.lang-ar's direction:rtl cascades onto this
   flex container and visually reverses slide order, which makes prev/next
   feel inverted and desyncs the dots from what's actually showing. */
.ad-track{ display:flex; direction:ltr; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
/* Each slide can still flow RTL internally for correct Arabic text
   alignment and mirrored image/info layout — this only affects content
   inside the slide, not its position among siblings in .ad-track. */
html.lang-ar .ad-slide{ direction:rtl; }
.ad-slide{ position:relative; min-width:100%; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; padding:34px 48px; direction:ltr; }
.ad-slide img{ width:100%; max-height:280px; object-fit:contain; justify-self:center; filter:drop-shadow(0 12px 30px rgba(0,0,0,0.5)); animation:floatSlide 4s ease-in-out infinite; }
@keyframes floatSlide{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.ad-slide-info{ text-align:start; }
.ad-badge{ display:inline-block; background:var(--gold); color:var(--black); font-size:10.5px; font-weight:700; letter-spacing:0.06em; padding:5px 12px; text-transform:uppercase; margin-bottom:14px; }
.ad-slide-info h3{ font-size:24px; margin:0 0 12px; color:var(--ivory); }
.ad-slide-info .price{ font-size:20px; }
/* direction:ltr + unicode-bidi:bidi-override are required here: the ‹ and ›
   characters are Unicode "mirrored" glyphs, so browsers auto-swap which
   arrow they render when the surrounding context is RTL (same mechanism
   that flips parentheses in Arabic text). Without this override, the
   "prev" button silently renders as › and "next" renders as ‹ whenever
   html.lang-ar is active, even though left:/right: positioning is correct. */
.ad-nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid var(--gold-dim); background:rgba(11,10,8,0.7); color:var(--gold-light); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.25s; z-index:3; direction:ltr; unicode-bidi:bidi-override; }
.ad-nav:hover{ border-color:var(--gold); background:var(--panel-2); }
.ad-prev{ left:14px; } .ad-next{ right:14px; }
.ad-dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:3; direction:ltr; }
.ad-dot{ width:8px; height:8px; border-radius:50%; border:1px solid var(--gold-dim); background:transparent; cursor:pointer; padding:0; transition:.25s; }
.ad-dot.active{ background:var(--gold); border-color:var(--gold); transform:scale(1.2); }
@media (max-width:760px){
  .ad-slide{ grid-template-columns:1fr; padding:26px 24px 60px; text-align:center; }
  .ad-slide-info{ text-align:center; }
  .ad-slide img{ max-height:200px; }
}

/* ---------- about band (why us) ---------- */
.about-band{ background:linear-gradient(135deg, var(--emerald), var(--emerald-light)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about-inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:70px 0; }
.about-media-rotator{ position:relative; width:100%; max-width:480px; aspect-ratio:1/1; border:1px solid var(--line); background:rgba(0,0,0,0.15); overflow:hidden; }
.about-media-rotator img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; }
.about-media-rotator img.active{ opacity:1; }
.about-inner h2{ font-size:30px; margin:0 0 18px; }
.about-inner p{ color:rgba(246,241,230,0.85); font-size:15px; line-height:1.9; margin:0 0 24px; }
.feat-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.feat-list li{ display:flex; gap:12px; align-items:center; font-size:14px; }
.feat-list .rosette{ width:16px; height:16px; flex:none; }
.feat-list .rosette path{ fill:var(--gold-light); }

/* ---------- reviews ---------- */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review-card{ background:var(--panel); border:1px solid var(--line); padding:26px 24px; transition:.3s; }
.review-card:hover{ border-color:var(--gold); transform:translateY(-4px); }
.review-card .stars{ color:var(--gold); font-size:14px; letter-spacing:3px; margin-bottom:12px; }
.review-card p{ font-size:13.5px; color:var(--ivory-dim); line-height:1.85; margin:0 0 16px; }
.review-card .who{ display:flex; align-items:center; gap:12px; }
.review-card .avatar{ width:36px; height:36px; border-radius:50%; background:var(--panel-2); border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; font-family:'Marcellus',serif; color:var(--gold-light); font-size:14px; flex:none; }
.review-card .who-meta strong{ display:block; font-size:13px; color:var(--ivory); font-weight:600; }
.review-card .who-meta span{ display:block; font-size:11px; color:var(--ivory-dim); }

@media (max-width:980px){
  .about-inner{ grid-template-columns:1fr; padding:50px 0; }
  .review-grid{ grid-template-columns:1fr; }
}


/* ---------- form select (product options) ---------- */
.form-select{ width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ivory); padding:11px 14px; font-size:13.5px; border-radius:2px; outline:none; transition:.25s; }
.form-select:focus{ border-color:var(--gold); }

/* ---------- mobile fixes: product grid, carousel, product detail ---------- */
@media(max-width:760px){
  /* Constrain the page content to 90% width, centered, on mobile — this
     is a safety net against ANY child element (image, carousel slide,
     card) that might be slightly wider than its container and force
     the page to horizontally scroll. A horizontal overflow like that is
     the most common real cause of "blank empty space" reports on
     mobile: the browser lays out a track wider than the viewport, and
     whatever sits off to the right renders as empty space when the user
     hasn't scrolled sideways to see it. Percentage width + centered
     margins keeps everything visually inside the screen regardless of
     viewport size. */
  body{ width:100%; overflow-x:hidden; }
  .wrap{ width:90%; max-width:90%; margin:0 auto; padding:0; }
  .ad-carousel-wrap{ padding:20px 0 0; }
  .ad-carousel{ width:100%; max-width:100%; }
  .ad-slide{ grid-template-columns:1fr !important; padding:20px 16px 50px !important; text-align:center; }
  .ad-slide img{ max-height:160px !important; }
  .ad-slide-info{ text-align:center; }
  .ad-slide-info h3{ font-size:18px; }
  .grid-products{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:14px !important; }
  .pcard{ min-width:0; }
  .pcard .pimg{ min-height:120px; }
  .pcard .pbody{ padding:14px 12px 16px; }
  .pcard h3{ font-size:14px; }
  .pcard p.desc{ font-size:11.5px; -webkit-line-clamp:2; }
  .cat-strip{ grid-template-columns:repeat(2,1fr) !important; gap:12px; }
}
@media(max-width:420px){
  .wrap{ padding:0 12px; }
  .grid-products{ grid-template-columns:minmax(0,1fr) !important; }
  .cat-strip{ grid-template-columns:1fr !important; }
}


/* ---------- floating support chatbot widget ---------- */
.support-widget{ position:fixed; bottom:24px; inset-inline-end:24px; z-index:80; }
.support-fab{ width:54px; height:54px; border-radius:50%; background:var(--gold); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,0.35); transition:.25s; }
.support-fab:hover{ background:var(--gold-light); transform:scale(1.06); }
.support-fab svg{ width:24px; height:24px; stroke:var(--black); }
.support-panel{ position:absolute; bottom:68px; inset-inline-end:0; width:300px; max-width:calc(100vw - 48px); background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); display:none; flex-direction:column; }
.support-panel.open{ display:flex; animation:popIn .25s ease both; }
.support-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700; color:var(--gold-light); }
.support-close{ background:none; border:none; color:var(--ivory-dim); font-size:20px; cursor:pointer; line-height:1; }
.support-body{ padding:16px; }
.support-quicklinks{ display:flex; gap:8px; margin:10px 0 14px; flex-wrap:wrap; }
.support-quicklinks a{ font-size:11.5px; border:1px solid var(--gold-dim); color:var(--gold-light); padding:6px 10px; border-radius:14px; }
.support-quicklinks a:hover{ border-color:var(--gold); background:rgba(201,162,75,0.08); }
.support-status{ font-size:12px; margin:8px 0 0; color:var(--ivory-dim); }
.support-status.success{ color:var(--emerald-light); }
.support-status.error{ color:#e88; }

@media(max-width:560px){
  .support-widget{ bottom:16px; inset-inline-end:16px; }
  .support-fab{ width:48px; height:48px; }
  .support-panel{ width:calc(100vw - 32px); }
}

/* ---------- admin panel (support tickets) ---------- */
.admin-filter{ display:flex; border:1px solid var(--line); border-radius:20px; overflow:hidden; font-size:12.5px; }
.admin-filter a{ padding:7px 14px; color:var(--ivory-dim); transition:.25s; }
.admin-filter a.active{ background:var(--gold); color:var(--black); font-weight:700; }
.admin-filter a:hover:not(.active){ color:var(--gold-light); }
.ticket-list{ display:grid; gap:16px; }
.ticket-card{ border:1px solid var(--line); background:var(--panel); padding:18px 20px; border-inline-start:3px solid var(--gold-dim); }
.ticket-card.status-new{ border-inline-start-color:var(--gold); }
.ticket-card.status-resolved{ border-inline-start-color:var(--emerald-light); opacity:0.75; }
.ticket-head{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--ivory-dim); margin-bottom:10px; }
.ticket-id{ font-weight:700; color:var(--gold-light); }
.ticket-badge{ padding:2px 9px; border-radius:10px; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; }
.badge-new{ background:rgba(201,162,75,0.18); color:var(--gold-light); }
.badge-read{ background:rgba(255,255,255,0.08); color:var(--ivory-dim); }
.badge-resolved{ background:rgba(42,92,70,0.3); color:var(--ivory); }
.ticket-topic{ text-transform:capitalize; }
.ticket-mail-warn{ color:#e8a24b; }
.ticket-body strong{ color:var(--ivory); font-size:14px; }
.ticket-body p{ margin:8px 0 0; color:var(--ivory-dim); font-size:13.5px; line-height:1.7; white-space:pre-wrap; }
.ticket-actions{ display:flex; gap:10px; margin-top:14px; }
.ticket-actions .btn{ padding:9px 16px; font-size:12.5px; }

/* ---------- legal pages (terms / privacy / shipping & returns) ---------- */
.legal-page{ max-width:760px; padding:40px 28px 90px; line-height:1.9; color:var(--ivory-dim); }
.legal-page h3{ color:var(--gold-light); font-size:18px; margin:30px 0 10px; }
.legal-page h3:first-child{ margin-top:0; }
.legal-page p{ margin:0 0 14px; }
.legal-page a{ color:var(--gold-light); text-decoration:underline; }

/* ---------- contact page ---------- */
.contact-layout{ display:grid; grid-template-columns:1fr 1.2fr; gap:40px; padding:20px 28px 90px; align-items:start; }
.contact-channels{ display:grid; gap:16px; }
.contact-card{ display:flex; align-items:center; gap:14px; border:1px solid var(--line); background:var(--panel); padding:18px 20px; transition:.25s; }
.contact-card:hover{ border-color:var(--gold); transform:translateY(-2px); }
.contact-card svg{ width:26px; height:26px; stroke:var(--gold); flex:none; }
.contact-card strong{ display:block; font-size:14.5px; color:var(--ivory); }
.contact-card span{ display:block; font-size:12px; color:var(--ivory-dim); margin-top:2px; }
.contact-form-card{ position:static; }
@media(max-width:760px){
  .contact-layout{ grid-template-columns:1fr; }
}

/* ---------- FAQ (homepage) ---------- */
.faq-list{ max-width:760px; margin:0 auto; display:grid; gap:12px; }
.faq-item{ border:1px solid var(--line); background:var(--panel); }
.faq-q{ width:100%; text-align:start; background:none; border:none; color:var(--ivory); font-size:15px; font-weight:600; padding:18px 20px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:'Cairo',sans-serif; }
.faq-q .plus{ color:var(--gold-light); font-size:20px; transition:.25s; flex:none; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding:0 20px 18px; margin:0; color:var(--ivory-dim); font-size:13.5px; line-height:1.8; }

/* ---------- add-to-cart confirmation popup ---------- */
.cart-added-modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.cart-added-modal.open{ display:flex; }
.cart-added-backdrop{ position:absolute; inset:0; background:rgba(11,10,8,0.72); backdrop-filter:blur(3px); }
.cart-added-box{ position:relative; width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); padding:32px 28px 26px; text-align:center; animation:popIn .22s ease both; }
.cart-added-close{ position:absolute; top:10px; right:10px; background:transparent; border:none; color:var(--ivory-dim); font-size:22px; line-height:1; cursor:pointer; padding:4px 8px; }
.cart-added-close:hover{ color:var(--gold-light); }
.cart-added-check{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%; background:var(--emerald-light); color:var(--ivory); display:flex; align-items:center; justify-content:center; font-size:26px; }
.cart-added-box h3{ margin:0 0 18px; font-size:19px; color:var(--gold-light); }
.cart-added-product{ display:flex; align-items:center; gap:12px; text-align:start; border:1px solid var(--line); border-radius:6px; padding:10px 12px; margin-bottom:16px; }
.cart-added-product img{ width:52px; height:52px; object-fit:cover; border-radius:4px; flex:none; }
.cart-added-name{ font-size:13.5px; color:var(--ivory); margin-bottom:4px; }
.cart-added-qty{ font-size:12px; color:var(--ivory-dim); }
.cart-added-wish{ font-size:13px; color:var(--ivory-dim); margin:0 0 20px; }
.cart-added-actions{ display:flex; flex-direction:column; gap:10px; }
.cart-added-actions .btn{ width:100%; justify-content:center; }
@media (max-width:480px){
  .cart-added-box{ padding:26px 20px 22px; }
}

/* add-to-cart button "already in cart" state — small quantity badge in
   the same style as the navbar cart-count bubble, so it reads as the
   same concept across the site. Scoped to the form + a dedicated
   .in-cart class (added/removed by main.js) rather than to .buy-btn, so
   it doesn't collide with .buy-btn's own color rules on buttons that
   use .btn.btn-gold instead (e.g. the product-page Add to Cart button). */
.add-to-cart-form button.in-cart{ background:var(--emerald-light) !important; border-color:var(--emerald-light) !important; color:var(--ivory) !important; display:inline-flex; align-items:center; gap:8px; }
.add-to-cart-form .in-cart-badge{ background:var(--gold); color:var(--black); font-size:11px; font-weight:700; border-radius:50%; min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; }