/* ==========================================================================
 * Pages — Home, Product, Cart, Checkout, Confirmation
 * ========================================================================== */

/* ============ HERO BANNER (HOME) ============ */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-800) 50%,var(--navy-900) 100%);
  color:var(--ivory);
  margin-bottom:32px;
}
.hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--gold) 50%,transparent 100%);
  opacity:.5;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(800px 380px at 85% 20%,var(--gold-glow) 0%,transparent 60%);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 1fr;
  gap:40px;align-items:center;padding:56px 0;min-height:440px;
}
.hero-eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--gold-soft);letter-spacing:.22em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(212,168,83,.2)}
.hero h1{
  font-size:54px;font-weight:800;line-height:1.05;letter-spacing:-.015em;
  margin:0 0 18px;color:var(--ivory);
}
.hero h1 .gold{
  color:var(--gold);font-weight:800;position:relative;
}
.hero h1 .gold::after{
  content:"";position:absolute;right:0;left:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.hero p{font-size:16px;color:rgba(245,241,232,.72);line-height:1.7;max-width:480px;margin:0 0 28px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-meta{
  display:flex;gap:28px;margin-top:36px;padding-top:24px;
  border-top:1px dashed var(--line-dark);
}
.hero-meta-item .num{
  font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:700;color:var(--gold);direction:ltr;
}
.hero-meta-item .lab{font-size:11.5px;color:rgba(245,241,232,.55);margin-top:2px}

/* ============ HERO CENTERED — نسخة متوسطة بدون شعار ============ */
.hero-centered::after{
  background:
    radial-gradient(500px 300px at 50% 0%,var(--gold-glow) 0%,transparent 60%),
    radial-gradient(500px 300px at 50% 100%,rgba(212,168,83,0.08) 0%,transparent 60%);
}
.hero-inner-centered{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  padding:64px 0 56px;min-height:380px;
  text-align:center;
}
.hero-inner-centered .hero-text{
  max-width:760px;width:100%;
  margin:0 auto;
}
.hero-inner-centered .hero-eyebrow{
  justify-content:center;
  margin-bottom:24px;
}
.hero-inner-centered .hero-eyebrow .dot{
  width:5px;height:5px;
  box-shadow:0 0 0 3px rgba(212,168,83,.2);
}
.hero-inner-centered h1{
  font-size:52px;line-height:1.1;letter-spacing:-.015em;
  margin:0 0 22px;
  text-align:center;
}
.hero-inner-centered h1 .gold::after{
  left:10%;right:10%;
  bottom:-8px;
}
.hero-inner-centered p{
  font-size:16.5px;color:rgba(245,241,232,.75);line-height:1.8;
  max-width:580px;margin:0 auto 32px;
  text-align:center;
}
.hero-inner-centered .hero-cta{
  justify-content:center;
  gap:12px;
}

/* الفاصل الذهبي الزخرفي */
.hero-divider{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:36px auto 26px;
  max-width:300px;
}
.hero-divider .hd-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(212,168,83,0.5) 50%,transparent 100%);
}
.hero-divider .hd-icon{
  color:var(--gold);
  font-size:13px;
  filter:drop-shadow(0 0 8px rgba(212,168,83,0.4));
}

/* الإحصائيات بالأسفل (متوسطة) */
.hero-meta-centered{
  display:flex;align-items:center;justify-content:center;
  gap:36px;margin-top:0;padding-top:0;
  border-top:none;
}
.hero-meta-centered .hero-meta-item{
  text-align:center;
}
.hero-meta-centered .hero-meta-item .num{
  font-size:26px;font-weight:800;
  text-shadow:0 0 20px rgba(212,168,83,0.25);
}
.hero-meta-centered .hero-meta-item .lab{
  font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:6px;
  font-family:"IBM Plex Mono",monospace;
}
.hero-meta-divider{
  width:1px;height:36px;
  background:linear-gradient(180deg,transparent 0%,rgba(212,168,83,0.3) 50%,transparent 100%);
}

/* ============ END HERO CENTERED ============ */


/* ============ CATEGORY STRIP ============ */
.cat-strip{padding:0 0 32px}
.cat-strip-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:18px;
}
.cat-strip-head h2{font-size:22px;font-weight:700;margin:0;letter-spacing:-.01em}
.cat-strip-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.cat-strip-all{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--gold-dim);font-weight:600;
  text-decoration:none;padding:6px 10px;border-radius:7px;
  transition:all .15s;
}
.cat-strip-all:hover{background:var(--ivory);color:var(--gold)}
.cat-strip-all i{font-size:10px}

.cat-grid-pills{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, 1fr));gap:12px}
.cat-pill{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 12px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:12px;
  transition:all .2s;cursor:pointer;
  outline:none;
}
.cat-pill:hover{border-color:var(--line-gold);transform:translateY(-2px);box-shadow:0 12px 30px -16px rgba(15,31,43,.18)}
.cat-pill:focus-visible{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.cat-pill.active{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-900) 100%);
  border-color:var(--navy);
  box-shadow:0 10px 30px -10px rgba(15,31,43,.4);
}
.cat-pill.active .ic{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy-900);
}
.cat-pill.active .nm{color:var(--ivory)}
.cat-pill.active .ct{color:var(--gold)}

.cat-pill .ic{
  width:48px;height:48px;border-radius:11px;
  background:linear-gradient(135deg,var(--ivory) 0%,var(--ivory-2) 100%);
  border:1px solid var(--line-gold);
  display:grid;place-items:center;font-size:18px;color:var(--gold-dim);
  transition:all .2s;
}
.cat-pill .nm{font-size:12.5px;font-weight:600;color:var(--ink-2);transition:all .2s}
.cat-pill .ct{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);direction:ltr;transition:all .2s}

/* ============ FILTER BAR ============ */
.filter-bar{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:18px;
}
.fb-label{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);
  letter-spacing:.16em;text-transform:uppercase;margin-left:6px;
}
.fb-chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  border:1px solid var(--line-2);border-radius:8px;background:var(--paper);
  font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:all .15s;
}
.fb-chip i.fa-chevron-down{font-size:9px;color:var(--muted-2);margin-right:4px}
.fb-chip:hover{border-color:var(--gold);color:var(--gold-dim)}
.fb-chip.active{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.fb-chip.active i{color:var(--gold-soft)}
.fb-spacer{flex:1}
.fb-sort{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--muted);
}
.fb-sort select{
  font-family:inherit;font-size:12.5px;color:var(--ink);
  border:1px solid var(--line-2);background:var(--paper);
  border-radius:7px;padding:7px 10px;outline:none;cursor:pointer;
}

/* ===== Filter Bar with Search — كل العناصر سطر واحد ===== */
.filter-bar-with-search{
  flex-direction:row;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  flex-wrap:wrap;
}

