:root{
  --p:#2FA3A0;
  --p-ink:#fff;

  --bg:#fff;
  --muted:#6B7280;
  --soft:#9CA3AF;
  --b:#E5E7EB;

  --sh:0 10px 30px rgba(17,24,39,.08);
  --sh2:0 18px 50px rgba(17,24,39,.10);

  --ease:cubic-bezier(.22,1,.36,1);

  /* حجم مربعات اللون/المقاس */
  --opt-tile:64px;
}

*{ box-sizing:border-box; }

/* ==========================================================================
   LAYOUT
========================================================================== */
.pd{
  width:min(1200px,92vw);
  margin:14px auto 26px;
  color:#111827;
}

.pd-hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:16px;
}
@media (max-width:980px){
  .pd-hero{ grid-template-columns:1fr; }
}

.pd-card{
  background:var(--bg);
  border:1px solid var(--b);
  border-radius:26px;
  box-shadow:var(--sh);
  overflow:hidden;
}

/* ==========================================================================
   GALLERY
========================================================================== */
.pd-gallery{ padding:14px; }

.pd-media{
  position:relative;
  border-radius:22px;
  border:1px solid var(--b);
  background:linear-gradient(180deg,#fff,#F7F9FB);
  overflow:hidden;
  aspect-ratio:1/1;
  max-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (min-width:900px){
  .pd-media{ aspect-ratio:4/3; max-height:520px; }
}

.pd-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
  border-radius:inherit;
}

.pd-zoom-hint{
  position:absolute;
  bottom:10px;
  inset-inline-start:10px;
  border:0;
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  color:#0F172A;
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  pointer-events:none;
}

.pd-thumbs{
  margin-top:10px;
  display:flex;
  gap:10px;
  overflow:auto;
  padding:8px 2px 2px;
  justify-content:center;
}
.pd-thumbs:empty{ display:none; }

.pd-thumbs .thumb{
  width:84px;
  min-width:84px;
  padding:4px;
  border-radius:14px;
  border:1px solid var(--b);
  background:#fff;
  cursor:pointer;
  transition:transform .14s var(--ease), box-shadow .2s var(--ease), border-color .14s var(--ease);
}
.pd-thumbs .thumb img{
  width:100%;
  height:62px;
  object-fit:cover;
  border-radius:12px;
}
.pd-thumbs .thumb.active,
.pd-thumbs .thumb:focus-visible{
  border-color:var(--p);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--p) 15%, transparent);
  transform:translateY(-2px);
  outline:none;
}

/* ==========================================================================
   DETAILS
========================================================================== */
.pd-info{ padding:18px; }
@media (min-width:980px){
  .pd-info{ position:sticky; top:14px; align-self:start; }
}

.pd-title{
  margin:0 0 10px;
  font-size:clamp(20px,2.6vw,30px);
  font-weight:900;
  color:#0F172A;
}

.pd-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  color:var(--soft);
  font-size:13px;
  margin-bottom:10px;
}

.pd-pill{
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  background:linear-gradient(180deg,#FCE8B7,#F2B84B);
  color:#1F2A37;
  border:1px solid rgba(0,0,0,.06);
}

.pd-price{
  display:flex;
  gap:12px;
  align-items:baseline;
  flex-wrap:wrap;
  margin:10px 0 8px;
}
.pd-price-now{
  color:var(--p);
  font-size:clamp(22px,2.7vw,30px);
  font-weight:1000;
}
.pd-price-old{
  color:var(--soft);
  text-decoration:line-through;
  font-size:14px;
}

/* SKU */
.pd-sku{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#F3F4F6;
  border:1px solid #E5E7EB;
  color:#6B7280;
  font-weight:900;
  font-size:12.5px;
}

/* STOCK badge */
.pd-stock{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #E5E7EB;
  background:#F9FAFB;
  font-weight:900;
  width:fit-content;
  font-size:13px;
  margin-bottom:12px;
}
.pd-stock.stock--high{ background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.25); color:#047857; }
.pd-stock.stock--mid { background:rgba(245,158,11,.12);  border-color:rgba(245,158,11,.28);  color:#92400E; }
.pd-stock.stock--low { background:rgba(239,68,68,.10);   border-color:rgba(239,68,68,.25);   color:#B91C1C; }
.pd-stock.stock--out { background:rgba(107,114,128,.10); border-color:rgba(107,114,128,.25); color:#374151; }

/* ==========================================================================
   OPTIONS SECTION
========================================================================== */
#options.pd-options{
  margin:14px 0 12px;
  padding:14px;
  border:1px solid var(--b);
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#F7F9FB);
  box-shadow:0 14px 30px rgba(17,24,39,.09);
  display:grid;
  gap:12px;
  position:relative;
}
#options::after,
#options.pd-options::after,
#options.pd-options-section::after{
  content:none !important;
  display:none !important;
}

#options.pd-options .pd-opt{
  background:#fff;
  border:1px solid var(--b);
  border-radius:18px;
  padding:12px;
  box-shadow:0 8px 18px rgba(17,24,39,.06);
  display:grid;
  gap:10px;
}

.pd-opt-label{ font-weight:900; color:#111827; }
.pd-opt-value{ color:var(--muted); font-size:13px; }

.pd-opt-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px dashed var(--b);
}

/* اخفاء اسم اللون المختار بجانب "حدد خيارك" */
#optColor #colorName{ display:none !important; }

/* ==========================================================================
   COLOR THUMBS (صورة + اسم)
========================================================================== */
#colorThumbs{
  display:grid !important;
  grid-template-columns:repeat(4, var(--opt-tile)) !important;
  justify-content:start !important;
  gap:8px !important;
  padding:0 !important;
  margin-top:10px !important;
}
@media (max-width:360px){
  #colorThumbs{ grid-template-columns:repeat(3, var(--opt-tile)) !important; }
}

