/* Add custom CSS styles below */
/* ============================================================
   URBAN — featured-products / "الأكثر مبيعًا" card restyle
   Paste into the site-wide custom CSS box.

   Plain CSS. No Tailwind, no build, no JavaScript.
   Everything is scoped to .s-block--tabs-produtcs, so it only
   touches this section and cannot leak to the rest of the site.
   (That class name is spelled "produtcs" by Salla. Not a typo here.)
   ============================================================ */

.s-block--tabs-produtcs {
  --u-red:     #e31e24;   /* falls back to the store's brand colour below */
  --u-dark:    #0e0e0e;
  --u-ink-2:   #6e6e6e;
  --u-surface: #ffffff;
  --u-sand:    #f2f2f2;
  --u-line:    #e6e6e6;
  --u-shadow-sm: 0 4px 14px rgb(0 0 0 / 7%);
  --u-shadow:    0 10px 30px rgb(0 0 0 / 10%);
}

/* Use the merchant's brand colour when the theme exposes it. */
@supports (color: var(--color-primary)) {
  .s-block--tabs-produtcs { --u-red: var(--color-primary, #e31e24); }
}

/* ---- section background --------------------------------------------- */
.s-block--tabs-produtcs {
  background: #f7f7f7;
}

/* ---- the card ------------------------------------------------------- */
.s-block--tabs-produtcs .s-product-card-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  background: var(--u-surface);
  box-shadow: var(--u-shadow-sm);
  transition: transform .15s, box-shadow .2s;
}
.s-block--tabs-produtcs .s-product-card-entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--u-shadow);
}

/* ---- image ----------------------------------------------------------
   Stock Raed sizes this by height, which beats aspect-ratio. Both height
   and max-height must be cleared or the square crop never applies. */
