/* ============================================================
   ACFURNITURE — Furniture Store Design System
   Warm. Crafted. Home.
   Colors: Cream · Orange · Espresso · Warm Neutrals
   (Light, warm theme — master orange accent. A distinct
    identity from the dark fashion design.)
   ============================================================ */

:root {
  /* Semantic surfaces */
  --bg:         #FBF6EF;   /* page background — warm off-white */
  --surface:    #FFFFFF;   /* cards / elevated panels */
  --surface-2:  #F4ECE1;   /* subtle warm panel */

  /* Legacy token names kept (so all existing rules keep working),
     remapped to a LIGHT, warm furniture palette. */
  --black:      #2A2018;   /* deep espresso — dark text & text-on-accent */
  --black-2:    #F4ECE1;   /* warm light panel (elevated surfaces) */
  --black-3:    #EFE4D5;   /* warm light hover/active surface */

  --camel:      #FF8C00;   /* PRIMARY — master orange */
  --camel-dark: #F57C00;   /* darker orange (hover) */
  --camel-soft: rgba(255,140,0,.12);

  --cream:      #FFF4E6;   /* warm cream highlight */
  --cream-2:    #FFFAF3;
  --taupe:      #B79B83;
  --taupe-soft: #EADFD2;
  --white:      #FFFFFF;

  --ink:        #2A2018;   /* main text — dark espresso */
  --ink-soft:   #6E5D4E;   /* secondary text */
  --ink-faint:  #A0907E;   /* faint text */

  --sale:       #D7392B;
  --success:    #2E8B57;
  --line:       rgba(60,40,20,.12);
  --line-light: rgba(60,40,20,.07);
  --sh-sm: 0 4px 16px rgba(120,80,30,.08);
  --sh:    0 12px 34px rgba(120,80,30,.12);
  --sh-lg: 0 28px 64px rgba(120,80,30,.18);
  --sh-camel: 0 12px 30px rgba(255,140,0,.26);
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --container: 1320px;
  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-ar:   'Tajawal', 'Segoe UI', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { font-family: var(--font-ar); background: var(--bg); color: var(--ink); line-height: 1.7; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 32px; border-radius: var(--r-pill); font-weight: 700; font-size: 14.5px; letter-spacing: .3px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s; white-space: nowrap; }
.btn-primary { background: var(--camel); color: var(--black); box-shadow: var(--sh-camel); }
.btn-primary:hover { background: var(--camel-dark); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(194,164,131,.36); color: var(--black); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid rgba(60,40,20,.22); }
.btn-outline:hover { border-color: var(--camel); color: var(--camel); transform: translateY(-3px); }
.btn-sm { padding: 10px 22px; font-size: 13.5px; }
.btn-lg { padding: 17px 42px; font-size: 16px; }

/* Section headers */
.sec { padding: 90px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 46px; flex-wrap: wrap; }
.sec-head.center { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--camel); margin-bottom: 12px; }
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--camel); }
.sec-title { font-size: clamp(26px, 3.4vw, 42px); font-weight: 900; letter-spacing: -1px; line-height: 1.12; color: var(--ink); }
.sec-sub { color: var(--ink-soft); font-size: 16px; max-width: 520px; margin-top: 10px; }
.link-more { display: inline-flex; align-items: center; gap: 8px; color: var(--camel); font-weight: 700; font-size: 14px; transition: gap .3s; }
.link-more:hover { gap: 14px; }

