/* =========================================================
   URNINA — Luxury Women's Fashion Store
   Design tokens: Luxury Minimalism
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Marcellus&family=Almarai:wght@300;400;700&display=swap');

:root{
  /* ---- Colour: deepened and desaturated for a boutique feel ---- */
  --charcoal:      #17120f;   /* near-black, warm — the anchor */
  --charcoal-2:    #211a16;
  --ivory:         #fdfbf7;   /* page background: cleaner, less yellow */
  --ivory-2:       #f7f2ea;   /* cream, for alternating sections */
  --warm-beige:    #ece2d3;   /* now an accent, not a second background */
  --gold:          #b08d63;
  --gold-light:    #d3b489;
  --gold-deep:     #8a6b45;
  --dust-rose:     #d9c4bd;
  --ink:           #221c18;
  --ink-soft:      #7a6d60;
  --line:          #e6dccc;
  --line-soft:     #efe7da;
  --white:         #ffffff;

  /* ---- Light header ---- */
  --bar-bg:        #e2c8b9;
  --bar-ink:       #6b4a3a;
  --head-bg:       #fbf7f1;
  --head-ink:      #4f3e33;
  --head-accent:   #a87f66;
  --head-logo:     #17120f;

  /* ---- Type ---- */
  --f-logo:    'Marcellus', 'Cormorant Garamond', serif;
  --f-display: 'Cormorant Garamond', serif;
  --f-arabic:  'Almarai', system-ui, sans-serif;
  --f-num:     'Cormorant Garamond', serif;

  /* Type scale (1.25 minor third) */
  --t-xs:   12px;
  --t-sm:   13.5px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   21px;
  --t-xl:   27px;
  --t-2xl:  34px;
  --t-3xl:  clamp(30px, 3.4vw, 44px);
  --t-hero: clamp(54px, 7.4vw, 108px);

  /* Spacing scale — every gap in the site comes from here */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 14px;
  --s-4: 22px;
  --s-5: 34px;
  --s-6: 52px;
  --s-7: 78px;
  --s-8: 112px;

  /* ---- Layout ---- */
  --container: 1320px;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --transition: .35s cubic-bezier(.4,0,.2,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  /* off-screen panels (cart drawer, search, quick order) are positioned
     outside the viewport; without this they widen the page in RTL */
  overflow-x:hidden;
}
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--f-arabic);
  font-weight:300;
  font-size:var(--t-base);
  background:var(--ivory);
  color:var(--ink);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.8;
  letter-spacing:0;
}

/* Latin words and numerals inside Arabic text get the serif treatment —
   this is what makes prices and sizes read as boutique, not spreadsheet. */
.num, .price, .pd-price, .summary-row span, .hero-slider-dots span{
  font-feature-settings:'lnum' 1, 'tnum' 1;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
}

/* ---- Section rhythm ---- */
.section{ padding:var(--s-7) 0; }
.section--tight{ padding:var(--s-6) 0; }

/* On a phone the generous desktop rhythm reads as empty space between
   sections, which breaks the flow of browsing. */
@media (max-width:760px){
  .section{ padding:var(--s-6) 0; }
  .section--tight{ padding:var(--s-5) 0; }
  .section-head{ margin-bottom:var(--s-4); }
  .section-head-row{ margin-bottom:var(--s-4); }
}
.section-head{
  text-align:center;
  margin-bottom:var(--s-6);
}
.section-head h2{
  font-family:var(--f-display);
  font-weight:400;
  font-size:var(--t-3xl);
  letter-spacing:.01em;
  line-height:1.2;
  margin:0 0 var(--s-3);
  color:var(--ink);
}
/* a hairline rule under section titles — the boutique signature */
.section-head h2::after{
  content:'';
  display:block;
  width:44px; height:1px;
  background:var(--gold);
  margin:var(--s-3) auto 0;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .8s var(--ease-soft) .15s;
}
.section-head.visible h2::after,
html:not(.reveal-ready) .section-head h2::after{ transform:scaleX(1); }

.section-head p{
  color:var(--ink-soft);
  font-size:var(--t-sm);
  letter-spacing:.02em;
  margin:0;
}
.section-head-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-4);
  margin-bottom:var(--s-5);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line-soft);
}
.section-head-row h2{
  font-family:var(--f-display);
  font-weight:400;
  font-size:var(--t-2xl);
  letter-spacing:.01em;
  margin:0;
}
.view-all{
  font-size:var(--t-sm);
  letter-spacing:.04em;
  color:var(--gold-deep);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  white-space:nowrap;
  transition:border-color var(--transition), opacity var(--transition);
}
.view-all:hover{ border-color:var(--gold-deep); opacity:.75; }


/* Global SVG defaults — prevent unstyled icons rendering as solid shapes */
svg{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
svg[fill='#fff'], svg[fill='#faf6ef']{ fill:currentColor; stroke:none; }
.wa-float svg, .whatsapp-order svg{ fill:#fff; stroke:none; }
.footer-contact svg, .contact-info-card svg, .value-card svg, .confirm-icon svg,
.icon-btn svg, .wish-btn svg, .empty-state svg{ stroke:currentColor; }


/* ---- One heading scale for the whole site ----
   Section titles, page titles and card titles previously drifted apart;
   these keep them on the same ladder. */
h1{ font-family:var(--f-display); font-weight:400; font-size:var(--t-3xl); letter-spacing:.01em; line-height:1.2; }
h2{ font-family:var(--f-display); font-weight:400; font-size:var(--t-2xl); letter-spacing:.01em; line-height:1.25; }
h3{ font-family:var(--f-display); font-weight:400; font-size:var(--t-xl); letter-spacing:.01em; }
h4{ font-family:var(--f-arabic);  font-weight:700; font-size:var(--t-sm); letter-spacing:.02em; }

/* ---- One button shape ---- */
.btn, .mini-btn, .quick-add, .whatsapp-order{
  border-radius:var(--radius-sm);
}

/* ---- One card shape ---- */
.product-card .thumb,
.identity-banner,
.feature-strip,
.form-card,
.summary-card,
.filters,
.review-card,
.slide-card,
.insight,
.stat{
  border-radius:var(--radius-md);
}


/* ---- Wordmark: Arabic above, Latin beneath ----
   Mirrors the printed logo, where the Arabic leads and the Latin sits
   under it as a quieter second line. */
.logo{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
  gap:3px;
}
.logo .ar{
  font-family:var(--f-display);
  font-size:1em;
  letter-spacing:.02em;
  color:inherit;
}
.logo .en{
  font-family:var(--f-logo);
  font-size:.44em;
  letter-spacing:.32em;
  padding-right:.32em;
  color:var(--gold-deep);
  opacity:.92;
}
.site-header .logo .en{ color:var(--head-accent); }
.site-footer .logo .en,
.hero .logo .en{ color:var(--gold-light); }

/* =========================================================
   Announcement bar
   ========================================================= */
.announce-bar{
  background:var(--bar-bg);
  color:var(--bar-ink);
  text-align:center;
  font-size:13px;
  letter-spacing:.3px;
  padding:9px 16px;
  font-weight:500;
}
.announce-bar span{ opacity:.95; }

/* =========================================================
   Header — light bar
   ========================================================= */
.site-header{
  background:var(--head-bg);
  color:var(--head-ink);
  position:sticky;
  top:0;
  z-index:200;
  border-bottom:1px solid rgba(28,20,16,.07);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
  gap:24px;
}
.logo{
  font-family:var(--f-logo);
  font-size:27px;
  letter-spacing:.22em;
  padding-right:.22em;      /* balance the trailing letterspace */
  color:var(--head-logo);
  font-weight:400;
  flex:0 0 auto;
  transition:color var(--transition);
}
.logo:hover{ color:var(--head-accent); }
.logo span{ color:var(--head-accent); }

.main-nav{
  display:flex;
  gap:var(--s-5);
  flex:1 1 auto;
  justify-content:center;
}
.main-nav a{
  font-size:var(--t-sm);
  font-weight:400;
  letter-spacing:.03em;
  color:var(--head-ink);
  opacity:.82;
  position:relative;
  padding:6px 2px;
  transition:opacity var(--transition), color var(--transition);
}
.main-nav a:hover{ opacity:1; color:var(--head-accent); }
.main-nav a.active{ opacity:1; color:var(--head-accent); }
/* underline grows from the centre instead of just appearing */
.main-nav a::after{
  content:'';
  position:absolute;
  right:0; left:0; bottom:-2px;
  height:1px;
  background:var(--head-accent);
  transform:scaleX(0);
  transition:transform .4s var(--ease-soft);
}
.main-nav a:hover::after{ transform:scaleX(1); }
.main-nav a.active::after{ transform:scaleX(1); }

.header-icons{
  display:flex;
  align-items:center;
  gap:20px;
  flex:0 0 auto;
}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  color:var(--head-ink);
  opacity:.9;
  position:relative;
  transition:opacity var(--transition), transform var(--transition), color var(--transition);
}
.icon-btn:hover{ opacity:1; transform:translateY(-1px); color:var(--head-accent); }
.icon-btn svg{ width:19px; height:19px; stroke:currentColor; fill:none; }
.cart-count, .wish-count{
  position:absolute;
  top:-8px; left:-10px;
  background:var(--head-accent);
  color:var(--head-bg);
  font-size:10px;
  font-weight:800;
  width:16px;height:16px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

.nav-toggle{
  display:none;
  background:none;border:none;color:var(--head-ink);
  width:30px;height:24px;position:relative;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:'';
  position:absolute;right:0;left:0;height:1.5px;background:var(--head-ink);
}
.nav-toggle span{ top:11px; }
.nav-toggle::before{ top:3px; }
.nav-toggle::after{ top:19px; }

.mobile-nav{
  display:none;
  background:var(--head-bg);
  border-top:1px solid rgba(28,20,16,.08);
  padding:10px 0 16px;
}
.mobile-nav.open{ display:block; }
.mobile-nav a{
  display:block;
  color:var(--head-ink);
  padding:12px 32px;
  font-size:15px;
  opacity:.9;
  border-bottom:1px solid rgba(28,20,16,.06);
}

@media (max-width:980px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .header-icons{ gap:16px; }
}



/* ---- Hero eyebrow: the season label above the logotype ---- */
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-arabic);
  font-size:11.5px;
  letter-spacing:.34em;
  color:var(--gold-light);
  margin:0 0 var(--s-4);
  text-transform:uppercase;
}
.hero-eyebrow::before{
  content:'';
  width:38px; height:1px;
  background:var(--gold);
  opacity:.8;
}
@media (max-width:860px){
  .hero-eyebrow{ font-size:10px; letter-spacing:.28em; margin-bottom:var(--s-3); }
  .hero-eyebrow::before{ width:24px; }
}

/* =========================================================
   Categories dropdown in the header
   ========================================================= */
.has-dropdown{ position:relative; }
.has-dropdown > a{ display:inline-flex; align-items:center; gap:5px; }
.has-dropdown > a::before{
  content:'';
  width:5px; height:5px;
  border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform var(--transition);
  opacity:.6;
}
.has-dropdown:hover > a::before,
.has-dropdown.open > a::before{ transform:rotate(225deg) translateY(-3px); opacity:1; }