.s-block--tabs-produtcs .s-product-card-image {
  position: relative;
  flex: none;
  overflow: hidden;
  height: auto;
  max-height: none;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: var(--u-sand);
}
.s-block--tabs-produtcs .s-product-card-image > a {
  display: block;
  width: 100%;
  height: 100%;
}
.s-block--tabs-produtcs .s-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- promo flag ------------------------------------------------------ */
.s-block--tabs-produtcs .s-product-card-promotion-title {
  position: absolute;
  z-index: 2;
  top: 12px;
  height: auto;
  padding: 4px 11px;
  border-radius: 0;
  background: var(--u-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
[dir="rtl"] .s-block--tabs-produtcs .s-product-card-promotion-title { right: 12px; left: auto; }
[dir="ltr"] .s-block--tabs-produtcs .s-product-card-promotion-title { left: 12px; right: auto; }

/* ---- content --------------------------------------------------------- */
.s-block--tabs-produtcs .s-product-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 16px 18px;
  text-align: start;
}
.s-block--tabs-produtcs .s-product-card-content-title {
  display: block;
  margin: 0;
  color: var(--u-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.s-block--tabs-produtcs .s-product-card-content-title a { color: inherit; }

/* ---- price row ------------------------------------------------------- */
/* margin-top:auto pins the price to the card's bottom edge, so cards with
   short titles don't leave dead white space when the slider equalises heights */
.s-block--tabs-produtcs .s-product-card-content-sub {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid var(--u-line);
}

/* plain price, and the current price inside a sale block */
.s-block--tabs-produtcs .s-product-card-price,
.s-block--tabs-produtcs .s-product-card-sale-price h4 {
  margin: 0;
  color: var(--u-dark);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.s-block--tabs-produtcs .s-product-card-sale-price {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
}
/* the struck-through original price */
.s-block--tabs-produtcs .s-product-card-sale-price span {
  color: var(--u-ink-2);
  font-size: 12.5px;
  text-decoration: line-through;
  text-decoration-color: var(--u-red);
  text-decoration-thickness: 1.5px;
}

/* discount pill — the live markup uses .discount-tag with two <small>s */
.s-block--tabs-produtcs .discount-tag {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 10px;
  border-radius: 0;
  background: #fce9e9;
}
.s-block--tabs-produtcs .discount-tag small {
  margin: 0 1px;
  color: #c0141a;
  font-size: 10.5px;
  font-weight: 700;
}

/* rating pushed to the end of the price row */
.s-block--tabs-produtcs .s-product-card-rating {
  margin-inline-start: auto;
  color: var(--u-ink-2);
  font-size: 12px;
}

/* ---- tab trigger ----------------------------------------------------- */
.s-block--tabs-produtcs .tabs { justify-content: center; }
.s-block--tabs-produtcs .tabs .tab-trigger.s-button-element,
.s-block--tabs-produtcs .tabs button.tab-trigger {
  border-radius: 0;
  font-weight: 700;
  letter-spacing: .3px;
}

/* ---- OPTIONAL: the approved design has no cart button or heart on the
   card — it is a plain link to the product page. DELETE these four lines
   to keep "أضف إلى السلة" and the wishlist heart visible. -------------- */
.s-block--tabs-produtcs .s-product-card-content-footer,
.s-block--tabs-produtcs .s-product-card-wishlist-btn {
  display: none;
}

/* ============================================================
   URBAN — customer reviews / "آراء العملاء" restyle
   Paste into the site-wide custom CSS box (same box as the
   featured-products CSS — just append it).

   Plain CSS. No Tailwind, no build, no JavaScript.
   Scoped to .s-reviews-container, which only exists on this
   component, so it cannot leak anywhere else on the site.
   ============================================================ */

.s-reviews-container {
  --u-red:     var(--color-primary, #e31e24);
  --u-dark:    #0e0e0e;
  --u-ink:     #141414;
  --u-ink-2:   #6e6e6e;
  --u-surface: #ffffff;
  --u-shadow-sm: 0 4px 14px rgb(0 0 0 / 7%);
}

/* ---- section heading ------------------------------------------------- */
.s-reviews-container .s-reviews-header-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.s-reviews-container .s-reviews-header {
  margin: 0;
  color: var(--u-dark);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.35;
}

/* "عرض الكل" link, when the component renders one */
.s-reviews-container .s-reviews-display-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--u-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--u-ink-2);
  text-underline-offset: 4px;
}
.s-reviews-container .s-reviews-display-all:hover {
  text-decoration-color: var(--u-dark);
}

/* ---- one review card -------------------------------------------------- */
.s-reviews-container .s-reviews-testimonial {
  padding: 18px 20px;
  border-radius: 0;
  background: var(--u-surface);
  box-shadow: var(--u-shadow-sm);
}

.s-reviews-container .s-reviews-testimonial__inner {
  position: relative;   /* anchors the quote mark below */
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.s-reviews-container .s-reviews-testimonial__avatar img {
  width: 40px;
  height: 40px;
  border-radius: 0;
  object-fit: cover;
}

.s-reviews-container .s-reviews-testimonial__text {
  flex: 1;
  min-width: 0;
}

.s-reviews-container .s-reviews-testimonial__text p {
  margin: 0;
  color: var(--u-ink);
  font-size: 13.5px;
  line-height: 1.9;
}

/* name + stars row under the review body */
.s-reviews-container .s-reviews-testimonial__name_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.s-reviews-container .s-reviews-testimonial__info h2 {
  margin: 0;
  color: var(--u-dark);
  font-size: 13.5px;
  font-weight: 700;
}

/* ---- stars -----------------------------------------------------------
   salla-rating-stars is Salla-owned; only its colour changes.
   Stock sets `fill:#fbbf24` on the span and the <svg> path has no fill
   attribute, so fill inherits down. Setting `color` here does nothing —
   it has to be `fill`. */
.s-reviews-container .s-rating-stars-selected {
  fill: var(--u-red);
}

/* ---- decorative quote mark -------------------------------------------
   Salla's bundled CSS absolutely positions the inner <svg> at top:1rem and
   sizes it 2.25rem, which escapes the card. Both the wrapper and the svg
   have to be pinned, or the mark floats off on its own. */
.s-reviews-container .s-reviews-testimonial__icon {
  position: absolute;
  top: 0;
  width: 26px;
  color: var(--u-ink-2);
  opacity: .1;
}
[dir="rtl"] .s-reviews-container .s-reviews-testimonial__icon { left: 0; right: auto; }
[dir="ltr"] .s-reviews-container .s-reviews-testimonial__icon { right: 0; left: auto; }

.s-reviews-container .s-reviews-testimonial__icon svg {
  position: static;
  width: 100%;
  height: auto;
  fill: currentcolor;
}

/* ---- slider arrows ---------------------------------------------------- */
.s-reviews-container .s-slider-nav-arrow {
  border-radius: 0;
  color: var(--u-dark);
}
.s-reviews-container .s-slider-nav-arrow:hover {
  color: var(--u-red);
}

/* ============================================================
   Neutralise Salla's "spotlight" carousel behaviour.

   Stock CSS treats the centre slide as a hero and the rest as
   dimmed satellites:
     .s-reviews-testimonial                          → opacity: .6
     .swiper-slide:not(.swiper-slide-active) __inner → column + centred
     .swiper-slide:not(.swiper-slide-active) __avatar→ margin-bottom: 2rem
     .swiper-slide-active .s-reviews-testimonial     → 5px coloured bar
     .s-reviews-testimonials-slider .swiper          → margin-inline: -200px

   The design has uniform cards, so every slide is forced to the
   same layout. Those :not(.swiper-slide-active) rules are FOUR
   classes specific, so these selectors have to match that weight
   — a shorter selector silently loses and only the centre card
   changes. That is why they read long.
   ============================================================ */

/* every card fully opaque, no hero bar */
.s-reviews-container .s-reviews-swiper-slide .s-reviews-testimonial {
  opacity: 1;
  height: 100%;
  box-shadow: var(--u-shadow-sm);
}

/* same row layout on every slide, active or not */
.s-reviews-container .s-reviews-swiper-slide .s-reviews-testimonial .s-reviews-testimonial__inner {
  flex-direction: row;
  align-items: flex-start;
  text-align: start;
}

.s-reviews-container .s-reviews-swiper-slide .s-reviews-testimonial .s-reviews-testimonial__avatar {
  margin-bottom: 0;
}

/* stock moves the quote mark to top-centre on inactive slides */
.s-reviews-container .s-reviews-swiper-slide .s-reviews-testimonial .s-reviews-testimonial__icon svg {
  top: 0;
  left: auto;
  width: 100%;
  height: auto;
  transform: none;
}

/* stock bleeds the rail 200px past the container on both sides */
.s-reviews-container .s-reviews-testimonials-slider .swiper {
  margin-left: 0;
  margin-right: 0;
}

/* ---- reveal text + rating on EVERY slide ------------------------------
   Stock hides both by default and only reveals them on the centre slide:
     .s-reviews-testimonial__text p                        → display: none
     .s-reviews-container .swiper-slide-active … p, __rating → display: block
   So without this, four of five reviews render as an avatar and a name
   with no words — which reads as broken rather than as a carousel.
   Matches the stock selector's weight so it actually wins. */
.s-reviews-container .s-reviews-swiper-slide .s-reviews-testimonial__text p,
.s-reviews-container .s-reviews-swiper-slide .s-reviews-testimonial__rating {
  display: block;
}

/* ============================================================
   URBAN — product page light refresh (live Ronaq theme)
   Paste into the site-wide custom CSS box, appended after the
   featured-products and reviews CSS.

   Plain CSS. No Tailwind, no build, no JavaScript.
   Scoped to body.product-single, which Salla only sets on the
   product page, so it cannot leak anywhere else on the site.

   This styles the LIVE store's Ronaq product page — not the Urban
   theme build. Layout stays Ronaq's; only tokens change: square
   corners, red / near-black / gray palette, weight-driven type,
   dark 800 price with red strike, red CTA with glow, BLACK selected
   option pills, white cards separated by shadow instead of borders.

   The price block (.total-price, .before-price, .out-of-stock …)
   is rewritten by Ronaq JS on every option change. Selectors below
   are class-based on purpose — never hide or rename those elements.
   ============================================================ */

body.product-single {
  --u-red:      #e31e24;   /* replaced by the store's brand colour below */
  --u-red-deep: #c0141a;
  --u-dark:     #0e0e0e;
  --u-ink:      #141414;
  --u-ink-2:    #6e6e6e;
  --u-bg:       #f7f7f7;
  --u-surface:  #ffffff;
  --u-sand:     #f2f2f2;
  --u-line:     #e6e6e6;
  --u-shadow-sm: 0 4px 14px rgb(0 0 0 / 7%);
  --u-shadow:    0 10px 30px rgb(0 0 0 / 10%);
  --u-glow:      0 8px 22px rgb(227 30 36 / 30%);
  --u-glow-down: 0 4px 12px rgb(227 30 36 / 25%);

  /* Salla's fast-checkout widget is shadow DOM; these vars are its only
     styling hooks. Without them its button stays rounded next to a square CTA. */
  --salla-fast-checkout-button-border-radius: 0;
  --salla-fast-checkout-button-height: 54px;
}

/* Use the merchant's brand colour when the theme exposes it. */
@supports (color: var(--color-primary)) {
  body.product-single {
    --u-red:      var(--color-primary, #e31e24);
    --u-red-deep: var(--color-primary-dark, #c0141a);
  }
}

/* Glow follows whatever red is actually painted. */
@supports (color: color-mix(in srgb, red 30%, transparent)) {
  body.product-single {
    --u-glow:      0 8px 22px color-mix(in srgb, var(--u-red) 30%, transparent);
    --u-glow-down: 0 4px 12px color-mix(in srgb, var(--u-red) 25%, transparent);
  }
}

/* ---- 1. surface + square corners ------------------------------------- */
body.product-single .ronaq-single-product {
  background: var(--u-bg);
}

/* Urban has no rounded corner anywhere. Blanket sweep, then restore the
   one thing that must stay round: the image-zoom lens. */
body.product-single .ronaq-single-product :is([class*="rounded"], .form-input, .btn, .btn-tab, img, .swiper-slide, section),
body.product-single .sticky-product-bar,
body.product-single .sticky-product-bar * {
  border-radius: 0;
}
body.product-single .img-magnifier-glass {
  border-radius: 50%;
}

/* ---- 2. typography ---------------------------------------------------- */
body.product-single .ronaq-single-product h1 {
  color: var(--u-dark);
  font-weight: 700;
  line-height: 1.3;
}
body.product-single .ronaq-single-product :is(h2, h3),
body.product-single .ronaq-single-product .form-label {
  color: var(--u-dark);
  font-weight: 700;
}
body.product-single .ronaq-single-product :is(.total-price, .before-price, .starting-or-normal-price, .product-weight),
body.product-single .s-quantity-input-input {
  font-variant-numeric: tabular-nums;
}
body.product-single nav.breadcrumbs {
  color: var(--u-ink-2);
  font-size: 12.5px;
}
body.product-single nav.breadcrumbs a:hover {
  color: var(--u-dark);
}

/* ---- 3. gallery -------------------------------------------------------- */
/* promo flag ("لفترة محدودة") — square red tab */
body.product-single .promotion-title {
  padding: 6px 14px;
  border-radius: 0;
  background: var(--u-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .3px;
}

/* wishlist heart overlay — white square card */
body.product-single salla-button.btn--wishlist,
body.product-single salla-button.btn--wishlist .s-button-btn {
  border-radius: 0;
  border-color: transparent;
  background: var(--u-surface);
  color: var(--u-dark);
  box-shadow: var(--u-shadow-sm);
}

body.product-single .details-slider .swiper-slide,
body.product-single .details-slider .swiper-slide img {
  border-radius: 0;
}
/* thumbnail selection is black, like everything selectable in Urban */
body.product-single .details-slider .swiper-slide-thumb-active {
  outline: 2px solid var(--u-dark);
  outline-offset: -2px;
}
body.product-single .details-slider .s-slider-nav-arrow {
  border-radius: 0;
  color: var(--u-dark);
}
body.product-single .details-slider .s-slider-nav-arrow:hover {
  color: var(--u-red);
}

/* ---- 4. rating stars --------------------------------------------------- */
/* stars are SVG — colour is `fill`, not `color` */
body.product-single .s-rating-stars-selected {
  fill: var(--u-red);
}
body.product-single .s-rating-stars-reviews {
  color: var(--u-ink-2);
  font-size: 12.5px;
}

/* ---- 5. top price row (above the form) --------------------------------- */
body.product-single h4.total-price {
  color: var(--u-dark);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
body.product-single .before-price {
  color: var(--u-ink-2);
  font-size: 14px;
  text-decoration: line-through;
  text-decoration-color: var(--u-red);
  text-decoration-thickness: 1.5px;
}

/* ---- 6. in-form price card --------------------------------------------
   Rewritten by Ronaq JS on option change — class selectors only. */
body.product-single form.product-form .price-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}
body.product-single form.product-form .total-price {
  color: var(--u-dark);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}
body.product-single form.product-form .before-price {
  font-size: 16px;
}
body.product-single form.product-form .starting-or-normal-price {
  color: var(--u-ink-2);
  font-size: 13px;
}
body.product-single form.product-form .out-of-stock {
  color: var(--u-red-deep);
  font-size: 14px;
  font-weight: 700;
}
/* discount badge, when Ronaq renders one */
body.product-single form.product-form .discount-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: 0;
  background: #fce9e9;
  color: #c0141a;
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 767px) {
  body.product-single form.product-form .total-price { font-size: 28px; }
}

/* ---- 7. option pills --------------------------------------------------
   Twilight markup: .s-product-options-grid-mode > label > input + div.
   Selected state is BLACK, not red — red is reserved for buy/promo. */
body.product-single .s-product-options-option-label {
  color: var(--u-dark);
  font-size: 13.5px;
  font-weight: 700;
}
body.product-single .s-product-options-grid-mode {
  gap: 8px;
}
body.product-single .s-product-options-grid-mode-span {
  min-height: 40px;
  padding: 9px 17px;
  border: 1px solid var(--u-line);
  border-radius: 0;
  background: var(--u-surface);
  color: var(--u-ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color .15s, color .15s, border-color .15s;
}
body.product-single .s-product-options-grid-mode-span:hover {
  background: var(--u-sand);
}
body.product-single .s-product-options-grid-mode input:checked + div {
  border-color: #0e0e0e;
  background: #0e0e0e;
  color: #f2f2f2;
  font-weight: 600;
}
body.product-single .s-product-options-option-stock-out .s-product-options-grid-mode-span {
  text-decoration: line-through;
  opacity: .5;
}
/* select / text fallbacks */
body.product-single salla-product-options .s-form-control {
  border-radius: 0;
  border-color: var(--u-line);
}
body.product-single salla-product-options .s-form-control:focus {
  border-color: var(--u-dark);
  box-shadow: none;
  outline: 0;
}

/* ---- 8. weight + attachments cards ------------------------------------- */
body.product-single form.product-form section.p-5 {
  border: 0;
  border-radius: 0;
  background: var(--u-surface);
  box-shadow: var(--u-shadow-sm);
}
body.product-single .product-weight {
  color: var(--u-ink);
  font-weight: 600;
}
body.product-single .btn-tab.btn--collapse {
  border-radius: 0;
  background: transparent;
  color: var(--u-dark);
  font-weight: 700;
}
body.product-single .btn-tab.btn--collapse i {
  color: var(--u-ink-2);
}
body.product-single .form-input,
body.product-single textarea.form-input {
  border: 1px solid var(--u-line);
  border-radius: 0;
  background: var(--u-surface);
}
body.product-single .form-input:focus,
body.product-single textarea.form-input:focus {
  border-color: var(--u-dark);
  box-shadow: none;
  outline: 0;
}

/* ---- 9. quantity + add to cart ----------------------------------------- */
body.product-single .sticky-product-bar {
  border-radius: 0;
  border-color: var(--u-line);
}
/* is-sticky-product-bar is a static body class, so this is simply "on mobile" */
@media (max-width: 767px) {
  body.product-single.is-sticky-product-bar .sticky-product-bar {
    background: var(--u-surface);
    box-shadow: 0 -4px 14px rgb(0 0 0 / 7%);
  }
}

body.product-single .s-quantity-input-container {
  height: 54px;
  overflow: hidden;
  border: 1px solid var(--u-line);
  border-radius: 0;
  background: var(--u-surface);
}
body.product-single .s-quantity-input-button {
  border-radius: 0;
  background: transparent;
  fill: var(--u-ink-2);
}
body.product-single .s-quantity-input-button:hover {
  fill: var(--u-dark);
}
body.product-single .s-quantity-input-button:active {
  background: var(--u-sand);
}
body.product-single .s-quantity-input-input {
  border: 0;
  border-radius: 0;
  color: var(--u-dark);
  font-size: 16px;
  font-weight: 700;
}



/* ---- 10. description --------------------------------------------------
   Ronaq JS rebuilds .product__description into .ronaq-desc-* at load and
   injects its own <style> into <head>; this file is later in document
   order and more specific, so it wins. */
body.product-single .ronaq-desc-container .ronaq-desc-section {
  border: 0;
  border-radius: 0;
  background: var(--u-surface);
  box-shadow: var(--u-shadow-sm);
}
body.product-single .ronaq-desc-container .ronaq-desc-header {
  color: var(--u-dark);
  font-size: 18px;
  font-weight: 700;
}
body.product-single .ronaq-desc-container .ronaq-desc-icon {
  color: var(--u-ink-2);
}
body.product-single .ronaq-desc-container .ronaq-desc-content-inner {
  color: var(--u-ink);
  font-size: 14px;
  line-height: 1.85;
}
body.product-single .ronaq-desc-container .ronaq-desc-content-inner :is(b, strong) {
  color: var(--u-dark);
}
/* before Ronaq's script runs (or if it is removed) the original markup shows */
body.product-single .ronaq-product-description-title {
  color: var(--u-dark);
  font-size: 18px;
  font-weight: 700;
}

/* ---- 11. below the fold, token level only ------------------------------ */
body.product-single salla-button.ronaq-btn--wishlist .s-button-btn {
  border-radius: 0;
  border-color: var(--u-line);
  color: var(--u-dark);
}
body.product-single salla-social-share.ronaq-social-share :is(a, button) {
  border-radius: 0;
  color: var(--u-ink-2);
}
body.product-single salla-social-share.ronaq-social-share :is(a, button):hover {
  color: var(--u-dark);
}
/* deliberately untouched: salla-installment, salla-quick-order,
   salla-comments, salla-products-slider[source=related], .s-block--bundle-* */