/* ============ 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;}
}


/* ============ خيارات الطبق (مطاعم) ============ */
.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;}

/* عدّاد كمية لاختيارات الأطباق (جبنة ×2) */

/* ============ خيارات الأطباق: تصميم احترافي (بطاقات، تحديد واضح، عدّاد كمية، إجمالي ثابت) ============ */
.dish-options{margin:18px 0 8px; display:flex; flex-direction:column; gap:14px;}
.opt-group{background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:border-color .2s, box-shadow .2s;}
.opt-group.opt-missing{border-color:var(--clay); box-shadow:0 0 0 4px rgba(180,80,46,.14);}
.opt-group-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px 13px;}
.og-titles{display:flex; flex-direction:column; gap:3px; min-width:0;}
.opt-group-name{font-weight:800; font-size:16px; line-height:1.3; color:var(--ink);}
.opt-hint{font-size:12px; color:var(--ink-soft);}
.og-meta{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.opt-badge{font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:999px; background:var(--sand); color:var(--ink-soft); white-space:nowrap;}
.opt-badge.req{background:var(--clay); color:#fff;}
.opt-count{font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink); font-variant-numeric:tabular-nums;}
.opt-count.full{background:var(--ink); border-color:var(--ink); color:#fff;}
.opt-list{border-top:1px solid var(--line);}
.opt-item{display:flex; align-items:center; gap:14px; padding:12px 18px; min-height:60px; cursor:pointer; border-top:1px solid var(--line); transition:background .15s; -webkit-tap-highlight-color:transparent;}
.opt-item:first-child{border-top:0;}
.opt-item.is-on, .opt-item.has-qty{background:var(--sand);}
@supports (background: color-mix(in srgb, red 10%, white)){ .opt-item.is-on, .opt-item.has-qty{background:color-mix(in srgb, var(--clay) 8%, #fff);} }
.opt-main{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
.opt-name{font-size:15px; font-weight:600; line-height:1.4; color:var(--ink);}
.opt-item.is-on .opt-name, .opt-item.has-qty .opt-name{font-weight:800;}
.opt-price{font-size:12.5px; font-weight:700; color:var(--clay-deep, var(--clay)); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;}
.opt-sold{font-size:11px; font-weight:700; color:#fff; background:var(--ink-soft); padding:2px 9px; border-radius:999px;}
.opt-item.sold{opacity:.55; cursor:not-allowed;}
/* مربع/دائرة اختيار مخصّصة */
.opt-item input{-webkit-appearance:none; appearance:none; width:24px; height:24px; flex-shrink:0; margin:0; border:2px solid #c9c1b4; background:#fff; position:relative; cursor:inherit; transition:background .15s, border-color .15s;}
.opt-item input[type=radio]{border-radius:50%;}
.opt-item input[type=checkbox]{border-radius:8px;}
.opt-item input:checked{background:var(--clay); border-color:var(--clay);}
.opt-item input[type=radio]:checked::after{content:''; position:absolute; inset:5px; border-radius:50%; background:#fff;}
.opt-item input[type=checkbox]:checked::after{content:''; position:absolute; left:50%; top:50%; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:translate(-50%,-58%) rotate(45deg);}
.opt-item input:disabled{background:var(--sand); border-color:var(--line);}
.opt-item input:disabled:checked{background:var(--ink-soft); border-color:var(--ink-soft);}
.opt-item input:focus-visible{outline:3px solid rgba(180,80,46,.35); outline-offset:2px;}
/* عدّاد الكمية: بالصفر زر (+) فقط، وبعد الإضافة بيتحوّل لقرص (− 2 +) */
.opt-item.opt-qty{cursor:default;}
.opt-stepper{display:inline-flex; align-items:center; flex-shrink:0; border-radius:999px; padding:3px; direction:ltr; transition:background .2s, box-shadow .2s;}
.opt-stepper button{position:relative; width:38px; height:38px; border-radius:50%; border:0; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; background:transparent; color:var(--clay); transition:background .15s, color .15s, transform .1s; -webkit-tap-highlight-color:transparent;}
.opt-stepper button i{position:relative; width:16px; height:16px; display:block;}
.opt-stepper button i::before, .opt-stepper button i::after{content:''; position:absolute; background:currentColor; border-radius:2px;}
.opt-stepper button i::before{left:0; right:0; top:50%; height:2.5px; transform:translateY(-50%);}
.opt-stepper .qty-plus i::after{top:0; bottom:0; left:50%; width:2.5px; transform:translateX(-50%);}
.opt-stepper .qty-plus{box-shadow:inset 0 0 0 1.5px var(--clay);}
.opt-stepper button:active:not(:disabled){transform:scale(.9);}
.opt-stepper button:disabled{opacity:.35; cursor:not-allowed;}
.opt-stepper .qty-val, .opt-stepper .qty-minus{display:none;}
.opt-stepper .qty-val{min-width:28px; justify-content:center; font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; color:var(--ink);}
.opt-qty.has-qty .opt-stepper{background:#fff; box-shadow:inset 0 0 0 1.5px var(--clay);}
.opt-qty.has-qty .opt-stepper .qty-val, .opt-qty.has-qty .opt-stepper .qty-minus{display:inline-flex;}
.opt-qty.has-qty .opt-stepper .qty-plus{background:var(--clay); color:#fff; box-shadow:none;}
.opt-qty.has-qty .opt-stepper .qty-plus:disabled{background:var(--ink-soft);}
/* ملاحظة الطبق */
.opt-note{background:#fff; border:1px solid var(--line); border-radius:20px; padding:16px 18px;}
.opt-note label{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; margin-bottom:10px; color:var(--ink);}
.opt-note label svg{color:var(--clay); flex-shrink:0;}
.opt-note textarea{width:100%; border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; font-family:inherit; font-size:14px; line-height:1.6; resize:none; min-height:78px; background:var(--sand); transition:border-color .15s, box-shadow .15s, background .15s;}
.opt-note textarea:focus{outline:0; border-color:var(--clay); background:#fff; box-shadow:0 0 0 4px rgba(180,80,46,.14);}
/* إجمالي الصنف: بطاقة داكنة بتضل ظاهرة فوق شريط التنقل وإنت بتختار */
.opt-total{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--ink); color:#fff; border-radius:18px; padding:15px 20px; position:sticky; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); z-index:6; box-shadow:0 10px 28px rgba(0,0,0,.2);}
.opt-total-label{font-size:14px; font-weight:600; opacity:.92;}
.opt-total-amount{font-size:21px; font-weight:800; direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums; white-space:nowrap;}
@media (min-width: 768px){ .opt-total{bottom:16px;} }

/* overflow-x:hidden على html وbody بيمنع position:sticky (مثل إجمالي الطبق الثابت). overflow-x:clip بيمنع التمرير الأفقي بنفس الشكل بدون ما يكسر التثبيت */
@supports (overflow-x: clip){
  html{overflow-x:clip;}
  body{overflow-x:clip;}
}

/* صفحة طبق بإجمالي ثابت: بنرفع زر المساعد العائم فوق البطاقة عشان ما يغطّي المبلغ */
@media (max-width: 767px){
  @supports selector(:has(*)){
    body:has(.opt-total) #faqBotWidget{bottom:calc(158px + env(safe-area-inset-bottom, 0px)) !important;}
  }
}

/* نافذة "إضافة قطعة ثانية" بالسلة (لطبق بإضافات) */
.aa-overlay{position:fixed; inset:0; z-index:400; background:rgba(30,22,16,.5); display:flex; align-items:flex-end; justify-content:center; animation:aaFade .2s ease;}
.aa-sheet{width:100%; max-width:520px; background:#fff; border-radius:24px 24px 0 0; padding:20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:10px; animation:aaUp .25s ease;}
.aa-head{padding:0 4px 6px;}
.aa-h{font-size:17px; font-weight:800; color:var(--ink);}
.aa-prod{font-size:13px; color:var(--ink-soft); margin-top:2px;}
.aa-opt{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:14px 16px; border-radius:16px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; text-align:start; font-family:inherit; transition:transform .1s, background .15s;}
.aa-opt:active{transform:scale(.98);}
.aa-opt.primary{background:var(--clay); border-color:var(--clay); color:#fff;}
.aa-main{display:flex; flex-direction:column; gap:3px; min-width:0;}
.aa-title{font-size:15px; font-weight:800;}
.aa-sub{font-size:12px; opacity:.85; line-height:1.5;}
.aa-price{font-size:14px; font-weight:800; white-space:nowrap; direction:ltr; unicode-bidi:isolate;}
.aa-change{justify-content:center; border-style:dashed; font-weight:800; color:var(--clay-deep, var(--clay));}
.aa-cancel{background:none; border:0; padding:10px; font-size:14px; color:var(--ink-soft); cursor:pointer; font-family:inherit; width:100%; text-align:center;}
@keyframes aaUp{from{transform:translateY(40px); opacity:0}to{transform:none; opacity:1}}
@keyframes aaFade{from{opacity:0}to{opacity:1}}
@media (min-width: 768px){ .aa-overlay{align-items:center;} .aa-sheet{border-radius:24px;} }

/* ============ جرّب اللوك (Shop the Look): عجلة دائرية ============ */
.looks-section{margin-block:6px 18px;}
.looks-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start;}
.looks-stage{position:relative; overflow:hidden; padding:10px 0 6px; background:radial-gradient(ellipse 48% 46% at 50% 50%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%);}
/* بدون مربع/إطار: الصور واقفة مباشرة على خلفية الصفحة (وهج أبيض ناعم خلف الأمامية بيتلاشى بالكامل قبل ما يوصل لحواف المنطقة، فما بيبين أي مستطيل). الأطراف بتتلاشى بنفس لون الصفحة بدل القص الحاد.
   تدرّج فوق الصور مش mask: أي mask/filter على أب الصور بيعزل mix-blend-mode وبيرجّع الخلفية البيضاء للصور المدموجة */
.looks-stage::before, .looks-stage::after{content:''; position:absolute; top:0; bottom:0; width:11%; z-index:300; pointer-events:none;}
.looks-stage::before{left:0; background:linear-gradient(90deg, var(--porcelain, #fbf8f2) 8%, rgba(251,248,242,0) 100%);}
.looks-stage::after{right:0; background:linear-gradient(270deg, var(--porcelain, #fbf8f2) 8%, rgba(251,248,242,0) 100%);}
@media (max-width: 899px){ .looks-stage{margin-inline:-18px;} }   /* موبايل: المنطقة بتتمدد لعرض الشاشة (حشوة القسم 18px) */
.looks-hint{text-align:center; font-size:12.5px; color:var(--ink-soft); margin:0 0 4px;}
/* الحلقة: كل صورة موضعها وحجمها بيتحسبوا بالـJS على دائرة (ellipse) */
.looks-ring{position:relative; width:100%; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; -webkit-tap-highlight-color:transparent;}
.looks-ring.dragging{cursor:grabbing;}
.look-card{position:absolute; left:50%; bottom:26px; margin:0; padding:0; border:0; background:none; cursor:pointer; transform-origin:50% 100%; will-change:transform, opacity, filter; font-family:inherit; color:var(--ink);}
.look-figure{position:relative; display:block; width:100%; height:100%;}
.look-figure img{width:100%; height:100%; display:block; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 14px 14px rgba(30,22,16,.16)); pointer-events:none; user-select:none; -webkit-user-drag:none;}
/* صورة بخلفية بيضاء: الدمج على البطاقة نفسها (مش على الصورة) عشان يضل شغّال مع التحويل 3D والشفافية */
.look-card.blend{mix-blend-mode:multiply;}
.look-card.blend .look-figure img{filter:none;}
.look-figure::after{content:''; position:absolute; bottom:-8px; left:8%; right:8%; height:14px; border-radius:50%; background:radial-gradient(closest-side, rgba(30,22,16,.22), transparent); z-index:-1;}
.look-card.is-selected .look-figure::after{background:radial-gradient(closest-side, var(--clay), transparent); opacity:.6; height:18px; bottom:-10px;}
.look-card:focus-visible{outline:3px solid rgba(180,80,46,.45); outline-offset:6px; border-radius:18px;}
.looks-caption{display:flex; flex-direction:column; align-items:center; gap:2px; min-height:42px; padding:6px 16px 2px; text-align:center;}
.looks-caption .lc-title{font-size:17px; font-weight:800; color:var(--ink);}
.looks-caption .lc-sub{font-size:12px; color:var(--ink-soft);}
.looks-caption.no-title .lc-title{display:none;}
.looks-dots{display:flex; justify-content:center; align-items:center; gap:7px; padding:6px 0 4px;}
.looks-dots button{width:9px; height:9px; padding:0; border:0; border-radius:99px; background:rgba(43,35,29,.22); cursor:pointer; transition:width .25s, background .25s;}
.looks-dots button.active{width:24px; background:var(--clay);}
@media (prefers-reduced-motion: reduce){ .looks-dots button{transition:none;} }

.look-panel{background:#fff; border:1px solid var(--line); border-radius:24px; padding:16px 16px 14px; box-shadow:var(--shadow, 0 10px 30px rgba(43,35,29,.12)); animation:lookIn .3s ease;}
.look-panel[hidden]{display:none;}
@keyframes lookIn{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}
.lp-loading{padding:30px 0; text-align:center; color:var(--ink-soft); font-size:14px;}
.lp-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:4px;}
.lp-title{font-size:17px; font-weight:800; color:var(--ink);}
.lp-count{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.lp-close{position:relative; flex-shrink:0; width:40px; height:40px; padding:0; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; transition:background .15s, color .15s, transform .1s, border-color .15s;}
.lp-close::before, .lp-close::after{content:''; position:absolute; left:50%; top:50%; width:16px; height:2.5px; margin:-1.25px 0 0 -8px; border-radius:2px; background:currentColor;}
.lp-close::before{transform:rotate(45deg);} .lp-close::after{transform:rotate(-45deg);}
.lp-close:hover{background:var(--ink); border-color:var(--ink); color:#fff;}
.lp-close:active{transform:scale(.92);}
.lp-close:focus-visible{outline:3px solid rgba(180,80,46,.45); outline-offset:2px;}
.lp-list{display:flex; flex-direction:column;}
.look-piece{display:grid; grid-template-columns:auto 64px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line); transition:background .2s, box-shadow .2s;}
.look-piece:first-child{border-top:0;}
.look-piece.is-off{opacity:.62;}
.look-piece.lp-missing{background:rgba(180,80,46,.07); box-shadow:0 0 0 2px var(--clay); border-radius:14px; border-color:transparent;}
.lp-thumb{display:block; width:64px; height:64px; border-radius:12px; object-fit:cover; background:var(--sand, #efe6d6);}
.lp-info{min-width:0;}
.lp-name{display:block; font-size:14px; font-weight:700; line-height:1.4; color:var(--ink);}
.lp-price-row{margin-top:2px; font-size:13px;}
.lp-price{font-weight:800; color:var(--clay-deep, var(--clay)); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;}
.lp-old{color:var(--ink-soft); font-size:12px; margin-inline-end:4px;}
.lp-variant{margin-top:7px; width:100%; max-width:240px; padding:8px 10px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font:inherit; font-size:13px; color:var(--ink);}
.lp-pill{display:inline-block; margin-top:6px; font-size:11px; font-weight:700; padding:2px 10px; border-radius:999px; background:var(--ink-soft); color:#fff;}
.lp-link{display:inline-block; margin-top:6px; font-size:12px; font-weight:700; text-decoration:underline; color:var(--clay-deep, var(--clay));}
.lp-check input{-webkit-appearance:none; appearance:none; width:24px; height:24px; margin:0; border:2px solid #c9c1b4; border-radius:8px; background:#fff; position:relative; cursor:pointer; transition:background .15s, border-color .15s;}
.lp-check input:checked{background:var(--clay); border-color:var(--clay);}
.lp-check input:checked::after{content:''; position:absolute; left:50%; top:50%; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:translate(-50%,-58%) rotate(45deg);}
.lp-check input:disabled{background:var(--sand, #efe6d6); border-color:var(--line); cursor:not-allowed;}
.lp-add{position:relative; width:40px; height:40px; border-radius:50%; border:0; padding:0; cursor:pointer; background:#fff; color:var(--clay); box-shadow:inset 0 0 0 1.5px var(--clay); transition:background .15s, color .15s, transform .1s; display:inline-flex; align-items:center; justify-content:center;}
.lp-add i{position:relative; width:16px; height:16px; display:block;}
.lp-add i::before, .lp-add i::after{content:''; position:absolute; background:currentColor; border-radius:2px;}
.lp-add i::before{left:0; right:0; top:50%; height:2.5px; transform:translateY(-50%);}
.lp-add i::after{top:0; bottom:0; left:50%; width:2.5px; transform:translateX(-50%);}
.lp-add:active{transform:scale(.9);}
.lp-add.done{background:#2E6B2A; color:#fff; box-shadow:none;}
.lp-add.done i::after{display:none;}
.lp-foot{margin-top:6px; padding-top:12px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:10px;}
.lp-total{display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--ink-soft);}
.lp-total strong{font-size:19px; color:var(--ink); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;}
.lp-msg{font-size:12.5px; font-weight:700; color:var(--clay-deep, var(--clay)); min-height:1.2em;}
.lp-addall{width:100%; border:0; border-radius:16px; padding:15px; background:var(--ink); color:#fff; font:inherit; font-weight:800; font-size:15px; cursor:pointer; transition:background .2s, transform .1s;}
.lp-addall:active{transform:scale(.98);}
.lp-addall.done{background:#2E6B2A;}
.lp-viewcart{display:none; text-align:center; font-size:13px; font-weight:700; text-decoration:underline; color:var(--ink);}
@media (min-width: 900px){
  .looks-layout.has-sel{grid-template-columns:minmax(0,1fr) 400px;}
  .look-panel{position:sticky; top:86px;}
}
.lp-model{width:46px; height:78px; object-fit:contain; object-position:bottom center; flex-shrink:0; margin-inline-end:12px;}
.lp-head-main{display:flex; align-items:flex-end; min-width:0;}
.lp-model.blend{mix-blend-mode:multiply;}

/* خيارات الطبق داخل لوحة اللوك (بتستخدم نفس تصميم صفحة الطبق بشكل مدمج) */
.lp-opt-line{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px;}
.lp-opt-sum{font-size:12px; color:var(--ink-soft); line-height:1.5;}
.lp-opt-toggle{border:1.5px solid var(--clay); background:#fff; color:var(--clay-deep, var(--clay)); border-radius:999px; padding:5px 13px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;}
.look-piece.lp-missing .lp-opt-toggle{background:var(--clay); color:#fff;}
.lp-opts{grid-column:1 / -1; display:flex; flex-direction:column; gap:10px; padding:6px 0 2px;}
.lp-opts[hidden]{display:none;}
.lp-opts .opt-group{border-radius:16px; background:var(--porcelain, #fcfaf6);}
.lp-opts .opt-group-head{padding:12px 14px 10px;}
.lp-opts .opt-group-name{font-size:14px;}
.lp-opts .opt-item{padding:10px 14px; min-height:52px;}

/* ============ منتجات مميزة (Showcase): قطع متراكبة متل فيديو CLUB 94 + شراء سريع ============ */
.showcase-section{margin-block:6px 18px;}
.sc-stage{position:relative; overflow:hidden; padding:6px 0 4px; background:radial-gradient(ellipse 48% 46% at 50% 44%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 100%);}
@media (max-width: 899px){ .sc-stage{margin-inline:-18px;} }
/* الأطراف بتتلاشى بلون الصفحة (تدرّج مش mask عشان الدمج للصور البيضاء يضل شغّال) */
.sc-stage::before, .sc-stage::after{content:''; position:absolute; top:0; bottom:0; width:9%; z-index:300; pointer-events:none;}
.sc-stage::before{left:0; background:linear-gradient(90deg, var(--porcelain, #fbf8f2) 6%, rgba(251,248,242,0) 100%);}
.sc-stage::after{right:0; background:linear-gradient(270deg, var(--porcelain, #fbf8f2) 6%, rgba(251,248,242,0) 100%);}
.sc-ring{position:relative; width:100%; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab; -webkit-tap-highlight-color:transparent;}
.sc-ring.dragging{cursor:grabbing;}
.sc-card{position:absolute; left:50%; margin:0; padding:0; border:0; background:none; cursor:pointer; transform-origin:50% 100%; will-change:transform, opacity; font-family:inherit; color:var(--ink);}
.sc-card:focus-visible{outline:3px solid rgba(180,80,46,.45); outline-offset:4px; border-radius:16px;}
.sc-art{position:relative; display:block; width:100%; height:100%;}
.sc-art img{display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(-12px 6px 9px rgba(30,22,16,.12)); pointer-events:none; user-select:none; -webkit-user-drag:none;}
/* ظل أرضي بيضاوي تحت كل قطعة */
.sc-art::after{content:''; position:absolute; left:8%; right:8%; bottom:-10px; height:16px; border-radius:50%; background:radial-gradient(closest-side, rgba(30,22,16,.22), rgba(30,22,16,0)); pointer-events:none;}
/* صورة JPG عادية: بطاقة بزوايا مدوّرة وظل ناعم بدل مستطيل لاصق */
.sc-card.photo .sc-art img{border-radius:22px; object-fit:cover; object-position:center; box-shadow:0 18px 40px rgba(30,22,16,.22); filter:none; background:#fff;}
.sc-card.photo .sc-art::after{display:none;}
/* صورة بخلفية بيضاء: الدمج على القطعة نفسها */
.sc-card.blend{mix-blend-mode:multiply;} .sc-card.blend .sc-art img{filter:none;}
/* بطاقة السعر المعلّقة على القطعة (رقم + سعر) متل الفيديو */
.sc-tag{position:absolute; top:10%; right:7%; z-index:2; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 9px 6px; background:#fff; border-radius:7px; box-shadow:0 7px 16px rgba(30,22,16,.2); transform:rotate(9deg); transform-origin:50% 0; line-height:1; pointer-events:none;}
.sc-tag::before{content:''; position:absolute; top:-12px; left:50%; width:1px; height:13px; background:rgba(30,22,16,.45);}
.sc-tag::after{content:''; position:absolute; top:3px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--porcelain, #fbf8f2); box-shadow:inset 0 0 0 1px rgba(30,22,16,.18);}
.sc-tag b{font-size:12px; font-weight:800; color:var(--ink);}
.sc-tag u{text-decoration:none; font-size:10px; font-weight:700; color:var(--ink-soft); white-space:nowrap;}
.sc-info{text-align:center; padding:10px 20px 0; min-height:96px; transition:opacity .12s ease;}
.sc-info.swap{opacity:0;}
.sc-cat{font-size:11.5px; letter-spacing:.08em; color:var(--ink-soft); min-height:16px;}
.sc-name{font-family:var(--disp); font-size:25px; line-height:1.25; margin:3px 0 5px; color:var(--ink); font-weight:700;}
.sc-price{font-weight:800; font-size:17px; color:var(--clay-deep, var(--clay));}
.sc-price s{color:var(--ink-soft); font-weight:600; font-size:13px; margin-inline-end:7px;}
.sc-badge{display:inline-block; vertical-align:middle; margin-inline-start:9px; font-family:var(--body); font-size:11px; font-weight:700; padding:2px 10px; border-radius:999px; background:var(--ink-soft); color:#fff;}
.sc-controls{display:flex; align-items:center; justify-content:center; gap:16px; padding:10px 0 6px; direction:ltr;}   /* ltr: زر اليسار يضل يسار والعكس بغض النظر عن لغة الصفحة */
.sc-count{font-variant-numeric:tabular-nums; font-size:14px; color:var(--ink-soft); min-width:66px; text-align:center; letter-spacing:.04em;}
.sc-count b{color:var(--ink); font-weight:800;}
.sc-nav{position:relative; width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line); background:#fff; cursor:pointer; display:grid; place-items:center; transition:border-color .15s, transform .15s;}
.sc-nav:hover{border-color:var(--ink);} .sc-nav:active{transform:scale(.94);}
.sc-nav i{display:block; width:9px; height:9px; border-top:2px solid var(--ink);}
.sc-left i{border-left:2px solid var(--ink); transform:rotate(-45deg); margin-left:4px;}
.sc-right i{border-right:2px solid var(--ink); transform:rotate(45deg); margin-right:4px;}
/* --- ورقة الشراء السريع: المنتج فوق، وعدّاد وأسهم، وتحته التفاصيل --- */
html.qs-lock, html.qs-lock body{overflow:hidden;}
.qs-overlay{position:fixed; inset:0; z-index:1200; display:flex; align-items:flex-end; justify-content:center; background:rgba(30,22,16,0); transition:background .22s ease;}
.qs-overlay.open{background:rgba(30,22,16,.46);}
.qs-sheet{position:relative; width:100%; max-width:520px; max-height:92vh; overflow:auto; background:var(--porcelain, #fbf8f2); border-radius:26px 26px 0 0; padding:8px 20px calc(24px + env(safe-area-inset-bottom, 0px)); transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); box-shadow:0 -12px 40px rgba(30,22,16,.22);}
.qs-overlay.open .qs-sheet{transform:none;}
@media (min-width: 700px){ .qs-overlay{align-items:center;} .qs-sheet{border-radius:26px; transform:translateY(24px); opacity:0; transition:transform .3s, opacity .25s;} .qs-overlay.open .qs-sheet{opacity:1;} }
.qs-grab{width:42px; height:4px; border-radius:4px; background:var(--line); margin:2px auto 8px;}
@media (min-width: 700px){ .qs-grab{display:none;} }
.qs-bar{display:flex; align-items:center; justify-content:space-between; direction:ltr; gap:10px;}
.qs-pager{display:inline-flex; align-items:center; gap:4px; padding:3px 5px; background:#fff; border:1.5px solid var(--line); border-radius:999px;}
.qs-pager button{position:relative; width:34px; height:34px; border:0; background:none; border-radius:50%; cursor:pointer; display:grid; place-items:center;}
.qs-pager button:active{background:var(--sand, #efe6d6);}
.qs-pager i{display:block; width:8px; height:8px; border-top:2px solid var(--ink);}
.qs-prev i{border-left:2px solid var(--ink); transform:rotate(-45deg); margin-left:3px;} .qs-next i{border-right:2px solid var(--ink); transform:rotate(45deg); margin-right:3px;}
.qs-pcount{font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink-soft); min-width:56px; text-align:center;} .qs-pcount b{color:var(--ink); font-weight:800;}
.qs-close{position:relative; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); background:#fff; cursor:pointer; flex-shrink:0;}
.qs-close::before, .qs-close::after{content:''; position:absolute; left:50%; top:50%; width:16px; height:2px; background:var(--ink); border-radius:2px;}
.qs-close::before{transform:translate(-50%,-50%) rotate(45deg);} .qs-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
.qs-hero{position:relative; height:clamp(170px, 30vh, 270px); margin:6px 0 12px; display:flex; align-items:flex-end; justify-content:center; touch-action:pan-y; transition:opacity .13s ease;}
.qs-hero.swap{opacity:0;}
.qs-hero img{max-width:84%; max-height:100%; object-fit:contain; filter:drop-shadow(-10px 6px 8px rgba(30,22,16,.14)); user-select:none; -webkit-user-drag:none;}
.qs-hero.photo img{border-radius:20px; box-shadow:0 14px 32px rgba(30,22,16,.22); filter:none;}
.qs-hero.blend img{mix-blend-mode:multiply; filter:none;}
.qs-cat{display:block; font-size:11.5px; color:var(--ink-soft); letter-spacing:.08em;}
.qs-name{font-family:var(--disp); font-size:25px; margin:2px 0 4px; line-height:1.25; overflow-wrap:anywhere;}
.qs-price{font-weight:800; color:var(--clay-deep, var(--clay)); font-size:18px;} .qs-price s{color:var(--ink-soft); font-weight:600; font-size:13px;}
.qs-desc{font-size:14px; line-height:1.8; color:var(--ink-soft); margin:8px 0 6px;}
.qs-label{font-size:13px; font-weight:700; margin:14px 0 8px;}
.qs-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; padding:2px; border-radius:12px;}
.qs-chips.qs-missing{outline:2px solid rgba(179,38,30,.55); outline-offset:3px;}
.qs-chip{min-height:46px; min-width:48px; padding:8px 14px; border:1.5px solid var(--line); background:#fff; border-radius:10px; font-family:inherit; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer;}
.qs-chip.on{background:var(--ink); border-color:var(--ink); color:#fff;}
.qs-chip[disabled]{opacity:.4; text-decoration:line-through; cursor:not-allowed;}
.qs-options{margin-top:8px;}
.qs-msg{min-height:20px; font-size:13px; color:#b3261e; margin:8px 0 2px;}
.qs-add{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:54px; padding:0 22px; border:0; border-radius:999px; background:var(--clay-deep, #8a3a21); color:#fff; font-family:inherit; font-size:16px; font-weight:800; cursor:pointer; transition:background .2s;}
.qs-add[disabled]{background:var(--ink-soft); opacity:.7; cursor:not-allowed;}
.qs-add.done{background:#2f7a4b;}
.qs-viewcart{display:none; text-align:center; margin-top:12px; font-weight:800; color:var(--clay-deep, var(--clay)); text-decoration:underline;}
.qs-more{display:block; text-align:center; margin-top:14px; font-size:13.5px; color:var(--ink-soft); text-decoration:underline;}
.qs-loading{text-align:center; padding:40px 0; color:var(--ink-soft);}
@media (prefers-reduced-motion: reduce){ .qs-sheet, .qs-overlay, .sc-info, .qs-hero{transition:none;} }