/* Topbar */
.topbar { background: var(--camel); color: var(--black); font-size: 13px; font-weight: 600; text-align: center; padding: 10px 24px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.topbar i { font-size: 12px; }

/* Header */
.header { position: sticky; top: 0; z-index: 200; background: rgba(251,246,239,.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.header.scrolled { box-shadow: 0 4px 30px rgba(120,80,30,.12); }
.header-main { display: flex; align-items: center; gap: 28px; height: 80px; }
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand-logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--camel), var(--camel-dark)); display: grid; place-items: center; font-size: 22px; font-weight: 900; color: var(--black); letter-spacing: -1px; font-style: italic; box-shadow: var(--sh-camel); }
.brand-text b { font-size: 20px; font-weight: 900; letter-spacing: 3px; color: var(--ink); }
.brand-text span { display: block; font-size: 10px; letter-spacing: 2.5px; color: var(--camel); text-transform: uppercase; margin-top: 1px; }
.search { flex: 1; max-width: 520px; margin-inline: auto; display: flex; align-items: center; gap: 10px; background: var(--black-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 8px 0 20px; height: 48px; transition: border-color .3s, box-shadow .3s; }
.search:focus-within { border-color: var(--camel); box-shadow: 0 0 0 3px var(--camel-soft); }
.search i { color: var(--ink-faint); font-size: 15px; }
.search input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: 14.5px; color: var(--ink); }
.search input::placeholder { color: var(--ink-faint); }
.search button { height: 36px; padding: 0 18px; border-radius: var(--r-pill); background: var(--camel); color: var(--black); font-weight: 700; font-size: 13.5px; transition: background .25s, transform .25s; }
.search button:hover { background: var(--camel-dark); transform: scale(1.04); }
.header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.iconbtn { position: relative; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--ink); font-size: 18px; transition: background .25s, color .25s, transform .25s; }
.iconbtn:hover { background: var(--black-3); color: var(--camel); transform: translateY(-2px); }
.iconbtn .count { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); background: var(--camel); color: var(--black); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.menu-toggle { display: none; font-size: 22px; width: 44px; height: 44px; border-radius: 13px; color: var(--ink); }
.menu-toggle:hover { background: var(--black-3); }
.main-nav { border-bottom: 1px solid var(--line); background: var(--black-2); }
.main-nav .container { display: flex; align-items: center; gap: 4px; height: 52px; overflow-x: auto; scrollbar-width: none; }
.main-nav .container::-webkit-scrollbar { display: none; }
.nav-link { padding: 10px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s; position: relative; }
.nav-link:hover { background: var(--black-3); color: var(--ink); }
.nav-link.hot { color: var(--camel); }
.nav-link.all { color: var(--ink-soft); }
.nav-link.active { background: var(--black-3); color: var(--camel) !important; box-shadow: inset 0 -2px 0 var(--camel); }
.nav-link.hot.active { color: var(--camel) !important; }

/* Hero */
.hero { padding: 0; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3px; min-height: 620px; }
.hero-main { position: relative; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; min-height: 620px; }
.hero-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.hero-main:hover img { transform: scale(1.04); }
.hero-main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(22,20,18,.92) 0%, rgba(22,20,18,.3) 50%, transparent 80%); }
.hero-copy { padding: 52px; color: var(--ink); max-width: 520px; }
.hero-copy .badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: var(--r-pill); background: var(--camel-soft); border: 1px solid rgba(194,164,131,.3); color: var(--camel); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 22px; backdrop-filter: blur(8px); }
.hero-copy h1 { font-size: clamp(36px, 5vw, 62px); font-weight: 900; line-height: 1.05; letter-spacing: -2px; margin-bottom: 18px; }
.hero-copy h1 .hl { color: var(--camel); }
.hero-copy p { font-size: 16.5px; color: var(--ink-soft); margin-bottom: 32px; max-width: 420px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }
.hero-card { position: relative; overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; cursor: pointer; }
.hero-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease); }
.hero-card:hover img { transform: scale(1.08); }
.hero-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(22,20,18,.8), transparent 60%); }
.hero-card-body { position: relative; z-index: 2; padding: 22px; color: var(--ink); }
.hero-card-body .tag { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--camel); }
.hero-card-body h3 { font-size: 20px; font-weight: 800; margin: 4px 0 10px; }
.hero-card-body .price { font-size: 15px; color: var(--camel); font-weight: 700; }