/* صف البحث */
.fb-search{
  position:relative;
  display:flex;
  align-items:center;
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:0 14px;
  transition:all .2s;
  flex:1 1 240px;
  min-width:200px;
  max-width:340px;
}
.fb-search:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,168,83,0.12);
}
.fb-search i.fa-search{
  color:var(--muted-2);
  font-size:13px;
  margin-left:10px;
  flex-shrink:0;
}
.fb-search input{
  flex:1;
  border:none;
  background:transparent;
  padding:9px 0;
  font-family:inherit;
  font-size:13px;
  color:var(--ink);
  outline:none;
  width:100%;
}
.fb-search input::placeholder{
  color:var(--muted-2);
  font-size:13px;
}
.fb-search-clear{
  display:none;
  width:24px;height:24px;
  border-radius:6px;
  border:none;
  background:var(--paper-2);
  color:var(--muted);
  cursor:pointer;
  align-items:center;justify-content:center;
  font-size:10px;
  flex-shrink:0;
  margin-right:4px;
  transition:all .15s;
}
.fb-search-clear:hover{
  background:var(--danger,#dc3545);
  color:#fff;
}
.fb-search.has-value .fb-search-clear{display:flex}

/* صف الـ controls */
.fb-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ===== Filter Bar — Responsive (موبايل) ===== */
@media (max-width:720px){
  .filter-bar-with-search{
    padding:10px;
    gap:10px;
    flex-direction:column;
    align-items:stretch;
  }
  .fb-search{
    padding:0 12px;
    flex:1 1 auto;
    max-width:100%;
    min-width:0;
  }
  .fb-search input{
    padding:9px 0;
    font-size:13px;
  }
  
  .fb-controls{
    flex-wrap:nowrap;gap:8px;
    justify-content:center;
    overflow:hidden;
  }
  .fb-label{display:none}
  .fb-spacer{display:none}
  
  /* توحيد كل الأزرار - chips + sort */
  .fb-chip,
  .fb-sort{
    flex:1;min-width:0;
    padding:8px 6px;
    font-size:11.5px;
    gap:5px;
    border:1px solid var(--line-2);
    border-radius:8px;
    background:var(--paper);
    height:36px;
    display:inline-flex;align-items:center;justify-content:center;
    box-sizing:border-box;
  }
  .fb-chip i.fa-chevron-down{display:none}
  .fb-chip i:first-child{font-size:11px;flex-shrink:0}
  
  /* تخصيصات لـ fb-sort */
  .fb-sort > span{display:none}
  .fb-sort{
    color:var(--ink-2);
    padding:0;
  }
  .fb-sort select{
    flex:1;width:100%;height:100%;
    background:transparent;border:none;
    padding:0 8px;
    font-size:11.5px;font-family:inherit;color:var(--ink-2);
    text-align:center;
    text-align-last:center;
    cursor:pointer;outline:none;
  }
}

/* ============ FILTER PANEL (بانل الفلتر الجانبي) ============ */
.filter-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(15,31,43,0.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:1100;opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.filter-overlay.open{opacity:1;visibility:visible}

.filter-panel{
  position:fixed;top:0;right:-340px;width:320px;height:100vh;height:100dvh;
  max-height:100vh;max-height:100dvh;
  background:var(--paper-2);z-index:1101;
  display:flex;flex-direction:column;
  transition:right .4s cubic-bezier(0.22,1,0.36,1);
  box-shadow:-12px 0 40px -10px rgba(15,31,43,0.25);
}
.filter-panel.open{right:0}

.fp-body{flex:1;overflow-y:auto;padding:20px 18px}
.fp-body::-webkit-scrollbar{width:5px}
.fp-body::-webkit-scrollbar-thumb{background:var(--line-gold);border-radius:3px}
.fp-foot{flex-shrink:0;padding-bottom:calc(12px + env(safe-area-inset-bottom)) !important}

.fp-section{margin-bottom:22px}
.fp-section-head{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.fp-section-head i{color:var(--gold);font-size:11px}

/* ===== الألوان ===== */
.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.color-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 4px;border-radius:10px;border:2px solid transparent;
  background:none;cursor:pointer;font-family:inherit;transition:all .15s;
}
.color-item:hover{background:var(--ivory)}
.color-item.active{
  border-color:var(--gold);background:var(--gold-glow);
}
.color-dot{
  width:28px;height:28px;border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,0.12);transition:transform .15s;
}
.color-item:hover .color-dot{transform:scale(1.08)}
.color-item span{font-size:9.5px;color:var(--muted);font-weight:600;text-align:center}
.color-item.active span{color:var(--gold-dim);font-weight:700}

/* ===== القياسات ===== */
.size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.size-btn{
  padding:10px 6px;border-radius:8px;
  border:1.5px solid var(--line-2);background:var(--paper);
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:all .15s;direction:ltr;
}
.size-btn:hover:not(.disabled){border-color:var(--gold);background:var(--ivory)}
.size-btn.active{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.size-btn.disabled{color:var(--muted-2);text-decoration:line-through;cursor:not-allowed;opacity:.4}

/* ===== التصنيفات ===== */
.cat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;
}
.cat-item, .aud-item{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 8px;border-radius:9px;
  border:1.5px solid var(--line-2);background:var(--paper);
  font-family:inherit;font-size:12px;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:all .15s;
  width:100%;min-height:38px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;
}
.cat-item:hover, .aud-item:hover{border-color:var(--gold);color:var(--gold-dim)}
.cat-item.active, .aud-item.active{
  background:var(--navy);color:var(--ivory);border-color:var(--navy);
}
.cat-item.active i, .aud-item.active i{color:var(--gold)}
.cat-item i, .aud-item i{font-size:10px;color:var(--muted-2);flex-shrink:0}

/* ===== Footer Buttons ===== */
.filter-panel .btn{
  padding:11px 16px;border-radius:9px;border:none;
  font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.filter-panel .btn.primary{
  background:var(--gold);
  color:var(--navy-900);
}
.filter-panel .btn.primary:hover{
  background:var(--gold-soft);
}
.filter-panel .btn.ghost{
  background:transparent;color:var(--muted);
  border:1.5px solid var(--line-2);
}
.filter-panel .btn.ghost:hover{
  border-color:var(--gold);color:var(--gold-dim);background:var(--ivory);
}

/* ============ PRODUCT GRID ============ */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:10px}
.section-head h2{font-size:22px;font-weight:700;margin:0;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.section-head h2 i{color:var(--gold);font-size:15px}
.section-head .count{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);direction:ltr}

.active-filter-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--gold-glow);
  border:1px solid var(--line-gold);
  border-right:4px solid var(--gold);
  border-radius:12px;
  padding:12px 16px;margin-bottom:18px;
}
.active-filter-banner.hidden{display:none}
.active-filter-banner .afb-info{
  display:flex;align-items:center;gap:9px;
  font-size:14px;font-weight:700;color:var(--navy);
}
.active-filter-banner .afb-info i{color:var(--gold-dim);font-size:14px}
.active-filter-banner .afb-text{font-weight:700}
.active-filter-banner .afb-clear{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--navy);color:#fff;border:none;
  padding:9px 14px;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;
  transition:all .15s;
}
.active-filter-banner .afb-clear:hover{background:var(--navy-900);transform:translateY(-1px)}
.active-filter-banner .afb-clear i{font-size:11px}

