/* =====================================================================
   Ocean Furniture — product description layout (Salla / Malak "angel-theme")
   v2 · الصقه في خانة CSS في: محرر الثيم ← تخصيص متقدم
   (امسح الكود القديم الموجود في الخانة: "product description v3")
   يعمل مع ocean-salla.js
   ===================================================================== */

/* ---------- 0. ألوان أوشن (غيّر من هنا) ---------- */
:root {
  --oc-green: #01261E;      /* الأخضر الغامق */
  --oc-yellow: #F8B916;     /* الأصفر */
  --oc-cream: #FFF4DE;      /* الكريمي */
  --oc-price-sale: #15803D; /* السعر بعد الخصم */
  --oc-price-old: #DC2626;  /* السعر قبل الخصم */
}

/* ---------- 1. أي خلفية صفراء: النص أخضر غامق بوزن متوسط ---------- */
.angel-ad, .angel-ad :where(a, p, span, strong, b, i, div),
.bg-primary, .bg-primary :where(a, p, span, strong, b, i),
.btn-primary, .btn--primary, .btn-primary i, .btn--primary i,
.btn-outline-primary:hover, .btn--outline-primary:hover, .btn--outline:hover,
.s-button-solid.s-button-primary, .s-button-solid.s-button-primary :where(span, i, svg),
.s-button-outline.s-button-primary:hover, .s-button-outline.s-button-primary:hover :where(span, i),
.s-product-options-grid-mode input:checked + div,
.s-cart-summary-count, .bubble,
.s-product-card-fixed-btn button:hover,
.s-add-product-toast__btns button:hover,
.angel-discountcoupon .copycodebtn,
.s-quick-order .s-quick-order-container .s-quick-order-button-cont salla-button button {
  color: var(--oc-green) !important;
  font-weight: 500 !important;
}
.s-button-solid.s-button-primary svg, .angel-ad svg { fill: currentColor; }