/* Brands strip */
.brands-strip { background: var(--black-2); border-block: 1px solid var(--line); padding: 32px 0; }
.brands-row { display: flex; align-items: flex-start; gap: 24px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.brands-row::-webkit-scrollbar { display: none; }
.brand-chip { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; text-decoration: none; color: inherit; width: 96px; }
.brand-chip .logo-wrap { width: 90px; height: 90px; border-radius: 50%; background: var(--black-3); border: 1.5px solid var(--line); display: grid; place-items: center; font-weight: 900; font-size: 13px; letter-spacing: 1px; color: var(--ink); overflow: hidden; transition: border-color .3s, box-shadow .3s, transform .3s; flex-shrink: 0; }
.brand-chip .logo-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.brand-chip:hover .logo-wrap { border-color: var(--camel); box-shadow: 0 0 0 3px var(--camel-soft); transform: translateY(-4px); }
.brand-chip span { font-size: 12px; font-weight: 600; color: var(--ink-soft); text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* Product cards */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prod { background: var(--black-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.prod:hover { transform: translateY(-8px); box-shadow: var(--sh); border-color: rgba(194,164,131,.3); }
.prod-media { position: relative; padding-top: 133.33%; /* 3:4 */ overflow: hidden; background: var(--black-3); }
.prod-media img { position:absolute; inset:0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.prod:hover .prod-media img { transform: scale(1.07); }
.prod-tags { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.ptag { font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: var(--r-pill); letter-spacing: .5px; }
.ptag.new { background: var(--ink); color: var(--white); }
.ptag.sale { background: var(--sale); color: #fff; }
.ptag.hot { background: var(--camel); color: var(--black); }
.ptag.soldout { background: #e53935; color: #fff; }
.ptag.lowstock { background: #ff8f00; color: #fff; }
.prod-soldout .prod-media img { opacity: .55; filter: grayscale(30%); }
.prod-fav { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 12px; background: rgba(22,20,18,.7); backdrop-filter: blur(8px); display: grid; place-items: center; color: var(--ink); font-size: 16px; opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .35s var(--ease), color .25s, background .25s; }
.prod:hover .prod-fav { opacity: 1; transform: none; }
.prod-fav:hover { color: var(--camel); background: rgba(22,20,18,.9); }
.prod-fav.active { opacity: 1; transform: none; color: var(--camel); }
.prod-quick { position: absolute; inset-inline: 12px; bottom: 12px; z-index: 2; opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.prod:hover .prod-quick { opacity: 1; transform: none; }
.prod-quick button { width: 100%; height: 44px; border-radius: var(--r-pill); background: rgba(239,233,223,.95); backdrop-filter: blur(8px); color: var(--black); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .3s; }
.prod-quick button:hover { background: var(--camel); }
.prod-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.prod-brand { font-size: 11px; font-weight: 800; color: var(--camel); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; }
.prod-name { font-size: 15.5px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; color: var(--ink); }
.prod-rating { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; }
.prod-rating .stars { color: var(--camel); letter-spacing: 1px; }
.prod-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.prod-price { display: flex; align-items: baseline; gap: 8px; }
.prod-price .now { font-size: 18px; font-weight: 900; color: var(--ink); }
.prod-price .cur { font-size: 12px; color: var(--ink-soft); }
.prod-price .was { font-size: 13px; color: var(--ink-faint); text-decoration: line-through; }
.prod-add { width: 42px; height: 42px; border-radius: 12px; background: var(--camel-soft); color: var(--camel); display: grid; place-items: center; font-size: 16px; transition: background .3s, color .3s, transform .3s; }
.prod-add:hover { background: var(--camel); color: var(--black); transform: scale(1.08); }

/* Category cards */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cat-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/4; display: flex; align-items: flex-end; cursor: pointer; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.cat-card:hover img { transform: scale(1.08); }
.cat-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(22,20,18,.85) 0%, rgba(22,20,18,.1) 60%, transparent); }
.cat-body { position: relative; z-index: 2; padding: 20px; width: 100%; }
.cat-body span { font-size: 11px; font-weight: 700; color: var(--camel); letter-spacing: 1px; text-transform: uppercase; }
.cat-body h3 { font-size: 18px; font-weight: 800; margin: 4px 0 2px; }
.cat-body p { font-size: 12.5px; color: var(--ink-soft); }

/* Trust bar */
.trust { background: var(--black-2); border-block: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { display: flex; align-items: center; gap: 16px; padding: 28px 24px; position: relative; }
.trust-item:not(:last-child)::after { content: ""; position: absolute; inset-inline-end: 0; top: 20px; bottom: 20px; width: 1px; background: var(--line); }
.trust-ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 13px; background: var(--camel-soft); color: var(--camel); display: grid; place-items: center; font-size: 20px; }
.trust-item b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.trust-item span { font-size: 13px; color: var(--ink-soft); }

/* Newsletter */
.news-wrap { position: relative; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, var(--black-3), var(--black-2)); border: 1px solid var(--line); padding: 64px; text-align: center; }
.news-wrap::before { content: ""; position: absolute; top: -40%; inset-inline-end: -10%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(194,164,131,.12), transparent 60%); z-index: 0; }
.news-wrap > * { position: relative; z-index: 2; }
.news-wrap h2 { font-size: clamp(24px, 3.2vw, 38px); font-weight: 900; margin-bottom: 12px; letter-spacing: -1px; }
.news-wrap p { color: var(--ink-soft); font-size: 16px; max-width: 500px; margin: 0 auto 28px; }
.news-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; background: var(--black-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px; }
.news-form input { flex: 1; border: none; outline: none; background: none; padding: 0 18px; font-family: inherit; font-size: 14.5px; color: var(--ink); }
.news-form input::placeholder { color: var(--ink-faint); }
.news-form button { padding: 13px 28px; border-radius: var(--r-pill); background: var(--camel); color: var(--black); font-weight: 700; font-size: 14px; transition: background .3s, transform .3s; }
.news-form button:hover { background: var(--camel-dark); transform: scale(1.04); }

/* Footer */
.footer { background: var(--black-2); border-top: 1px solid var(--line); padding: 70px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 52px; border-bottom: 1px solid var(--line); }
.footer-about p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.85; max-width: 300px; margin: 18px 0 22px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 40px; height: 40px; border-radius: 11px; background: var(--black-3); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-soft); font-size: 15px; transition: background .3s, color .3s, transform .3s, border-color .3s; }
.footer-social a:hover { background: var(--camel); color: var(--black); border-color: var(--camel); transform: translateY(-3px); }
.footer h4 { color: var(--ink); font-size: 13.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { font-size: 14px; color: var(--ink-soft); transition: color .25s, padding .25s; }
.footer-links a:hover { color: var(--camel); padding-inline-start: 5px; }
.footer-contact li { display: flex; gap: 11px; margin-bottom: 14px; font-size: 14px; color: var(--ink-soft); align-items: flex-start; }
.footer-contact i { color: var(--camel); font-size: 15px; margin-top: 3px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 13px; color: var(--ink-faint); flex-wrap: wrap; }
.footer-pay { display: flex; gap: 12px; font-size: 26px; color: var(--ink-faint); }

/* FABs */
.fab-wa { position: fixed; bottom: 28px; inset-inline-end: 28px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; font-size: 26px; box-shadow: 0 10px 28px rgba(37,211,102,.4); transition: transform .3s; }
.fab-wa:hover { transform: scale(1.1); }
.fab-top { position: fixed; bottom: 94px; inset-inline-end: 28px; z-index: 90; width: 46px; height: 46px; border-radius: 13px; background: var(--black-3); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; font-size: 16px; box-shadow: var(--sh-sm); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, visibility .3s, transform .3s, background .3s, color .3s; }
.fab-top.show { opacity: 1; visibility: visible; transform: none; }
.fab-top:hover { background: var(--camel); color: var(--black); border-color: var(--camel); }

/* Toast */
.toast-wrap { position: fixed; bottom: 28px; inset-inline-start: 28px; z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--black-2); border: 1px solid var(--line); border-inline-start: 3px solid var(--camel); border-radius: var(--r); padding: 14px 18px; box-shadow: var(--sh); font-size: 14px; font-weight: 600; animation: toastIn .4s var(--ease-out); }
.toast i { color: var(--camel); font-size: 17px; }
@keyframes toastIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* Pagehead */
.pagehead { background: var(--black-2); border-bottom: 1px solid var(--line); padding: 34px 0 36px; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-faint); margin-bottom: 12px; }
.crumb a { color: var(--ink-soft); transition: color .25s; }
.crumb a:hover { color: var(--camel); }
.crumb i { font-size: 11px; }
.pagehead h1 { font-size: clamp(24px, 3.2vw, 36px); font-weight: 900; letter-spacing: -1px; color: var(--ink); }
.pagehead p { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }

/* Responsive */
@media (max-width: 1100px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .sec { padding: 64px 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .hero-main { min-height: 480px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .search { max-width: none; }
  .menu-toggle { display: grid; }
}
@media (max-width: 760px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .header-main { height: 68px; gap: 14px; }
  .search { display: none; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sec-head.center { align-items: center; }
}
@media (max-width: 520px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item:not(:last-child)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .news-form { flex-direction: column; background: none; border: none; padding: 0; gap: 12px; }
  .news-form input { background: var(--black-3); border: 1px solid var(--line); padding: 14px 20px; border-radius: var(--r-pill); }
  .hero-copy { padding: 32px 24px; }
  .container { padding-inline: 16px; }
}

/* ── Preloader ── */
.preloader { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: grid; place-items: center; transition: opacity .5s, visibility .5s; }
.preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-logo { font-size: 32px; font-weight: 900; letter-spacing: 4px; color: var(--camel); }
.preloader-bar { position: absolute; bottom: 0; inset-inline-start: 0; height: 3px; background: var(--camel); width: 0; animation: preloaderBar 1.2s var(--ease-out) forwards; }
@keyframes preloaderBar { to { width: 100%; } }

/* ── User dropdown ── */
.user-menu { position: relative; }
.user-dropdown {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 200px; background: var(--black-2);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, visibility .2s, transform .2s;
  z-index: 50;
}
.user-menu:hover .user-dropdown { opacity: 1; visibility: visible; transform: none; }
.user-dropdown a, .user-dropdown button {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-soft);
  transition: background .2s, color .2s;
  text-decoration: none; width: 100%; text-align: start; background: none; cursor: pointer; font-family: var(--font-ar);
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--black-3); color: var(--ink); }
.user-dropdown .divider { height: 1px; background: var(--line); margin: 4px 6px; }

/* ── Currency dropdown ── */
.currency-wrap { position: relative; }
.currency-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-pill);
  background: var(--black-3); border: 1px solid var(--line);
  color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font-ar);
  transition: border-color .25s;
}
.currency-btn:hover { border-color: var(--camel); }
.currency-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 200px; background: var(--black-2);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, visibility .2s, transform .2s;
  z-index: 50;
}
.currency-menu.show { opacity: 1; visibility: visible; transform: none; }
.currency-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-soft);
  width: 100%; background: none; cursor: pointer; font-family: var(--font-ar); text-align: start;
  transition: background .2s, color .2s;
}
.currency-option:hover { background: var(--black-3); color: var(--ink); }
.currency-option.active { color: var(--camel); }

