/* ============================================================
   BROKEN BOX — Product Page CSS v16
   Swiper-safe gallery fix + current styles
   ============================================================ */

/* =========================
   Base
   ========================= */
body.product-single,
.product-single,
.product-single #app,
.product-single .app-inner,
.product-single .container {
  background: #ffffff !important;
}

/* =========================
   Header
   ========================= */
#mainnav,
#mainnav.art-sticky,
#mainnav.art-sticky-header,
.art-sticky,
.art-sticky-header {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1) !important;
  z-index: 99 !important;
}

/* =========================
   Visibility
   ========================= */
.product-brand,
a.brand-logo,
div.product-brand,
nav.breadcrumbs,
salla-breadcrumb {
  display: block !important;
}

.product-single .art-main-content .art-single-btns,
.product-single .art-main-content .grid.grid-cols-1.lg\:grid-cols-3,
.product-single .art-sidebar [slot="thumbs"],
.product-single .art-sidebar .swiper-thumbs,
.product-single .art-sidebar .details-slider__thumbs,
.grid.grid-cols-1.lg\:grid-cols-3,
.art-banner-header,
.s-comment-form-content,
button.btn--wishlist.animated.sws.s-button-element.s-button-icon.s-button-outline.s-button-light-outline.s-button-loader-center {
  display: none !important;
}

/* =========================
   Breadcrumbs
   ========================= */
.product-single nav.breadcrumbs {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: 0 !important;
}

.product-single .breadcrumbs .s-breadcrumb-wrapper,
.product-single salla-breadcrumb .s-breadcrumb-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #8c8c8c !important;
}

.product-single .breadcrumbs .s-breadcrumb-item,
.product-single salla-breadcrumb .s-breadcrumb-item {
  color: #8c8c8c !important;
  font-size: 12px !important;
}

.product-single .breadcrumbs .s-breadcrumb-item a,
.product-single salla-breadcrumb .s-breadcrumb-item a {
  color: #8c8c8c !important;
  text-decoration: none !important;
}

.product-single .breadcrumbs .s-breadcrumb-item:last-child,
.product-single salla-breadcrumb .s-breadcrumb-item:last-child {
  color: #111 !important;
}

.product-single .breadcrumbs .s-breadcrumb-arrow svg,
.product-single salla-breadcrumb .s-breadcrumb-arrow svg {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.5 !important;
}

/* =========================
   Layout
   ========================= */
.product-single [id^="product-"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 44px !important;
  overflow: visible !important;
  margin-top: 0 !important;
}

.product-single .art-sidebar {
  width: 58% !important;
  min-width: 58% !important;
  max-width: 58% !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  position: sticky !important;
  top: 72px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: flex-start !important;
}