.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prod-card{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:all .25s;
  position:relative;
}
.prod-card:hover{border-color:var(--line-gold);transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(15,31,43,.2)}
.prod-img{
  position:relative;aspect-ratio:3/4;
  background:linear-gradient(135deg,var(--ivory) 0%,var(--ivory-2) 100%);
  overflow:hidden;
}
.prod-img::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(20,34,44,.04) 0 8px, transparent 8px 16px);
}
.prod-img .ph-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted);
  letter-spacing:.16em;text-transform:uppercase;direction:ltr;
  background:var(--paper-2);padding:5px 11px;border-radius:5px;
  border:1px dashed var(--line-gold);
}
.prod-img.tone-a{background:linear-gradient(135deg,#3a3220 0%,#1c1810 100%)}
.prod-img.tone-b{background:linear-gradient(135deg,#5b6d78 0%,#2c3e4a 100%)}
.prod-img.tone-c{background:linear-gradient(135deg,#c4b878 0%,#8a6d34 100%)}
.prod-img.tone-d{background:linear-gradient(135deg,#b54a3a 0%,#7a2818 100%)}
.prod-img.tone-e{background:linear-gradient(135deg,#3f8a5a 0%,#1f5a36 100%)}
.prod-img.tone-f{background:linear-gradient(135deg,#e8e0c8 0%,#c4b878 100%)}
.prod-img.tone-g{background:linear-gradient(135deg,#2c3e4a 0%,#14222c 100%)}
.prod-img.tone-h{background:linear-gradient(135deg,#5d4a7a 0%,#3a2f50 100%)}

.prod-img-art{
  position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.18);font-size:90px;
}

.prod-badge{
  position:absolute;top:12px;right:12px;z-index:2;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;padding:4px 9px;border-radius:5px;
  background:var(--gold);color:var(--navy-900);
}
.prod-badge.new{background:var(--ivory);color:var(--navy-900)}
.prod-badge.sale{background:var(--red);color:var(--ivory)}

.prod-fav{
  position:absolute;top:12px;left:12px;z-index:2;
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.4);
  display:grid;place-items:center;color:var(--ink-2);font-size:12px;cursor:pointer;
  transition:all .15s;
}
.prod-fav:hover{background:#fff;color:var(--red)}

.prod-body{padding:14px 16px 16px}
.prod-cat{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--muted);
  letter-spacing:.16em;text-transform:uppercase;direction:ltr;margin-bottom:6px;
}
.prod-name{font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.3}
.prod-name a{color:inherit}
.prod-colors{display:flex;gap:5px;margin-bottom:10px}
.prod-color-dot{
  width:14px;height:14px;border-radius:50%;
  border:1px solid rgba(0,0,0,0.1);
  box-shadow:0 1px 3px rgba(0,0,0,0.12);
}
.prod-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.prod-price{
  font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:700;color:var(--ink);
  direction:ltr;display:flex;align-items:baseline;gap:6px;
}
.prod-price .cur{font-size:11px;color:var(--gold-dim);font-weight:600}
.prod-price .old{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted-2);
  text-decoration:line-through;font-weight:500;
}

/* ===== سعر العرض (السعر الأصلي مشطوب + الجديد بأحمر) ===== */
.prod-price.has-offer > span:nth-child(2){color:#fa5252}
.prod-price-old{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  color:var(--muted-2);
  text-decoration:line-through;
  font-weight:600;
  direction:ltr;
}

/* ===== شارة الخصم على البطاقة ===== */
.prod-offer-badge{
  position:absolute;
  top:10px;
  right:10px;
  background:linear-gradient(135deg,#fa5252 0%,#c92a2a 100%);
  color:#fff;
  padding:6px 10px;
  border-radius:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  box-shadow:0 4px 12px rgba(250,82,82,0.4);
  z-index:3;
  line-height:1;
  animation:pob-pulse 2.4s ease-in-out infinite;
}
@keyframes pob-pulse{
  0%, 100%{box-shadow:0 4px 12px rgba(250,82,82,0.4)}
  50%{box-shadow:0 4px 20px rgba(250,82,82,0.7), 0 0 0 4px rgba(250,82,82,0.15)}
}
.prod-offer-badge .pob-pct{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  font-weight:800;
  letter-spacing:-0.01em;
  direction:ltr;
}
.prod-offer-badge .pob-label{
  font-size:8px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.95;
  margin-top:1px;
}

/* ===== شريط سبب العرض المتحرك (Shimmer Ribbon) ===== */
.prod-offer-ribbon{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:linear-gradient(90deg, #1a2f3f 0%, #0f1f2b 100%);
  color:#fff;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  z-index:3;
  overflow:hidden;
  border-top:1px solid rgba(212,168,83,0.3);
}
.prod-offer-ribbon::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, #d4a853 50%, transparent 100%);
  animation:ribbon-top-glow 2.5s ease-in-out infinite;
}
@keyframes ribbon-top-glow{
  0%, 100%{opacity:0.4}
  50%{opacity:1}
}
.por-icon{
  color:#d4a853;
  font-size:11px;
  flex-shrink:0;
  animation:por-bolt 1.6s ease-in-out infinite;
}
@keyframes por-bolt{
  0%, 100%{transform:scale(1);text-shadow:0 0 6px rgba(212,168,83,0.6)}
  50%{transform:scale(1.2);text-shadow:0 0 14px rgba(212,168,83,1), 0 0 22px rgba(212,168,83,0.5)}
}
.por-text{
  font-size:11.5px;
  font-weight:700;
  color:#f5f1e8;
  letter-spacing:0.02em;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
  position:relative;
  z-index:2;
}

/* ===== التأثير الضوئي المتحرك (Light Sweep) ===== */
.por-shine{
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(212,168,83,0.15) 30%,
    rgba(255,255,255,0.45) 50%,
    rgba(212,168,83,0.15) 70%,
    transparent 100%
  );
  animation:por-shine-sweep 2.8s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
  transform:skewX(-20deg);
}
@keyframes por-shine-sweep{
  0%{left:-100%}
  60%, 100%{left:120%}
}
.prod-add{
  width:36px;height:36px;border-radius:8px;background:var(--navy);color:var(--ivory);
  border:none;cursor:pointer;display:grid;place-items:center;font-size:13px;transition:all .15s;
}
.prod-add:hover{background:var(--gold);color:var(--navy-900)}
.prod-cta{
  width:100%;padding:9px 12px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--paper);color:var(--ink);font-size:12.5px;font-weight:500;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:all .15s;font-family:inherit;
}
.prod-cta:hover{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.prod-cta i{font-size:11px}

/* trust strip below grid */
.trust-strip{
  margin-top:36px;padding:24px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:14px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.trust-item{display:flex;align-items:center;gap:14px}
.trust-ic{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:var(--ivory-2);color:var(--gold-dim);
  display:grid;place-items:center;font-size:16px;
  border:1px solid var(--line-gold);
}
.trust-tx h4{margin:0 0 2px;font-size:13.5px;font-weight:700}
.trust-tx p{margin:0;font-size:11.5px;color:var(--muted)}

/* ============ PRODUCT DETAILS PAGE ============ */
.crumbs{
  padding:18px 0;display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--muted);
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold-dim)}
.crumbs .sep{color:var(--muted-2);font-size:9px}
.crumbs .current{color:var(--ink);font-weight:600}

.pd-wrap{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.pd-gallery{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.pd-thumbs{display:none}
.pd-thumb{
  width:80px;aspect-ratio:1;border-radius:9px;
  border:1px solid var(--line-2);overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,var(--ivory) 0%,var(--ivory-2) 100%);
  position:relative;transition:all .15s;
}
.pd-thumb.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow)}
.pd-thumb:hover{border-color:var(--line-gold)}
.pd-main{
  aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(135deg,#3a3220 0%,#1c1810 100%);
  position:relative;
}
.pd-main::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px);
}
.pd-main .ph-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--gold-soft);
  letter-spacing:.16em;text-transform:uppercase;direction:ltr;
  background:rgba(15,31,43,.5);padding:6px 12px;border-radius:6px;
  border:1px dashed var(--line-gold);
}
.pd-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;
  font-size:13px;transition:all .15s;
}
.pd-arrow.prev{right:14px}
.pd-arrow.next{left:14px}
.pd-arrow:hover{background:#fff;color:var(--gold-dim)}
.pd-info{padding-top:6px}
.pd-info .eyebrow{margin-bottom:14px}
.pd-info h1{
  font-size:32px;font-weight:800;letter-spacing:-.01em;line-height:1.15;
  margin:0 0 12px;color:var(--ink);
}
.pd-stars{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.pd-stars .stars{color:var(--gold);font-size:12px}
.pd-stars .count{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);direction:ltr}
.pd-price{
  display:flex;align-items:baseline;gap:10px;margin-bottom:18px;
  padding-bottom:18px;border-bottom:1px dashed var(--line-2);
  flex-wrap:wrap;
}
.pd-price .now{
  font-family:"IBM Plex Mono",monospace;font-size:32px;font-weight:800;
  color:var(--ink);direction:ltr;letter-spacing:-.01em;
}
.pd-price .now.has-offer{color:#fa5252}
.pd-price .cur{font-size:14px;color:var(--gold-dim);font-weight:600}
.pd-price .old{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--muted-2);text-decoration:line-through}
.pd-price .save{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:6px;
  background:var(--green-soft);color:var(--green);direction:ltr;letter-spacing:.04em;
}

/* ===== سعر العرض القديم المشطوب ===== */
.pd-price-old{
  font-family:"IBM Plex Mono",monospace;
  font-size:18px;
  color:var(--muted-2);
  text-decoration:line-through;
  font-weight:600;
  direction:ltr;
  order:1;
}
.pd-discount-badge{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  font-weight:800;
  background:#fa5252;
  color:#fff;
  padding:4px 11px;
  border-radius:7px;
  letter-spacing:0.04em;
  direction:ltr;
  order:2;
}

/* ===== شريط العرض النشط ===== */
.pd-offer-banner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:linear-gradient(135deg,rgba(250,82,82,0.06) 0%,var(--gold-glow) 100%);
  border:1px solid rgba(250,82,82,0.18);
  border-radius:12px;
  margin-bottom:22px;
  position:relative;
  overflow:hidden;
}
.pd-offer-banner::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:4px;
  height:100%;
  background:linear-gradient(180deg,#fa5252 0%,var(--gold) 100%);
}
.pob-icon{
  width:42px;height:42px;
  border-radius:11px;
  background:linear-gradient(135deg,#fa5252 0%,#c92a2a 100%);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  flex-shrink:0;
  box-shadow:0 6px 14px -4px rgba(250,82,82,0.4);
}
.pob-content{flex:1;min-width:0}
.pob-title{
  font-size:14px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:3px;
}
.pob-saving{
  font-size:12.5px;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.pob-saving strong{
  color:#28a745;
  font-family:"IBM Plex Mono",monospace;
  font-weight:700;
  direction:ltr;
}
.pob-divider{color:var(--muted-2);font-weight:700}
.pob-countdown{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--gold-dim);
  font-weight:600;
  font-size:12px;
}
.pob-countdown i{color:var(--gold);font-size:11px}

.pd-desc{font-size:14px;color:var(--ink-2);line-height:1.8;margin:0 0 22px}

.pd-opt-block{margin-bottom:20px}
.pd-opt-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.pd-opt-head .lab{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--muted);letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
}
.pd-opt-head .lab .selected{color:var(--ink);font-weight:700;letter-spacing:0;font-family:"Tajawal",sans-serif;text-transform:none;font-size:13px}
.pd-opt-head .help{font-size:11.5px;color:var(--gold-dim);text-decoration:underline}
.pd-opt-head-inline{
  justify-content:flex-start;
  gap:14px;
}

.pd-colors{display:flex;gap:10px;flex-wrap:wrap}
.pd-color{
  width:54px;height:70px;border-radius:9px;cursor:pointer;
  border:2px solid var(--line-2);padding:4px;position:relative;
  background:var(--paper-2);transition:all .15s;
  display:grid;place-items:center;
}
.pd-color.active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow)}
.pd-color:hover{border-color:var(--line-gold)}
.pd-color-swatch{
  width:100%;height:100%;border-radius:5px;
  border:1px solid rgba(0,0,0,.06);
}
.pd-color .nm{
  position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
  font-size:10.5px;color:var(--muted);white-space:nowrap;
}

.pd-sizes{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.pd-size,
.size-swatch{
  min-width:46px;height:42px;padding:0 12px;border-radius:8px;
  border:1.5px solid var(--line-2);background:var(--paper-2);
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:all .15s;direction:ltr;
}
.pd-size:hover:not(.disabled),
.size-swatch:hover:not(.disabled){border-color:var(--gold)}
.pd-size.active, .pd-size.selected,
.size-swatch.active, .size-swatch.selected{background:var(--navy);color:var(--ivory);border-color:var(--navy)}
.pd-size.disabled,
.size-swatch.disabled{color:var(--muted-2);text-decoration:line-through;cursor:not-allowed;opacity:.5}

/* توافق مع كلاسات JS القديمة لاختيار اللون */
.pd-color.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow)}
.variant-swatch.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow)}

/* رسالة "اختر اللون أولاً" */
.pd-sizes .text-muted,
#sizeSelector .text-muted{color:var(--muted);font-size:12.5px;padding:8px 0;display:inline-block}

.pd-actions{display:flex;gap:10px;align-items:center;margin-top:22px}
.pd-qty{
  display:flex;align-items:center;border:1.5px solid var(--line-2);border-radius:9px;
  background:var(--paper-2);overflow:hidden;
}
.pd-qty button{
  width:42px;height:46px;border:none;background:transparent;cursor:pointer;
  font-size:15px;color:var(--ink-2);font-family:inherit;
}
.pd-qty button:hover{background:var(--paper);color:var(--gold-dim)}
.pd-qty input{
  width:46px;height:46px;border:none;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:700;
  color:var(--ink);background:transparent;outline:none;direction:ltr;
}
.pd-actions .btn.gold{flex:1;height:46px;font-size:14px}
.pd-actions .btn.gold .ico{font-size:13px}

.pd-perks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.pd-perk{
  display:flex;align-items:center;gap:10px;padding:12px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
}
.pd-perk i{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:var(--ivory-2);color:var(--gold-dim);font-size:12px;
  border:1px solid var(--line-gold);
}
.pd-perk .t{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.pd-perk .s{font-size:10.5px;color:var(--muted);margin-top:1px}

/* details meta strip */
.pd-meta-strip{
  margin-top:30px;
  background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%);
  border:1px solid var(--line);border-radius:14px;
  display:grid;grid-template-columns:repeat(3,1fr);
  overflow:hidden;
  box-shadow:0 4px 14px -8px rgba(15,31,43,.08);
}
.pd-meta-strip > div{
  display:flex;flex-direction:column;gap:6px;
  padding:18px 20px;
  position:relative;
  text-align:center;
  align-items:center;
}
.pd-meta-strip > div:not(:last-child)::after{
  content:"";position:absolute;left:0;top:18%;bottom:18%;
  width:1px;background:linear-gradient(180deg,transparent 0%,var(--line-gold) 50%,transparent 100%);
}
.pd-meta-strip .k{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  color:var(--muted);letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
.pd-meta-strip .k::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--gold);opacity:.7;
}
.pd-meta-strip .v{
  font-size:14px;font-weight:700;color:var(--ink);
  line-height:1.3;
}
.pd-meta-strip .v.mono{
  font-family:"IBM Plex Mono",monospace;direction:ltr;letter-spacing:.04em;
  font-size:12.5px;word-break:break-word;line-height:1.4;
}
.pd-meta-strip .v-green{color:var(--green)}
.pd-meta-strip .v-sub{
  font-size:10.5px;font-weight:500;color:var(--muted);
  font-family:"IBM Plex Mono",monospace;direction:ltr;letter-spacing:.04em;
  margin-top:1px;
}

@media (max-width:560px){
  .pd-meta-strip{grid-template-columns:1fr}
  .pd-meta-strip > div:not(:last-child)::after{
    left:18%;right:18%;top:auto;bottom:0;height:1px;width:auto;
    background:linear-gradient(90deg,transparent 0%,var(--line-gold) 50%,transparent 100%);
  }
}

/* إخفاء رسالة الحالة القديمة (تم استبدالها بـ AVAILABILITY) */
#stockStatusMessage{display:none !important}

/* ============ CART PAGE ============ */
.page-head-block{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin:18px 0 22px;
}
.page-head-block h1{font-size:28px;font-weight:800;margin:0;letter-spacing:-.01em}
.page-head-block .sub{font-size:13px;color:var(--muted);margin-top:6px}

.cart-wrap{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.cart-list{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
}
.cart-list-head{
  padding:14px 20px;border-bottom:1px solid var(--line);
  background:var(--paper);display:flex;align-items:center;justify-content:space-between;
}
.cart-list-head h3{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.cart-list-head h3 i{color:var(--gold);font-size:12px}
.cart-clear{font-size:12px;color:var(--red);cursor:pointer;display:inline-flex;align-items:center;gap:6px}

.cart-item{
  display:grid;grid-template-columns:90px 1fr auto auto auto auto;
  gap:18px;align-items:center;
  padding:18px 20px;border-bottom:1px solid var(--line);
}
.cart-item:last-child{border-bottom:none}
.cart-thumb{
  width:90px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(135deg,#3a3220 0%,#1c1810 100%);
  position:relative;
}
.cart-thumb::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 6px,transparent 6px 12px);
}
.cart-thumb.t2{background:linear-gradient(135deg,#5b6d78 0%,#2c3e4a 100%)}
.cart-thumb.t3{background:linear-gradient(135deg,#c4b878 0%,#8a6d34 100%)}

.cart-info .nm{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.3}
.cart-info .opts{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.cart-info .opts .chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:5px;background:var(--paper);
  border:1px solid var(--line-2);
}
.cart-info .opts .chip .dot{width:8px;height:8px;border-radius:50%}
.cart-info .opts .chip.size{font-family:"IBM Plex Mono",monospace;direction:ltr}
.cart-info .sku{
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--muted-2);
  margin-top:6px;letter-spacing:.06em;direction:ltr;
}

.cart-price{
  font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;
  color:var(--ink-2);direction:ltr;
}
.cart-qty{
  display:flex;align-items:center;border:1px solid var(--line-2);
  border-radius:8px;background:var(--paper-2);overflow:hidden;
}
.cart-qty button{
  width:32px;height:36px;border:none;background:transparent;cursor:pointer;
  color:var(--ink-2);font-family:inherit;font-size:13px;
}
.cart-qty button:hover{background:var(--paper)}
.cart-qty input{
  width:38px;height:36px;border:none;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:700;
  color:var(--ink);background:transparent;outline:none;direction:ltr;
}
/* خانة تعديل السعر - نفس بنية cart-qty لكن أوسع */
.cart-price-edit{
  display:inline-flex;align-items:center;
}
.cart-price-edit input{
  width:90px;height:36px;border:none;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:700;
  color:var(--ink);background:transparent;outline:none;direction:ltr;
  padding:0 8px;
}
.cart-price-edit input::-webkit-outer-spin-button,
.cart-price-edit input::-webkit-inner-spin-button {
  -webkit-appearance:none; margin:0;
}
.cart-price-edit input{-moz-appearance:textfield}
.cart-total-cell{
  font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:700;
  color:var(--ink);direction:ltr;
}
.cart-remove{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--paper-2);color:var(--muted);cursor:pointer;
  display:grid;place-items:center;font-size:13px;transition:all .15s;
}
.cart-remove:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}

.cart-foot-actions{
  padding:14px 20px;border-top:1px solid var(--line);background:var(--paper);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.cart-back{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.cart-back:hover{color:var(--gold-dim)}

/* cart summary */
.cart-summary{
  position:sticky;top:96px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.cart-summary-head{
  padding:14px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--ivory) 0%,var(--paper-2) 100%);
}
.cart-summary-head h3{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.cart-summary-head h3 i{color:var(--gold);font-size:12px}
.cart-summary-body{padding:16px 18px}
.cs-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0;font-size:13.5px;color:var(--ink-2);
}
.cs-row .k{color:var(--muted)}
.cs-row .v{font-family:"IBM Plex Mono",monospace;font-weight:600;direction:ltr}
.cs-row.muted .v{color:var(--muted)}
.staff-waive-btn{
  display:inline-flex;align-items:center;gap:5px;
  margin-right:8px;padding:3px 9px;
  font-family:"Tajawal",sans-serif;font-size:11px;font-weight:700;
  color:var(--muted);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:6px;
  cursor:pointer;transition:all .15s ease;
}
.staff-waive-btn i{font-size:10px}
.staff-waive-btn:hover{
  border-color:var(--green);color:var(--green);
}
.staff-waive-btn.active{
  background:var(--green);color:#fff;border-color:var(--green);
}
.cs-divider{height:1px;background:var(--line);margin:10px 0}
.cs-row.total{padding:14px 0 6px;font-size:16px}
.cs-row.total .k{color:var(--ink);font-weight:700}
.cs-row.total .v{color:var(--ink);font-size:20px;font-weight:800}
.cs-cur{font-size:11px;color:var(--gold-dim);font-weight:600;font-family:"IBM Plex Mono",monospace;margin-right:4px}

.cs-promo{
  display:flex;gap:6px;margin:14px 0 6px;
}
.cs-promo input{
  flex:1;border:1px solid var(--line-2);background:var(--paper);
  font-family:inherit;font-size:13px;padding:9px 12px;border-radius:8px;outline:none;
}
.cs-promo input:focus{border-color:var(--gold)}
.cs-promo button{
  padding:9px 14px;border-radius:8px;border:1px solid var(--navy);background:var(--navy);
  color:var(--ivory);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}

.cart-checkout-btn{margin-top:6px;width:100%;height:50px;font-size:14.5px}
.cs-trust{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2);
  display:flex;flex-direction:column;gap:8px;
}
.cs-trust-row{
  display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted);
}
.cs-trust-row i{color:var(--gold-dim);font-size:11px;width:14px;text-align:center}

/* ============ CHECKOUT PAGE ============ */
.ck-stepper{
  display:flex;align-items:center;gap:8px;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:12px;padding:14px 18px;margin-bottom:20px;
}
.ck-step{
  display:flex;align-items:center;gap:10px;flex:1;
}
.ck-step .n{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:700;
  background:var(--ivory-2);color:var(--muted);border:1px solid var(--line-2);
  flex-shrink:0;
}
.ck-step.done .n{background:var(--green);color:#fff;border-color:var(--green)}
.ck-step.active .n{background:var(--navy);color:var(--gold);border-color:var(--navy)}
.ck-step .info .lab{font-size:10.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.ck-step .info .nm{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:1px}
.ck-step.done .info .nm,.ck-step.muted .info .nm{color:var(--muted-2)}
.ck-step-bar{flex:1;height:2px;background:var(--line-2);border-radius:2px;position:relative;max-width:80px}
.ck-step-bar.done{background:var(--green)}

.ck-wrap{display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start}
.ck-form{display:flex;flex-direction:column;gap:16px}
.ck-box{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:14px;padding:22px 24px;
}
.ck-box-head{
  display:flex;align-items:center;gap:11px;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.ck-box-head .ic{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--navy-700) 0%,var(--navy-900) 100%);
  color:var(--gold);display:grid;place-items:center;font-size:13px;
  box-shadow:0 0 0 1px var(--line-gold);
}
.ck-box-head h3{margin:0;font-size:15px;font-weight:700}
.ck-box-head .num{
  margin-right:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--muted);letter-spacing:.14em;
}

.ck-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ck-field{display:flex;flex-direction:column;gap:6px}
.ck-field.full{grid-column:1/-1}
.ck-field label{
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;gap:6px;
}
.ck-field label .req{color:var(--red);font-size:11px}
.ck-field input, .ck-field select, .ck-field textarea{
  font-family:inherit;font-size:14px;color:var(--ink);
  padding:11px 14px;border:1px solid var(--line-2);
  background:var(--paper);border-radius:9px;outline:none;
  transition:all .15s;
}
.ck-field input:focus, .ck-field select:focus, .ck-field textarea:focus{
  border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px var(--gold-glow);
}
.ck-field input::placeholder, .ck-field textarea::placeholder{color:var(--muted-2)}
.ck-field textarea{resize:vertical;min-height:80px}

/* ============================================================
   Custom Select Dropdown (للمحافظات والمناطق)
   ============================================================ */
.custom-select{position:relative;width:100%}
.cs-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:inherit;font-size:14px;color:var(--ink);text-align:right;
  padding:11px 14px;border:1px solid var(--line-2);background:var(--paper);
  border-radius:9px;outline:none;cursor:pointer;transition:all .15s;
  min-height:46px;
}
.cs-trigger:hover{border-color:var(--gold-soft)}
.custom-select.is-open .cs-trigger{
  border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px var(--gold-glow);
}
.custom-select.is-disabled .cs-trigger{
  background:var(--ivory-2);color:var(--muted-2);cursor:not-allowed;
  border-color:var(--line);
}
.cs-value{flex:1;text-align:right;font-weight:500}
.cs-value.cs-placeholder{color:var(--muted-2);font-weight:400}
.cs-arrow{
  font-size:11px;color:var(--muted-2);transition:transform .25s cubic-bezier(0.22,1,0.36,1);
  flex-shrink:0;
}
.custom-select.is-open .cs-arrow{transform:rotate(180deg);color:var(--gold-dim)}

/* القائمة المنسدلة */
.cs-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:100;
  background:var(--paper-2);border:1px solid var(--line-gold);
  border-radius:11px;box-shadow:0 16px 40px -12px rgba(15,31,43,0.25), 0 0 0 1px var(--line);
  overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(0.98);
  transition:opacity .2s, transform .2s cubic-bezier(0.22,1,0.36,1), visibility .2s;
}
.cs-dropdown::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--gold) 50%,transparent 100%);
}
.custom-select.is-open .cs-dropdown{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);
}