/* ── Mobile menu ── */
.mobile-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 299; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.mobile-drawer {
  position: fixed; top: 0; inset-inline-start: -100%;
  width: 280px; height: 100vh; background: var(--black-2);
  z-index: 300; transition: inset-inline-start .35s var(--ease-out);
  overflow-y: auto; display: flex; flex-direction: column;
}
.mobile-menu.open .mobile-backdrop { opacity: 1; visibility: visible; }
.mobile-menu.open .mobile-drawer { inset-inline-start: 0; }
.mobile-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 0; margin-bottom: 16px;
}
.mobile-close { background: none; border: none; color: var(--ink); font-size: 20px; cursor: pointer; }
.mobile-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; color: var(--ink-soft);
  font-size: 15px; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--line-light);
  transition: color .2s, background .2s;
}
.mobile-nav a:hover { color: var(--camel); background: var(--camel-soft); }

/* ── Promo grid ── */
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.promo-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: 280px; display: flex; align-items: center; isolation: isolate;
}
.promo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.promo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(22,20,18,.85),rgba(22,20,18,.2)); }
[dir=ltr] .promo-card::after { background: linear-gradient(270deg,rgba(22,20,18,.85),rgba(22,20,18,.2)); }
.promo-body { padding: 46px; position: relative; z-index: 2; }
.promo-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--camel); text-transform: uppercase; display: block; margin-bottom: 10px; }
.promo-body h3 { font-size: clamp(22px,2.6vw,30px); font-weight: 900; line-height: 1.15; margin-bottom: 20px; color: var(--ink); }