.dropdown{
  position:absolute;
  top:100%; right:50%;
  transform:translate(50%, 10px);
  background:var(--head-bg);
  border:1px solid rgba(28,20,16,.09);
  border-radius:var(--radius-md);
  box-shadow:0 18px 44px rgba(28,20,16,.14);
  padding:14px;
  display:grid;
  grid-template-columns:repeat(3, 132px);
  gap:6px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index:220;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.open .dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(50%, 0);
}
.dropdown a{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:7px;
  font-size:13.5px; color:var(--head-ink); opacity:1;
  transition:background var(--transition), color var(--transition);
}
.dropdown a::after{ display:none; }
.dropdown a:hover{ background:rgba(171,133,114,.13); color:var(--head-accent); }
.dropdown img{
  width:38px; height:46px; object-fit:cover;
  border-radius:5px; flex:0 0 auto;
}
.dropdown .all-link{
  grid-column:1/-1;
  justify-content:center;
  border-top:1px solid rgba(28,20,16,.09);
  margin-top:6px; padding-top:12px;
  color:var(--head-accent); font-weight:700; font-size:13px;
}
.dropdown .all-link:hover{ background:transparent; text-decoration:underline; }

/* mobile: nested category links */
.mobile-nav .sub{ background:rgba(28,20,16,.035); }
.mobile-nav .sub a{
  padding-right:52px; font-size:14px; opacity:.8;
  border-bottom:1px solid rgba(28,20,16,.05);
}
.mobile-nav .sub a::before{
  content:'—'; margin-left:8px; opacity:.4;
}
@media (max-width:980px){
  .dropdown{ display:none; }
}


/* ---- Account menu on the header person icon ---- */
.account-wrap{ position:relative; }
.account-menu{
  position:absolute;
  top:calc(100% + 14px);
  left:0;
  min-width:230px;
  background:var(--head-bg);
  border:1px solid rgba(28,20,16,.09);
  border-radius:var(--radius-md);
  box-shadow:0 18px 44px rgba(28,20,16,.16);
  padding:var(--s-2);
  opacity:0; visibility:hidden;
  transform:translateY(-8px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index:260;
}
.account-wrap.open .account-menu{ opacity:1; visibility:visible; transform:none; }
.account-menu .head{
  font-size:11.5px; color:var(--ink-soft);
  padding:8px 12px 6px; letter-spacing:.04em;
}
.account-menu a{
  display:flex; align-items:center; gap:9px;
  padding:11px 12px; border-radius:6px;
  font-size:13.5px; color:var(--head-ink);
  transition:background var(--transition), color var(--transition);
}
.account-menu a:hover{ background:rgba(171,133,114,.13); color:var(--head-accent); }
.account-menu a svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; flex:0 0 auto; }
.account-menu .divider{ height:1px; background:rgba(28,20,16,.08); margin:var(--s-2) 4px; }
.account-menu .note{
  font-size:11.5px; color:var(--ink-soft);
  padding:4px 12px 8px; line-height:1.7;
}
@media (max-width:980px){
  /* On a phone the icon sits near the edge, so anchoring the panel to it
     pushed the panel off screen. Pin it to the viewport instead. */
  .account-wrap{ position:static; }
  .account-menu{
    position:fixed;
    top:auto;
    right:12px;
    left:12px;
    width:auto;
    min-width:0;
    max-width:none;
    margin-top:10px;
  }
}


/* =========================================================
   Touch targets
   ---------------------------------------------------------
   Icons stay visually small, but their tappable area grows to
   the 44px minimum on touch screens — a 22px target is a
   guessing game with a thumb.
   ========================================================= */
@media (hover:none), (max-width:980px){
  .icon-btn{
    width:44px; height:44px;
    margin:-11px;                 /* keep the visual spacing unchanged */
  }
  .header-icons{ gap:var(--s-3); }

  .nav-toggle{
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
  }
  .nav-toggle span,
  .nav-toggle::before,
  .nav-toggle::after{ right:11px; left:11px; }
  .nav-toggle span{ top:21px; }
  .nav-toggle::before{ top:14px; }
  .nav-toggle::after{ top:28px; }

  /* the base .wish-btn rule is defined later in the file, so this needs
     the extra specificity to win */
  .product-card .wish-btn{ width:44px; height:44px; }
  .product-card .wish-btn svg{ width:17px; height:17px; }

  .cart-count, .wish-count{ top:2px; left:2px; }

  /* menu rows deserve a full finger, not a text line */
  .mobile-nav a{ padding:15px 32px; }
  .mobile-nav .sub a{ padding:13px 52px; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  background:var(--charcoal);
  overflow:hidden;
  min-height:min(88vh, 780px);
  display:flex;
  align-items:center;
}
.hero-bg{
  position:absolute; inset:0;
}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 20%;
  opacity:0;
  transition:opacity 1s ease;
}
.hero-slide.active{ opacity:1; }
/* Only the first slide is fetched on load. The other two get their
   image once the page is idle — see the loader in index.html. */
/* images come from store settings now; only framing stays in CSS */
.hero-slide:nth-child(1){ background-position:center 8%; }
.hero-slide:nth-child(2){ background-position:center 10%; }
.hero-slide:nth-child(3){ background-position:center 45%; }
.hero-bg::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(28,23,20,.94) 0%,
    rgba(28,23,20,.88) 24%,
    rgba(28,23,20,.5) 44%,
    rgba(28,23,20,.08) 64%,
    transparent 100%);
}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
.hero-copy{
  max-width:520px;
  margin-right:auto;
  text-align:right;
  color:var(--ivory);
}
.hero-copy.fading > *{ opacity:0; transform:translateY(8px); }
.hero-copy > *{
  transition:opacity .45s ease, transform .45s ease;
}
.hero-copy .eyebrow{
  font-family:var(--f-logo);
  font-size:var(--t-hero);
  letter-spacing:.16em;
  padding-right:.16em;
  color:var(--ivory);
  margin:0 0 var(--s-3);
  line-height:.95;
  font-weight:400;
}
.hero-copy .eyebrow em{ font-style:normal; color:var(--gold-light); }
.hero-copy h1{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(28px,3.4vw,42px);
  letter-spacing:.02em;
  line-height:1.35;
  margin:0 0 var(--s-4);
  color:var(--ivory);
}
.hero-copy p{
  font-size:var(--t-base);
  font-weight:300;
  line-height:1.9;
  color:rgba(232,220,203,.82);
  max-width:400px;
  margin:0 0 var(--s-5);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  padding:16px 38px;
  background:var(--gold);
  color:var(--charcoal);
  border:1px solid var(--gold);
  font-family:var(--f-arabic);
  font-size:var(--t-sm);
  font-weight:700;
  border-radius:var(--radius-sm);
  letter-spacing:.05em;
  position:relative;
  overflow:hidden;
  transition:background var(--transition), color var(--transition),
             transform var(--transition), box-shadow var(--transition);
}
/* a soft sheen sweeps across on hover */
.btn::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-soft);
}
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{
  background:var(--gold-light);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(23,18,15,.18);
}
.btn:active{ transform:translateY(0); }
.btn--ghost{
  background:transparent;
  color:var(--ivory);
  border:1px solid rgba(255,255,255,.5);
}
.btn--ghost:hover{ background:rgba(255,255,255,.08); color:var(--ivory); }
.btn--dark{
  background:var(--charcoal);
  color:var(--ivory);
  border:1px solid var(--charcoal);
}
.btn--dark:hover{ background:var(--charcoal-2); }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

.hero-slider-dots{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:36px;
  color:var(--warm-beige);
  font-size:13px;
  letter-spacing:1px;
}
.hero-slider-dots button{
  background:none;border:1px solid rgba(255,255,255,.35);
  color:var(--ivory);
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transition);
}
.hero-slider-dots button:hover{ background:rgba(255,255,255,.1); }

@media (max-width:860px){
  .hero{ min-height:78vh; align-items:flex-end; }
  .hero-bg{ background-position:68% 12%; }
  .hero-slide:nth-child(1){ background-position:66% 10%; }
  .hero-slide:nth-child(2){ background-position:62% 12%; }
  .hero-slide:nth-child(3){ background-position:72% 40%; }
  .hero-bg::after{
    background:linear-gradient(0deg,
      rgba(23,18,15,.96) 0%,
      rgba(23,18,15,.82) 34%,
      rgba(23,18,15,.42) 62%,
      rgba(23,18,15,.12) 100%);
  }
  .hero-inner{ padding:0 var(--s-4) var(--s-6); }
  .hero-copy{ max-width:none; }
  .hero-copy .eyebrow{ font-size:clamp(46px,15vw,66px); margin-bottom:var(--s-2); }
  .hero-copy h1{ font-size:clamp(22px,6vw,28px); margin-bottom:var(--s-3); }
  .hero-copy p{ font-size:var(--t-sm); line-height:1.8; margin-bottom:var(--s-4); max-width:none; }
  .hero-copy .btn{ width:100%; padding:15px 20px; }
  .hero-slider-dots{ margin-top:var(--s-4); justify-content:center; }
}

/* Overlay hero variant (used on inner pages / mobile-style banner) */
.hero-overlay{
  position:relative;
  min-height:360px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:flex-end;
}
.hero-overlay::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(28,23,20,.72) 10%, rgba(28,23,20,0) 65%);
}
.hero-overlay-copy{
  position:relative; z-index:2;
  padding:36px;
  color:var(--ivory);
  max-width:420px;
}
.hero-overlay-copy h2{
  font-family:var(--f-display);
  font-size:30px; margin:0 0 8px;
}
.hero-overlay-copy p{ font-size:14px; color:var(--warm-beige); margin:0 0 18px; }

/* =========================================================
   Category grid
   ========================================================= */
.cat-grid{
  /* flex rather than grid: an odd number of categories then centres on the
     last row instead of leaving one stranded at the edge */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--s-4);
}
.cat-card{ flex:0 0 calc((100% - 5 * var(--s-4)) / 6); }
.cat-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-3);
  text-align:center;
}
.cat-card .avatar{
  position:relative;
  width:100%;
  max-width:170px;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:var(--warm-beige);
  transition:transform .6s var(--ease-soft);
}
/* a thin gold ring draws itself on hover */
.cat-card .avatar::after{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid var(--gold);
  opacity:0;
  transform:scale(.94);
  transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
  z-index:2;
}
.cat-card:hover .avatar{ transform:translateY(-6px); }
.cat-card:hover .avatar::after{ opacity:1; transform:scale(1.06); }
.cat-card img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-soft);
}
.cat-card:hover img{ transform:scale(1.08); }
.cat-card .label{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-size:var(--t-sm);
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink);
  transition:color var(--transition);
}
.cat-card:hover .label{ color:var(--gold-deep); }
.cat-card .label svg{
  width:24px; height:24px;
  flex:0 0 auto;
  fill:none;
  stroke:var(--ink-soft);
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke var(--transition);
}
.cat-card:hover .label svg{ stroke:var(--gold-deep); }