/* مربع البحث داخل القائمة */
.cs-search-wrap{
  position:relative;padding:10px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
.cs-search-wrap i{
  position:absolute;right:21px;top:50%;transform:translateY(-50%);
  color:var(--muted-2);font-size:12px;pointer-events:none;
}
.cs-search-input{
  width:100%;padding:9px 36px 9px 12px;
  font-family:inherit;font-size:13px;color:var(--ink);
  background:#fff;border:1px solid var(--line-2);border-radius:8px;outline:none;
  transition:all .15s;
}
.cs-search-input:focus{
  border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow);
}
.cs-search-input::placeholder{color:var(--muted-2)}

/* قائمة الخيارات */
.cs-options{
  max-height:240px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line-gold) transparent;
}
.cs-options::-webkit-scrollbar{width:6px}
.cs-options::-webkit-scrollbar-track{background:transparent}
.cs-options::-webkit-scrollbar-thumb{background:var(--line-gold);border-radius:3px}
.cs-options::-webkit-scrollbar-thumb:hover{background:var(--gold-soft)}

.cs-option{
  padding:11px 16px;font-size:13.5px;color:var(--ink-2);
  cursor:pointer;transition:all .12s;font-weight:500;
  border-bottom:1px solid var(--line);position:relative;
}
.cs-option:last-child{border-bottom:none}
.cs-option:hover{
  background:var(--ivory);color:var(--ink);padding-right:20px;
}
.cs-option.is-selected{
  background:linear-gradient(90deg,var(--gold-glow) 0%,transparent 100%);
  color:var(--gold-dim);font-weight:700;
}
.cs-option.is-selected::before{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:11px;
}