#colorThumbs > *{
  all:unset !important;
  width:var(--opt-tile) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:6px !important;
  cursor:pointer !important;
}

#colorThumbs img{
  width:var(--opt-tile) !important;
  height:var(--opt-tile) !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  background:#fff !important;
  border:2px solid var(--b) !important;
  border-radius:10px !important;
}

#colorThumbs .bh-opt-label{
  display:block !important;
  font-size:12px !important;
  font-weight:900 !important;
  color:#111827 !important;
  line-height:1.1 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}

#colorThumbs span:not(.bh-opt-label),
#colorThumbs .label,
#colorThumbs .name{
  display:none !important;
}

#colorThumbs > *.active img,
#colorThumbs > *[aria-selected="true"] img{
  border-color:var(--p) !important;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--p) 25%, transparent) !important;
}

/* ==========================================================================
   SIZE LIST
========================================================================== */
#sizeList{
  display:grid !important;
  grid-template-columns:repeat(4, var(--opt-tile)) !important;
  justify-content:start !important;
  gap:6px !important;
  padding:0 !important;
  margin-top:10px !important;
}
@media (max-width:360px){
  #sizeList{ grid-template-columns:repeat(3, var(--opt-tile)) !important; }
}

#sizeList > *{
  all:unset !important;
  width:var(--opt-tile) !important;
  height:var(--opt-tile) !important;
  display:grid !important;
  place-items:center !important;
  border:2px solid var(--b) !important;
  border-radius:10px !important;
  background:#fff !important;
  cursor:pointer !important;
}

#sizeList *{
  font-size:12px !important;
  font-weight:1000 !important;
  color:#111827 !important;
  line-height:1 !important;
}

#sizeList > *.active,
#sizeList > *[aria-selected="true"]{
  border-color:var(--p) !important;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--p) 28%, transparent) !important;
}

/* ==========================================================================
   ACTIONS
========================================================================== */
.pd-actions{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}
@media (max-width:520px){
  .pd-actions{ grid-template-columns:1fr; }
}

.btn, .pd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.04);
  background:linear-gradient(
    180deg,
    color-mix(in oklab, var(--p) 92%, #fff),
    color-mix(in oklab, var(--p) 84%, #000)
  );
  color:var(--p-ink);
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(47,163,160,.18);
  transition:transform .14s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}

.btn:hover, .pd-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(47,163,160,.24);
}
.btn:active, .pd-btn:active{ transform:none; }

/* ✅ خط موحّد + مركز */
#actions .btn,
#actions .pd-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.25) !important;
  box-shadow:0 14px 30px rgba(47,163,160,.28) !important;

  font-family:"Cairo","Tajawal","IBM Plex Sans Arabic","Noto Kufi Arabic",system-ui,Arial,sans-serif !important;
  font-weight:900 !important;
  font-size:16px !important;
  line-height:1 !important;
  letter-spacing:.2px !important;
}

#actions .btn .btn__text,
#actions .pd-btn .btn__text{
  flex:1 !important;
  text-align:center !important;
  font-weight:1000 !important;
}

/* ✅ Disabled state لزر "حدد خياراتك" */
#actions button:disabled,
#actions .is-disabled,
#actions [aria-disabled="true"]{
  cursor:not-allowed !important;
  filter:grayscale(.15) !important;
  opacity:.70 !important;
  transform:none !important;
  box-shadow:none !important;
}
#actions button:disabled:hover,
#actions .is-disabled:hover,
#actions [aria-disabled="true"]:hover{
  transform:none !important;
  filter:grayscale(.15) !important;
}

/* ==========================================================================
   QTY (أوضح وأكبر)
========================================================================== */
.qty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#fff;
  border:1px solid var(--b);
  height:56px;
  border-radius:14px;
  padding:0 14px;
}

