/* ============ TOKENS ============ */
:root{
  --clay:        #B4502E;
  --clay-deep:   #8A3A21;
  --clay-light:  #D98B5F;
  --ink:         #2B231D;
  --ink-soft:    #55483E;
  --sand:        #EFE6D6;
  --sand-deep:   #E3D5BC;
  --porcelain:   #FBF8F2;
  --olive:       #6E7350;
  --line:        rgba(43,35,29,0.12);
  --shadow:      0 10px 30px rgba(43,35,29,0.14);
  --radius:      18px;
  --disp: 'Aref Ruqaa', 'Heebo', serif;
  --body: 'Tajawal', 'Heebo', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  font-family:var(--body);
  background:var(--porcelain);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-bottom:74px;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none; background:none; padding:0; margin:0; color:inherit; text-align:inherit; font-size:inherit;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:3px solid var(--clay); outline-offset:2px;}

/* ============ TEXTURE SWATCHES (signature element) ============ */
.tex-wood{
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 9px),
    linear-gradient(160deg,#8A5A34,#6B4224);
}
.tex-tile{
  background:
    radial-gradient(circle at 50% -10px, transparent 12px, rgba(0,0,0,0.10) 13px 14px, transparent 15px) 0 0/34px 26px repeat-x,
    linear-gradient(160deg,var(--clay-light),var(--clay-deep));
}
.tex-porcelain{
  background:
    radial-gradient(120% 60% at 20% 10%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(155deg,#F4EFE4,#D9CBB0);
  position:relative;
}
.tex-stone{
  background:
    radial-gradient(circle at 22% 30%, rgba(0,0,0,0.14) 0 3px, transparent 4px) 0 0/22px 22px,
    radial-gradient(circle at 65% 70%, rgba(255,255,255,0.18) 0 2px, transparent 3px) 0 0/26px 26px,
    linear-gradient(160deg,#8C8579,#5C564C);
}
.tex-marble{
  background:
    linear-gradient(115deg, transparent 40%, rgba(120,110,95,0.35) 41%, transparent 43%) 0 0/70px 70px,
    linear-gradient(35deg, transparent 55%, rgba(120,110,95,0.22) 56%, transparent 58%) 0 0/90px 90px,
    linear-gradient(160deg,#F7F3EA,#DED2BE);
}
.tex-metal{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 7px),
    linear-gradient(160deg,#AEB4B8,#6B7378);
}
.tex-glass{
  background:
    linear-gradient(120deg, rgba(255,255,255,0.55) 0%, transparent 30%),
    linear-gradient(160deg,#9FC7CE,#4E7C88);
  position:relative;
}
.tex-concrete{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10) 0 2px, transparent 3px) 0 0/18px 18px,
    radial-gradient(circle at 70% 65%, rgba(0,0,0,0.08) 0 2px, transparent 3px) 0 0/24px 24px,
    linear-gradient(160deg,#B7B2A9,#8A857B);
}
.tex-brick{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.14) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.14) 0 2px, transparent 2px 30px),
    linear-gradient(160deg,#A85A3F,#7A3A26);
}
.tex-bamboo{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.09) 0 3px, transparent 3px 20px),
    linear-gradient(160deg,#D9B978,#B8944F);
}
.tex-strip{
  display:flex; height:10px; width:100%;
}
.tex-strip span{flex:1;}

/* ============ TOP BAR ============ */
.announcement-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(20,16,12,0.6);
  align-items:center; justify-content:center; padding:20px;
}
.announcement-box{
  position:relative; background:var(--porcelain); border-radius:18px; overflow:hidden;
  max-width:380px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.announcement-box img{width:100%; display:block; aspect-ratio:1/1; object-fit:cover;}
.announcement-content{padding:18px 20px 22px; text-align:center;}
.announcement-content h3{font-family:var(--disp); font-size:20px; margin-bottom:6px; color:var(--ink);}
.announcement-content p{font-size:13.5px; color:var(--ink-soft); margin-bottom:14px; line-height:1.7;}
.announcement-content .btn{width:100%; justify-content:center;}
.announcement-close{
  position:absolute; top:10px; inset-inline-end:10px; z-index:2;
  width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,0.45); color:#fff; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

.promo-banner{
  background:var(--clay); color:#fff; text-align:center; padding:9px 12px;
}
.promo-banner-inner{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  max-width:1100px; margin:0 auto; font-size:13px; font-weight:700;
}
.promo-banner-countdown{
  display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,0.18);
  border-radius:999px; padding:3px 12px; font-size:12px; font-weight:700;
}