/* رسالة عدم وجود نتائج */
.cs-no-results{
  padding:24px 16px;text-align:center;font-size:13px;color:var(--muted);
  font-style:italic;
}

/* ============================================================
   نهاية Custom Select
   ============================================================ */

.ck-pay-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-pay-opt{
  display:flex;align-items:center;gap:12px;padding:14px;
  border:1.5px solid var(--line-2);border-radius:10px;cursor:pointer;
  transition:all .15s;background:var(--paper);
}
.ck-pay-opt:hover{border-color:var(--line-gold)}
.ck-pay-opt.active{border-color:var(--gold);background:#fff;box-shadow:0 0 0 2px var(--gold-glow)}
.ck-pay-opt .ic{
  width:38px;height:38px;border-radius:9px;
  background:var(--ivory-2);color:var(--gold-dim);
  display:grid;place-items:center;font-size:14px;flex-shrink:0;
  border:1px solid var(--line-gold);
}
.ck-pay-opt .info .nm{font-size:13.5px;font-weight:700;color:var(--ink)}
.ck-pay-opt .info .desc{font-size:11px;color:var(--muted);margin-top:2px}
.ck-pay-opt .check{
  margin-right:auto;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--line-2);display:grid;place-items:center;flex-shrink:0;
}
.ck-pay-opt.active .check{border-color:var(--gold);background:var(--gold)}
.ck-pay-opt.active .check::after{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  color:var(--navy-900);font-size:11px;
}