/* ---------- 2. السعر: بعد الخصم أخضر، وقبل الخصم أحمر ---------- */
.price_is_on_sale .total-price, .price_is_on_sale .total-price i { color: var(--oc-price-sale) !important; }
.price_is_on_sale .before-price, .price_is_on_sale .before-price i { color: var(--oc-price-old) !important; }
.dark .price_is_on_sale .total-price, .dark .price_is_on_sale .total-price i { color: #4ADE80 !important; }
.dark .price_is_on_sale .before-price, .dark .price_is_on_sale .before-price i { color: #F87171 !important; }

/* ---------- 3. ما تحت السعر يبدأ على نفس خط العنوان والسعر ---------- */
.product-single .main-content .product-availablity .product-available-dot { margin-inline-start: 0; }
.product-single .main-content article.full-description[data-ocz] { padding-left: 0; padding-right: 0; }

/* ---------- 4. وصف المنتج ---------- */
.ocz {
  --oz-g: var(--oc-green, #01261E);
  --oz-y: var(--oc-yellow, #F8B916);
  --oz-c: var(--oc-cream, #FFF4DE);
  --oz-ink: var(--oc-ink, #1F2420);
  --oz-mute: var(--oc-muted, #5B635E);
  --oz-line: var(--oc-line, #E7E2D6);
  --oz-tile: #FAF7F0;
  direction: rtl;
  text-align: right;
  color: var(--oz-ink);
  font-size: 15px;
  line-height: 1.75;
}
.ocz *, .ocz *::before, .ocz *::after { box-sizing: border-box; }
/* the theme styles .opt-text p / li (justify, disc bullets): reset inside the block */
.ocz p, .opt-text .ocz p { margin: 0; text-align: right; }
.ocz ul, .ocz dl, .opt-text .ocz ul { margin: 0; padding: 0; list-style: none; }
.ocz li, .opt-text .ocz li { margin: 0; list-style: none; font-family: inherit; }
.ocz dt, .ocz dd { margin: 0; }

/* top part (stays in the description, above the buy button) */
.ocz-top { margin: 6px 0 4px; }
.ocz .ocz-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ocz .ocz-badges li {
  font-size: 13px; font-weight: 500; color: var(--oz-g);
  background: var(--oz-c); border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.ocz .ocz-lead { font-size: 14.5px; color: var(--oz-ink); }

/* accordion (placed under the buy button) */
.ocz-below { margin: 16px 0 8px; }
.ocz .ocz-acc { border-top: 1px solid var(--oz-line); }
.ocz .ocz-acc > details { border-bottom: 1px solid var(--oz-line); }
.ocz .ocz-acc summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 22px; align-items: center; column-gap: 10px;
  padding: 13px 2px; min-height: 48px;
}
.ocz .ocz-acc summary::-webkit-details-marker { display: none; }
.ocz .ocz-acc summary::marker { content: ""; }
.ocz .ocz-acc summary b { font-size: 15.5px; color: var(--oz-g); line-height: 1.5; font-weight: 700; }
.ocz .ocz-acc summary span { grid-column: 1; font-size: 13px; color: var(--oz-mute); line-height: 1.5; }
.ocz .ocz-acc summary::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2; justify-self: center;
  width: 9px; height: 9px; border-left: 2px solid var(--oz-g); border-bottom: 2px solid var(--oz-g);
  transform: rotate(-45deg); margin-top: -4px; transition: transform .2s;
}
.ocz .ocz-acc details[open] > summary::after { transform: rotate(135deg); margin-top: 4px; }
.ocz .ocz-acc details[open] > summary span { display: none; }
.ocz .ocz-acc summary:focus-visible { outline: 2px solid var(--oz-y); outline-offset: 2px; border-radius: 6px; }
.ocz .ocz-body { padding: 0 2px 16px; font-size: 14.5px; }
.ocz .ocz-body > * + * { margin-top: 10px; }

/* tiles: "* اسم — تفصيل" */
.ocz .ocz-pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ocz .ocz-pieces li { background: var(--oz-tile); border-radius: 10px; padding: 8px 10px; font-size: 14px; font-weight: 700; line-height: 1.45; }
.ocz .ocz-pieces small { display: block; font-weight: 400; font-size: 12px; color: var(--oz-mute); }

/* specs: "* عنوان: قيمة" */
.ocz .ocz-specs > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--oz-line); }
.ocz .ocz-specs > div:last-child { border-bottom: 0; }
.ocz .ocz-specs dt { color: var(--oz-mute); font-size: 13.5px; }
.ocz .ocz-specs dd { font-weight: 600; font-size: 14px; }

/* checks: "* نص" */
.ocz .ocz-checks li { position: relative; padding: 4px 22px 4px 0; }
.ocz .ocz-checks li::before {
  content: ""; position: absolute; right: 2px; top: 12px; width: 10px; height: 6px;
  border-left: 2px solid var(--oz-g); border-bottom: 2px solid var(--oz-g); transform: rotate(-45deg);
}

/* Q&A: "س: ..." */
.ocz .ocz-qa dt { font-weight: 700; color: var(--oz-ink); margin-top: 10px; }
.ocz .ocz-qa dt:first-child { margin-top: 0; }
.ocz .ocz-qa dd { color: var(--oz-mute); font-size: 14px; }

.ocz .ocz-note { font-size: 13.5px; }
.ocz .ocz-sub { font-weight: 700; color: var(--oz-g); font-size: 14.5px; }
.ocz .ocz-body > .ocz-sub + * { margin-top: 6px; }
/* description with nothing left above the buy button */
article.full-description.ocz-empty { display: none; }
.ocz a:not(.ocz-wa) { color: var(--oz-g); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* help row */
.ocz .ocz-help {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; background: var(--oz-c); border-radius: 12px; padding: 12px 14px;
}
.ocz .ocz-help p { font-size: 14.5px; font-weight: 500; color: var(--oz-g); }
.ocz .ocz-wa {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--oz-g); color: #fff !important; font-weight: 700; font-size: 14px;
  text-decoration: none !important; white-space: nowrap;
}
.ocz .ocz-wa:focus-visible { outline: 2px solid var(--oz-y); outline-offset: 2px; }

@media (min-width: 1024px) {
  .ocz .ocz-pieces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* theme dark mode (html.dark) */
.dark .ocz { --oz-ink: var(--dark-text-main, #fff); --oz-mute: rgba(255,255,255,.7); --oz-line: rgba(255,255,255,.15); --oz-tile: rgba(255,255,255,.06); }
.dark .ocz .ocz-acc summary b, .dark .ocz .ocz-help p, .dark .ocz .ocz-sub { color: var(--oz-y); }
.dark .ocz .ocz-acc summary::after, .dark .ocz .ocz-checks li::before { border-color: var(--oz-y); }
.dark .ocz .ocz-help { background: rgba(255,255,255,.06); }

@media (prefers-reduced-motion: reduce) { .ocz .ocz-acc summary::after { transition: none; } }