.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  background:var(--porcelain-translucent, rgba(251,248,242,0.92));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0; flex:1; overflow:visible;}
.brand-mark{
  width:var(--logo-size, 68px); height:44px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:visible;
}
.brand-mark img{
  width:var(--logo-size, 68px); height:var(--logo-size, 68px);
  object-fit:contain; max-width:none;
}
.brand-text{overflow:hidden; min-width:0;}
.brand-name{font-family:var(--disp); font-size:38px; color:var(--ink); font-weight:700; line-height:1.5; padding-top:6px; white-space:nowrap; overflow:visible; text-overflow:ellipsis; max-width:100%; display:block;}
.brand-sub{font-size:13px; letter-spacing:1.5px; color:var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media(max-width:420px){
  .brand-mark{width:calc(var(--logo-size, 68px) * 0.7); height:36px;}
  .brand-mark img{width:calc(var(--logo-size, 68px) * 0.7); height:calc(var(--logo-size, 68px) * 0.7);}
  .brand-name{font-size:21px;}
  .brand-sub{display:none;}
  .topbar{padding:10px 14px;}
}
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); background:var(--sand);
}
.icon-btn svg{width:18px; height:18px;}

/* على الموبايل، أيقونات الحساب/المفضلة/السلة تنتقل لشريط التنقل السفلي بدل الهيدر — يبقى الهيدر بسيط (لوجو + لغة بس) */
.mobile-hide-icon{display:none;}