.ck-submit{
  padding:24px;background:linear-gradient(180deg,var(--paper-2) 0%,var(--ivory) 100%);
  border:1px solid var(--line-gold);border-radius:14px;text-align:center;
}
.ck-submit .btn{height:54px;font-size:15px;min-width:260px}
.ck-submit .btn:disabled,.ck-submit .btn.is-disabled{
  opacity:0.5;cursor:not-allowed;background:var(--muted-2);
  border-color:var(--muted-2);color:var(--paper-2);
}
.ck-submit .btn:disabled:hover{background:var(--muted-2);color:var(--paper-2)}
.ck-submit .note{font-size:11.5px;color:var(--muted);margin-top:10px;display:inline-flex;align-items:center;gap:6px}
.ck-submit .note i{color:var(--gold-dim)}

/* Terms agreement checkbox */
.ck-terms-agree{
  display:flex;align-items:flex-start;gap:10px;
  padding:14px 16px;margin-bottom:18px;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:10px;cursor:pointer;text-align:right;
  transition:all 0.2s;user-select:none;
}
.ck-terms-agree:hover{border-color:var(--line-gold);background:var(--ivory)}
.ck-terms-agree input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;
}
.ck-terms-check{
  flex-shrink:0;width:20px;height:20px;
  border:2px solid var(--line-2);border-radius:5px;
  background:var(--paper-2);
  display:inline-flex;align-items:center;justify-content:center;
  transition:all 0.2s;margin-top:1px;
}
.ck-terms-check::after{
  content:"";opacity:0;
  width:6px;height:11px;
  border:solid var(--paper-2);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  transition:opacity 0.15s;margin-bottom:2px;
}
.ck-terms-agree input:checked + .ck-terms-check{
  background:var(--green);border-color:var(--green);
}
.ck-terms-agree input:checked + .ck-terms-check::after{opacity:1}
.ck-terms-text{
  font-size:13.5px;color:var(--ink-2);line-height:1.7;flex:1;
}
.ck-terms-text a{
  color:var(--gold-dim);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--line-gold);text-underline-offset:3px;
  transition:color 0.15s;
}
.ck-terms-text a:hover{color:var(--navy)}

/* checkout summary */
.ck-summary{position:sticky;top:96px}
.ck-summary-box{
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.ck-summary-head{
  background:linear-gradient(180deg,var(--ivory) 0%,var(--paper-2) 100%);
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.ck-summary-head h3{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.ck-summary-head h3 i{color:var(--gold);font-size:12px}

.ck-items{padding:8px 18px;max-height:280px;overflow-y:auto}
.ck-item{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.ck-item:last-child{border-bottom:none}
.ck-item-thumb{
  width:54px;aspect-ratio:3/4;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,#3a3220 0%,#1c1810 100%);position:relative;
  overflow:hidden;
}
.ck-item-thumb.t2{background:linear-gradient(135deg,#5b6d78 0%,#2c3e4a 100%)}
.ck-item-thumb.t3{background:linear-gradient(135deg,#c4b878 0%,#8a6d34 100%)}
.ck-item-thumb .qty{
  position:absolute;top:-6px;left:-6px;
  width:22px;height:22px;border-radius:50%;
  background:var(--gold);color:var(--navy-900);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--paper-2);
}
.ck-item-info{flex:1;min-width:0}
.ck-item-nm{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:3px}
.ck-item-opt{font-size:10.5px;color:var(--muted);display:flex;gap:8px}
.ck-item-opt .dot{width:8px;height:8px;border-radius:50%}
.ck-item-tot{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:700;color:var(--ink);direction:ltr;flex-shrink:0}

.ck-summary-totals{padding:14px 18px;border-top:1px solid var(--line);background:var(--paper)}

/* ============ ORDER CONFIRMATION ============ */
.cf-wrap{max-width:880px;margin:24px auto 0}
.cf-success{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-800) 50%,var(--navy-900) 100%);
  color:var(--ivory);border-radius:18px;padding:40px 32px;
  position:relative;overflow:hidden;
  border:1px solid var(--line-gold);
  text-align:center;margin-bottom:22px;
}
.cf-success::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--gold) 50%,transparent 100%);
}
.cf-success::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 240px at 50% -10%,var(--gold-glow) 0%,transparent 60%);
  pointer-events:none;
}
.cf-check{
  position:relative;z-index:1;
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold) 0%, var(--gold-dim) 70%);
  display:grid;place-items:center;color:var(--navy-900);
  font-size:32px;margin:0 auto 18px;
  box-shadow:0 0 0 4px rgba(212,168,83,.2), 0 0 0 8px rgba(212,168,83,.08);
}
.cf-success h1{
  position:relative;z-index:1;
  font-size:30px;font-weight:800;margin:0 0 8px;letter-spacing:-.01em;
}
.cf-success p{position:relative;z-index:1;color:rgba(245,241,232,.8);font-size:14.5px;margin:0;max-width:520px;margin-inline:auto;line-height:1.7}
.cf-order-no{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  padding:9px 16px;background:rgba(212,168,83,.12);
  border:1px solid var(--line-gold);border-radius:9px;
}
.cf-order-no .k{font-size:11px;color:rgba(245,241,232,.7);font-family:"IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
.cf-order-no .v{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:700;color:var(--gold);direction:ltr;letter-spacing:.02em}

/* timeline */
.cf-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
  padding:24px 26px;margin-bottom:18px;
}
.cf-card-head{
  display:flex;align-items:center;gap:11px;padding-bottom:14px;
  margin-bottom:18px;border-bottom:1px solid var(--line);
}
.cf-card-head .ic{
  width:32px;height:32px;border-radius:8px;
  background:var(--ivory-2);color:var(--gold-dim);
  display:grid;place-items:center;font-size:12px;
  border:1px solid var(--line-gold);
}
.cf-card-head h3{margin:0;font-size:15px;font-weight:700}