@media (max-width:980px){
  .cat-grid{ gap:var(--s-5) var(--s-3); }
  .cat-card{ flex:0 0 calc((100% - 2 * var(--s-3)) / 3); }
  .cat-card .label{ font-size:var(--t-xs); gap:6px; }
  .cat-card .label svg{ width:20px; height:20px; }
}
@media (max-width:560px){
  .cat-grid{ gap:var(--s-4) var(--s-2); }
  .cat-card{ flex:0 0 calc((100% - 2 * var(--s-2)) / 3); }
  .cat-card{ gap:10px; }
  .cat-card .label{ font-size:11.5px; gap:4px; }
  .cat-card .label svg{ width:17px; height:17px; }
}

/* =========================================================
   Product grid + card
   ========================================================= */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s-6) var(--s-4);
}
@media (max-width:980px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s-5) var(--s-3); } }

.product-card{ position:relative; }
.product-card .thumb{
  position:relative;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--ivory-2);
  aspect-ratio:3/4;
}
.product-card .thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-soft), opacity .6s var(--ease-soft);
}
.product-card .thumb img.img-alt{ position:absolute; inset:0; opacity:0; }
.product-card:hover .thumb img.img-main{ opacity:0; transform:scale(1.04); }
.product-card:hover .thumb img.img-alt{ opacity:1; transform:scale(1.04); }

.badge{
  position:absolute; top:var(--s-3); right:var(--s-3);
  background:rgba(23,18,15,.86);
  backdrop-filter:blur(4px);
  color:var(--ivory);
  font-size:var(--t-xs);
  font-weight:400;
  padding:5px 12px;
  border-radius:2px;
  z-index:2;
  letter-spacing:.06em;
}
.badge--sale{ background:rgba(138,107,69,.92); }
.badge--best{ background:rgba(61,58,55,.92); }

.wish-btn{
  position:absolute; top:var(--s-3); left:var(--s-3);
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(251,248,243,.9);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  border:none;
  z-index:2;
  color:var(--charcoal);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity var(--transition), transform var(--transition),
             background var(--transition), color var(--transition);
}
.product-card:hover .wish-btn,
.wish-btn.active,
.wish-btn:focus-visible{ opacity:1; transform:none; }
.wish-btn svg{ width:15px;height:15px; }
.wish-btn:hover{ background:var(--ivory); }
.wish-btn.active{ background:var(--gold-deep); color:var(--ivory); }
.wish-btn.active svg{ fill:currentColor; }

/* a single soft beat when a piece is saved — not a bounce */
@keyframes heartBeat{
  0%{ transform:scale(1); } 35%{ transform:scale(1.28); }
  60%{ transform:scale(.94); } 100%{ transform:scale(1); }
}
.wish-btn.beat{ animation:heartBeat .5s var(--ease-soft); }
@media (prefers-reduced-motion:reduce){ .wish-btn.beat{ animation:none; } }


.quick-add{
  position:absolute; right:0; left:0; bottom:0;
  background:rgba(23,18,15,.9);
  backdrop-filter:blur(6px);
  color:var(--ivory);
  font-family:var(--f-arabic);
  font-size:var(--t-sm);
  letter-spacing:.04em;
  padding:14px;
  text-align:center;
  border:none;
  z-index:2;
  transform:translateY(100%);
  transition:transform .45s var(--ease-soft);
}
.product-card:hover .quick-add{ transform:none; }

.product-card .info{
  display:block;
  padding:var(--s-3) 2px 0;
  text-align:center;
}
.product-card .info h3{
  font-size:var(--t-sm);
  font-weight:400;
  letter-spacing:.02em;
  margin:0 0 var(--s-2);
  color:var(--ink);
  transition:color var(--transition);
}
.product-card:hover .info h3{ color:var(--gold-deep); }
.product-card .price{
  font-family:var(--f-num);
  font-size:var(--t-md);
  font-weight:500;
  letter-spacing:.03em;
  color:var(--ink);
}
.product-card .price .old{
  color:var(--ink-soft);
  text-decoration:line-through;
  font-weight:400;
  font-size:var(--t-sm);
  margin-left:var(--s-2);
}

/* touch devices have no hover — keep the controls reachable */
@media (hover:none){
  .wish-btn{ opacity:1; transform:none; }
  .quick-add{ display:none; }
}

/* =========================================================
   Scroll reveal
   ========================================================= */
html.reveal-ready .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
html.reveal-ready .reveal.visible{
  opacity:1;
  transform:none;
}
/* staggered children (category circles, feature items, product cards) */
html.reveal-ready .reveal-group > *{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
}
html.reveal-ready .reveal-group.visible > *{ opacity:1; transform:none; }
html.reveal-ready .reveal-group.visible > *:nth-child(1){ transition-delay:.00s; }
html.reveal-ready .reveal-group.visible > *:nth-child(2){ transition-delay:.07s; }
html.reveal-ready .reveal-group.visible > *:nth-child(3){ transition-delay:.14s; }
html.reveal-ready .reveal-group.visible > *:nth-child(4){ transition-delay:.21s; }
html.reveal-ready .reveal-group.visible > *:nth-child(5){ transition-delay:.28s; }
html.reveal-ready .reveal-group.visible > *:nth-child(6){ transition-delay:.35s; }

/* Never hide content when motion is reduced or JS is unavailable */
@media (prefers-reduced-motion:reduce){
  .reveal, .reveal-group > *{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}



/* ---- Quick actions on a product card ---- */
.card-actions{
  position:absolute; right:0; left:0; bottom:0;
  display:flex;
  z-index:2;
  transform:translateY(100%);
  transition:transform .45s var(--ease-soft);
}
.product-card:hover .card-actions{ transform:none; }
.card-actions button,
.card-actions a{
  /* reset the older absolute positioning that .quick-add still carries,
     otherwise it covers the WhatsApp button beside it */
  position:static;
  inset:auto;
  transform:none;
  opacity:1;
  border-radius:0;
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  border:none;
  font-family:var(--f-arabic);
  font-size:12.5px;
  letter-spacing:.03em;
  padding:13px 6px;
  background:rgba(23,18,15,.9);
  backdrop-filter:blur(6px);
  color:var(--ivory);
  transition:background var(--transition);
}
.card-actions .wa-quick{
  background:rgba(37,211,102,.92);
  color:#fff;
  flex:0 0 46px;
}
.card-actions .wa-quick svg{ width:16px; height:16px; fill:currentColor; stroke:none; }
.card-actions button:hover{ background:var(--charcoal); }
.card-actions .wa-quick:hover{ background:#1fb355; }

@media (hover:none){
  .card-actions{ transform:none; position:static; margin-top:var(--s-2); }
  .card-actions button, .card-actions a{
    background:var(--charcoal); border-radius:var(--radius-sm); padding:11px 6px;
  }
  .card-actions .wa-quick{ background:#25D366; border-radius:var(--radius-sm); }
}


/* =========================================================
   Homepage editorial sections
   ========================================================= */

/* ---- Editorial: three looks, magazine style ---- */
.editorial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-4);
}
.editorial-card{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--ivory-2);
}
.editorial-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-soft);
}
.editorial-card:hover img{ transform:scale(1.06); }
.editorial-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(23,18,15,.82) 0%, rgba(23,18,15,.18) 48%, transparent 72%);
}
.editorial-card .copy{
  position:absolute; right:0; left:0; bottom:0;
  padding:var(--s-4);
  z-index:2; color:var(--ivory);
}
.editorial-card .kicker{
  font-size:10.5px; letter-spacing:.28em; color:var(--gold-light);
  display:block; margin-bottom:8px;
}
.editorial-card h3{
  font-family:var(--f-display); font-size:var(--t-lg);
  margin:0 0 6px; color:var(--ivory);
}
.editorial-card p{
  font-size:12.5px; line-height:1.85;
  color:rgba(253,251,247,.78); margin:0 0 var(--s-3);
}
.editorial-card .go{
  font-size:12px; letter-spacing:.06em; color:var(--gold-light);
  border-bottom:1px solid currentColor; padding-bottom:2px;
}

/* ---- Why URNINA: four promises ---- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s-4);
}
.why-card{ text-align:center; padding:var(--s-4) var(--s-3); }
.why-card .ico{
  width:52px; height:52px; border-radius:50%;
  margin:0 auto var(--s-3);
  background:var(--ivory-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep);
  transition:background var(--transition), transform var(--transition);
}
.why-card:hover .ico{ background:var(--warm-beige); transform:translateY(-3px); }
.why-card .ico svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.3; }
.why-card h4{ margin:0 0 6px; font-size:var(--t-sm); }
.why-card p{ margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.85; }

/* ---- Brand story ---- */
.story-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--s-6); align-items:center;
}
.story-grid .visual{
  aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--ivory-2);
}
.story-grid .visual img{ width:100%; height:100%; object-fit:cover; }
.story-grid .kicker{
  font-size:11px; letter-spacing:.3em; color:var(--gold-deep);
  display:block; margin-bottom:var(--s-3);
}
.story-grid h2{ margin:0 0 var(--s-3); }
.story-grid p{ font-size:var(--t-sm); line-height:2; color:var(--ink-soft); margin:0 0 var(--s-3); }

/* ---- Style / occasion tiles ---- */
.style-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3);
}
.style-tile{
  position:relative; display:block;
  aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden;
  background:var(--ivory-2);
}
.style-tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-soft); }
.style-tile:hover img{ transform:scale(1.07); }
.style-tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(23,18,15,.7), transparent 60%);
}
.style-tile span{
  position:absolute; right:0; left:0; bottom:var(--s-3);
  text-align:center; color:var(--ivory); z-index:2;
  font-size:var(--t-sm); letter-spacing:.06em;
}

/* ---- Offers banner ---- */
.offer-band{
  background:var(--charcoal); color:var(--ivory);
  border-radius:var(--radius-lg);
  padding:var(--s-6) var(--s-5);
  text-align:center;
}
.offer-band .kicker{
  font-size:11px; letter-spacing:.3em; color:var(--gold-light);
  display:block; margin-bottom:var(--s-3);
}
.offer-band h2{ color:var(--ivory); margin:0 0 var(--s-3); }
.offer-band p{ color:rgba(236,226,211,.8); font-size:var(--t-sm); margin:0 0 var(--s-4); }

@media (max-width:900px){
  .editorial-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s-3); }
  .story-grid{ grid-template-columns:1fr; gap:var(--s-4); }
  .story-grid .visual{ order:-1; aspect-ratio:3/2; }
  .style-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .editorial-card{ aspect-ratio:4/3; }
}

/* =========================================================
   Product carousel
   ========================================================= */
.carousel{ position:relative; }
.carousel-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * 22px) / 4);
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:6px;
  /* hide the scrollbar; navigation is via arrows/swipe */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track > *{ scroll-snap-align:start; }

.carousel-btn{
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  width:42px; height:42px;
  border-radius:50%;
  background:var(--ivory);
  border:1px solid var(--line);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(28,20,16,.13);
  z-index:5;
  font-size:19px; line-height:1;
  transition:background var(--transition), color var(--transition), opacity var(--transition);
}
.carousel-btn:hover{ background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal); }
.carousel-btn[disabled]{ opacity:.3; cursor:default; }
.carousel-btn[disabled]:hover{ background:var(--ivory); color:var(--ink); border-color:var(--line); }
.carousel-btn.prev{ right:-19px; }
.carousel-btn.next{ left:-19px; }