.lang-switcher{position:relative; flex-shrink:0;}
.lang-switcher-btn{
  display:flex; align-items:center; gap:6px;
  padding:9px 13px; border-radius:999px; background:var(--sand); color:var(--ink);
  font-size:12.5px; font-weight:700;
}
.lang-switcher-btn svg{width:15px; height:15px; flex-shrink:0;}
.lang-switcher-btn .chev{width:11px; height:11px; transition:transform .18s ease;}
.lang-switcher.open .lang-switcher-btn .chev{transform:rotate(180deg);}
.lang-switcher.open .lang-switcher-btn{background:var(--ink); color:var(--porcelain);}
.lang-switcher-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60;
  background:var(--porcelain); border-radius:14px; box-shadow:var(--shadow);
  min-width:130px; overflow:hidden; padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.lang-switcher.open .lang-switcher-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-switcher-menu a{
  display:block; padding:10px 14px; border-radius:9px; font-size:13px; font-weight:700;
  color:var(--ink-soft); text-align:start;
}
.lang-switcher-menu a:hover{background:var(--sand);}
.lang-switcher-menu a.active{background:var(--clay); color:#fff;}

/* ============ SEARCH ============ */
.search-wrap{padding:0 18px; margin-top:10px; display:none;}
.search-wrap.open{display:block;}
.search-box{
  display:flex; align-items:center; gap:8px;
  background:var(--sand); border-radius:999px; padding:10px 16px;
}
.search-box input{
  flex:1; background:none; border:none; font-family:var(--body);
  font-size:15px; color:var(--ink);
}
.search-box svg{width:16px; height:16px; color:var(--ink-soft); flex-shrink:0;}

/* ============ HERO BANNER SLIDER ============ */
.btn{
  padding:13px 24px; border-radius:999px; font-weight:700; font-size:14.5px;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{background:var(--ink); color:var(--porcelain);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}

.banner{position:relative; overflow:hidden;}
.banner-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;}
.banner-track::-webkit-scrollbar{display:none;}
.banner-slide{
  flex:0 0 100%; scroll-snap-align:start; position:relative;
  min-height:58vw; max-height:340px; display:flex; align-items:flex-end; padding:22px 20px;
  overflow:hidden;
}
.banner-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.banner-slide::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(20,14,10,0.78), rgba(20,14,10,0.08) 60%);
}
.banner-copy{position:relative; z-index:2; color:#fff;}
.banner-eyebrow{
  font-size:11.5px; letter-spacing:3px; font-weight:700; opacity:.9;
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.banner-eyebrow::before{content:''; width:20px; height:2px; background:#fff;}
.banner-copy h1{
  font-family:var(--disp); font-weight:700; font-size:26px; line-height:1.25; margin-bottom:8px;
}
.banner-copy h1 em{font-style:normal; color:var(--clay-light);}
.banner-copy p{font-size:12.5px; line-height:1.6; opacity:.92; max-width:40ch; margin-bottom:12px;}
.banner-ctas{display:flex; gap:8px; flex-wrap:wrap;}
.banner-ctas .btn{padding:11px 20px; font-size:13px;}
.banner-ctas .btn-ghost{border-color:rgba(255,255,255,0.5); color:#fff;}

/* دخول نص البانر وأزراره: العنوان ثم الوصف ثم الأزرار واحد ورا التاني.
   يشتغل فقط لما js-reveal مفعّل (المتصفح يدعمه والزبون ما طلب تقليل الحركة)، وبدونه النص يظهر عادي.
   استخدمنا backwards (مش forwards) عشان بعد ما تخلص الحركة يرجع العنصر لستايله الأصلي فتضل حركات الضغط على الأزرار شغّالة. */
@keyframes banner-rise{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:var(--rise-op, 1); transform:none;}
}
.js-reveal .banner-slide.active-slide .banner-copy h1,
.js-reveal .banner-slide.active-slide .banner-copy p,
.js-reveal .banner-slide.active-slide .banner-ctas .btn{
  animation:banner-rise .7s cubic-bezier(.2,.8,.2,1) backwards;
}
.js-reveal .banner-copy p{--rise-op:.92;}
.js-reveal .banner-slide.active-slide .banner-copy h1{animation-delay:.08s;}
.js-reveal .banner-slide.active-slide .banner-copy p{animation-delay:.24s;}
.js-reveal .banner-slide.active-slide .banner-ctas .btn:nth-child(1){animation-delay:.4s;}
.js-reveal .banner-slide.active-slide .banner-ctas .btn:nth-child(2){animation-delay:.52s;}
/* شرائح البانر غير النشطة: نصها مخفي لحد ما تصير نشطة، ويتلاشى بنعومة لما تغادر */
.js-reveal .banner-copy > *{transition:opacity .3s ease;}
.js-reveal .banner-slide:not(.active-slide) .banner-copy > *{opacity:0;}

.banner-dots{
  position:absolute; bottom:14px; inset-inline-start:0; inset-inline-end:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.banner-dot{
  width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,0.5); transition:all .2s ease;
}
.banner-dot.active{background:#fff; width:20px; border-radius:4px;}

/* ============ SECTION HEAD ============ */
.section{padding:34px 18px 6px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:18px;}
.section-title{font-family:var(--disp); font-size:26px; font-weight:700;}
.section-note{font-size:12.5px; color:var(--ink-soft);}

/* ============ CATEGORIES — HORIZONTAL SCROLL ============ */
.cat-scroll{
  display:flex; align-items:flex-start; gap:12px; overflow-x:auto; padding:12px 4px 8px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.cat-scroll::-webkit-scrollbar{display:none;}
.cat-card{
  flex:0 0 132px; scroll-snap-align:start; text-align:start;
  background:var(--porcelain); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:border-color .2s ease, transform .15s ease;
}
.cat-card:active{transform:scale(0.97);}
.cat-card-swatch{display:block; width:100%; aspect-ratio:1/1; background-size:cover; background-position:center;}
.cat-card-name{
  display:block; font-family:var(--disp); font-size:14.5px; font-weight:700; color:var(--ink);
  padding:9px 11px 2px; line-height:1.25;
}
.cat-card-count{
  display:block; font-size:10.5px; color:var(--ink-soft); padding:0 11px 10px;
}
/* بطاقة فئة الصفحة الرئيسية لما تكون رابط (فئة عندها فروع) */
a.cat-card{display:block; text-decoration:none; color:inherit;}

/* صف "تسوّق حسب الفئة": بطاقات صغيرة بصورة واسم لفروع الفئة، فوق المنتجات */
.subcat-wrap{margin:2px 0 12px;}
.subcat-label{font-size:12px; font-weight:700; color:var(--ink-soft); margin:0 2px 8px;}
.subcat-row{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.subcat-row::-webkit-scrollbar{display:none;}
.subcat-card{flex:0 0 78px; text-align:center; background:none; border:0; padding:0; cursor:pointer; font-family:inherit; color:inherit;}
.subcat-thumb{display:block; width:78px; height:78px; border-radius:16px; background-size:cover; background-position:center; border:1px solid var(--line); transition:transform .15s ease;}
.subcat-card:active .subcat-thumb{transform:scale(0.96);}
.subcat-card.active .subcat-thumb{border:2px solid var(--clay); box-shadow:0 0 0 3px rgba(180,80,46,0.15);}
.subcat-name{display:block; font-size:12px; font-weight:700; margin-top:6px; line-height:1.3; color:var(--ink);}
.subcat-card.active .subcat-name{color:var(--clay-deep, var(--clay));}
.subcat-count{display:block; font-size:10.5px; color:var(--ink-soft); margin-top:1px;}
@media(min-width:720px){ .subcat-card{flex-basis:96px;} .subcat-thumb{width:96px; height:96px;} .subcat-name{font-size:13px;} }

/* مسار التصفّح (الرئيسية › رجالي › بناطيل) */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); margin-bottom:14px;}
.crumbs a{color:var(--ink-soft); text-decoration:none;}
.crumbs a:hover{color:var(--clay);}
.crumbs .crumb-sep{opacity:.5;}
.crumbs .crumb-current{color:var(--ink); font-weight:700;}

/* صفحة فئة فيها فروع: بطاقات كبيرة لكل فرع */
.cat-tile-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px;}
.cat-tile{
  position:relative; display:block; aspect-ratio:3/4; border-radius:14px; overflow:hidden;
  background:var(--sand); border:1px solid var(--line); text-decoration:none; color:#fff;
  transition:transform .15s ease;
}
.cat-tile:active{transform:scale(0.98);}
.cat-tile-img{position:absolute; inset:0; background-size:cover; background-position:center;}
.cat-tile-label{
  position:absolute; inset-inline:0; bottom:0; padding:34px 14px 14px;
  background:linear-gradient(to top, rgba(20,14,10,0.74), rgba(20,14,10,0));
}
.cat-tile-name{display:block; font-family:var(--disp); font-weight:800; font-size:16px; line-height:1.3;}
.cat-tile-count{display:block; font-size:12px; opacity:0.88; margin-top:2px;}
@media(min-width:720px){ .cat-tile-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;} }

@media(max-width:520px){
  .cat-card{flex-basis:112px;}
  .cat-card-name{font-size:13px;}
}

/* ============ PRODUCT GRID ============ */
.search-box{
  display:flex; align-items:center; gap:9px; background:var(--porcelain);
  border:1.5px solid var(--line); border-radius:999px; padding:11px 16px; margin-bottom:14px;
  transition:border-color .15s ease;
}
.search-box:focus-within{border-color:var(--clay);}
.search-box svg{width:17px; height:17px; color:var(--ink-soft); flex-shrink:0;}
.search-box input{
  flex:1; border:none; background:none; outline:none; font-family:var(--body);
  font-size:14px; color:var(--ink); min-width:0;
}
.search-box input::-webkit-search-cancel-button{cursor:pointer;}
.chip-row{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 4px; margin-bottom:6px; scrollbar-width:none;}

/* تلميح بصري (يد قابضة) على الكمبيوتر فقط — يوضح إن القائمة تُسحب بالماوس، بدون ما يأثر على تجربة اللمس بالموبايل */
@media (hover:hover) and (pointer:fine) {
  .chip-row, .mini-strip, .cat-scroll, .banner-track, .lightbox-track{cursor:grab; user-select:none;}
  .chip-row.mouse-dragging, .mini-strip.mouse-dragging, .cat-scroll.mouse-dragging,
  .banner-track.mouse-dragging, .lightbox-track.mouse-dragging{cursor:grabbing;}
}
.chip-row::-webkit-scrollbar{display:none;}
.chip{
  flex-shrink:0; padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:var(--sand); color:var(--ink-soft); white-space:nowrap;
}
.chip.active{background:var(--ink); color:var(--porcelain);}
.chip-sale{background:var(--clay); color:#fff;}
.chip-sale.active{background:var(--ink);}

.chip-row-sub{padding-inline-start:14px;}
.chip-sub{
  padding:6px 14px; font-size:12px; font-weight:600;
  background:transparent; color:var(--ink-soft); border:1.5px solid var(--line);
}
.chip-sub.active{background:var(--clay); color:#fff; border-color:var(--clay);}

.delivery-method-toggle{display:flex; gap:10px; margin-bottom:14px;}
.delivery-method-option{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 10px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--porcelain); cursor:pointer; text-align:center;
  transition:border-color .15s ease, background .15s ease;
}
.delivery-method-option input{position:absolute; opacity:0; pointer-events:none; width:0; height:0;}
.delivery-method-option svg{width:22px; height:22px; color:var(--ink-soft); transition:color .15s ease;}
.delivery-method-option span{font-size:12.5px; font-weight:700; color:var(--ink-soft); transition:color .15s ease;}
.delivery-method-option.active{background:var(--clay); border-color:var(--clay);}
.delivery-method-option.active svg,
.delivery-method-option.active span{color:#fff;}

.prod-grid{display:grid; grid-template-columns:repeat(var(--prod-cols-mobile, 3), 1fr); gap:8px; margin-top:12px;}
.prod-card{
  background:var(--porcelain); border-radius:12px; overflow:hidden;
  border:1px solid var(--line); text-align:start;
}
.prod-thumb{aspect-ratio:1/1; position:relative;}

/* ============ حركات خفيفة: ظهور المنتجات بالتدرّج + نبضات السلة والمفضلة ============ */
/* الكلاس js-reveal يُضاف من JavaScript فقط (وبس لو المتصفح يدعم الحركة والمستخدم ما طلب تقليلها)،
   فلو JS تعطّل أو الحركة معطّلة، المنتجات تظهر عادي بدون أي إخفاء */
.js-reveal .prod-card{
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.js-reveal .prod-card.rv-in{opacity:1; transform:none;}

@keyframes badge-bump{0%{transform:scale(1);} 40%{transform:scale(1.55);} 100%{transform:scale(1);}}
.badge-bump{animation:badge-bump .45s ease;}

@keyframes icon-wiggle{
  0%{transform:rotate(0) scale(1);} 25%{transform:rotate(-12deg) scale(1.15);}
  55%{transform:rotate(9deg) scale(1.1);} 100%{transform:rotate(0) scale(1);}
}
.cart-bump svg{animation:icon-wiggle .5s ease;}

@keyframes heart-pop{0%{transform:scale(1);} 40%{transform:scale(1.4);} 70%{transform:scale(.88);} 100%{transform:scale(1);}}
.fav-heart.pop svg{animation:heart-pop .42s ease;}

@keyframes cart-ring{0%{box-shadow:0 0 0 0 rgba(180,80,46,0.55);} 100%{box-shadow:0 0 0 13px rgba(180,80,46,0);}}
.quick-add-btn.pulse{animation:cart-ring .55s ease-out;}

/* انزلاق معرض صور المنتج عند تبديل اللون (المسافة --gal-x يحددها JavaScript حسب الاتجاه) */
@keyframes gal-slide-out{from{opacity:1; transform:none;} to{opacity:0; transform:translateX(calc(var(--gal-x, 48px) * -1));}}
@keyframes gal-slide-in{from{opacity:0; transform:translateX(var(--gal-x, 48px));} to{opacity:1; transform:none;}}
.gallery-grid.gal-out{animation:gal-slide-out .17s ease-in forwards;}
.gallery-grid.gal-in{animation:gal-slide-in .32s cubic-bezier(.2,.8,.2,1);}

@media (prefers-reduced-motion: reduce){
  .badge-bump, .cart-bump svg, .fav-heart.pop svg, .quick-add-btn.pulse, .gallery-grid.gal-out, .gallery-grid.gal-in{animation:none;}
}

/* ============ SKELETON LOADING ============ */
.skeleton-card{pointer-events:none;}
.skeleton-shimmer{
  background:linear-gradient(90deg, var(--sand) 25%, var(--sand-deep) 37%, var(--sand) 63%);
  background-size:400% 100%;
  animation:skeleton-shimmer 1.4s ease infinite;
  border-radius:8px;
}
.prod-thumb.skeleton-shimmer{border-radius:0;}
.skeleton-line{height:9px;}
@keyframes skeleton-shimmer{
  0%{background-position:100% 50%;}
  100%{background-position:0 50%;}
}
@media (prefers-reduced-motion: reduce){
  .skeleton-shimmer{animation:none; background:var(--sand);}
}
.prod-thumb .media-badge{
  position:absolute; bottom:5px; inset-inline-start:5px; background:rgba(20,14,10,0.55); color:#fff;
  font-size:8.5px; padding:2px 6px; border-radius:999px; display:flex; align-items:center; gap:3px;
}
.prod-thumb .media-badge svg{width:8px; height:8px;}
.prod-info{padding:7px 8px 10px;}
.prod-name{font-size:11.5px; font-weight:700; margin-bottom:2px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.prod-price-block{margin-bottom:4px;}
.prod-old-price{font-size:10px; text-decoration:line-through; color:var(--ink-soft); font-weight:500; line-height:1.3;}
.prod-price-row{display:flex; align-items:center; gap:6px;}
.prod-price{font-size:12.5px; font-weight:800; color:var(--clay-deep);}

/* ============ شريط بطاقات أفقي (منتجات مشابهة، الأكثر مبيعاً، شوهد مؤخراً) ============ */
.mini-strip{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:none;}
.mini-strip::-webkit-scrollbar{display:none;}
.mini-card{
  flex-shrink:0; width:118px; text-align:start; color:inherit; text-decoration:none;
}
.mini-card-thumb{
  width:118px; height:118px; border-radius:12px; overflow:hidden; background:var(--sand);
  display:flex; align-items:center; justify-content:center; margin-bottom:6px;
}
.mini-card-thumb img{width:100%; height:100%; object-fit:cover;}
.mini-card-thumb .ph{width:32px; height:32px; color:var(--ink-soft); opacity:.5;}
.mini-card-name{font-size:12px; font-weight:700; line-height:1.4; margin-bottom:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.mini-card-price{font-size:11.5px; font-weight:800; color:var(--clay-deep);}
.mini-card-lowstock{font-size:10.5px; font-weight:700; color:#B4502E; margin-top:2px;}
.qty-offer-badge{
  display:inline-block; background:#FBF1EC; color:var(--clay-deep, #8A3A21);
  font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:10px;
  margin-bottom:14px; border:1.5px dashed var(--clay, #B4502E);
}
.qty-offer-line-note{font-size:11px; font-weight:700; color:#2E7D4F; margin-bottom:6px;}

.mini-section{margin:26px 0;}
.mini-section-title{font-family:var(--disp); font-size:18px; font-weight:700; margin-bottom:4px;}
.prod-discount{
  display:inline-flex; align-items:center; background:var(--clay); color:#fff;
  font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:999px; line-height:1.3;
}
.stock-status{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; margin-bottom:4px;}
.stock-status .dot{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
.stock-status.limited{color:#9a6b1f;}
.stock-status.limited .dot{background:#E0A339;}
.stock-status.unavailable{color:#B4502E;}
.stock-status.unavailable .dot{background:#B4502E;}
.prod-badge{
  position:absolute; top:8px; inset-inline-start:8px; z-index:2;
  padding:4px 10px; border-radius:999px; font-size:10px; font-weight:700; color:#fff;
}
.prod-badge.featured{background:var(--clay);}
.prod-badge.new{background:var(--olive);}
.fav-heart{
  position:absolute; top:8px; inset-inline-end:8px; z-index:3;
  width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.85);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  box-shadow:0 2px 6px rgba(43,35,29,0.15); transition:transform .12s ease;
}
.fav-heart svg{width:15px; height:15px;}
.fav-heart:active{transform:scale(0.88);}
.fav-heart.active{color:var(--clay);}
.fav-heart.active svg{fill:var(--clay);}

.quick-add-btn{
  position:absolute; top:8px; inset-inline-start:8px; z-index:3;
  width:28px; height:28px; border-radius:50%; background:var(--clay); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 2px 6px rgba(43,35,29,0.2); transition:transform .12s ease, background .15s ease;
}
.quick-add-btn svg{width:15px; height:15px;}
.quick-add-btn:active{transform:scale(0.88);}
.quick-add-btn.added{background:#2E7D4F;}
.prod-desc{font-size:9.5px; color:var(--ink-soft); line-height:1.4; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.prod-cta{font-size:10px; font-weight:700; color:var(--clay-deep); display:flex; align-items:center; gap:3px;}
.prod-cta svg{width:10px; height:10px;}
.empty-state{padding:40px 10px; text-align:center; color:var(--ink-soft); font-size:14px;}

/* ============ FORM FIELDS (public-facing, e.g. cart checkout) ============ */
.alert{padding:12px 16px; border-radius:10px; font-size:13.5px; text-align:start;}
.alert-error{background:#FBE7E1; color:#8A3A21; border:1px solid #E9C3B4;}
.alert-success{background:#E9EFE0; color:#4B5236; border:1px solid #CBD8B4;}

.pub-field{margin-bottom:16px; text-align:start;}
.pub-field label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:7px;}
.pub-field input, .pub-field textarea, .pub-field select{
  display:block; width:100%; box-sizing:border-box; padding:13px 15px; border-radius:12px; border:1.5px solid var(--line);
  font-family:var(--body); font-size:14px; background:var(--porcelain); color:var(--ink);
  transition:border-color .15s ease;
}
.pub-field textarea{resize:none; min-height:90px; line-height:1.6;}
.pub-field input:focus, .pub-field textarea:focus, .pub-field select:focus{outline:none; border-color:var(--clay);}
.pub-field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-inline-end:38px; cursor:pointer;
}
.select-wrap{position:relative;}

/* ============ شارة المتغير المدمجة (لون + حجم) — للسلة والفاتورة ============ */
.variant-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--ink-soft);
}
.variant-badge .dot{
  width:12px; height:12px; border-radius:50%; border:1.5px solid rgba(0,0,0,.15); flex-shrink:0;
}
.variant-badge + .variant-badge{margin-inline-start:10px; padding-inline-start:10px; border-inline-start:1px solid var(--line);}

.color-swatch{
  width:38px; height:38px; border-radius:50%; border:2px solid var(--line);
  cursor:pointer; padding:0; position:relative; transition:transform .12s ease, border-color .12s ease;
  flex-shrink:0;
}
.color-swatch.color-swatch-img{width:52px; height:52px; border-radius:12px;}
.color-swatch:hover{transform:scale(1.08);}
.color-swatch.active{border-color:var(--clay); box-shadow:0 0 0 2px var(--porcelain), 0 0 0 4px var(--clay);}
.color-swatch:disabled{opacity:.35; cursor:not-allowed; transform:none;}

.size-pill{
  padding:10px 20px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--porcelain); color:var(--ink); font-family:var(--body);
  font-size:13.5px; font-weight:700; cursor:pointer; transition:all .12s ease;
}
.size-pill:hover:not(:disabled){border-color:var(--clay);}
.size-pill.active{background:var(--clay); border-color:var(--clay); color:#fff;}
.size-pill:disabled{opacity:.4; cursor:not-allowed;}
.select-wrap::after{
  content:''; position:absolute; inset-inline-end:16px; top:50%;
  width:8px; height:8px; pointer-events:none;
  border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
  transform:translateY(-65%) rotate(45deg);
}
.checkout-card{
  background:var(--sand); border-radius:18px; padding:20px 18px 6px; margin-bottom:18px;
}
.checkout-card-title{font-family:var(--disp); font-size:17px; font-weight:700; margin-bottom:16px;}
.pub-field.required label::after{content:' *'; color:var(--clay);}

/* ============ ABOUT / STRIP ============ */
.about{
  margin:34px 18px; padding:26px 20px; border-radius:var(--radius);
  background:var(--ink); color:var(--porcelain);
}
.about h3{font-family:var(--disp); font-size:22px; margin-bottom:10px;}
.about p{font-size:14px; line-height:1.9; color:#DCD3C6;}

/* ============ FOOTER ============ */
footer{padding:30px 18px 20px; text-align:center;}
.footer-brand{font-family:var(--disp); font-size:20px; margin-bottom:6px;}
.footer-line{font-size:12.5px; color:var(--ink-soft); margin-bottom:14px;}
.footer-links{display:flex; justify-content:center; gap:16px; margin-bottom:16px;}
.footer-links a{
  width:38px; height:38px; border-radius:50%; background:var(--sand);
  display:flex; align-items:center; justify-content:center;
}
.footer-links svg{width:16px; height:16px;}
.footer-copy{font-size:11px; color:#9a8f80;}

.footer-map{
  max-width:480px; margin:0 auto 20px; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line);
}
.footer-map iframe{width:100%; height:200px; border:0; display:block;}
.footer-map-link{
  display:block; padding:11px; background:var(--porcelain); font-size:12.5px; font-weight:700;
  color:var(--clay-deep); text-decoration:underline;
}

/* ============ BOTTOM NAV ============ */
.bottom-nav{
  position:fixed; bottom:0; right:0; left:0; z-index:50;
  display:flex; background:var(--porcelain); border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bn-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; color:var(--ink-soft); padding:4px; border-radius:12px;
}
.bn-item svg{width:20px; height:20px;}
.bn-item.active{color:var(--clay-deep);}

/* ============ PRODUCT DETAIL OVERLAY ============ */
.overlay{
  position:fixed; inset:0; z-index:100; background:var(--porcelain);
  transform:translateY(100%); transition:transform .38s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto;
}
.overlay.open{transform:translateY(0);}
.ov-topbar{
  position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; background:rgba(251,248,242,0.9); backdrop-filter:blur(8px);
}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:22px;}
.gallery-item{
  aspect-ratio:1/1; border-radius:12px; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.gallery-item .media-badge{
  position:absolute; bottom:6px; inset-inline-start:6px; background:rgba(20,14,10,0.55); color:#fff;
  font-size:9px; padding:2px 7px; border-radius:999px; display:flex; align-items:center; gap:3px;
}
.gallery-item .media-badge svg{width:9px; height:9px;}
.gallery-label{font-size:11.5px; font-weight:700; color:var(--clay-deep); letter-spacing:.5px; margin-bottom:10px;}

/* ============ FULLSCREEN LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(18,13,9,0.97);
  display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox-top{display:flex; justify-content:space-between; align-items:center; padding:14px 16px;}
.lightbox-count{color:#fff; font-size:13px; font-weight:700;}
.lightbox-close{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close svg{width:18px; height:18px;}
.lightbox-track{flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; align-items:center;}
.lightbox-track::-webkit-scrollbar{display:none;}
.lightbox-slide{
  flex:0 0 100%; scroll-snap-align:start; height:100%;
  display:flex; align-items:center; justify-content:center; padding:0 18px;
}
.lightbox-slide video{max-width:100%; max-height:100%; border-radius:8px; object-fit:contain;}
.lightbox-slide .ph{color:rgba(255,255,255,0.85); width:100%; height:60vw; max-height:320px; border-radius:12px;}

.ov-body{padding:22px 18px 40px;}
.ov-cat{font-size:11.5px; font-weight:700; color:var(--clay-deep); letter-spacing:1px; margin-bottom:6px;}
.ov-title{font-family:var(--disp); font-size:28px; font-weight:700; margin-bottom:10px;}
.ov-price{font-size:19px; font-weight:700; color:var(--clay-deep); margin-bottom:14px;}
.ov-desc{font-size:14.5px; line-height:1.9; color:var(--ink-soft); margin-bottom:22px;}
.spec-table{width:100%; border-collapse:collapse; margin-bottom:26px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:11px 4px; font-size:13.5px;}
.spec-table td:first-child{color:var(--ink-soft); width:38%;}
.spec-table td:last-child{font-weight:700;}
.ov-actions{display:flex; gap:10px; position:sticky; bottom:0; padding:14px 0 6px; background:linear-gradient(0deg, var(--porcelain) 60%, transparent);}
.ov-actions .btn{flex:1; justify-content:center;}

/* placeholder media fill */
.ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px; color:rgba(255,255,255,0.85); text-align:center; padding:14px;
}
.ph svg{width:26px; height:26px;}
.ph span{font-size:11px; line-height:1.5;}
.prod-thumb .ph svg{width:18px; height:18px;}
.prod-thumb .ph span{font-size:8px;}

/* ============ RESPONSIVE (tablet/desktop) ============ */
@media(min-width:720px){
  body{padding-bottom:0;}
  .bottom-nav{display:none;}
  .mobile-hide-icon{display:flex;}
  .banner-slide{min-height:26vw; max-height:360px;}
  .banner-copy h1{font-size:36px;}
  .section{padding:44px 40px 6px;}
  .prod-grid{grid-template-columns:repeat(var(--prod-cols-desktop, 6), 1fr);}
  .about{margin:44px 40px;}
  .footer-links{margin-bottom:16px;}
  .ov-body{padding:30px 60px 60px; max-width:900px; margin:0 auto;}
  .gallery-grid{grid-template-columns:repeat(4,1fr);}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}


/* ============ خيارات الطبق (مطاعم) ============ */
.dish-options{margin:14px 0 6px;}
.opt-group{border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:10px; background:#fff;}
.opt-group.opt-missing{border-color:var(--clay); box-shadow:0 0 0 3px rgba(180,80,46,0.12);}
.opt-group-head{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.opt-group-name{font-weight:800; font-size:14px;}
.opt-badge{font-size:10.5px; padding:2px 8px; border-radius:999px; background:var(--sand); color:var(--ink-soft);}
.opt-badge.req{background:var(--clay); color:#fff;}
.opt-hint{font-size:11.5px; color:var(--ink-soft); margin-inline-start:auto;}
.opt-item{display:flex; align-items:center; gap:10px; padding:9px 4px; border-top:1px solid var(--line); cursor:pointer; font-size:13.5px;}
.opt-item:first-of-type{border-top:0;}
.opt-item input{width:18px; height:18px; flex-shrink:0; accent-color:var(--clay);}
.opt-item .opt-name{flex:1;}
.opt-item .opt-price{font-size:12.5px; font-weight:700; color:var(--clay-deep, var(--clay)); white-space:nowrap;}
.opt-item.sold{opacity:0.5; cursor:not-allowed;}
.opt-note{margin-top:4px;}
.opt-note label{display:block; font-size:12.5px; font-weight:700; margin-bottom:5px;}
.opt-note textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-family:inherit; font-size:13px; resize:vertical;}
.opt-total{margin-top:10px; font-weight:800; font-size:14.5px;}
.cart-line-options{font-size:11.5px; color:var(--ink-soft); margin:2px 0 6px; line-height:1.6;}
.cart-line-note{font-size:11.5px; margin:2px 0 6px; font-weight:700;}
.resto-status-bar{display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px; font-size:13px; font-weight:700; text-align:center;}
.resto-status-bar.open{background:#E8F3E6; color:#2E6B2A;}
.resto-status-bar.closed, .resto-status-bar.paused{background:#FBE9E3; color:#8A3A21;}
.resto-status-dot{width:9px; height:9px; border-radius:50%; background:currentColor; flex-shrink:0;}
.order-type-opt{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; margin-bottom:8px; background:#fff;}
.order-type-opt.active{border-color:var(--clay); background:#FBF1EC;}
.order-type-opt input{accent-color:var(--clay); width:18px; height:18px;}