.cf-timeline{display:flex;align-items:flex-start;justify-content:space-between;position:relative;padding:6px 0}
.cf-timeline::before{
  content:"";position:absolute;top:18px;left:36px;right:36px;height:2px;
  background:var(--line-2);z-index:0;
}
.cf-timeline .progress{
  position:absolute;top:18px;left:36px;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-dim) 100%);z-index:1;
  width:30%;
}
.cf-tl-step{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.cf-tl-step .ic{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;color:var(--muted);
  background:var(--paper-2);border:2px solid var(--line-2);margin-bottom:10px;
}
.cf-tl-step.done .ic{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
.cf-tl-step.current .ic{background:var(--navy);color:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-glow)}
.cf-tl-step .nm{font-size:12px;font-weight:700;color:var(--ink-2)}
.cf-tl-step.done .nm,.cf-tl-step.current .nm{color:var(--ink)}
.cf-tl-step .tm{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);margin-top:3px;direction:ltr}

/* invoice details */
.cf-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-info-card{
  background:var(--paper);border:1px solid var(--line);border-radius:11px;
  padding:14px 16px;
}
.cf-info-card .head{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--muted);letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;font-weight:600;
}
.cf-info-card .head i{color:var(--gold)}
.cf-info-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:5px 0;font-size:13px}
.cf-info-row .k{color:var(--muted);font-size:12.5px}
.cf-info-row .v{color:var(--ink);font-weight:600;text-align:left;direction:ltr}
.cf-info-row .v.ar{direction:rtl;text-align:right}

/* invoice items table */
.cf-items-table{width:100%;border-collapse:collapse;font-size:13px}
.cf-items-table th{
  padding:11px 12px;text-align:right;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--muted);
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;direction:ltr;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.cf-items-table th:last-child{text-align:left}
.cf-items-table td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.cf-items-table tbody tr:last-child td{border-bottom:none}
.cf-items-table .num-cell{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);direction:ltr;width:30px}
.cf-items-table .prod-cell{display:flex;align-items:center;gap:11px}
.cf-items-table .prod-cell .th{
  width:46px;aspect-ratio:3/4;border-radius:7px;flex-shrink:0;
  background:linear-gradient(135deg,#3a3220 0%,#1c1810 100%);
  position:relative;overflow:hidden;
}
.cf-items-table .prod-cell .th.t2{background:linear-gradient(135deg,#5b6d78 0%,#2c3e4a 100%)}
.cf-items-table .prod-cell .th.t3{background:linear-gradient(135deg,#c4b878 0%,#8a6d34 100%)}
.cf-items-table .prod-cell .nm{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.cf-items-table .prod-cell .opts{font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:8px}
.cf-items-table .prod-cell .opts .dot{width:8px;height:8px;border-radius:50%}
.cf-items-table .price-cell, .cf-items-table .total-cell{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;direction:ltr;text-align:left}
.cf-items-table .qty-cell{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:700;color:var(--ink-2);direction:ltr;text-align:center;width:60px}

.cf-totals{
  margin-top:18px;padding-top:18px;border-top:1px dashed var(--line-2);
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
}
.cf-totals .row{display:flex;align-items:center;gap:14px;font-size:13.5px;width:100%;justify-content:flex-end}
.cf-totals .row .k{color:var(--muted);min-width:120px;text-align:left}
.cf-totals .row .v{font-family:"IBM Plex Mono",monospace;font-weight:700;color:var(--ink);direction:ltr;min-width:120px;text-align:left}
.cf-totals .row.grand{font-size:17px;padding-top:8px;margin-top:6px;border-top:1px solid var(--line)}
.cf-totals .row.grand .v{font-size:22px;font-weight:800;color:var(--gold-dim)}

.cf-actions{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}

/* ============ RESPONSIVE ============ */
@media (max-width: 1040px){
  .hero-inner{grid-template-columns:1fr;gap:30px;padding:36px 0;min-height:auto}
  .hero h1{font-size:38px}
  .hero-inner-centered{padding:48px 0 44px;min-height:auto}
  .hero-inner-centered h1{font-size:42px}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid-pills{grid-template-columns:repeat(3,1fr)}
  .trust-strip{grid-template-columns:repeat(2,1fr)}
  .pd-wrap{grid-template-columns:1fr;gap:24px}
  .cart-wrap{grid-template-columns:1fr}
  .ck-wrap{grid-template-columns:1fr}
  .cart-summary,.ck-summary{position:static}
}
@media (max-width: 720px){
  .hero h1{font-size:30px}
  .hero-inner-centered{padding:40px 0 36px}
  .hero-inner-centered h1{font-size:30px;line-height:1.15}
  .hero-inner-centered p{font-size:14.5px;line-height:1.7}
  .hero-inner-centered .hero-cta{flex-direction:column;gap:10px;width:100%;max-width:280px;margin:0 auto}
  .hero-inner-centered .hero-cta .btn{width:100%;justify-content:center}
  .hero-meta-centered{gap:18px;flex-wrap:wrap}
  .hero-meta-centered .hero-meta-item .num{font-size:21px}
  .hero-meta-centered .hero-meta-item .lab{font-size:10px}
  .hero-meta-divider{height:28px}
  .hero-divider{margin:28px auto 22px;max-width:220px}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid-pills{grid-template-columns:repeat(2,1fr)}
  .trust-strip{grid-template-columns:1fr}
  .pd-gallery{grid-template-columns:1fr}
  .pd-info h1{font-size:24px}
  .pd-perks{grid-template-columns:1fr}
  .pd-meta-strip{grid-template-columns:1fr}
  .ck-grid{grid-template-columns:1fr}
  .ck-pay-options{grid-template-columns:1fr}
  .cart-item{
    grid-template-columns:72px 1fr;
    grid-template-areas: 
      "thumb info"
      "thumb price"
      "actions actions";
    gap:10px 12px;
    padding:14px;
  }
  .cart-item .cart-thumb{grid-area:thumb}
  .cart-item .cart-info{grid-area:info}
  .cart-item .cart-price{
    grid-area:price;
    text-align:right;
    padding:6px 10px;
    background:rgba(212,168,83,0.06);
    border-radius:7px;
    font-size:13px;
    font-weight:700;
    color:var(--gold-dim);
  }
  .cart-item .cart-price-edit{
    background:transparent;
    padding:0;
  }
  .cart-item .cart-price-edit input{
    font-size:13px;
    padding:6px 8px;
    width:100%;
  }
  .cart-item .cart-total-cell{
    grid-area:actions;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:10px;
    border-top:1px dashed rgba(0,0,0,0.08);
    margin-top:4px;
  }
  .cart-item .cart-total-cell::before{
    content:"الإجمالي";
    font-size:11px;
    color:var(--muted);
    font-weight:600;
  }
  .cart-thumb{width:72px;height:72px}
  .cf-info-grid{grid-template-columns:1fr}
  .cf-items-table .num-cell,.cf-items-table .price-cell{display:none}
  .cf-timeline{flex-direction:column;align-items:flex-start;gap:14px}
  .cf-timeline::before,.cf-timeline .progress{display:none}
  .cf-tl-step{flex-direction:row;text-align:right;gap:12px;width:100%}
  .cf-tl-step .ic{margin-bottom:0}
  .cf-success h1{font-size:22px}
  .page-head-block h1{font-size:22px}
}
/* ============================================================
   ملاحظة توضيحية فوق textarea الملاحظات في checkout
   ============================================================ */
.ck-notes-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, #fff7e0 0%, #fef3c7 100%);
    border: 1.5px solid #fbbf24;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 14px 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: #78350f;
}

.ck-notes-hint i {
    flex-shrink: 0;
    color: #d97706;
    font-size: 16px;
    margin-top: 1px;
}

.ck-notes-hint span {
    flex: 1;
    font-weight: 600;
}

@media (max-width: 720px) {
    .ck-notes-hint {
        font-size: 11.5px;
        padding: 10px 12px;
    }
    .ck-notes-hint i {
        font-size: 14px;
    }
}

/* ============================================================
   Promo Code Box (Checkout)
   ============================================================ */
.cs-promo-box {
    background: linear-gradient(135deg, var(--gold-glow) 0%, rgba(212, 168, 83, 0.04) 100%);
    border: 1px dashed var(--line-gold);
    border-radius: 10px;
    padding: 12px;
    margin: 10px 0 12px;
}

.cs-promo-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold-dim);
    margin-bottom: 9px;
}

.cs-promo-header i { font-size: 13px; }

.cs-promo-input-row {
    display: flex;
    gap: 6px;
}

.cs-promo-input-row.hidden {
    display: none !important;
}

.cs-promo-input {
    flex: 1;
    padding: 8px 11px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--paper-2);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy-900);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.cs-promo-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.12);
}