.qty button{
  all:unset;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  font-weight:1000;
  font-size:22px;
  cursor:pointer;
  border-radius:12px;
  color:#0F172A;
}
.qty button:hover{ background:#F7F9FB; }
.qty button:disabled{ opacity:.45; cursor:not-allowed; }

.qty input[type=number],
#qtyInput{
  width:72px;
  text-align:center;
  border:0;
  outline:none;
  background:transparent;

  font-family:"Cairo","Tajawal","IBM Plex Sans Arabic","Noto Kufi Arabic",system-ui,Arial,sans-serif !important;
  font-size:20px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  color:#0F172A !important;
  letter-spacing:.2px;
}

/* ==========================================================================
   DESCRIPTION (NO TOGGLE)
========================================================================== */
.pd-inline-desc{
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid var(--b);
}
.pd-inline-desc__title{
  margin:0;
  font-weight:1000;
  color:#0F172A;
  font-size:14px;
}

.pd-desc-short,
.pd-desc-long{
  font-family:"Cairo","Tajawal","IBM Plex Sans Arabic","Noto Kufi Arabic",Tahoma,system-ui,Arial,sans-serif;
  line-height:2;
  font-weight:600;
  color:#0B1220;
  font-size:clamp(15.5px, 1vw + .35rem, 18.5px);
  max-width:66ch;
}

#longWrap.pd-desc-wrap{ max-height:none !important; overflow:visible !important; transition:none !important; }
.pd-desc-fade{ display:none !important; }
#toggleDesc, .pd-desc-toggle{ display:none !important; }

/* mobile fixed actions */
@media (max-width:768px){
  .pd{ padding-bottom:140px; }
  #actions.pd-actions, .pd-actions#actions{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1000;
    background:#fff;
    border-top:1px solid var(--b);
    border-radius:24px 24px 0 0;
    box-shadow:0 -12px 32px rgba(15,23,42,.16);
    padding:10px 16px 14px;
    grid-template-columns:1fr;
    gap:8px;
  }
}

/* ==========================================================================
   LIGHTBOX
========================================================================== */
.img-zoom{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(4px);
  pointer-events:auto;
}
.img-zoom.is-open{ display:block; }

.img-zoom__close{
  position:absolute;
  top:12px;
  inset-inline-end:12px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:2105;
  display:grid;
  place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}

.img-zoom__toolbar{
  position:absolute;
  top:12px;
  inset-inline-start:12px;
  z-index:2104;
  display:flex;
  gap:8px;
}

.img-zoom__btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.14);
  color:#fff;
  font-weight:1000;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
}

.img-zoom__stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:hidden;
  touch-action:none;
  z-index:2101;
}

.img-zoom__stage img{
  max-width:100%;
  max-height:100%;
  transform-origin:center;
  will-change:transform;
  user-select:none;
  -webkit-user-drag:none;
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}

@media (max-width:520px){
  .img-zoom__close{ top:10px; }
  .img-zoom__toolbar{ top:10px; }
}

/* ==========================================================================
   PERKS
========================================================================== */
.pd-perks{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--b);
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width:420px){
  .pd-perks{ grid-template-columns:1fr; }
}

.perk{
  background:linear-gradient(180deg,#fff,#F7F9FB);
  border:1px solid var(--b);
  border-radius:18px;
  padding:14px 12px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 10px 22px rgba(17,24,39,.06);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease), border-color .15s var(--ease);
}
.perk:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(17,24,39,.09);
  border-color:color-mix(in oklab, var(--p) 30%, var(--b));
}

.perk__icon{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:color-mix(in oklab, var(--p) 10%, #fff);
  border:1px solid color-mix(in oklab, var(--p) 18%, var(--b));
  flex:0 0 auto;
}

.perk__svg{
  width:22px;
  height:22px;
  fill:color-mix(in oklab, var(--p) 70%, #0F172A);
}

.perk__title{
  font-weight:1000;
  color:#0F172A;
  font-size:14px;
  line-height:1.2;
}
.perk__sub{
  margin-top:4px;
  color:var(--muted);
  font-weight:800;
  font-size:12.5px;
  line-height:1.35;
}

/* ==========================================================================
   Highlight سكشن الخيارات عند الضغط على "حدد خياراتك"
========================================================================== */
#options.pd-opt-attn{
  outline:3px solid color-mix(in oklab, var(--p) 35%, transparent);
  outline-offset:4px;
  box-shadow:0 18px 50px rgba(47,163,160,.18);
  animation:pdPulse .9s ease-out;
}
@keyframes pdPulse{
  0%{ transform:translateY(0); }
  40%{ transform:translateY(-2px); }
  100%{ transform:translateY(0); }
}