@media (max-width:980px){
  .carousel-track{ grid-auto-columns:calc((100% - 2 * 16px) / 3); gap:16px; }
  .carousel-btn{ display:none; }
}
@media (max-width:560px){
  .carousel-track{
    grid-auto-columns:46%;
    gap:12px;
    /* let cards peek past the container edge */
    padding-left:22px;
  }
}

/* =========================================================
   Feature strip (icons)
   ========================================================= */
.feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#f6efe7;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.feature-strip .feat{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:26px 18px;
  border-left:1px solid rgba(28,20,16,.09);
}
.feature-strip .feat:last-child{ border-left:none; }
.feature-strip .feat .txt{ text-align:right; }
.feature-strip .feat h4{
  font-size:15px;
  margin:0 0 3px;
  font-weight:700;
  color:var(--ink);
}
.feature-strip .feat p{
  font-size:12.5px;
  color:var(--ink-soft);
  margin:0;
}
.feature-strip .feat svg{
  width:30px; height:30px;
  flex:0 0 auto;
  color:#4a3d33;
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:color var(--transition), transform var(--transition);
}
.feature-strip .feat:hover svg{ color:var(--head-accent); transform:translateY(-2px); }

@media (max-width:900px){
  .feature-strip{ grid-template-columns:repeat(2,1fr); }
  .feature-strip .feat:nth-child(2){ border-left:none; }
  .feature-strip .feat:nth-child(1),
  .feature-strip .feat:nth-child(2){ border-bottom:1px solid rgba(28,20,16,.09); }
}
@media (max-width:480px){
  .feature-strip .feat{ gap:10px; padding:18px 10px; flex-direction:column; text-align:center; }
  .feature-strip .feat .txt{ text-align:center; }
  .feature-strip .feat h4{ font-size:13px; }
  .feature-strip .feat p{ font-size:11px; }
  .feature-strip .feat svg{ width:25px; height:25px; }
}

/* =========================================================
   Identity banner
   ========================================================= */
.identity-banner{
  background:var(--charcoal);
  color:var(--ivory);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
}
.identity-banner .txt{ padding:52px; }
.identity-banner .txt .brand{
  font-family:var(--f-logo);
  font-size:30px;
  letter-spacing:3px;
  color:var(--gold-light);
  margin:0 0 8px;
}
.identity-banner .txt h3{
  font-family:var(--f-display);
  font-size:26px; font-weight:600;
  margin:0 0 14px;
}
.identity-banner .txt p{ color:var(--warm-beige); font-size:14px; margin:0 0 24px; max-width:380px; }
.identity-banner .img{ height:100%; min-height:280px; background-size:cover; background-position:center; }
.newsletter-inline{
  display:flex; gap:0; max-width:360px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:2px; overflow:hidden;
}
.newsletter-inline input{
  flex:1; border:none; background:transparent; padding:13px 16px;
  color:var(--ivory); font-size:13px;
}
.newsletter-inline input::placeholder{ color:rgba(250,246,239,.55); }
.newsletter-inline button{
  border:none; background:var(--gold); color:var(--charcoal);
  padding:0 20px; font-weight:700; font-size:13px;
}
@media (max-width:760px){
  .identity-banner{ grid-template-columns:1fr; }
  .identity-banner .img{ order:-1; min-height:220px; }
}

/* =========================================================
   Instagram strip
   ========================================================= */
.insta-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}
.insta-grid a{ display:block; aspect-ratio:1/1; overflow:hidden; border-radius:6px; }
.insta-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.insta-grid a:hover img{ transform:scale(1.08); }
@media (max-width:760px){ .insta-grid{ grid-template-columns:repeat(3,1fr); } }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--charcoal);
  color:var(--warm-beige);
  padding-top:64px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-grid .brand{
  font-family:var(--f-logo);
  font-size:24px; letter-spacing:2px;
  color:var(--ivory); margin:0 0 10px;
}
.footer-grid .tagline{ color:var(--gold-light); font-size:13px; margin:0; }
.footer-col h5{ color:var(--ivory); font-size:14.5px; margin:0 0 16px; font-weight:700; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ font-size:13.5px; color:var(--warm-beige); opacity:.85; transition:opacity var(--transition); }
.footer-col a:hover{ opacity:1; }
.footer-contact li{ display:flex; align-items:center; gap:8px; font-size:13.5px; margin-bottom:12px; }
.footer-contact svg{ width:15px; height:15px; color:var(--gold-light); flex:0 0 auto; }
.social-row{ display:flex; gap:12px; margin-top:18px; }
.social-row a{
  width:34px;height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.social-row svg{ width:15px;height:15px; }
.footer-bottom{
  text-align:center;
  padding:22px 0;
  font-size:12.5px;
  color:rgba(250,246,239,.6);
}
@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   Desktop / mobile view toggle
   ========================================================= */
.view-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:14px auto 0;
  background:transparent;
  border:1px solid rgba(250,246,239,.28);
  color:rgba(250,246,239,.85);
  font-size:12.5px;
  padding:9px 18px;
  border-radius:30px;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.view-toggle:hover{
  background:rgba(250,246,239,.1);
  color:var(--ivory);
  border-color:rgba(250,246,239,.5);
}
.view-toggle svg{
  width:15px; height:15px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.footer-bottom{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.footer-bottom .copy-line{
  display:inline-flex;
  align-items:center;
  gap:9px;
}

/* Discreet entry point to the admin panel — reads as a full stop
   next to the copyright, but it is a real link with a tap target. */
.admin-dot{
  display:inline-block;
  width:5px; height:5px;
  border-radius:50%;
  background:rgba(251,248,243,.3);
  /* keep the visual dot tiny while the tappable area stays usable */
  padding:9px;
  background-clip:content-box;
  box-sizing:content-box;
  margin:-9px;
  transition:background-color var(--transition), transform var(--transition);
}
.admin-dot:hover,
.admin-dot:focus-visible{
  background-color:var(--gold-light);
  transform:scale(1.25);
}

/* When the desktop view is forced on a phone, keep tap targets usable */
html.force-desktop{ min-width:1280px; }


/* =========================================================
   Slide-out cart drawer
   ========================================================= */
.drawer-scrim{
  position:fixed; inset:0; z-index:450;
  background:rgba(23,18,15,.5);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.drawer-scrim.open{ opacity:1; visibility:visible; }

.cart-drawer{
  position:fixed; top:0; bottom:0; left:0;      /* RTL: slides in from the left edge */
  width:min(400px, 92vw);
  background:var(--ivory);
  z-index:460;
  display:flex; flex-direction:column;
  transform:translateX(-102%);
  transition:transform .38s var(--ease-soft);
  box-shadow:6px 0 40px rgba(23,18,15,.18);
}
.cart-drawer.open{ transform:none; }

.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4);
  border-bottom:1px solid var(--line);
}
.drawer-head h3{ font-family:var(--f-display); font-size:var(--t-lg); margin:0; }
.drawer-close{
  background:none; border:none; font-size:22px; line-height:1; color:var(--ink-soft);
}
.drawer-close:hover{ color:var(--ink); }

.drawer-body{ flex:1; overflow-y:auto; padding:var(--s-3) var(--s-4); }
.drawer-foot{ border-top:1px solid var(--line); padding:var(--s-4); background:var(--ivory-2); }

.d-item{
  display:grid; grid-template-columns:66px 1fr auto; gap:var(--s-3);
  padding:var(--s-3) 0; border-bottom:1px solid var(--line-soft);
  align-items:center;
}
.d-item img{ width:66px; height:84px; object-fit:cover; border-radius:var(--radius-sm); }
.d-item h4{ margin:0 0 4px; font-size:var(--t-sm); font-weight:400; }
.d-item .meta{ font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
.d-item .price{ font-family:var(--f-num); font-size:var(--t-sm); font-weight:600; }
.d-item .qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:3px; }
.d-item .qty button{ width:28px; height:28px; border:none; background:none; font-size:14px; }
.d-item .qty span{ min-width:26px; text-align:center; font-size:12.5px; }
.d-item .rm{ background:none; border:none; color:var(--ink-soft); font-size:15px; line-height:1; }
.d-item .rm:hover{ color:#a33; }

.drawer-empty{ text-align:center; padding:var(--s-7) var(--s-3); color:var(--ink-soft); font-size:var(--t-sm); }

.free-ship-note{
  font-size:12.5px; color:var(--gold-deep);
  background:rgba(176,141,99,.1);
  border-radius:var(--radius-sm);
  padding:9px 12px; margin-bottom:var(--s-3);
  text-align:center;
}
.free-ship-bar{
  height:3px; border-radius:3px; background:var(--line); margin-top:7px; overflow:hidden;
}
.free-ship-bar i{ display:block; height:100%; background:var(--gold); transition:width .4s var(--ease-soft); }

@media (prefers-reduced-motion:reduce){
  .cart-drawer{ transition:none; }
}


/* =========================================================
   Quick order — one screen, no cart
   ========================================================= */
.quick-order-scrim{
  position:fixed; inset:0; z-index:470;
  background:rgba(23,18,15,.55);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.quick-order-scrim.open{ opacity:1; visibility:visible; }

.quick-order{
  position:fixed; z-index:480;
  inset:auto 50% auto auto;
  top:50%; right:50%;
  transform:translate(50%, -46%);
  width:min(440px, 94vw);
  max-height:88vh; overflow-y:auto;
  background:var(--ivory);
  border-radius:var(--radius-md);
  box-shadow:0 24px 60px rgba(23,18,15,.28);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease-soft), visibility .3s;
}
.quick-order.open{ opacity:1; visibility:visible; transform:translate(50%, -50%); }

.qo-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-4); border-bottom:1px solid var(--line);
}
.qo-head h3{ font-family:var(--f-display); font-size:var(--t-lg); margin:0; }
.qo-close{ background:none; border:none; font-size:21px; line-height:1; color:var(--ink-soft); }

.qo-body{ padding:var(--s-4); }
.qo-item{ display:flex; gap:var(--s-3); align-items:center; margin-bottom:var(--s-4); }
.qo-item img{ width:64px; height:82px; object-fit:cover; border-radius:var(--radius-sm); }
.qo-item h4{ margin:0 0 4px; font-size:var(--t-sm); font-weight:400; }
.qo-item .meta{ font-size:12px; color:var(--ink-soft); }
.qo-item .price{ font-family:var(--f-num); font-weight:600; font-size:var(--t-md); }

.qo-fields{ display:grid; gap:var(--s-3); }
.qo-fields label{ display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:5px; }
.qo-fields input, .qo-fields select, .qo-fields textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:var(--t-sm); background:var(--ivory); color:var(--ink);
}
.qo-two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.qo-err{ color:#a33; font-size:12px; margin-top:4px; display:none; }
.qo-err.show{ display:block; }
.qo-totals{
  background:var(--ivory-2); border-radius:var(--radius-sm);
  padding:var(--s-3); margin:var(--s-4) 0;
}
.qo-totals .summary-row{ margin-bottom:6px; }
.qo-totals .summary-row:last-child{ margin-bottom:0; }

@media (max-width:480px){
  .qo-two{ grid-template-columns:1fr; }
}


/* Placeholder for a category with no photo yet */
.avatar-empty{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  background:linear-gradient(135deg, var(--warm-beige), var(--ivory-2));
  color:var(--gold-deep);
  font-family:var(--f-display); font-size:30px;
}

/* ---- Motion: small, deliberate signs of life ---- */

/* the hero image drifts almost imperceptibly, so the page never feels frozen */
@keyframes heroDrift{
  from{ transform:scale(1); }
  to  { transform:scale(1.06); }
}
.hero-slide.active{
  animation:heroDrift 7s ease-out forwards;
}

/* the gold rule under a section title draws itself in */
@keyframes shimmer{
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* product cards lift slightly, telling the eye they are clickable */
.product-card .thumb{
  transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.product-card:hover .thumb{
  transform:translateY(-6px);
  box-shadow:0 18px 34px rgba(23,18,15,.14);
}

/* the announcement bar text slides in once on arrival */
@keyframes slideDown{
  from{ opacity:0; transform:translateY(-100%); }
  to  { opacity:1; transform:none; }
}
.announce-bar{ animation:slideDown .6s var(--ease-soft); }

/* the whatsapp button pulses gently a few times, then settles */
@keyframes waPulse{
  0%,100%{ box-shadow:0 8px 22px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5); }
  50%    { box-shadow:0 8px 22px rgba(0,0,0,.25), 0 0 0 14px rgba(37,211,102,0); }
}
.wa-float{ animation:waPulse 2.6s ease-out 3; animation-delay:2s; }

/* the cart badge bumps when its number changes */
@keyframes badgePop{
  0%{ transform:scale(1); } 40%{ transform:scale(1.45); } 100%{ transform:scale(1); }
}
.cart-count.bump, .wish-count.bump{ animation:badgePop .45s var(--ease-soft); }

/* buttons acknowledge the press */
.btn:active, .mini-btn:active{ transform:scale(.97); }

@media (prefers-reduced-motion:reduce){
  .hero-slide.active, .announce-bar, .wa-float,
  .cart-count.bump, .wish-count.bump{ animation:none !important; }
  .product-card:hover .thumb{ transform:none; }
}


/* ---- Install prompt ---- */
.install-bar{
  position:fixed; right:16px; left:16px; bottom:16px; z-index:420;
  background:var(--charcoal); color:var(--ivory);
  border-radius:var(--radius-md);
  padding:var(--s-3) var(--s-4);
  display:flex; align-items:center; gap:var(--s-3);
  box-shadow:0 14px 34px rgba(23,18,15,.32);
  transform:translateY(140%);
  transition:transform .45s var(--ease-soft);
}
.install-bar.show{ transform:none; }
.install-bar .ico{
  width:42px; height:42px; border-radius:10px; flex:0 0 auto;
  background:var(--gold); color:var(--charcoal);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-logo); font-size:22px;
}
.install-bar .txt{ flex:1; min-width:0; }
.install-bar .txt strong{ display:block; font-size:var(--t-sm); }
.install-bar .txt span{ font-size:11.5px; color:rgba(232,220,203,.72); }
.install-bar button{
  border:none; border-radius:var(--radius-sm);
  padding:10px 16px; font-family:var(--f-arabic); font-size:12.5px; font-weight:700;
  background:var(--gold); color:var(--charcoal); flex:0 0 auto;
}
.install-bar .later{
  background:none; color:rgba(232,220,203,.6);
  padding:10px 6px; font-weight:400;
}
@media (min-width:900px){
  .install-bar{ right:auto; left:24px; bottom:24px; max-width:380px; }
}


/* =========================================================
   Restraint, not spectacle — every motion here is short,
   soft, and gets out of the way.
   ========================================================= */

/* ---- Opening curtain: the logotype for a moment, then away ---- */
.boot-screen{
  position:fixed; inset:0; z-index:9999;
  background:var(--charcoal);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.boot-screen.done{ opacity:0; visibility:hidden; }
.boot-screen .mark{
  font-family:var(--f-logo);
  font-size:clamp(30px, 7vw, 46px);
  letter-spacing:.3em;
  padding-right:.3em;
  color:var(--ivory);
  opacity:0;
  animation:bootFade 1.1s var(--ease-soft) forwards;
}
@keyframes bootFade{
  0%   { opacity:0; transform:translateY(6px); }
  55%  { opacity:1; transform:none; }
  100% { opacity:1; transform:none; }
}
/* a hairline that draws itself under the mark */
.boot-screen .rule{
  position:absolute; bottom:calc(50% - 34px);
  width:0; height:1px; background:var(--gold);
  animation:bootRule 1.1s var(--ease-soft) forwards;
}
@keyframes bootRule{ to{ width:76px; } }

/* ---- Page transition: a soft fade on arrival and departure ---- */
body{ animation:pageIn .5s var(--ease-soft); }
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
body.leaving{ opacity:0; transition:opacity .22s ease; }
/* the tab bar and app header stay put while the page beneath changes,
   so navigation feels like switching tabs, not reloading a site */
body.leaving .tabbar,
body.leaving .site-header{ opacity:1; }

/* ---- Back to top ---- */
.to-top{
  position:fixed; left:26px; bottom:96px; z-index:300;
  width:44px; height:44px; border-radius:50%;
  background:var(--ivory); color:var(--ink);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(23,18,15,.14);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--transition), visibility var(--transition),
             transform var(--transition), background var(--transition);
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal); }
.to-top svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