.cs-promo-apply {
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    color: var(--navy-900);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.cs-promo-apply:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -2px rgba(212, 168, 83, 0.45);
}

.cs-promo-apply:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.cs-promo-message {
    margin-top: 9px;
    margin-bottom: 12px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cs-promo-message.hidden { display: none; }

.cs-promo-message-success {
    background: var(--green-soft);
    color: #1a5b3a;
    border: 1px solid rgba(63, 138, 90, 0.3);
}

.cs-promo-message-error {
    background: var(--red-soft);
    color: #7a2f23;
    border: 1px solid rgba(181, 74, 58, 0.3);
}

.cs-promo-message-info {
    background: var(--blue-soft);
    color: #1f3d52;
    border: 1px solid rgba(47, 93, 122, 0.3);
}

/* الكوبون المُطبَّق */
.cs-promo-applied {
    background: linear-gradient(135deg, var(--green-soft) 0%, rgba(63, 138, 90, 0.1) 100%);
    border: 1px solid rgba(63, 138, 90, 0.35);
    border-radius: 9px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cs-promo-applied.hidden { display: none; }

.cs-promo-applied-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.cs-promo-applied-info > i {
    width: 30px;
    height: 30px;
    background: var(--green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.cs-promo-applied-info > div {
    flex: 1;
    min-width: 0;
}

.cs-promo-applied-info strong {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    color: #1a5b3a;
    letter-spacing: 0.5px;
}

.cs-promo-applied-info span {
    display: block;
    font-size: 11px;
    color: #2d6943;
    margin-top: 1px;
}

.cs-promo-remove {
    width: 26px;
    height: 26px;
    background: rgba(181, 74, 58, 0.1);
    border: 1px solid rgba(181, 74, 58, 0.25);
    color: var(--red);
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.cs-promo-remove:hover {
    background: var(--red);
    color: white;
    border-color: var(--red);
}

/* صف الخصم */
.cs-row-discount {
    color: var(--green) !important;
}

.cs-row-discount.hidden { display: none; }

.cs-row-discount .k {
    color: var(--green) !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cs-row-discount .v {
    color: var(--green) !important;
    font-weight: 800;
}


/* ============================================================
   Cart Promo Box (سلة المشتريات)
   ============================================================ */
.cart-promo-box {
    background: linear-gradient(135deg, var(--gold-glow) 0%, rgba(212, 168, 83, 0.04) 100%);
    border: 1px dashed var(--line-gold);
    border-radius: 10px;
    padding: 12px;
    margin: 10px 0 12px;
}

.cart-promo-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold-dim);
    margin-bottom: 9px;
}

.cart-promo-header i { font-size: 13px; }

.cart-promo-input-row {
    display: flex;
    gap: 6px;
}

.cart-promo-input-row.hidden { display: none !important; }

.cart-promo-input {
    flex: 1;
    padding: 8px 11px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--paper-2);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy-900);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.cart-promo-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.12);
}

.cart-promo-apply {
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
    color: var(--navy-900);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
}

.cart-promo-apply:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -2px rgba(212, 168, 83, 0.45);
}

.cart-promo-apply:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.cart-promo-message {
    margin-top: 9px;
    margin-bottom: 12px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-promo-message.hidden { display: none; }

.cart-promo-message-success {
    background: var(--green-soft);
    color: #1a5b3a;
    border: 1px solid rgba(63, 138, 90, 0.3);
}

.cart-promo-message-error {
    background: var(--red-soft);
    color: #7a2f23;
    border: 1px solid rgba(181, 74, 58, 0.3);
}

/* الكوبون المُطبَّق */
.cart-promo-applied {
    background: linear-gradient(135deg, var(--green-soft) 0%, rgba(63, 138, 90, 0.1) 100%);
    border: 1px solid rgba(63, 138, 90, 0.35);
    border-radius: 9px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cart-promo-applied.hidden { display: none; }

.cart-promo-applied-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.cart-promo-applied-info > i {
    width: 30px;
    height: 30px;
    background: var(--green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.cart-promo-applied-info > div {
    flex: 1;
    min-width: 0;
}

.cart-promo-applied-info strong {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 800;
    color: #1a5b3a;
    letter-spacing: 0.5px;
}

.cart-promo-applied-info span {
    display: block;
    font-size: 11px;
    color: #2d6943;
    margin-top: 1px;
}

.cart-promo-remove {
    width: 26px;
    height: 26px;
    background: rgba(181, 74, 58, 0.1);
    border: 1px solid rgba(181, 74, 58, 0.25);
    color: var(--red);
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.cart-promo-remove:hover {
    background: var(--red);
    color: white;
    border-color: var(--red);
}

/* صف الخصم في cart */
.cs-row-discount {
    color: var(--green) !important;
}

.cs-row-discount.hidden { display: none; }

.cs-row-discount .k {
    color: var(--green) !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cs-row-discount .v {
    color: var(--green) !important;
    font-weight: 800;
}

/* ============ Checkout Promo Box - حالة "مُطبَّق مسبقاً" ============ */
.cs-promo-box.is-applied-from-cart {
    opacity: 0.6;
    pointer-events: none;
    filter: grayscale(0.3);
}

.cs-promo-box.is-applied-from-cart::after {
    content: 'مُطبَّق من السلة - يمكن التعديل بالعودة للسلة';
    display: block;
    text-align: center;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 8px;
    font-style: italic;
}