.product-single .art-main-content {
  width: 42% !important;
  min-width: 0 !important;
  max-width: 42% !important;
  flex-shrink: 1 !important;
  overflow: visible !important;
  position: relative !important;
  padding-top: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.product-single .art-main-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================
   Brand logo
   ========================= */
.product-single .product-brand {
  order: 0 !important;
  width: auto !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.product-single .product-brand .brand-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
  text-decoration: none !important;
}

.product-single .product-brand .brand-logo img {
  display: block !important;
  width: auto !important;
  height: 22px !important;
  max-width: 140px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================
   Gallery
   ========================= */
.product-single .art-sidebar .art-details-slider,
.product-single .art-sidebar salla-slider,
.product-single .art-sidebar .art-details-slider .swiper-container,
.product-single .art-sidebar .art-details-slider .swiper,
.product-single .art-sidebar .art-details-slider .swiper-wrapper,
.product-single .art-sidebar [slot="items"] {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product-single .art-sidebar .swiper,
.product-single .art-sidebar .s-slider-container {
  overflow: hidden !important;
}

.product-single .art-sidebar .swiper-wrapper {
  align-items: stretch !important;
}

.product-single .art-sidebar .swiper-slide,
.product-single .art-sidebar .homeslider__slide,
.product-single .art-sidebar .magnify-wrapper,
.product-single .art-sidebar [slot="items"] > a {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* لا نعدّل عرض السلايد نفسه — نخلي Swiper يحسبه */
.product-single .art-sidebar .swiper-slide > img,
.product-single .art-sidebar .homeslider__slide > img,
.product-single .art-sidebar .magnify-wrapper > img,
.product-single .art-sidebar [slot="items"] > a > img,
.product-single .art-sidebar .swiper-slide img.lazy,
.product-single .art-sidebar .homeslider__slide img.lazy {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 730px !important;
  max-height: 730px !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.product-single .art-sidebar img,
.product-single .art-sidebar img.object-cover,
.product-single .art-sidebar .object-cover {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* =========================
   Slider arrows + counter
   ========================= */
.product-single .art-sidebar .swiper-button-next,
.product-single .art-sidebar .swiper-button-prev,
.product-single .art-sidebar [class*="swiper-button"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid #ececec !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.product-single .art-sidebar .swiper-button-next:hover,
.product-single .art-sidebar .swiper-button-prev:hover,
.product-single .art-sidebar [class*="swiper-button"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1) !important;
}

.product-single .art-sidebar .image-counter,
.product-single .art-sidebar [class*="counter"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.product-single .art-sidebar .image-counter {
  position: absolute !important;
  left: 16px !important;
  bottom: 16px !important;
  z-index: 9 !important;
  background: rgba(0, 0, 0, 0.82) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  line-height: 1 !important;
  font-size: 12px !important;
}

/* =========================
   Promotion title
   ========================= */
.promotion-title,
.art-promotion-title {
  font-size: 11px !important;
  letter-spacing: 0 !important;
  background: #000 !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
}

/* =========================
   Content order
   ========================= */
.product-single .art-main-content .product-brand { order: 0 !important; }
.product-single .art-main-content h2.product-entry__sub-title { order: 1 !important; }
.product-single .art-main-content h1 { order: 2 !important; }
.product-single .art-main-content > .flex.justify-between { order: 3 !important; }
.product-single .art-main-content .art-product-form { order: 4 !important; }
.product-single .art-main-content salla-installment { order: 5 !important; }
.product-single .art-main-content .mb-3.flex.justify-between { order: 6 !important; }
.product-single .art-main-content .product__description { order: 7 !important; }
.product-single .art-main-content salla-quick-order,
.product-single .art-main-content salla-mini-checkout-widget { order: 4 !important; }

/* =========================
   Typography
   ========================= */
h2.product-entry__sub-title {
  font-size: 11px !important;
  letter-spacing: 1.4px !important;
  color: #8c8c8c !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

.product-single h1 {
  font-size: 42px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  line-height: 1 !important;
  color: #111 !important;
}

.product-single .flex.justify-between.items-center.mb-4 h2 {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #111 !important;
}

.product-single .flex.justify-between.items-center.mb-4.pb-4 {
  border-bottom: none !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================
   Form blocks
   ========================= */
.art-product-form {
  margin-top: 2px !important;
}

.art-product-form > section.flex.p-2.px-5 {
  display: none !important;
}

.art-product-form .sticky-product-bar__quantity,
.art-product-form salla-quantity-input,
.art-product-form label[aria-label="Quantity"] {
  display: none !important;
}

.art-product-form .sticky-product-bar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================
   Size guide
   ========================= */
.art-product-form section.bg-white {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  margin: 14px 0 12px !important;
  box-shadow: none !important;
}

.art-product-form section.bg-white .center-between {
  align-items: center !important;
}

.art-product-form section.bg-white b.form-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #111 !important;
}

.art-product-form section.bg-white .with-arrow {
  font-size: 12px !important;
  color: #fff !important;
}

/* =========================
   Size buttons
   ========================= */
salla-product-options {
  display: block !important;
  margin: 18px 0 10px !important;
}

salla-product-options .s-option-btn,
salla-product-options button,
salla-product-options [role="button"],
salla-product-options .s-button-wrap,
.s-product-options-grid-mode input + div,
.s-product-options-grid-mode input + .s-product-options-grid-mode-span {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 10px !important;
  min-width: 48px !important;
  height: 44px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: none !important;
}

salla-product-options .s-option-btn:hover,
salla-product-options .s-option-btn:focus,
salla-product-options button:hover,
salla-product-options button:focus,
salla-product-options [role="button"]:hover,
salla-product-options [role="button"]:focus,
salla-product-options .s-button-wrap:hover,
salla-product-options .s-button-wrap:focus,
.s-product-options-grid-mode input:hover + div,
.s-product-options-grid-mode input:focus + div {
  background: #fff !important;
  color: #111 !important;
  border-color: #d8d8d8 !important;
  box-shadow: none !important;
  transform: none !important;
}

salla-product-options .s-option-btn.is-selected,
salla-product-options .s-option-btn[aria-selected="true"],
salla-product-options .s-option-btn[aria-pressed="true"],
salla-product-options .s-option-btn.active,
salla-product-options button.is-selected,
salla-product-options button[aria-selected="true"],
salla-product-options button[aria-pressed="true"],
salla-product-options button.active,
salla-product-options [role="button"][aria-selected="true"],
salla-product-options [role="button"][aria-pressed="true"],
salla-product-options [role="button"].active,
salla-product-options .s-button-wrap[aria-selected="true"],
salla-product-options .s-button-wrap[aria-pressed="true"],
salla-product-options .s-button-wrap.active,
.s-product-options-grid-mode input:checked + div,
.s-product-options-grid-mode input:checked + .s-product-options-grid-mode-span,
salla-product-options .s-product-options-grid-mode input:checked + div,
salla-product-options .s-product-options-grid-mode input:checked + .s-product-options-grid-mode-span {
  border-color: #414042 !important;
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

/* =========================
   Buttons
   ========================= */
.s-button-element {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 5px !important;
  cursor: pointer;
}

.s-button-text svg {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: currentColor !important;
}

/* Add to cart wrapper */
.art-product-form salla-add-product-button,
.art-product-form salla-add-product-button.s-button-wrap,
.art-product-form salla-add-product-button.hydrated {
  display: block !important;
  width: 100% !important;
  margin: 10px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

.art-product-form salla-add-product-button,
.art-product-form salla-add-product-button * {
  box-sizing: border-box !important;
}

/* Actual add to cart button */
.art-product-form salla-add-product-button .s-button-wrap,
.art-product-form salla-add-product-button button,
.art-product-form salla-add-product-button a,
.art-product-form salla-add-product-button .s-button-element,
.art-product-form salla-add-product-button button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center[quick-buy],
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center.s-button-wrap.hydrated[quick-buy],
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center[quick-buy] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  color: #111111 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  font-size: 16px !important;
  line-height: 2 !important;
  transform: none !important;
}

.art-main-content .s-add-product-button-main:not(salla-slider:not([type='carousel']):not([type='thumbs']):not(.hydrated) > div) > salla-button,
.art-main-content .s-add-product-button-main:not(salla-slider.photos-slider:not(.hydrated) > div) > salla-button {
  min-height: 52px !important;
}

.art-product-form salla-add-product-button .s-button-wrap::before,
.art-product-form salla-add-product-button .s-button-wrap::after,
.art-product-form salla-add-product-button button::before,
.art-product-form salla-add-product-button button::after,
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center.s-button-wrap.hydrated[quick-buy]::before,
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center.s-button-wrap.hydrated[quick-buy]::after,
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center[quick-buy]::before,
button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center[quick-buy]::after {
  display: none !important;
  content: none !important;
}

/* Primary button hover */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  font-weight: bold;
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
  position: relative !important;
  z-index: 5 !important;
  border-radius: 5px !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary .s-button-text,
salla-button .s-button-element.s-button-btn.s-button-solid.s-button-primary .s-button-text {
  color: #000000 !important;
  font-weight: bold !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active),
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:is(:hover,:focus,:focus-visible,:active) {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) .s-button-text,
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center:is(:hover,:focus,:focus-visible,:active) .s-button-text {
  color: #fff !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) svg,
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) svg path {
  fill: #fff !important;
  stroke: #fff !important;
  color: #fff !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active)::before,
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active)::after,
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) .s-button-text::before,
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:is(:hover, :focus, :focus-visible, :active) .s-button-text::after {
  color: #fff !important;
}

/* Outline cart button */
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline {
  background: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 5px !important;
  color: #fff !important;
}

.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline .s-button-text,
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline .sicon-cart-add,
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline i {
  color: #fff !important;
}

.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline svg,
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline svg path {
  fill: #fff !important;
  stroke: #fff !important;
}

.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:is(:hover,:focus,:focus-visible,:active) {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:is(:hover,:focus,:focus-visible,:active) .sicon-cart-add,
.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline:is(:hover,:focus,:focus-visible,:active) i {
  color: #fff !important;
}

/* Wishlist button if shown elsewhere */
.btn--wishlist.s-button-element {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
}

/* Social share */
.s-social-share-btn button,
.s-social-share-btn.s-button-element {
  background-color: black !important;
  color: white !important;
  border: 1px solid black !important;
}

.s-social-share-btn svg path {
  fill: black !important;
}

.s-social-share-btn:hover button,
.s-social-share-btn:hover.s-button-element {
  background-color: #000 !important;
}

.s-social-share-btn:hover svg path {
  fill: white !important;
}

.art-main-content .art-single-btns .s-button-icon,
.art-text-button {
  border-radius: 5px !important;
}

.s-button-element.s-button-link.s-button-solid.s-button-primary-link.s-button-loader-after {
  padding: 6px !important;
}

/* =========================
   Quick order fallback
   ========================= */
salla-quick-order,
salla-quick-order * {
  box-sizing: border-box !important;
}

salla-quick-order > div,
salla-quick-order form,
salla-quick-order .s-quick-order-wrapper,
salla-quick-order .quick-order-wrapper,
salla-quick-order .s-button-group,
salla-quick-order .buttons-wrapper {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

salla-quick-order .s-button-wrap,
salla-quick-order button,
salla-quick-order a.s-button-wrap,
salla-quick-order .btn--quick-order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 18px !important;
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid #111111 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  text-transform: none !important;
  letter-spacing: 0.4px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  transform: none !important;
}

/* =========================
   Installments
   ========================= */
tamara-widget {
  --inline-outlined-background-color-hover: #F2F2F2 !important;
}

salla-installment {
  display: block !important;
  margin: 16px 0 14px !important;
}

salla-installment .s-installment-item {
  border-radius: 10px !important;
  border: none !important;
  padding: 9px 12px !important;
  margin-bottom: 8px !important;
  background: #efefef !important;
  box-shadow: none !important;
  min-height: auto !important;
}

salla-installment .s-installment-item * {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

salla-installment .s-installment-item img,
salla-installment .s-installment-item svg {
  max-height: 18px !important;
  width: auto !important;
}

/* =========================
   Additional elements
   ========================= */
.s-localization-modal-input:checked {
  background-color: #000000 !important;
  accent-color: #000000 !important;
}

.s-modal-close svg path {
  fill: #000000 !important;
}

.s-form-control {
  border: 1.5px solid #ccc !important;
  padding: 10px;
  font-size: 16px;
  color: #000;
  position: relative;
}

.shadow-md {
  --tw-shadow: none !important;
  box-shadow: none !important;
}

.btn--close {
  color: black !important;
  background-color: transparent !important;
  border: none !important;
}

.s-comments-product {
  background-color: #ffffff !important;
  color: #000000 !important;
}

#page-main-title {
  margin: 5px;
}

#force-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#force-center img {
  display: block;
  margin: 0 auto;
}

.s-modal-body.s-modal-align-middle.s-modal-xs.s-modal-padding.s-modal-entering {
  z-index: 1000 !important;
}

/* =========================
   Price text
   ========================= */
h4.text-\[var\(--color-primary\)\] {
  color: #ff0000 !important;
  font-weight: bold !important;
}

.total-price {
  color: #000000 !important;
  font-weight: bold !important;
}

h3.text-\[var\(--color-primary-reverse\)\] {
  color: white !important;
  text-shadow: 1.5px 1.5px 5px rgba(0, 0, 0, 0.7) !important;
  font-weight: bold !important;
}

/* =========================
   Thumbnails / active thumb
   ========================= */
.swiper-slide-thumb-active {
  border: 1px solid #2b2b2b !important;
  box-shadow: none !important;
}

.swiper-slide-thumb-active::before,
.swiper-slide-thumb-active::after {
  display: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* =========================
   Marketing banners / hero
   ========================= */
@media (max-width: 768px) {
  .art-banner-2 {
    height: 50vh !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* Radius 10px للصور المذكورة */
.col-span-4.row-span-3.relative.z-20 > img,
.col-span-4.row-span-2.relative.z-10 > img {
  border-radius: 10px !important;
}

/* =========================
   SKU
   ========================= */
.product-single .mb-3.flex.justify-between {
  margin: 12px 0 0 !important;
}

.product-single .mb-3.flex.justify-between .flex.items-center {
  font-size: 12px !important;
  color: #111 !important;
}

.product-single .mb-3.flex.justify-between .text-gray-500 {
  font-size: 12px !important;
  color: #8b8b8b !important;
}

/* =========================
   Description
   ========================= */
.product__description {
  padding: 0 !important;
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid #ececec !important;
}

.product__description .article--main {
  font-size: 14px !important;
  line-height: 1.95 !important;
  color: #444 !important;
}

.product__description h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-top: 20px !important;
  margin-bottom: 8px !important;
  color: #111 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* =========================
   Related + footer
   ========================= */
salla-products-slider {
  margin-top: 56px !important;
}

.store-footer,
.art-store-footer {
  margin-top: 56px !important;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 992px) {
  .product-single [id^="product-"] {
    gap: 28px !important;
  }

  .product-single .art-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    top: auto !important;
    height: auto !important;
  }

  .product-single .art-main-content {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    position: sticky !important;
    padding-bottom: 32px !important;
  }

  .product-single h1 {
    font-size: 34px !important;
  }
}

@media (max-width: 992px) and (min-width: 769px) {
  .product-single [id^="product-"] {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .product-single .art-sidebar,
  .product-single .art-main-content {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    position: sticky !important;
  }
}

@media (max-width: 768px) {
  .product-single nav.breadcrumbs {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .product-single .product-brand .brand-logo img {
    height: 20px !important;
    max-width: 120px !important;
  }

  .product-single [id^="product-"] {
    flex-direction: column !important;
    gap: 22px !important;
  }

  .product-single h1 {
    font-size: 28px !important;
  }

  .product-single .flex.justify-between.items-center.mb-4 h2 {
    font-size: 18px !important;
  }

  salla-product-options .s-option-btn,
  salla-product-options button,
  salla-product-options [role="button"],
  salla-product-options .s-button-wrap,
  .s-product-options-grid-mode input + div,
  .s-product-options-grid-mode input + .s-product-options-grid-mode-span {
    min-width: 44px !important;
    height: 42px !important;
  }

  .art-product-form salla-add-product-button .s-button-wrap,
  .art-product-form salla-add-product-button button,
  .art-product-form salla-add-product-button a,
  .art-product-form salla-add-product-button .s-button-element,
  button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center.s-button-wrap.hydrated[quick-buy],
  button.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary.s-button-loader-center[quick-buy],
  salla-mini-checkout-widget .s-add-product-button-mini-checkout-content,
  div[slot="widget-label"].s-add-product-button-mini-checkout-content,
  salla-quick-order .s-button-wrap,
  salla-quick-order button,
  salla-quick-order a.s-button-wrap,
  salla-quick-order .btn--quick-order {
    height: 50px !important;
    min-height: 50px !important;
  }

  salla-installment .s-installment-item {
    padding: 9px 11px !important;
  }

  salla-installment .s-installment-item * {
    font-size: 10px !important;
  }

  .product-single .art-product-form .sticky-product-bar {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .product-single .art-product-form .sticky-product-bar .s-add-product-button-main {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .product-single .art-product-form .sticky-product-bar .s-add-product-button-main > salla-button,
  .product-single .art-product-form .sticky-product-bar .s-add-product-button-main > salla-mini-checkout-widget,
  .product-single .art-product-form .sticky-product-bar .s-add-product-button-main > .s-button-wrap,
  .product-single .art-product-form .sticky-product-bar .s-add-product-button-main > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* ─── FIX: Apple Pay button height + gap ───────────────────── */
apple-pay-button {
  --apple-pay-button-height: 52px !important;
  width: 100% !important;
  display: block !important;
}

salla-quick-buy {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
}

.product-single .art-main-content {
  position: sticky !important;
}

#reorder-section {
  display: none !important;
}

.px-0 {
    padding-left: 4px;
    padding-right: 4px;
}
.py-5 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
      padding-left: 4px;
    padding-right: 4px;
}

.product-brand, a.brand-logo, div.product-brand, nav.breadcrumbs {
    color: #8c8c8c !important
}