/* ---- Quick view ---- */
.qv-scrim{
  position:fixed; inset:0; z-index:455;
  background:rgba(23,18,15,.6);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.qv-scrim.open{ opacity:1; visibility:visible; }
.qv-panel{
  position:fixed; z-index:456;
  top:50%; right:50%; transform:translate(50%, -46%);
  width:min(860px, 94vw); max-height:88vh; overflow-y:auto;
  background:var(--ivory); border-radius:var(--radius-md);
  box-shadow:0 26px 62px rgba(23,18,15,.3);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft), visibility .35s;
}
.qv-panel.open{ opacity:1; visibility:visible; transform:translate(50%, -50%); }
.qv-inner{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); padding:var(--s-5); }
.qv-media{ aspect-ratio:3/4; border-radius:var(--radius-sm); overflow:hidden; background:var(--ivory-2); }
.qv-media img{ width:100%; height:100%; object-fit:cover; }
.qv-body h3{ font-family:var(--f-display); font-size:var(--t-xl); margin:0 0 8px; }
.qv-price{ font-family:var(--f-num); font-size:var(--t-lg); color:var(--gold-deep); margin-bottom:var(--s-3); }
.qv-price .old{ font-size:var(--t-sm); color:var(--ink-soft); text-decoration:line-through; margin-left:8px; }
.qv-body .desc{ font-size:var(--t-sm); color:var(--ink-soft); line-height:1.9; margin:0 0 var(--s-4); }
.qv-close{
  position:absolute; top:12px; left:12px;
  width:34px; height:34px; border-radius:50%;
  background:var(--ivory-2); border:none; color:var(--ink); font-size:17px;
}
.qv-close:hover{ background:var(--warm-beige); }
.qv-label{ font-size:12px; color:var(--ink-soft); margin:0 0 8px; }

/* the eye button appears with the other card actions */
.card-actions .qv-btn{
  flex:0 0 46px;
  background:rgba(253,251,247,.92);
  color:var(--ink);
}
.card-actions .qv-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }
.card-actions .qv-btn:hover{ background:var(--ivory); }

@media (max-width:760px){
  .qv-inner{ grid-template-columns:1fr; gap:var(--s-4); }
  .qv-media{ aspect-ratio:4/3; }
  .to-top{ left:20px; bottom:88px; }
}

@media (prefers-reduced-motion:reduce){
  .boot-screen .mark, .boot-screen .rule{ animation:none; opacity:1; width:76px; }
  body{ animation:none; }
  body.leaving{ transition:none; }
}


/* ---- Sticky action bar (phones only) ----
   On a long product page the buy button scrolls away; this keeps it
   within thumb reach without covering the content. */
.sticky-buy{
  position:fixed; right:0; left:0; bottom:0; z-index:340;
  background:rgba(253,251,247,.97);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:var(--s-3);
  transform:translateY(110%);
  transition:transform .35s var(--ease-soft);
}
.sticky-buy.show{ transform:none; }
.sticky-buy .meta{ flex:1; min-width:0; }
.sticky-buy .nm{
  display:block; font-size:12px; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sticky-buy .pr{ font-family:var(--f-num); font-weight:600; font-size:var(--t-md); }
.sticky-buy .btn{ flex:0 0 auto; padding:13px 26px; }

@media (min-width:861px){ .sticky-buy{ display:none; } }

/* the floating whatsapp button must not sit under the bar */
body.has-sticky-buy .wa-float{ bottom:88px; }
body.has-sticky-buy .to-top{ bottom:152px; }


/* =========================================================
   App tab bar
   ---------------------------------------------------------
   Only inside the installed app. In a browser tab the header
   already carries these, and a second bar would just eat space.
   ========================================================= */
.tabbar{
  position:fixed; right:0; left:0; bottom:0; z-index:350;
  background:var(--charcoal);
  border-radius:18px 18px 0 0;
  display:flex;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 26px rgba(23,18,15,.22);
  /* the bar is rebuilt on each page load; fading it in stops the flash
     of it appearing after the content has already painted */
  opacity:0;
  animation:tabbarIn .25s ease forwards;
}
@keyframes tabbarIn{ to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .tabbar{ opacity:1; animation:none; }
}
.tabbar a{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 2px 8px;
  color:rgba(236,226,211,.6);
  font-size:11px;
  position:relative;
  transition:color var(--transition), transform var(--transition);
}
.tabbar a svg{
  width:29px; height:29px;
  fill:none; stroke:currentColor; stroke-width:1.45;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--transition);
}
/* the active icon lifts slightly, the way app bars behave */
.tabbar a.active svg{ transform:translateY(-1px) scale(1.06); }
.tabbar a.active span{ font-weight:700; }
.tabbar a.active{ color:var(--gold-light); }
.tabbar a:active{ transform:scale(.94); }

/* a small mark above the active tab */
.tabbar a.active::before{
  content:'';
  position:absolute; top:0;
  width:20px; height:2px; border-radius:2px;
  background:var(--gold);
}