@media (max-width: 760px) {
  .promo-grid { grid-template-columns: 1fr; }
  .menu-toggle { display: grid !important; }
  .main-nav .container { display: none !important; }
}

/* ── Size type styling ── */
.size-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* General: rounded pill chips */
.size-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 36px; padding: 0 12px;
  border: 1.5px solid rgba(194,164,131,.35); border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
  background: transparent; user-select: none;
}
.size-opt:hover { border-color: var(--camel); color: var(--camel); }
.size-opt.active, .size-opt.selected {
  border-color: var(--camel); background: var(--camel); color: #fff;
}
.size-opt.oos { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* Clothing (S / M / L / XL): wider pill */
.size-opts--clothing .size-opt {
  min-width: 52px; height: 38px; border-radius: 20px;
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
}

/* Shoes (38 / 39 / 40...): square chips, larger */
.size-opts--shoes .size-opt {
  min-width: 50px; height: 50px; border-radius: 8px;
  font-size: 15px; font-weight: 700;
}

/* Pants (28 / 30 / 32...): rectangular badge */
.size-opts--pants .size-opt {
  min-width: 56px; height: 36px; border-radius: 4px;
  font-size: 13px; font-weight: 700;
}
.size-opt.sel {
  border-color: var(--camel); background: var(--camel); color: #fff;
}

/* ── Size type tabs (Admin/Supplier product forms) ── */
.size-tabs-wrap { margin-top: 4px; }
.size-tab-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.size-tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 20px;
  border: 1.5px solid rgba(194,164,131,.3);
  background: transparent; color: var(--ink-soft, #888);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.size-tab-btn:hover { border-color: var(--camel, #C2A483); color: var(--camel, #C2A483); }
.size-tab-btn.active {
  border-color: var(--camel, #C2A483);
  background: var(--camel, #C2A483);
  color: #fff;
}