/* count badges sit on the icon, not the label */
.tabbar .tb-count{
  position:absolute; top:6px;
  transform:translateX(15px);
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px;
  background:var(--gold); color:var(--charcoal);
  font-family:var(--f-num); font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* make room so the bar never covers the last row of content */
body.has-tabbar{ padding-bottom:82px; }
body.has-tabbar .wa-float{ bottom:100px; }
body.has-tabbar .to-top{ bottom:166px; }
body.has-tabbar .sticky-buy{ bottom:78px; }
body.has-tabbar .install-bar{ bottom:90px; }


/* =========================================================
   Installed-app chrome
   ---------------------------------------------------------
   Inside the app the header should read like an app bar, not a
   website header: logo centred, larger icons, no announcement
   strip stealing the first screen.
   ========================================================= */
body.is-app .announce-bar{ display:none; }

body.is-app .site-header{
  position:sticky; top:0;
  padding-top:env(safe-area-inset-top);
  border-bottom:1px solid rgba(28,20,16,.07);
  box-shadow:0 2px 14px rgba(28,20,16,.05);
}
body.is-app .header-inner{
  /* flex with absolute centring: the logo is positioned against the bar
     itself, so unequal icon groups on either side cannot shift it */
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  padding-top:12px; padding-bottom:12px;
}
body.is-app .logo{
  position:absolute;
  right:50%;
  transform:translateX(50%);
  pointer-events:auto;
}
/* logo takes the centre column */
body.is-app .logo{
  font-size:26px;
  letter-spacing:.26em;
  padding-right:.26em;
}
body.is-app .header-icons{ gap:2px; }


/* the desktop nav is hidden on phones but still occupied a grid column,
   which pushed the logo off centre */
body.is-app .main-nav{ display:none; }

/* bigger, clearer icons — the website sizes look timid in an app */
body.is-app .header-icons .icon-btn svg{ width:24px; height:24px; }
body.is-app .header-icons .icon-btn{ width:46px; height:46px; margin:-11px; }
body.is-app .nav-toggle{ width:46px; height:46px; }

/* The tab bar already carries the account, cart and wishlist, and the
   burger duplicates the tab bar too — keeping only search leaves the
   logo the room it needs. */
body.is-app .account-wrap{ display:none; }
body.is-app .nav-toggle{ display:none; }
body.is-app .header-icons a[aria-label="السلة"],
body.is-app .header-icons a[aria-label="المفضلة"]{ display:none; }

/* one icon on each side keeps the bar balanced */
body.is-app .header-icons{ min-width:46px; }
body.is-app .header-inner::after{
  content:''; width:46px; height:46px;   /* mirrors the search button */
}

/* the desktop-view link has no meaning inside the app */
body.is-app .view-toggle{ display:none; }

/* give the hero the full first screen, like an app splash */
body.is-app .hero{ min-height:calc(100vh - 132px); }

/* =========================================================
   Breadcrumb
   ========================================================= */
.breadcrumb{
  font-size:13px;
  color:var(--ink-soft);
  padding:18px 0;
}
.breadcrumb a{ color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--gold-deep); }
.breadcrumb .sep{ margin:0 6px; }
.breadcrumb .current{ color:var(--ink); }

/* =========================================================
   Shop page: filters + toolbar
   ========================================================= */
.shop-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:40px;
  align-items:start;
}
.filters{
  background:var(--ivory-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px 22px;
}
.filter-group{ padding:18px 0; border-bottom:1px solid var(--line); }
.filter-group:first-child{ padding-top:0; }
.filter-group:last-child{ border-bottom:none; }
.filter-group h4{ font-size:14.5px; margin:0 0 14px; font-weight:700; }
.filter-opt{ display:flex; align-items:center; gap:9px; font-size:13.5px; margin-bottom:10px; color:var(--ink-soft); }
.filter-opt input{ accent-color:var(--gold-deep); }
.swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch{
  width:24px;height:24px;border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  box-shadow:0 0 0 1px var(--line);
}
.swatch.selected{ border-color:var(--gold-deep); }
.size-opts{ display:flex; gap:8px; flex-wrap:wrap; }
.size-opts button{
  min-width:40px; padding:7px 10px;
  border:1px solid var(--line);
  background:var(--ivory);
  border-radius:4px; font-size:13px;
  transition:all var(--transition);
}
.size-opts button.selected, .size-opts button:hover{
  border-color:var(--charcoal); background:var(--charcoal); color:var(--ivory);
}
.price-range{ font-size:13px; color:var(--ink-soft); }
.price-range input[type=range]{ width:100%; accent-color:var(--gold-deep); margin-top:8px; }

.shop-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:26px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
  color:var(--ink-soft);
}
.shop-toolbar select{
  border:1px solid var(--line);
  background:var(--ivory);
  padding:9px 14px;
  border-radius:4px;
  font-size:13px;
  color:var(--ink);
}
.mobile-filter-btn{ display:none; }
@media (max-width:900px){
  .shop-layout{ grid-template-columns:1fr; }
  /* ---- Filters as a bottom sheet ----
     Slides up from the bottom the way a shopping app does, instead of
     pushing the product grid down the page. */
  .filters{
    position:fixed; right:0; left:0; bottom:0; z-index:460;
    max-height:82vh; overflow-y:auto;
    margin:0;
    border:none;
    border-radius:20px 20px 0 0;
    padding:var(--s-4) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
    background:var(--ivory);
    box-shadow:0 -10px 40px rgba(23,18,15,.24);
    transform:translateY(100%);
    transition:transform .38s var(--ease-soft);
    display:block;
  }
  /* driven by a class on <body> — see filterSheet() in shop.html */
  body.filters-open .filters{ transform:none; }
  body.filters-open{ overflow:hidden; }
  body.filters-open .filters-scrim{ opacity:1; visibility:visible; }

  /* a grab handle, so it reads as draggable even before it is touched */
  .filters::before{
    content:'';
    display:block;
    width:42px; height:4px; border-radius:4px;
    background:var(--line);
    margin:0 auto var(--s-4);
  }

  .filters-scrim{
    position:fixed; inset:0; z-index:455;
    background:rgba(23,18,15,.5);
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .filters-scrim.open{ opacity:1; visibility:visible; }

  /* a done button pinned at the bottom of the sheet */
  .filters .sheet-done{
    position:sticky; bottom:0;
    margin:var(--s-4) -4px calc(-1 * var(--s-2));
    padding-top:var(--s-3);
    background:linear-gradient(transparent, var(--ivory) 30%);
  }
  .filters .sheet-done .btn{ width:100%; }
  .mobile-filter-btn{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--line); background:var(--ivory);
    padding:9px 16px; border-radius:4px; font-size:13px;
  }
}

/* ---- Header search overlay ---- */
.search-overlay{
  position:fixed; inset:0; z-index:400;
  background:rgba(20,15,12,.55);
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
  /* the panel is padded, so without this it pushed the page wider
     than the screen and created a horizontal scroll on mobile */
  box-sizing:border-box;
  max-width:100vw;
  overflow-x:hidden;
}
.search-overlay.open{ opacity:1; visibility:visible; }
.search-panel{
  background:var(--head-bg);
  box-sizing:border-box;
  width:100%;
  padding:30px 32px 34px;
  transform:translateY(-16px);
  transition:transform .28s ease;
}
.search-overlay.open .search-panel{ transform:none; }
.search-panel-inner{ max-width:720px; margin:0 auto; }
.search-panel form{
  display:flex; align-items:center; gap:12px;
  border-bottom:1.5px solid var(--head-accent);
  padding-bottom:12px;
}
.search-panel input{
  flex:1; border:none; background:none;
  font-family:var(--f-arabic);
  font-size:20px; color:var(--head-ink);
}
.search-panel input:focus{ outline:none; }
.search-panel input::placeholder{ color:rgba(82,64,54,.45); }
.search-panel svg{
  width:21px; height:21px; flex:0 0 auto;
  fill:none; stroke:var(--head-ink); stroke-width:1.7;
}
.search-panel .close-search{
  background:none; border:none; font-size:20px; color:var(--head-ink); line-height:1;
}
.search-hint{ font-size:12.5px; color:var(--ink-soft); margin:14px 0 0; }
.search-suggestions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.search-suggestions button{
  background:var(--ivory-2); border:1px solid var(--line);
  border-radius:20px; padding:7px 15px; font-size:13px; color:var(--ink);
}
.search-suggestions button:hover{ background:var(--warm-beige); }


/* ---- Live search suggestions ---- */
.search-wrap{ position:relative; }
.suggest-box{
  position:absolute; top:calc(100% + 6px); right:0; left:0;
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:0 16px 38px rgba(23,18,15,.14);
  overflow:hidden;
  z-index:120;
  display:none;
}
.suggest-box.open{ display:block; }
.suggest-box a{
  display:flex; align-items:center; gap:var(--s-3);
  padding:10px var(--s-3);
  border-bottom:1px solid var(--line-soft);
  transition:background var(--transition);
}
.suggest-box a:last-child{ border-bottom:none; }
.suggest-box a:hover, .suggest-box a.active{ background:var(--ivory-2); }
.suggest-box img{ width:40px; height:52px; object-fit:cover; border-radius:3px; flex:0 0 auto; }
.suggest-box .nm{ flex:1; font-size:var(--t-sm); color:var(--ink); }
.suggest-box .pr{ font-family:var(--f-num); font-size:var(--t-sm); color:var(--gold-deep); }
.suggest-box .none{ padding:14px var(--s-3); font-size:12.5px; color:var(--ink-soft); text-align:center; }



/* ---- Pull to refresh (installed app only) ---- */
.ptr-indicator{
  position:fixed; top:0; right:50%;
  transform:translate(50%, -60px);
  z-index:360;
  width:38px; height:38px; border-radius:50%;
  background:var(--ivory);
  box-shadow:0 4px 16px rgba(23,18,15,.18);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-deep);
  transition:transform .2s ease, opacity .2s ease;
  opacity:0;
}
.ptr-indicator svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.ptr-indicator.spin svg{ animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

/* ---- Infinite scroll spinner ---- */
.infinite-spinner{
  display:flex; justify-content:center; gap:6px; padding:var(--s-3) 0;
}
.infinite-spinner span{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold);
  animation:dotPulse 1s ease-in-out infinite;
}
.infinite-spinner span:nth-child(2){ animation-delay:.16s; }
.infinite-spinner span:nth-child(3){ animation-delay:.32s; }
@keyframes dotPulse{
  0%,80%,100%{ opacity:.25; transform:scale(.8); }
  40%        { opacity:1;   transform:scale(1); }
}
#scroll-sentinel{ height:1px; }
@media (prefers-reduced-motion:reduce){
  .infinite-spinner span{ animation:none; opacity:.6; }
}

/* ---- Active filter chips ---- */
.active-filters{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:20px;
}
.active-filters:empty{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--ivory-2);
  border:1px solid var(--line);
  border-radius:20px;
  padding:6px 13px;
  font-size:12.5px;
  color:var(--ink);
}
.chip button{
  background:none; border:none; padding:0;
  color:var(--ink-soft); font-size:14px; line-height:1;
}
.chip button:hover{ color:var(--gold-deep); }
.chip--clear{
  background:transparent;
  border-style:dashed;
  color:var(--gold-deep);
  cursor:pointer;
}

/* ---- Search bar ---- */
.shop-search{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line);
  background:var(--ivory);
  border-radius:6px;
  padding:11px 14px;
  margin-bottom:22px;
}
.shop-search input{
  flex:1; border:none; background:none; font-size:14px; color:var(--ink);
}
.shop-search input:focus{ outline:none; }
.shop-search svg{
  width:17px; height:17px; flex:0 0 auto;
  fill:none; stroke:var(--ink-soft); stroke-width:1.7;
}
.shop-search .clear-search{
  background:none; border:none; color:var(--ink-soft); font-size:16px; line-height:1;
}

/* ---- No results ---- */
.no-results{
  text-align:center;
  padding:64px 20px;
  border:1px dashed var(--line);
  border-radius:var(--radius-md);
}
.no-results h3{ font-family:var(--f-display); font-size:22px; margin:0 0 8px; }
.no-results p{ color:var(--ink-soft); font-size:14px; margin:0 0 20px; }

.filters-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px;
}
.filters-head h3{ font-size:16px; margin:0; font-family:var(--f-display); }
.filters-head button{
  background:none; border:none; font-size:12.5px;
  color:var(--gold-deep); border-bottom:1px solid currentColor; padding:0;
}

.pagination{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:48px;
}
.pagination a, .pagination span{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line); border-radius:50%;
  font-size:13px; color:var(--ink-soft);
}
.pagination .current{ background:var(--charcoal); color:var(--ivory); border-color:var(--charcoal); }

/* =========================================================
   Product detail page
   ========================================================= */
.product-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  /* let each column take its natural height so the taller gallery
     defines the row instead of overflowing past the next section */
  align-items:start;
}
.product-detail > .gallery{ align-self:start; }
.gallery{ display:flex; gap:var(--s-3); }
.gallery-thumbs{ display:flex; flex-direction:column; gap:var(--s-2); width:88px; }
.gallery-thumbs img{
  border-radius:var(--radius-sm); aspect-ratio:3/4; object-fit:cover;
  border:1px solid transparent; cursor:pointer; opacity:.62;
  transition:opacity var(--transition), border-color var(--transition);
}
.gallery-thumbs img:hover{ opacity:.85; }
.gallery-thumbs img.active{ border-color:var(--gold); opacity:1; }

.gallery-main{
  position:relative;
  flex:1;
  border-radius:var(--radius-sm);
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--ivory-2);
  cursor:zoom-in;
}
.gallery-main img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease-soft), opacity .4s var(--ease-soft);
}
.gallery-main:hover img{ transform:scale(1.06); }
.gallery-main.swapping img{ opacity:0; }

.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  background:rgba(251,248,243,.9);
  backdrop-filter:blur(4px);
  border:none; color:var(--ink);
  font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity var(--transition), background var(--transition);
  z-index:3;
}
.gallery-main:hover .gallery-nav{ opacity:1; }
.gallery-nav:hover{ background:var(--ivory); }
.gallery-nav.prev{ right:var(--s-3); }
.gallery-nav.next{ left:var(--s-3); }

.gallery-counter{
  position:absolute; bottom:var(--s-3); left:50%;
  transform:translateX(-50%);
  background:rgba(23,18,15,.72);
  backdrop-filter:blur(4px);
  color:var(--ivory);
  font-family:var(--f-num);
  font-size:var(--t-xs);
  letter-spacing:.12em;
  padding:5px 14px; border-radius:20px;
  z-index:3;
}

@media (hover:none){
  .gallery-nav{ opacity:1; }
}
@media (max-width:860px){
  .gallery{ flex-direction:column-reverse; }
  .gallery-thumbs{ flex-direction:row; width:auto; overflow-x:auto; scrollbar-width:none; }
  .gallery-thumbs::-webkit-scrollbar{ display:none; }
  .gallery-thumbs img{ width:66px; flex:0 0 auto; }
}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:500;
  background:rgba(17,12,9,.95);
  display:flex; align-items:center; justify-content:center;
  padding:56px 24px;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:var(--radius-sm); }
.lightbox-close{
  position:absolute; top:22px; left:22px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(251,248,243,.13); border:none; color:var(--ivory);
  font-size:20px; line-height:1;
}
.lightbox-close:hover{ background:rgba(251,248,243,.26); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(251,248,243,.13); border:none; color:var(--ivory);
  font-size:22px; line-height:1;
}
.lightbox-nav:hover{ background:rgba(251,248,243,.26); }
.lightbox-nav.prev{ right:24px; }
.lightbox-nav.next{ left:24px; }
.lightbox-counter{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:rgba(251,248,243,.75);
  font-family:var(--f-num); font-size:var(--t-sm); letter-spacing:.14em;
}

.pd-info h1{ font-family:var(--f-display); font-size:32px; font-weight:600; margin:0 0 10px; }
.pd-info{ align-self:start; }
@media (min-width:861px){
  .pd-info{ position:sticky; top:100px; }
}
.stars{ color:var(--gold-deep); font-size:14px; margin-bottom:14px; letter-spacing:2px; }
.pd-price{ font-size:24px; font-weight:700; color:var(--gold-deep); margin-bottom:6px; }
.pd-price .old{ font-size:15px; color:var(--ink-soft); text-decoration:line-through; font-weight:400; margin-left:10px; }
.pd-save{
  display:inline-block;
  background:rgba(171,133,114,.16);
  color:var(--gold-deep);
  font-size:12.5px; font-weight:700;
  padding:4px 12px; border-radius:20px;
  margin-bottom:20px;
}
.pd-stock{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--ink-soft);
  margin-bottom:24px;
}
.pd-stock .dot{
  width:8px; height:8px; border-radius:50%;
  background:#4c9a5f; flex:0 0 auto;
}

.option-block{ margin-bottom:24px; }
.option-block h4{
  font-size:13.5px; margin:0 0 10px; font-weight:700;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.option-block h4 .chosen{ font-weight:400; color:var(--ink-soft); font-size:13px; }
.option-block h4 .size-guide{
  font-weight:400; font-size:12.5px; color:var(--gold-deep);
  border-bottom:1px solid currentColor; background:none; border-width:0 0 1px; padding:0;
}
.color-opts{ display:flex; gap:10px; }
.color-opts button{
  width:32px;height:32px; border-radius:50%; border:2px solid transparent;
  box-shadow:0 0 0 1px var(--line);
  cursor:pointer;
}
.color-opts button.selected{ border-color:var(--gold-deep); box-shadow:0 0 0 1px var(--gold-deep); }

.qty-stepper{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:4px;
  width:auto;
}
.qty-stepper button{ width:42px; height:42px; background:none; border:none; font-size:17px; color:var(--ink); }
.qty-stepper button:hover{ background:var(--ivory-2); }
.qty-stepper span{ min-width:40px; text-align:center; font-size:15px; font-weight:600; }

.pd-actions{ display:flex; gap:12px; margin-bottom:14px; }
.pd-actions .btn{ flex:1; }
.pd-actions .wish-btn{
  position:static; width:54px; height:auto;
  border:1px solid var(--line); border-radius:2px; background:var(--ivory);
}

/* Image lightbox */


.accordion{ border-top:1px solid var(--line); }
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-item button{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:16px 2px; font-size:14.5px; font-weight:700; text-align:right;
}
.accordion-item .panel{ display:none; padding:0 2px 18px; font-size:13.5px; color:var(--ink-soft); }
.accordion-item.open .panel{ display:block; }
.accordion-item .plus{ transition:transform var(--transition); }
.accordion-item.open .plus{ transform:rotate(45deg); }

@media (max-width:860px){
  .product-detail{ grid-template-columns:1fr; gap:28px; }
  .gallery{ flex-direction:column-reverse; }
  .gallery-thumbs{ flex-direction:row; width:auto; }
  .gallery-thumbs img{ width:64px; }
}


/* ---- Share row on the product page ---- */
.share-row{
  display:flex; align-items:center; gap:var(--s-2);
  margin-top:var(--s-4); padding-top:var(--s-4);
  border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-soft);
}
.share-row button{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--ivory); color:var(--ink);
  transition:background var(--transition), color var(--transition), transform var(--transition);
}
.share-row button:hover{ transform:translateY(-2px); }
.share-row button svg{ width:16px; height:16px; }
.share-row .wa:hover{ background:#25D366; color:#fff; border-color:#25D366; }
.share-row .wa svg{ fill:currentColor; stroke:none; }

/* ---- Size buttons that are out of stock ---- */
.size-opts button.out{
  position:relative;
  opacity:.42;
  cursor:not-allowed;
  background:var(--ivory-2);
}
.size-opts button.out::after{
  content:'';
  position:absolute; right:6px; left:6px; top:50%;
  height:1px; background:var(--ink-soft);
  transform:rotate(-14deg);
}
.size-opts button.out:hover{ background:var(--ivory-2); color:var(--ink); border-color:var(--line); }
.stock-warn{ font-size:12.5px; color:#a3661f; margin-top:var(--s-2); }


/* ---- Notify me when back in stock ---- */
.notify-box{
  border:1px solid var(--line);
  background:var(--ivory-2);
  border-radius:var(--radius-md);
  padding:var(--s-4);
  margin-bottom:var(--s-4);
}
.notify-box h4{ margin:0 0 6px; font-size:var(--t-sm); font-weight:700; }
.notify-box p{ margin:0 0 var(--s-3); font-size:12.5px; color:var(--ink-soft); }
.notify-form{ display:flex; gap:var(--s-2); }
.notify-form input{
  flex:1; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:var(--t-sm); background:var(--ivory); color:var(--ink);
}
.notify-form button{ white-space:nowrap; padding:12px 22px; }
.notify-done{
  font-size:var(--t-sm); color:#2f6b3d;
  background:#e4f0e6; border-radius:var(--radius-sm); padding:12px 14px;
}


/* ---- Reviews ---- */
.reviews-summary{ display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5); }
.reviews-summary .avg{ font-family:var(--f-num); font-size:40px; font-weight:600; line-height:1; }
.reviews-summary .meta{ font-size:var(--t-sm); color:var(--ink-soft); }
.stars-static{ color:var(--gold); letter-spacing:2px; font-size:var(--t-md); }
.stars-static .off{ color:var(--line); }

.review{ border-top:1px solid var(--line-soft); padding:var(--s-4) 0; }
.review:first-of-type{ border-top:none; }
.review .top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:6px; }
.review .who{ font-weight:700; font-size:var(--t-sm); }
.review .when{ font-size:12px; color:var(--ink-soft); }
.review p{ margin:6px 0 0; font-size:var(--t-sm); color:var(--ink); line-height:1.85; }

.review-form{ background:var(--ivory-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--s-4); margin-top:var(--s-4); }
.review-form h4{ margin:0 0 var(--s-3); font-size:var(--t-sm); }
.review-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); margin-bottom:var(--s-3); }
.review-form input, .review-form textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 13px; font-size:var(--t-sm); background:var(--ivory); color:var(--ink);
}
.star-pick{ display:flex; gap:4px; direction:ltr; justify-content:flex-end; margin-bottom:var(--s-3); }
.star-pick button{
  background:none; border:none; font-size:26px; line-height:1;
  color:var(--line); padding:0 2px; transition:color .15s;
}
.star-pick button.on{ color:var(--gold); }
@media (max-width:560px){ .review-form .row{ grid-template-columns:1fr; } }


/* ---- Image uploader ---- */
.uploader{
  border:1.5px dashed var(--line);
  border-radius:var(--radius-md);
  padding:var(--s-4);
  text-align:center;
  background:var(--ivory-2);
  transition:border-color var(--transition), background var(--transition);
}
.uploader.drag{ border-color:var(--gold); background:rgba(176,141,99,.08); }
.uploader .pick{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--charcoal); color:var(--ivory);
  border:none; border-radius:var(--radius-sm);
  padding:12px 22px; font-family:var(--f-arabic); font-size:var(--t-sm);
}
.uploader .pick svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }
.uploader .hint{ font-size:12px; color:var(--ink-soft); margin:10px 0 0; }
.uploader .bar{ height:4px; background:var(--line); border-radius:4px; margin-top:12px; overflow:hidden; display:none; }
.uploader .bar.on{ display:block; }
.uploader .bar i{ display:block; height:100%; width:0; background:var(--gold); transition:width .3s; }

.thumbs-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s-3); }
.thumb-item{ position:relative; width:74px; }
.thumb-item img{
  width:74px; height:94px; object-fit:cover;
  border-radius:var(--radius-sm); border:1px solid var(--line); display:block;
}
.thumb-item .rm{
  position:absolute; top:-7px; left:-7px;
  width:23px; height:23px; border-radius:50%;
  background:var(--charcoal); color:#fff; border:none;
  font-size:13px; line-height:1;
}
.thumb-item .main-tag{
  position:absolute; bottom:0; right:0; left:0;
  background:rgba(23,18,15,.82); color:var(--ivory);
  font-size:10px; text-align:center; padding:3px 0;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
.thumb-item.uploading img{ opacity:.4; }


/* ---- Colour picker (admin + merchant forms) ---- */
.color-picker{
  display:flex; flex-wrap:wrap; gap:9px;
  border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--s-3); background:var(--ivory);
  max-height:186px; overflow-y:auto;
}
.color-opt{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  width:60px; cursor:pointer; background:none; border:none; padding:0;
}
.color-opt .dot{
  width:34px; height:34px; border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.14);
  position:relative;
  transition:transform var(--transition), box-shadow var(--transition);
}
.color-opt:hover .dot{ transform:scale(1.08); }
.color-opt.on .dot{ box-shadow:0 0 0 2px var(--ivory), 0 0 0 4px var(--gold-deep); }
.color-opt.on .dot::after{
  content:'✓';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700;
  color:#fff; text-shadow:0 0 3px rgba(0,0,0,.6);
}
/* light swatches need a dark tick instead */
.color-opt.on .dot.light::after{ color:#2a2420; text-shadow:none; }
.color-opt .nm{ font-size:10.5px; color:var(--ink-soft); line-height:1.3; text-align:center; }
.color-opt.on .nm{ color:var(--ink); font-weight:700; }
.picked-line{ font-size:12px; color:var(--ink-soft); margin-top:8px; }

/* =========================================================
   Cart page
   ========================================================= */
.cart-layout{ display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; }
.cart-item{
  display:grid; grid-template-columns:96px 1fr auto; gap:18px;
  padding:22px 0; border-bottom:1px solid var(--line);
  align-items:center;
}
.cart-item img{ width:96px; height:120px; object-fit:cover; border-radius:6px; }
.cart-item h4{ margin:0 0 6px; font-size:15px; }
.cart-item .meta{ font-size:13px; color:var(--ink-soft); margin-bottom:10px; }
.cart-item .price{ font-weight:700; color:var(--gold-deep); }
.cart-item .remove{ font-size:12.5px; color:var(--ink-soft); margin-top:10px; text-decoration:underline; }
.cart-item .right-col{ text-align:left; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }

.summary-card{
  background:var(--ivory-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px;
  position:sticky; top:100px;
}
.summary-card h3{ font-family:var(--f-display); font-size:20px; margin:0 0 20px; }
.summary-row{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:14px; color:var(--ink-soft); }
.summary-row.total{ color:var(--ink); font-weight:700; font-size:16px; border-top:1px solid var(--line); padding-top:16px; margin-top:6px; }
.summary-row.total .amt{ color:var(--gold-deep); }
.promo-row{ display:flex; gap:8px; margin:18px 0; }
.promo-row input{ flex:1; border:1px solid var(--line); border-radius:4px; padding:11px 12px; font-size:13px; background:var(--ivory); }
.promo-row button{ border:1px solid var(--charcoal); background:var(--charcoal); color:var(--ivory); border-radius:4px; padding:0 16px; font-size:13px; }

.empty-state{ text-align:center; padding:80px 20px; }
.empty-state svg{ width:56px; height:56px; color:var(--line); margin-bottom:18px; }
.empty-state p{ color:var(--ink-soft); margin-bottom:24px; }

@media (max-width:860px){
  .cart-layout{ grid-template-columns:1fr; }
  .summary-card{ position:static; }
}



/* ---- Quick order failure notice ---- */
.qo-error{
  background:#faeaea; border:1px solid #e3b8b8;
  border-radius:var(--radius-sm);
  padding:var(--s-3); margin-bottom:var(--s-3);
}
.qo-error strong{ display:block; color:#8b3a3a; font-size:var(--t-sm); margin-bottom:5px; }
.qo-error p{ margin:0 0 8px; font-size:12.5px; color:#7a3a3a; line-height:1.8; }
.qo-error a{ font-size:12.5px; color:#8b3a3a; border-bottom:1px solid currentColor; }

/* ---- Notice when the cart had to change ---- */
.cart-notice{
  background:#fdf4e7; border:1px solid #e8cfa4;
  border-radius:var(--radius-md); padding:var(--s-3) var(--s-4);
  margin-bottom:var(--s-4); font-size:var(--t-sm);
  color:#7a5218; line-height:1.9;
}
.cart-notice strong{ color:#5c3d10; }
.cart-notice ul{ margin:6px 0 0; padding-right:18px; }


/* ---- Order failure notice ---- */
.order-error{
  background:#faeaea; border:1px solid #e3b8b8;
  border-radius:var(--radius-md); padding:var(--s-4);
  margin-bottom:var(--s-4);
}
.order-error strong{ display:block; color:#8b3a3a; font-size:var(--t-md); margin-bottom:6px; }
.order-error p{ margin:0 0 var(--s-3); font-size:var(--t-sm); color:#7a3a3a; line-height:1.9; }
.order-error .acts{ display:flex; gap:var(--s-2); flex-wrap:wrap; }
.order-error .btn--ghost{ border-color:#c99; color:#8b3a3a; }

/* =========================================================
   Checkout page
   ========================================================= */
.checkout-layout{ display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; }
.form-card{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:30px;
  margin-bottom:24px;
}
.form-card h3{ font-family:var(--f-display); font-size:20px; margin:0 0 22px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field{ margin-bottom:18px; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ display:block; font-size:13px; margin-bottom:8px; color:var(--ink-soft); }
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:1px solid var(--line); border-radius:4px;
  padding:12px 14px; font-size:14px; background:var(--ivory); color:var(--ink);
}
.form-field textarea{ resize:vertical; min-height:80px; }
.pay-opt{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:6px;
  padding:16px; margin-bottom:12px; font-size:14px;
  cursor:pointer;
}
.pay-opt input{ accent-color:var(--gold-deep); }
.pay-opt.disabled{ opacity:.5; }
.pay-opt .tag{ margin-right:auto; font-size:11px; background:var(--warm-beige); padding:3px 10px; border-radius:20px; color:var(--gold-deep); }
.whatsapp-order{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#25D366; color:#fff; border:none; border-radius:2px;
  padding:15px; font-size:14px; font-weight:700; width:100%;
}
@media (max-width:860px){
  .checkout-layout{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   Confirmation page
   ========================================================= */
.confirm-wrap{ max-width:560px; margin:0 auto; text-align:center; padding:70px 20px; }
.confirm-icon{
  width:74px; height:74px; border-radius:50%;
  background:var(--warm-beige); color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 26px;
}
.confirm-icon svg{ width:34px; height:34px; }
.confirm-wrap h1{ font-family:var(--f-display); font-size:28px; margin:0 0 10px; }
.confirm-wrap .order-no{ color:var(--gold-deep); font-weight:700; margin-bottom:30px; }
.status-track{ display:flex; justify-content:space-between; margin:36px 0; position:relative; }
.status-track::before{ content:''; position:absolute; top:14px; right:5%; left:5%; height:1px; background:var(--line); }
.status-step{ position:relative; z-index:2; text-align:center; flex:1; }
.status-step .dot{ width:28px;height:28px;border-radius:50%; background:var(--ivory-2); border:1px solid var(--line); margin:0 auto 8px; display:flex;align-items:center;justify-content:center; font-size:14px; }
.status-step.active .dot{ background:var(--gold); border-color:var(--gold); }
.status-step span{ font-size:12px; color:var(--ink-soft); }
.status-step.active span{ color:var(--ink); font-weight:700; }
.order-summary-box{
  text-align:right; background:var(--ivory-2); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:22px; margin-top:30px;
}

/* =========================================================
   About / Contact pages
   ========================================================= */
.page-hero{
  background:var(--charcoal); color:var(--ivory);
  text-align:center; padding:70px 20px;
}
.page-hero .brand{ font-family:var(--f-logo); font-size:22px; color:var(--gold-light); letter-spacing:3px; margin:0 0 12px; }
.page-hero h1{ font-family:var(--f-display); font-size:clamp(28px,4vw,42px); margin:0; }

.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-grid img{ border-radius:var(--radius-lg); }
.about-grid h2{ font-family:var(--f-display); font-size:30px; margin:0 0 16px; }
.about-grid p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:16px; }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:20px; }
.value-card{ text-align:center; padding:30px 20px; background:var(--ivory-2); border-radius:var(--radius-md); }
.value-card svg{ width:30px;height:30px; color:var(--gold-deep); margin-bottom:14px; }
.value-card h4{ margin:0 0 8px; font-size:15px; }
.value-card p{ font-size:13px; color:var(--ink-soft); margin:0; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } .values-grid{ grid-template-columns:1fr; } }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.contact-info-card{ background:var(--charcoal); color:var(--ivory); border-radius:var(--radius-lg); padding:40px; }
.contact-info-card h3{ font-family:var(--f-display); font-size:24px; margin:0 0 20px; }
.contact-info-card ul li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; font-size:14px; color:var(--warm-beige); }
.contact-info-card svg{ width:18px;height:18px; color:var(--gold-light); flex:0 0 auto; margin-top:2px; }
.map-embed{ border-radius:var(--radius-md); overflow:hidden; margin-top:24px; border:1px solid rgba(255,255,255,.15); }
.faq-item{ border-bottom:1px solid var(--line); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* WhatsApp floating button */
.wa-float{
  position:fixed; bottom:26px; left:26px; z-index:300;
  width:56px;height:56px; border-radius:50%;
  background:#25D366; display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  color:#fff;
  transition:transform var(--transition);
}
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:28px;height:28px; }

/* Toast */
.toast{
  position:fixed; bottom:26px; right:26px; z-index:400;
  background:var(--charcoal); color:var(--ivory);
  padding:14px 22px; border-radius:6px; font-size:13.5px;
  transform:translateY(20px); opacity:0; pointer-events:none;
  transition:all var(--transition);
}
.toast.show{ transform:translateY(0); opacity:1; }

/* Utility */
.mt-0{margin-top:0} .center{text-align:center}
.text-muted{ color:var(--ink-soft); }

.pill.wait2{ background:#fdf1de; color:#8a5a1a; display:inline-block; padding:3px 11px; border-radius:20px; font-size:11.5px; }