/* Product page — the second design.
   Ported from the Bags theme with its `bags-` prefix renamed to `vpdp-`.
   It reads only custom properties this theme already defines:
   --primary-color, --all-borders, --text-color, --buttons-bg-color,
   --buttons-color and --website-bg. */

/* MT_Themes proprietary stylesheet — bound by single-store license to baGS.
   Any further use beyond this license breaches MT_Themes rights
   and may be subject to legal action. */


/* ==================================================================
   BAGS Theme — Product Details Page (PDP) — Figma 1:1523
   Two columns:
     • Media (images stacked vertically, no carousel)
     • Info (sticky on desktop with accordions + actions)
   Followed by a full-width "You may also like" section (color-mix(in srgb, var(--primary-color) 6%, #fff)).
   ================================================================== */

.vpdp {
  padding: 0;
  background: #fff;
}

.vpdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 800px) minmax(0, 800px);
  gap: 0;
  align-items: stretch;
  max-width: 1600px;
  /* Flush to the inline-start edge (right in RTL, left in LTR) — matches Figma:
     images sit against the start edge, info column follows; any extra width
     on wider viewports falls on the inline-end side. */
  margin-inline-start: 0;
  margin-inline-end: auto;
}


/* ===== Images column (flush to edges, stacked vertically) ===== */

.vpdp__media {
  position: relative;
  display: flex;
  flex-direction: column;
}


/* Track wrapper inside `.vpdp__media`. Desktop: a plain flex column
   (slides stack vertically). On ≤991px it becomes a NATIVE horizontal
   scroll-snap carousel — no JS slider library, so it can't fail to
   initialise the way slick did on iOS Safari (the slider would silently
   not start, leaving the images stacked). */

.vpdp__media-track {
  display: flex;
  flex-direction: column;
}

@media (max-width: 991px) {
  .vpdp__media-track {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                                        /* Firefox */
  }
  .vpdp__media-track::-webkit-scrollbar { display: none; }   /* Safari/Chrome */

  .vpdp__media-track .vpdp__media-item {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    /* sticky makes no sense inside a horizontal carousel */
    position: relative !important;
    top: auto !important;
  }

  .vpdp__media-track .vpdp__media-link {
    display: block;
    width: 100%;
    height: auto;
  }

  .vpdp__media-track .vpdp__media-image {
    width: 100%;
    height: auto;
    max-height: 70vh;
    display: block;
  }
}

/* Pagination dots — overlaid on the carousel bottom, mobile only.
   Built in JS (initMediaSlider) from the current slides. */
.vpdp__media-dots {
  position: absolute;
  inset-block-end: 16px;
  inset-inline: 0;
  z-index: 3;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

@media (max-width: 991px) {
  .vpdp__media-dots { display: flex; }
}

.vpdp__media-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: color-mix(in srgb, var(--text-color) 35%, transparent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}

.vpdp__media-dot.is-active {
  background: var(--primary-color, var(--primary-color));
  width: 22px;
}

.vpdp__labels {
  position: absolute;
  top: 24px;
  inset-inline-start: 24px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.vpdp__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 60px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: auto;
}

.vpdp__label--discount {
  background: #ff8284;
  color: #fff;
  font-size: 16px;
}

.vpdp__label--stock {
  background: var(--text-color);
  color: #fff;
}

.vpdp__label--info {
  background: var(--text-color);
  color: #fff;
}

.vpdp__media-item {
  position: relative;
  width: 100%;
  background: #f3f3f3;
  overflow: hidden;
}


/* Optional: each media item sticks to the top while scrolling so the next
   image slides up over it. Toggled by the global setting
   `globals_settings_product_sticky_media_items`. */

.vpdp__media-item.is-sticky {
  position: sticky;
  top: 0;
  align-self: start;
}

.vpdp__media-item.is-sticky {
  position: sticky;
  top: 0px;
}

.vpdp__media-item--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.vpdp__media-link {
  display: block;
  width: 100%;
  /* height: 100%; */
  cursor: zoom-in;
}

.vpdp__media-link.is-video {
  cursor: pointer;
}

.vpdp__media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover-zoom only on real pointer devices. On iOS the :hover state sticks
   after a tap, and `transition: transform` on the slide image promotes it to
   a GPU layer that can hold the previous colour's frame after a variant swap.
   Gating on (hover: hover) keeps the desktop effect and removes it on touch. */
@media (hover: hover) {
  .vpdp__media-image {
    transition: transform 0.5s ease;
  }
  .vpdp__media-link:hover .vpdp__media-image {
    transform: scale(1.02);
  }
}

.vpdp__media-item--empty .vpdp__media-image {
  object-fit: contain;
  max-width: 60%;
  max-height: 60%;
}

.vpdp__play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Clickable overlay that triggers inline video playback. */
.vpdp__play-btn {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  z-index: 3;
}

/* Inline video player — fills the media item and sits above the thumbnail.
   Shown by JS (removes .d-none) when the play icon is tapped. */
.vpdp__video-frame {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #000;
}

.vpdp__video-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.vpdp__video-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 7;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.vpdp__video-close:hover {
  background: rgba(0, 0, 0, 0.8);
}


/* ===== Info column (sticky on desktop) =====
   Sticky is set on the GRID ITEM with align-self:start. This makes the
   item content-height (not stretched), but it still sits inside the
   grid row whose track is as tall as the media column — so the sticky
   range = (media height − info height). Native sticky behavior. */

.vpdp__info {
  position: sticky;
  top: 50px;
  align-self: start;
  padding: 80px 60px;
}

.vpdp__info-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vpdp__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vpdp__badge-wrap {
  margin-bottom: -8px;
}

.vpdp__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.vpdp__title {
  margin: 0;
  font-family: 'Manrope', inherit, sans-serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  flex: 1 1 auto;
}

.vpdp__rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: var(--primary-color);
  flex-shrink: 0;
}

.vpdp__rating-count {
  margin-inline-start: 4px;
  color: #000;
  font-weight: 600;
}

.vpdp__price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.vpdp__price {
  font-family: 'Manrope', inherit, sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1.2;
}

.vpdp__price-old del {
  font-size: 18px;
  color: #b8b8b8;
  font-weight: 400;
}

.vpdp__short-desc {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin: 0;
}

.vpdp__more-link {
  color: var(--primary-color);
  text-decoration: underline;
  margin-inline-start: 6px;
}

.vpdp__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vpdp__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #333;
}

.vpdp__widgets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vpdp__widgets:empty {
  display: none;
}


/* ===== Loyalty points section restyle (Zid widget) ===== */

.vpdp__widgets .loyalty-points-products-section {
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 !important;
  padding: 14px 18px !important;
  background: color-mix(in srgb, var(--primary-color) 3%, #fff);
  border: 1px solid var(--all-borders) !important;
  border-radius: 100px !important;
  color: var(--text-color);
}

/* the chip itself is gone — see the rule in general.*.css. What is left
   of the row is the sentence and the rewards link. */
.vpdp__widgets .loyalty-points-products-section #noCustomerCalculatedPoints {
  display: none !important;
}

.vpdp__widgets .loyalty-points-products-section .loyalty-points-rewards {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--primary-color) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.vpdp__widgets .loyalty-points-products-section .loyalty-points-rewards-logo {
  width: 22px !important;
  height: 22px !important;
}


/* ===== Quantity + Share rows (Figma style) ===== */

.vpdp__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

.vpdp__qty-row,
.vpdp__share-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.vpdp__qty-label,
.vpdp__share-label {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin: 0;
}

.vpdp__qty-control {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  border: 1px solid #f6f6f6;
  border-radius: 40px;
  padding: 10px 20px;
}

.vpdp__qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #000;
  padding: 0;
  transition: opacity .2s ease;
}

.vpdp__qty-btn:hover {
  opacity: .6;
}

.vpdp__qty-btn:active {
  transform: scale(0.95);
}

.vpdp__qty-value {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  min-width: 24px;
  text-align: center;
  line-height: 1;
  user-select: none;
}

.vpdp__qty-hidden {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0 !important;
  white-space: nowrap;
}

.vpdp__share-icons {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.vpdp__share-icon {
  width: 60px;
  height: 60px;
  border: 1px solid #f6f6f6;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  font-size: 22px;
  background: #fff;
  transition: all .25s ease;
}

.vpdp__share-icon svg {
  width: 24px;
  height: 24px;
}

.vpdp__share-icon:hover {
  background: var(--primary-color);
  color: #fff;
}


/* ===== Meta row (sku/weight) ===== */

.vpdp__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 14px;
  color: #555;
}

.vpdp__meta-item {
  display: inline-flex;
  gap: 6px;
}

.vpdp__meta-label {
  font-weight: 600;
  color: #000;
}


/* ===== Variant option pills =====
   variants_list.jinja outputs each option's values as <li> items in a <ul>.
   Style them as clickable pills with active state and a disabled style for
   unavailable combinations. */

.vpdp__variants-wrapper ul,
.vpdp__accordions ul[name][index] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vpdp__variants-wrapper ul li,
.vpdp__accordions ul[name][index] li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  min-width: 56px;
  border: 1px solid var(--all-borders, #e5e5e5);
  border-radius: 999px;
  background: #fff;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.vpdp__variants-wrapper ul li:hover,
.vpdp__accordions ul[name][index] li:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.vpdp__variants-wrapper ul li.active,
.vpdp__accordions ul[name][index] li.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.vpdp__variants-wrapper ul li.active:hover,
.vpdp__accordions ul[name][index] li.active:hover {
  color: #fff;
}

.vpdp__variants-wrapper ul li.disabled,
.vpdp__variants-wrapper ul li[disabled],
.vpdp__accordions ul[name][index] li.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.vpdp__variants-wrapper ul li.disabled:hover,
.vpdp__accordions ul[name][index] li.disabled:hover {
  border-color: var(--all-borders, #e5e5e5);
  color: var(--text-color);
}

.vpdp__variants-wrapper ul li span,
.vpdp__accordions ul[name][index] li span {
  display: inline-block;
  line-height: 1;
}


/* ===== Accordions ===== */

.vpdp__accordions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vpdp__acc {
  border: 1px solid #f3f3f3;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.vpdp__acc.is-open {
  border-color: #e5e5e5;
}

.vpdp__acc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  text-align: inherit;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  color: inherit;
}

.vpdp__acc-title {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
  flex: 1 1 auto;
  text-align: start;
}

.vpdp__acc-count {
  color: #888;
  font-size: 14px;
  font-weight: 500;
}

.vpdp__acc-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-block;
}

.vpdp__acc-icon::before,
.vpdp__acc-icon::after {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  background: #000;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.vpdp__acc-icon::before {
  width: 16px;
  height: 2px;
  margin-right: -8px;
  margin-top: -1px;
}

.vpdp__acc-icon::after {
  width: 2px;
  height: 16px;
  margin-right: -1px;
  margin-top: -8px;
}

.vpdp__acc.is-open .vpdp__acc-icon::after {
  transform: rotate(-90deg);
  opacity: 0;
}

.vpdp__acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.vpdp__acc.is-open .vpdp__acc-body {
  grid-template-rows: 1fr;
}

.vpdp__acc-content {
  min-height: 0;
  overflow: hidden;
  padding: 0 24px;
}

.vpdp__acc.is-open .vpdp__acc-content {
  padding-bottom: 35px;
}

.vpdp__acc-body--prose .vpdp__acc-content {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

.vpdp__acc-body--prose .vpdp__acc-content * {
  max-width: 100%;
}


/* ======================================================================
   Reviews accordion
   ----------------------------------------------------------------------
   Layout (top → bottom):
     1. .vpdp__rating-panel — score circle (inline-start) + bars (inline-end)
     2. .rateContainer — list of review cards (and "see all" link if paginated)
     3. .vpdp__reviews-cta — "Add review" pill button, centered
   ====================================================================== */

.vpdp__acc .rateContainer {
  margin-top: 24px;
}

.vpdp__reviews-cta {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.vpdp__rating-panel {
  display: grid;
  /* First column (score circle + meta) is auto-sized on the inline-start
     (visual right in RTL). Second column (the bars) stretches to fill the
     remaining space on the inline-end (visual left in RTL). */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}


/* ----- Breakdown bars (left in RTL = inline-start) ----- */

.vpdp__rating-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.vpdp__rate-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 14px;
}

.vpdp__rate-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
}

.vpdp__rate-bar {
  position: relative;
  height: 8px;
  background: #f1f1f1;
  border-radius: 999px;
  overflow: hidden;
}

.vpdp__rate-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(-90deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 84%, #000));
  border-radius: 999px;
  transition: width .4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vpdp__rate-count {
  font-size: 13px;
  color: #777;
  text-align: center;
  white-space: nowrap;
}


/* ----- Score circle (right in RTL = inline-end) ----- */

.vpdp__rating-score {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.vpdp__score-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: start;
}

.vpdp__score-total {
  font-size: 13px;
  color: #555;
  font-weight: 500;
}

.vpdp__score-stars {
  display: inline-flex;
  font-size: 14px;
  color: var(--primary-color);
}

.vpdp__score-stars .rating-icon-empty,
.vpdp__score-stars .rating-icon-half,
.vpdp__score-stars .rating-icon-full {
  font-size: 16px;
}

.vpdp__score-outof {
  font-size: 12px;
  color: #888;
  font-weight: 400;
}

.vpdp__score-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex-shrink: 0;
}

.vpdp__score-num {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-color);
  line-height: 1;
  letter-spacing: -0.5px;
}


/* ----- Add-review pill ----- */

.vpdp__add-review-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: transparent;
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 600;
  font-size: 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s ease;
}

.vpdp__add-review-btn:hover {
  background: var(--buttons-bg-color, var(--primary-color));
  color: var(--buttons-color, #fff);
  border-color: var(--buttons-bg-color, var(--primary-color));
}

.vpdp__empty-state {
  margin: 0;
  padding: 0;
  color: #888;
  font-size: 15px;
  text-align: center;
}


/* ======================================================================
   Individual review card
   (.vpdp-review markup lives in components/customer-reviews.jinja)
   ====================================================================== */

.vpdp-review {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: box-shadow .25s ease, transform .25s ease;
}

.vpdp-review:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.vpdp-review__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.vpdp-review__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 6%, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.vpdp-review__avatar img {
  width: 17px;
  height: 25px;
}

.vpdp-review__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vpdp-review__name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.vpdp-review__sep {
  color: #bbb;
  font-weight: 400;
}

.vpdp-review__date {
  font-size: 12px;
  color: #888;
  font-weight: 400;
}

.vpdp-review__stars {
  display: inline-flex;
  font-size: 14px;
  color: var(--primary-color);
}

.vpdp-review__stars .rating-icon-empty,
.vpdp-review__stars .rating-icon-half,
.vpdp-review__stars .rating-icon-full {
  font-size: 16px;
}

.vpdp-review__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #333;
}

.vpdp-review__images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.vpdp-review__images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #eee;
  transition: transform .2s ease;
}

.vpdp-review__images img:hover {
  transform: scale(1.05);
}


/* ----- Store reply (nested under the review) ----- */

.vpdp-review__reply {
  margin-top: 18px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--primary-color) 6%, #fff);
  border-radius: 12px;
  border-inline-start: 3px solid var(--primary-color);
}

.vpdp-review__reply-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.vpdp-review__store-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.vpdp-review__store-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vpdp-review__store-avatar svg {
  width: 22px;
  height: 22px;
  color: var(--primary-color);
}

.vpdp-review__store-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  width: fit-content;
}

.vpdp-review__reply .vpdp-review__text {
  margin-top: 4px;
}


/* All-reviews link (when reviews exceed page) */

.all-reviews-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  font-weight: 600;
  font-size: 13px;
  border-radius: 999px;
  text-decoration: none;
  transition: all .25s ease;
}

.all-reviews-btn:hover {
  background: var(--text-color);
  color: #fff;
  text-decoration: none;
}


/* ===== Out of stock notify form ===== */

.vpdp__notify {
  padding: 24px;
  background: color-mix(in srgb, var(--primary-color) 3%, #fff);
  border-radius: 12px;
}

.vpdp__notify h4.product-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #000;
}

.vpdp__notify .form-group.form-notify-me {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.vpdp__notify .form-control {
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
}

.vpdp__notify .form-control:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: none;
}

.vpdp__notify .form-notify-me-phone-row {
  display: flex;
  gap: 8px;
}

.vpdp__notify .form-notify-me-phone-row > input:first-child {
  max-width: 92px;
}

.vpdp__notify .form-notify-me-submit-button-row {
  display: flex;
  justify-content: flex-end;
}

.vpdp__notify .btn-send-notify {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  height: 44px;
  padding: 0 24px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 60px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s ease;
}

.vpdp__notify .btn-send-notify:hover {
  opacity: .9;
}


/* ===== Action buttons (Add to Cart / Buy Now / Wishlist) ===== */

.vpdp__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.vpdp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
}

.vpdp__btn span {
  line-height: 1;
  display: inline-block;
}

.vpdp__btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.vpdp__btn--primary,
.btn-add-to-cart.vpdp__btn--primary {
  background: none;
  color: var(--text-color);
  border: 1px solid var(--all-borders);
  margin: 0;
}

.vpdp__btn--primary:hover,
.btn-add-to-cart.vpdp__btn--primary:hover {
  background: var(--buttons-bg-color, var(--primary-color));
  border-color: var(--buttons-bg-color, var(--primary-color));
  color: var(--buttons-color, #fff);
}

.vpdp__btn--ghost,
.btn-add-to-cart.vpdp__btn--ghost {
  background: #fff;
  color: var(--text-color);
  border: 1px solid var(--all-borders);
  margin: 0;
}

.vpdp__btn--ghost:hover {
  background: var(--buttons-bg-color, var(--primary-color));
  color: var(--buttons-color, #fff);
  border-color: var(--buttons-bg-color, var(--primary-color));
}

.vpdp__btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.vpdp__wishlist {
  width: 56px;
  height: 56px;
  border: 1px solid var(--all-borders);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
  transition: background-color .2s ease, border-color .2s ease;
  cursor: pointer;
}

.vpdp__wishlist:hover {
  border-color: var(--primary-color);
}

.vpdp__wishlist a.fa-heart-o,
.vpdp__wishlist a.fa-heart {
  color: var(--text-color);
  font-size: 22px;
  transition: color .2s ease;
}


/* ===== Active state: product is in wishlist =====
   Zid toggles either `.fa-heart` (filled icon class) or `.filled` on the
   inner <a>, depending on theme. Style both — the wrapper circle fills
   with the primary color and the icon turns white. */

.vpdp__wishlist:has(a.fa-heart),
.vpdp__wishlist:has(a.filled) {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.vpdp__wishlist:has(a.fa-heart) a,
.vpdp__wishlist:has(a.filled) a {
  color: #000;
}


/* ===== "You may also like" section — full-width color-mix(in srgb, var(--primary-color) 6%, #fff) ===== */

.vpdp__related {
  background: color-mix(in srgb, var(--primary-color) 6%, #fff) !important;
  background-color: color-mix(in srgb, var(--primary-color) 6%, #fff) !important;
  /* The tint makes the top edge read as a line across the page; with no
     padding the heading sat on it. */
  padding-block: 72px;
}

/* Bootstrap's gutter is what keeps this band in line with the rest of the
   page — zeroing it put the heading 18px outside every other block on a
   phone — so the container keeps its own horizontal padding and only the
   vertical rhythm belongs to the section.
   [vineta-related-band-2026-09-13] */
.vpdp__related .vpdp-products-section__container {
  padding-block: 0;
}

/* slick.css centres a track that is narrower than its list (`margin-left:
   auto; margin-right: auto`), which is every store with fewer related
   products than the row shows: three products in a four-up row left the whole
   row inset 165px from the heading. Anchor the track to the start instead. */
.vpdp__related .slick-track {
  margin-inline-start: 0;
}

/* The arrows come out of the flex flow so the title centres against the band
   rather than against the space they leave — and so it stays centred when they
   are hidden, which they are whenever the row has fewer products than columns.
   [vineta-relatedcentre-2026-09-13] */
.vpdp__related .vpdp-products-section__header {
  position: relative;
  margin-bottom: 32px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
}

.vpdp__related .vpdp-products-section__title {
  margin: 0;
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--text-color) !important;
  position: relative;
  padding-bottom: 10px;
  line-height: 1.2;
  text-align: center;
}

.vpdp__related .vpdp-products-section__title::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 44px;
  height: 3px;
  background-color: var(--primary-color, var(--primary-color));
  border-radius: 2px;
}

.vpdp__related .vpdp-products-section__controls {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* ===== Responsive ===== */

@media (max-width: 1199px) {
  .vpdp__grid {
    grid-template-columns: 1fr minmax(0, 600px);
  }
  .vpdp__info {
    padding: 60px 40px;
  }
}

@media (max-width: 991px) {
  /* `minmax(0, 1fr)` (not raw `1fr`) — with raw `1fr` the column's min is
     `auto` and any wide child (like slick's cloned track at ~1M px) blows
     the column out, causing slick to compute slide widths in tens-of-
     thousands of pixels and the images to disappear off-canvas. */
  .vpdp__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vpdp__info {
    padding: 40px 20px;
  }
  .vpdp__info-inner {
    position: static;
  }
  .vpdp__title {
    font-size: 36px;
  }
}

@media (max-width: 575px) {
  .vpdp__info {
    padding: 32px 16px;
  }
  .vpdp__title {
    font-size: 28px;
  }
  .vpdp__btn {
    height: 56px;
    font-size: 15px;
    padding: 0 18px;
  }
  .vpdp__wishlist {
    width: 56px;
    height: 56px;
  }
  .vpdp__share-icon {
    width: 48px;
    height: 48px;
    font-size: 15px;
  }
  .vpdp__share-icon svg {
    width: 20px;
    height: 20px;
  }
  .vpdp__labels {
    inset-block-start: 12px;
    inset-inline-end: 12px;
  }
  .vpdp__qty-label,
  .vpdp__share-label {
    font-size: 16px;
  }
  .vpdp__price {
    font-size: 24px;
  }
  /* Reviews panel — stack vertically and tighten paddings on tablet/mobile */
  .vpdp__rating-panel {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }
  .vpdp__rating-score {
    flex-direction: row-reverse;
    justify-content: center;
  }
  .vpdp__score-circle {
    width: 80px;
    height: 80px;
  }
  .vpdp__score-num {
    font-size: 26px;
  }
  .vpdp__rate-row {
    grid-template-columns: 60px minmax(0, 1fr) 48px;
    gap: 10px;
  }
  .vpdp-review {
    padding: 18px 20px;
  }
  .vpdp__acc-summary {
    padding: 16px 18px;
  }
  .vpdp__acc-body {
    padding: 0 18px 18px;
  }
  .vpdp__related {
    padding-block: 48px;
  }
  .vpdp__related .vpdp-products-section__header {
    margin-bottom: 22px;
  }
  .vpdp__related .vpdp-products-section__title {
    font-size: 22px !important;
  }
}


/* Legacy `.btn-add-to-cart` style — still used by product-questions and
   the question-add modal (Add Question, Cancel, Submit). Excluded for
   PDP buttons (which carry `.vpdp__btn`) so they aren't double-styled. */

.btn-add-to-cart:not(.vpdp__btn) {
  color: var(--buttons-color);
  background-color: var(--buttons-bg-color);
  padding: 10px 30px;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
  border-radius: 5px;
  margin-right: 15px;
  display: inline-block;
  overflow: hidden;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
}

.border-product {
  margin-top: 20px;
}

.cart-product-quantity-dropdown select option {
  color: #021210;
}

.count-products {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  font-size: 13px;
  margin-bottom: 5px;
}

.product-card-rating-count {
  color: var(--text-color);
}

.product-card-rating>span {
  margin-left: 2.5px
}

.product-card-rating .rating-count {
  color: #b9b9b9;
}

.product-card-rating .fa-star {
  color: var(--primary-color);
  font-size: 16px
}

.product-card-rating .fa-star.deactive::before {
  color: #e5e5e5;
}

@media(max-width:480px) {
  .product-card-rating {
    margin-bottom: 10px;
  }
}

#products-list-filter-form-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px
}

.products-pagination {
  margin-bottom: 24px;
  padding: 0 15px;
  margin-top: 30px;
}

.products-pagination .pagination {
  gap: 2px;
}

.products-pagination .page-item {
  margin: 0;
}

.products-pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border: none;
  border-radius: 6px !important;
  background-color: transparent;
  font-family: 'Inter', 'Manrope', sans-serif;
  font-weight: 400;
  padding: 0;
  width: 30px;
  height: 30px;
  color: #8b8b8b;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  transition: background-color .2s, color .2s;
}

.products-pagination .page-link:hover {
  background-color: #f1f1f4;
  color: var(--primary-color);
}

.products-pagination li.active .page-link,
.products-pagination .page-link.active,
.products-pagination .page-link.active:hover {
  background-color: #f1f1f4;
  color: var(--primary-color);
  font-weight: 500;
  border: none;
}

.products-pagination .page-item:first-child .page-link,
.products-pagination .page-item:last-child .page-link {
  background-color: transparent;
  color: var(--primary-color);
  font-size: 14px;
}

.products-pagination .page-item:first-child .page-link:hover,
.products-pagination .page-item:last-child .page-link:hover {
  background-color: #f1f1f4;
}

.products-pagination .page-item.disabled .page-link {
  color: #dcdcdc;
  background-color: transparent;
  cursor: not-allowed;
}

.products-container.flex-grow-1.pt-4 {
  width: 100%
}

.products-container .products-list {
  padding: 0;
}

.bundle-offer-details-products .prod-col {
  width: 320px;
  max-width: 100%;
  margin-bottom: 15px;
}

.products-container .products-list .col-12 {
  margin-bottom: 20px;
}

.products-container .products-list .prod-col {
  height: auto;
  position: relative;
  margin-bottom: 30px;
  display: flex;
}

.products-container .products-list .prod-col > .vpdp-pcard {
  flex: 1;
}

.products-container .products-list .vpdp-pcard__body {
  flex: 1 1 auto;
}

.products-container .products-list .vpdp-pcard__actions {
  margin-top: auto;
}

@media(min-width:1600px) {
  .products-container .products-list .col-12.style2 {
    width: 50%
  }
}

.section-cart-products-row,
.cart-product-row {
  margin-left: -5px;
  margin-right: -5px;
  width: 100%;
}

.section-cart-products-col-1,
.section-cart-products-col-2,
.section-cart-products-col-3,
.section-cart-products-col-4,
.section-cart-products-col-5,
.cart-product-delete,
.cart-products-action,
.cart-product-prices,
.cart-product-col-details,
.cart-product-col-img {
  padding-left: 5px;
  padding-right: 5px
}

.section-cart-products-col-1,
.cart-product-delete {
  flex-shrink: 0;
  width: 6%
}

.section-cart-products-col-2 {
  width: 40%
}

.section-cart-products-col-3,
.cart-products-action {
  flex-shrink: 0;
  width: 15%
}

.section-cart-products-col-4,
.cart-product-prices {
  flex-shrink: 0;
  width: 22%
}

.cart-product-row {
  display: flex;
  align-items: center;
  padding: 15px;
  width: 100%
}

.cart-product-col-img {
  box-shadow: rgba(0, 0, 0, .03) 0 0 6px 3px;
  border: 1px solid var(--all-borders);
  padding: 0!important;
  width: 60px;
  height: 60px;
  border-radius: 10px;
}

.cart-product-col-img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.cart-product-col-details {
  flex-grow: 1
}

.cart-product-col-details {
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 10px;
}

.cart-product-col-details a {
  font-size: 14px
}

.cart-products-action .form-group {
  margin: 0
}

.cart-product-delete a {
  cursor: pointer
}

.cart-product-row-wrapper {
  margin-top: 10px;
  border: 1px solid var(--all-borders);
  border-radius: 0px;
  padding: 5px 15px
}

.cart-product-col-details h1 {
  font-size: 1.4rem
}

.cart-product-col-details h1 a {
  color: inherit;
}

.cart-product-prices .totals {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1.12rem
}

.cart-product-total-before-price {
  display: block;
  color: #ccc;
  font-size: 11px
}

.cart-product-total-price {
  display: inline-block
}

.cart-product-quantity-dropdown label {
  display: none
}

.cart-product-quantity-dropdown select {
  outline: none;
  border: 1.5px solid var(--all-borders);
  border-radius: 0;
  padding: 0 15px;
  min-width: 55px;
  height: 35px;
  cursor: pointer;
  background: none;
  color: var(--text-color);
}

.cart-product-error-messages {
  margin: 10px;
  border-radius: 0px;
  background-color: var(--all-borders);
  padding: 10px 15px 15px;
  color: #f25f5f;
  font-weight: 700;
  text-align: center
}

.cart-product-price-each>span {
  display: inline-block
}

.cart-product-delete a {
  color: inherit
}

.cart-products-with-totals .gift-card .gift-card__button,
.cart-products-with-totals .gift-card .gift-card__button:hover {
  background-color: var(--buttons-bg-color)!important;
  padding: 0 15px!important;
  height: 35px!important;
  color: var(--buttons-color)!important;
  font-weight: 600;
  line-height: 30px;
  border: none!important;
}

.breadcrumb-section .categories .product-img {
  margin-bottom: 25px;
}

.breadcrumb-section .categories .product-img::before {
  opacity: 1;
  visibility: visible;
  transform: rotate(0deg) scale(1);
}

.form-products-filter .title {
  display: block;
  margin-bottom: 15px;
  color: var(--text-color);
  font-weight: 700;
  font-size: 15px
}

.form-products-filter .btns button {
  border: 1px solid var(--buttons-bg-color);
  border-radius: 0;
  background: var(--buttons-bg-color);
  padding: 0 20px;
  padding-bottom: 2px;
  height: 35px;
  border-radius: 0px;
  color: var(--buttons-color)
}

.products-container .empty {
  padding: 50px 0 0;
  text-align: center
}

.products-container .empty img {
  max-width: 100%
}


/* تطوير شركة إم.تي.ثيمز — الإذن مقتصر على متجر b—a-gs.
   ممنوع نقل الكود لمتجر آخر تحت أي ظرف من الظروف. */

.products-container .empty span {
  display: block;
  margin-top: 25px;
  font-weight: 700;
  font-size: 20px
}

.fullfilter .count-products {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 1
}

.all-reviews-btn {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  color: var(--primary-color);
  text-decoration: underline
}

.reviewPage .tableDetails {
  padding-top: 30px
}

.reviewPage .prodPreview {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--all-borders);
  background-color: var(--all-borders);
  padding: 20px
}

.reviewPage .tableDetails .addHead {
  background-color: var(--all-borders)
}

.reviewPage .tableDetails .reviewStyle {
  background-color: var(--all-borders)
}

.reviewPage .prodPreview img {
  border: 1px solid var(--all-borders);
  width: 100px;
  height: 100px;
  object-fit: cover
}

.reviewPage .prodPreview h1 {
  font-weight: 700;
  font-size: 20px
}

.reviews-break-down-empty span {
  display: block;
  border: 1px solid var(--all-borders);
  padding: 20px;
  border-radius: 0px;
  font-size: 14px;
  color: var(--text-color);
}


/* Legacy .reviewStyle CSS removed — review cards now use .vpdp-review (see above) */


/* ===== Review submit modal (#exampleModalCenter) ===== */

#exampleModalCenter .modal-dialog {
  max-width: 800px !important;
  width: calc(100% - 40px);
  margin: 1.75rem auto;
}

.modal-comment-content {
  display: flex;
  flex-direction: column;
  position: relative;
  /* `.modal-dialog-centered` is `display: flex`, which would shrink any child
     to its content width — making the card render as a narrow column. Force
     the wrapper to consume the whole dialog so the 800px max-width actually
     manifests visually. */
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  pointer-events: auto;
}

#exampleModalCenter .modal-body {
  padding: 32px;
  background: #fff;
}

.modal-comment-content .title {
  margin: 0 0 24px;
  color: var(--text-color);
  font-weight: 700;
  font-size: 22px;
  text-align: center;
}


/* Rating stars */

.div-btnrating {
  text-align: center;
  margin: 0 auto 24px;
}

.div-btnrating > div {
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}

.btnrating {
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  transition: transform 0.15s ease;
  display: inline-flex;
}

.btnrating:hover {
  transform: scale(1.1);
}

.btnrating.active > i:before {
  color: var(--primary-color);
}

.btnrating > i:before,
.btnrating.deactive > i:before {
  color: #e0e0e0;
}


/* Anonymous checkbox row */

#exampleModalCenter .add-review-form-checkbox {
  display: flex;
  margin-bottom: 16px;
}

#exampleModalCenter .add-review-form-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  margin: 0;
}


/* Textarea */

#exampleModalCenter textarea.input-review-comment {
  resize: none;
  min-height: 110px;
  padding: 14px 16px;
  width: 100%;
  background: color-mix(in srgb, var(--primary-color) 3%, #fff);
  border: 1px solid var(--all-borders);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-color);
  transition: border-color 0.2s ease;
}

#exampleModalCenter textarea.input-review-comment:focus {
  outline: none;
  border-color: var(--primary-color);
}

#exampleModalCenter textarea::placeholder {
  color: #999;
}

#exampleModalCenter .review-remaining-count {
  margin: 6px 0 0;
  text-align: end;
  font-size: 12px;
  color: #999;
}


/* Action buttons row */

#exampleModalCenter .bottom-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
}

#exampleModalCenter .bottom-buttons > span {
  display: none;
}

#exampleModalCenter .bottom-buttons .add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  background: transparent !important;
  color: var(--text-color) !important;
  text-transform: none;
}

#exampleModalCenter .bottom-buttons .add-to-cart[data-dismiss="modal"] {
  background: #fff !important;
  color: var(--text-color) !important;
  border-color: #dbdbdb;
}

#exampleModalCenter .bottom-buttons .add-to-cart[data-dismiss="modal"]:hover {
  border-color: var(--text-color);
}

#exampleModalCenter .bottom-buttons .btn-submit-new-review {
  background: var(--buttons-bg-color, var(--primary-color)) !important;
  color: var(--buttons-color, #fff) !important;
  border-color: var(--buttons-bg-color, var(--primary-color));
}

#exampleModalCenter .bottom-buttons .btn-submit-new-review:hover {
  background: color-mix(in srgb, var(--buttons-bg-color, var(--primary-color)) 84%, #000) !important;
  color: var(--buttons-color, #fff) !important;
  border-color: color-mix(in srgb, var(--buttons-bg-color, var(--primary-color)) 84%, #000);
}


/* Ensure Bootstrap's stacking order is respected even on long product pages */

#exampleModalCenter.modal {
  z-index: 1060;
}

.modal-backdrop {
  z-index: 1055;
}

.bundle-offer-more {
  text-align: start
}

.bundle-offer-more>a {
  cursor: pointer;
  color: var(--primary-color);
  font-size: 1.2rem;
  text-decoration: underline
}

.bundle-offer-details-products {
  flex-wrap: wrap;
  overflow-x: visible
}

.optionsBox {
  border-radius: 15px;
}

.optionsBox label .text-color-primary,
.optionsBox #product-variants-options label {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 14px
}

#product-custom-user-option-fields .form-group .checkbox-container {
  margin-right: 10px;
  border-color: var(--all-borders)
}

#product-custom-user-option-fields .form-group label {
  display: block;
  appearance: none;
  margin-bottom: 10px;
  border: 1px solid var(--all-borders);
  border-radius: 0px;
  background-clip: padding-box;
  padding: 10px;
  width: 100%;
  font-weight: 600;
  font-size: 14px
}

#product-custom-user-option-fields .form-group label span {
  font-weight: 400
}

#product-custom-user-option-fields,
.add-review-form-checkbox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  color: var(--text-color);
  margin-bottom: 10px
}

.add-review-form-checkbox .checkbox-container {
  margin-right: 5px
}

#product-custom-user-option-fields .form-group,
.add-review-form-checkbox .form-group {
  width: 100%
}

#product-custom-user-option-fields input+span,
.add-review-form-checkbox input+span {
  display: inline-block;
  position: relative;
  top: 4px;
  left: 2px;
  cursor: pointer;
  border: 1px solid var(--all-borders);
  border-radius: 0px;
  width: 18px;
  height: 18px
}

.add-review-form-checkbox input+span {
  left: 0!important
}

#product-custom-user-option-fields input:checked+span:after,
.add-review-form-checkbox input:checked+span:after {
  position: absolute;
  top: 2px;
  left: 1px;
  content: "\f00c";
  color: var(--primary-color);
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 14px
}

#product-custom-user-option-fields input,
.add-review-form-checkbox input {
  display: none
}

#product-custom-user-input-fields .file-label>* {
  margin-right: 10px
}

#product-custom-user-input-fields .file-label button {
  cursor: pointer;
  border: none;
  border-radius: 30px;
  padding: 5px 15px
}

#product-custom-user-input-fields .form-control {
  margin-bottom: 20px
}

.shareProduct .product-title {
  margin-bottom: 15px;
  color: var(--text-color);
  font-weight: 700;
}

.shareProduct .social-icons {
  gap: 10px;
}

.shareProduct .social-icons a {
  display: block;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 40px;
  color: var(--buttons-color);
  background-color: var(--buttons-bg-color);
  text-align: center;
  position: relative;
}

.product-attributes .noUi-target {
  background: var(--all-borders);
  border: 0;
  box-shadow: unset;
  height: 2px;
  margin-top: 24px;
  margin-bottom: 20px;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
}

.product-attributes .noUi-connect {
  background: var(--primary-color);
}

.product-attributes .noUi-horizontal .noUi-handle {
  width: 22px;
  height: 22px;
  top: -10px;
  border-radius: 50%;
  box-shadow: unset;
  border: 0;
  background: var(--primary-color);
  cursor: grab;
}

.product-attributes .noUi-horizontal .noUi-handle.noUi-active {
  cursor: grabbing;
}

.product-attributes .noUi-horizontal .noUi-handle::after,
.product-attributes .noUi-horizontal .noUi-handle::before {
  display: none;
}

.product-attributes .filter-row .checkbox {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--primary-color);
  opacity: 1;
  margin-top: 2px;
}

.product-attributes .attribute-arrow {
  text-align: end;
}

.product-attributes .attribute-arrow::after {
  content: "\f107";
  font: normal normal normal 22px / 1 FontAwesome;
  width: 30px;
  height: 30px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  color: var(--text-color);
}

.product-attributes .attribute-label-extra:not(:has(*)),
.product-attributes .attribute-arrow svg {
  display: none;
}


/* small Screens & tablets & Smart phone */

@media (max-width: 991px) {
  .cart-product-row-wrapper {
    margin-bottom: 20px;
  }
  .breadcrumb-section .bread-title {
    font-size: 20px;
  }
  .filtration-header {
    padding-left: 0!important;
  }
  .product-attributes-light-box-top-section {
    display: none
  }
  .product-attributes-light-box {
    height: auto!important;
  }
  .product-attributes-light-box {
    background: none!important;
  }
  .fullfilter .count-products {
    right: 0;
    z-index: 800;
  }
  .products-container {
    margin-top: 30px;
  }
  .paddingPage .products-container .products-list {
    max-width: 100%;
    margin: 0;
  }
  .categoriesPage .categories .parentItem .sub-cat {
    text-align: center;
  }
  .product-images-carousel-thumbs .slickParentNext,
  .product-images-carousel-thumbs .slickParentPrev {
    right: 0;
  }
  .product-images-carousel-thumbs .slickParentPrev {
    left: 0;
  }
  .prodPage {
    padding-top: 30px;
  }
  .profileMenu {
    bottom: calc(50% - 15px);
  }
  .app-content-padded {
    padding-top: 74px;
  }
}


/* Small Screens */

@media (min-width: 768px) and (max-width: 991px) {
  .cart-product-row-wrapper {
    margin-bottom: 30px;
  }
}


/* Mobile & Tablets */

@media (max-width: 767px) {
  .tableDetails .table .tab.details {
    padding: 15px;
  }
  .paddingPage {
    padding: 30px 0;
  }
  .cart-product-row {
    display: block;
    text-align: center;
    margin-bottom: 15px;
  }
  .cart-product-col-img {
    margin: 0 auto 15px;
    width: 160px;
    height: 160px;
  }
  .cart-product-quantity-dropdown {
    margin: 0;
  }
  .cart-product-col-details,
  .section-cart-products-col-4,
  .cart-product-prices {
    max-width: 100%;
    width: 100%;
    display: block;
  }
  .cart-product-quantity-dropdown select {
    width: 100%;
    margin: 0 auto;
  }
  .section-cart-products-col-3,
  .cart-products-action {
    margin: 0 auto 15px;
    min-width: 90px;
  }
  .shippingPage .shippingFlex {
    display: block!important;
  }
  .profile-section {
    width: 100%!important;
    margin-bottom: 30px!important;
    min-height: auto!important
  }
  .shippingPage .card-table {
    border: none;
  }
  .shippingPage .card-table thead {
    display: none;
  }
  .shippingPage .card-table tbody tr {
    display: block;
    margin-bottom: 30px;
    border: 1px solid var(--all-borders);
    border-bottom: none;
  }
  .shippingPage .card-table tbody tr td {
    display: block;
    text-align: center;
  }
  .products-container .empty {
    padding: 30px 0;
  }
  .tableDetails .table table {
    border: none;
    background: none;
  }
  .tableDetails .table table thead {
    display: none;
  }
  .tableDetails .table table tbody tr {
    display: block;
    border: 1px solid var(--all-borders);
    border-bottom: none;
    margin: 0 auto 30px;
  }
  .tableDetails .table table tbody tr td {
    display: block;
    text-align: center;
  }
  .tableDetails .table table tbody td {
    border: none!important;
    border-bottom: 1px solid var(--all-borders)!important;
  }
  .tableDetails .addHead {
    padding: 20px;
    display: block;
  }
  .tableDetails .addHead .rightSection,
  .tableDetails .addHead .centerSection,
  .tableDetails .addHead .leftSection {
    width: 100%;
    margin-bottom: 30px;
    text-align: left!important;
  }
  .breadcrumb-section {
    padding: 60px 0;
  }
  .breadcrumb-section .bread-title {
    font-size: 18px;
    line-height: 28px;
  }
  .breadcrumb-section .des {
    font-size: 12px;
  }
}


/* Tablets */

@media (min-width:480px) and (max-width: 767px) {}


/* Mobile */

@media (max-width: 480px) {
  .tableDetails .tab-btns li {
    font-size: 12px;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: 5px;
  }
  .reviewStyle,
  .tableDetails .rateContainer {
    padding: 15px;
  }
  .tableDetails .addHead .leftSection .titleRate,
  .tableDetails .rateContainer .titleContainer {
    font-size: 15px;
  }
  .tableDetails .table {
    padding-right: 0;
    padding-left: 0;
  }
}

.section-cart-products {
  padding: 25px;
  background: none;
  border-radius: 0px;
}

.loyalty-points-expected-section .flex-shrink-0 {
  font-weight: 700;
  text-align: end
}

.product-images-carousel-thumbs .video .fa-play-circle {
  font-size: 30px;
  pointer-events: none;
}

.product-images-carousel-thumbs .video .fa-play-circle:after {
  content: "";
  position: absolute;
  width: 19px;
  height: 19px;
  z-index: -1;
  background-color: #fff;
  right: 3px;
  bottom: 4px;
  border-radius: 50%;
}

.vpdp-subcats-slider__wrap {
  padding: 28px;
  background-color: #fff;
  border: 1px solid var(--all-borders);
  border-radius: 16px;
}

.vpdp-subcats-slider__wrap .vpdp-products-section__header {
  margin-bottom: 24px;
  align-items: center;
}

.vpdp-subcats-slider__wrap .vpdp-products-section__title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: var(--text-color);
  position: relative;
  padding-bottom: 10px;
  line-height: 1.2;
}

.vpdp-subcats-slider__wrap .vpdp-products-section__title::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  background-color: var(--primary-color, var(--primary-color));
  border-radius: 2px;
}

.vpdp-subcats-slider__wrap .vpdp-products-section__controls {
  margin-inline-start: auto;
}

.vpdp-subcats-slider__wrap .vpdp-products-section__arrow {
  width: 56px;
  height: 56px;
}

@media (max-width: 575px) {
  .vpdp-subcats-slider__wrap {
    padding: 16px;
  }
  .vpdp-subcats-slider__wrap .vpdp-products-section__title {
    font-size: 18px;
  }
  .vpdp-subcats-slider__wrap .vpdp-products-section__arrow {
    width: 44px;
    height: 44px;
  }
  .vpdp-subcats-slider__wrap .vpdp-products-section__arrow svg {
    width: 22px;
    height: 22px;
  }
}

.vpdp-inner-banners__viewport {
  position: relative;
}

.vpdp-inner-banners .vpdp-cards-collection__card {
  min-height: 200px;
}

@media (max-width: 575px) {
  .vpdp-inner-banners .vpdp-cards-collection__card {
    min-height: 200px;
  }
}

.vpdp-inner-banners__arrow {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 56px;
  height: 56px;
}

.vpdp-inner-banners__arrow--prev {
  inset-inline-start: -28px;
}

.vpdp-inner-banners__arrow--next {
  inset-inline-end: -28px;
}

.vpdp-inner-banners__arrow:hover {
  transform: translateY(-50%) scale(1.05);
}

@media (max-width: 991px) {
  .vpdp-inner-banners__arrow {
    width: 44px;
    height: 44px;
  }
  .vpdp-inner-banners__arrow svg {
    width: 22px;
    height: 22px;
  }
  .vpdp-inner-banners__arrow--prev {
    inset-inline-start: 0;
  }
  .vpdp-inner-banners__arrow--next {
    inset-inline-end: 0;
  }
}

@media(max-width:767px) {
  .cart-products-with-totals .header-wrapper {
    display: none;
  }
}

.out-of-stock-label {
  background-color: #f8d7da;
  color: #721c24;
  padding: 5px 10px;
  border-radius: 0px;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  left: 15px;
  top: 15px;
}

.form-products-filter {
  background: color-mix(in srgb, var(--primary-color) 3%, #fff);
  padding: 28px 32px;
  margin-bottom: 35px;
}

.form-products-filter > span.text-color-primary {
  display: block !important;
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}


/* جميع الحقوق محفوظة لـ ام-تي ثيمز — الترخيص مقتصر على b•a•g•s فقط.
   إعادة النشر أو الاستعمال خارج هذا النطاق ممنوع منعاً تاماً. */

.form-products-filter label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--text-color);
}

.form-products-filter .form-control {
  background: #fff;
  border: 1px solid var(--all-borders);
  border-radius: 0;
  padding: 12px 16px;
  height: auto;
  font-size: 15px;
  box-shadow: none;
  transition: border-color .2s;
}

.form-products-filter .form-control:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: none;
}

.form-products-filter .btn-sale-price {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.form-products-filter .btn-sale-price .custom-checkbox-label {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-color);
  margin: 0;
}

.form-products-filter .form-group.d-flex {
  gap: 12px;
  margin-top: 28px !important;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.form-products-filter .form-group.d-flex button {
  margin: 0 !important;
  border-radius: 0;
  padding: 13px 32px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  transition: all .2s;
  min-width: 110px;
}

.form-products-filter .form-group.d-flex button span {
  padding: 0 !important;
}

.form-products-filter .form-group.d-flex .btn-white {
  background: #fff;
  border: 1px solid var(--all-borders);
  color: var(--text-color);
}

.form-products-filter .form-group.d-flex .btn-white:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.form-products-filter .form-group.d-flex .primary {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: #fff;
}

.form-products-filter .form-group.d-flex .primary:hover {
  opacity: .9;
}

.comment-box {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.2s;
  border: 1px solid #e9ecef;
}

.comment-box {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.2s;
  border: 1px solid #e9ecef;
}

.comment-box .d-flex {
  align-items: center;
}

.user-avatar {
  width: 60px;
  height: 60px;
  background-color: #f8f8f8;
  padding: 12px;
  border-radius: 10px;
}

.comment-time {
  color: #adb5bd;
  font-size: 0.85rem;
}

.reply-section {
  margin-left: 60px;
}

.comment-box h6,
.reply-section h6 {
  font-weight: 700;
}

@media(max-width:767px) {
  .user-avatar {
    width: 40px;
    height: 40px;
  }
  .reply-section {
    margin-left: 15px;
  }
}

.noImageLink {
  justify-content: center !important;
  align-items: center;
  height: 100%;
}

#addProductQuestionModal .modal-body {
  background: var(--website-bg);
}

.loyalty-rewards-popup__inner {
  background: var(--website-bg)!important;
  color: var(--text-color)!important;
}

.loyalty-rewards-popup__why-title,
.loyalty-rewards-popup .loyalty-rewards-popup__learn-button {
  color: var(--text-color)!important;
}

.loyalty-rewards-popup__rewards_row svg path {
  fill: var(--text-color)!important;
}

.products-container .product-item .offer-counter .count-number {
  width: 55px;
}

@media(min-width:1600px) {
  .products-container .product-item .offer-counter .count-number {
    width: 45px;
  }
  .products-container .product-item.style2 {
    padding: 15px;
  }
  .products-container .product-item .offer-counter {
    gap: 7px;
  }
}

.rtl .s-row .s-content {
  margin: 0;
  width: 100%;
}

#product-grouped-details {
  padding: 20px;
  border: 1px solid var(--all-borders);
  border-radius: 5px;
  background: none;
  margin-top: 30px;
}

#product-grouped-details h4 {
  font-weight: 700;
  color: var(--text-color);
}

.grouped-product-col {
  padding: 15px;
  border: 1px solid var(--all-borders);
  border-radius: 15px;
}

.grouped-product-col img {
  object-fit: cover;
  margin-bottom: 10px;
}

#product-grouped-details img[alt="plus"] {
  max-width: 30px;
  height: auto;
}

.grouped-product-table table tr {
  background: #ffffff03 !important;
}

.grouped-product-table table tr:first-child th:first-child {
  background: none!important;
}

.grouped-product-table img {
  border: 1px solid var(--all-borders)!important;
}

.grouped-product-table table tr {
  margin-bottom: 15px!important;
}

.grouped-product-table img {
  padding: 0!important;
}

.grouped-product-col h6 {
  color: var(--text-color)!important;
}

.grouped-product-table table tr:first-child th,
.grouped-product-table table td {
  padding: 15px!important;
}

.grouped-product-table table td p {
  max-width: 900px;
}

.grouped-product-col p {
  color: var(--primary-color)!important;
  font-weight: 700;
}

.pswp__bg {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media(max-width:767px) {
  .grouped-product-table tbody {
    display: block;
  }
  .grouped-product-table table tr {
    display: block;
  }
  .grouped-product-table table td {
    display: block;
  }
  .grouped-product-table table tr:first-child th {
    padding-top: 0!important;
  }
}


/* ===== Questions section — empty state inside the Questions accordion ===== */

.vpdp__acc .review-details {
  margin: 0;
}

.questions-card-init {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: color-mix(in srgb, var(--primary-color) 3%, #fff);
  border: 1px solid var(--all-borders);
  border-radius: 16px;
}

.questions-card-init .image-box {
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.questions-card-init .image-box svg {
  width: 80px;
  height: auto;
}

.questions-card-init .content-box {
  margin-bottom: 0;
}

.questions-card-init .content-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--primary-color) 70%, #000);
  font-weight: 500;
  line-height: 1.6;
}


/* Add question button — centered pill button under the empty state */

.vpdp__acc .button-box {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.vpdp__acc .button-box .btn-add-to-cart.addQuestionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  background: transparent !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.vpdp__acc .button-box .btn-add-to-cart.addQuestionButton:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}


/* ===== Question submit modal (#addProductQuestionModal) ===== */

#addProductQuestionModal .modal-dialog {
  max-width: 800px !important;
  width: calc(100% - 40px);
  margin: 1.75rem auto;
}

#addProductQuestionModal .modal-comment-content {
  display: flex;
  flex-direction: column;
  position: relative;
  /* `.modal-dialog-centered` is `display: flex`, which would shrink any child
     to its content width — making the card render as a narrow column. Force
     the wrapper to consume the whole dialog so the 800px max-width actually
     manifests visually. */
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  pointer-events: auto;
}

#addProductQuestionModal .modal-body {
  background: #fff !important;
  padding: 32px !important;
}

#addProductQuestionModal .modal-product-title {
  display: block;
  width: 100%;
  margin: 0 0 24px;
  color: var(--text-color);
  font-weight: 700;
  font-size: 22px;
  text-align: center;
}

#addProductQuestionModal .form-group {
  margin-bottom: 14px;
}

#addProductQuestionModal .form-control {
  padding: 12px 16px;
  background: color-mix(in srgb, var(--primary-color) 3%, #fff);
  border: 1px solid var(--all-borders);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-color);
  width: 100%;
  transition: border-color 0.2s ease;
}

#addProductQuestionModal textarea.form-control {
  resize: none;
  min-height: 110px;
}

#addProductQuestionModal .form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: none;
}

#addProductQuestionModal .form-control::placeholder {
  color: #999;
}

#addProductQuestionModal .text-danger {
  font-size: 12px;
  margin-top: 6px;
}

#addProductQuestionModal .custom-checkbox-label {
  font-size: 14px;
  color: #555;
}

#addProductQuestionModal .bottom-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
}

#addProductQuestionModal .bottom-buttons > span {
  display: none;
}

#addProductQuestionModal .bottom-buttons .btn-add-to-cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  height: 48px !important;
  padding: 0 24px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  background: var(--buttons-bg-color, var(--primary-color)) !important;
  color: var(--buttons-color, #fff) !important;
  border-color: var(--buttons-bg-color, var(--primary-color)) !important;
}

#addProductQuestionModal .bottom-buttons .btn-add-to-cart[data-dismiss="modal"] {
  background: #fff !important;
  color: var(--text-color) !important;
  border-color: #dbdbdb !important;
}

#addProductQuestionModal .bottom-buttons .btn-add-to-cart[data-dismiss="modal"]:hover {
  border-color: var(--text-color) !important;
}

#addProductQuestionModal .bottom-buttons .btn-add-to-cart:not([data-dismiss="modal"]):hover {
  background: color-mix(in srgb, var(--primary-color) 84%, #000) !important;
  border-color: color-mix(in srgb, var(--primary-color) 84%, #000) !important;
}


/* Stack z-index for question modal */

#addProductQuestionModal.modal {
  z-index: 1060;
}

.questions-card-preview {
  padding: 16px;
}

.questions-view_more a {
  color: var(--primary-color);
  font-size: 14px;
}

.questions-card-preview .customer-name {
  margin-bottom: 8px;
  color: #494949;
  font-weight: 400;
}

.questions-card-preview .question-box .question {
  font-size: 16px;
  font-weight: 500;
  color: #494949;
  margin-bottom: 24px;
}

.questions-card-preview .answer-box .answer {
  font-size: 16px;
  font-weight: 400;
  color: #494949;
}

.questions-pagination .page-item {
  font-size: 16px;
}

.questions-pagination .page-item .page-link {
  color: var(--primary-color);
}

.questions-pagination .page-item.selected a {
  background-color: var(--primary-color);
  color: #ffffff;
}

#product-custom-user-dropdown-fields label {
  display: block;
  color: var(--text-color)
}

#product-custom-user-dropdown-fields select,
.select-quantity-div select {
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  appearance: none;
  cursor: pointer;
  outline: none;
  border-color: var(--all-borders);
  border-radius: 2px;
  background-color: transparent;
  padding: 10px 15px;
  width: 100%;
  height: auto;
  color: var(--text-color);
}

.select-quantity-div h4 {
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 15px;
}

#product-custom-user-dropdown-fields>div.form-group>div,
.select-quantity-div>div.form-group>div {
  position: relative
}

#product-custom-user-dropdown-fields>div.form-group>div:after,
.select-quantity-div>div.form-group>div:after {
  position: absolute;
  bottom: 0;
  right: 0;
  border-left: 1px solid var(--all-borders);
  padding: 5px 8px;
  width: 40px;
  height: 40px;
  pointer-events: none;
  content: "\f107";
  color: var(--text-color);
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 20px;
  line-height: 31px;
  text-align: center
}

.select-quantity-div div.form-group>div:after {
  left: unset;
  right: 0;
  border-left: 1px solid var(--all-borders);
  border-right: 0
}

.select-quantity-div>div.form-group {
  width: 100px
}

.select-quantity-div>div.form-group>div:after {
  top: 0
}

.grouped-product-row {
  flex-wrap: wrap!important;
}

.grouped-product-table tbody {
  background-color: #f9f9f9;
  margin-top: 10px;
}

.grouped-product-row {
  margin-bottom: 15px;
}

.rtl .grouped-product-table table tr:first-child th:last-child,
.rtl .grouped-product-table table tr:first-child th:first-child {
  border-radius: 0!important
}

.form-group.form-notify-me {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group.form-notify-me .btn-send-notify {
  background: var(--buttons-bg-color);
  color: var(--buttons-color);
  min-width: 80px;
  font-weight: 700;
  font-size: 14px;
  margin-left: 10px;
}

@media(max-width:767px) {
  .form-group.form-notify-me .d-flex {
    flex-direction: column;
    gap: 15px;
  }
  .form-group.form-notify-me .btn-send-notify {
    margin: 0;
    width: 100%;
    min-height: 50px;
  }
}

/* ==========================================================================
   The panel, tightened
   ==========================================================================

   Measured at 1440x900 the column ran 812px - taller than what the viewport
   has left under the header - so the page opened on a headline and a price and
   nothing else. The type was set for a landing page rather than a column
   beside a photograph: a 57.6px title, a 30px price, 20px labels, and 24px of
   air between almost everything.

   Each step comes down one notch and the order is unchanged - the title is
   still the largest thing here, the price still second. There is simply less
   between them, so the quantity, the buttons and the start of the description
   are on screen when the page opens.
   ========================================================================== */

/* the column began 80px below the picture beside it and gave up 120px of its
   width to side padding */
.vpdp__info {
  padding: 44px 48px;
}

.vpdp__info-inner {
  gap: 18px;
}

.vpdp__header {
  gap: 11px;
}

.vpdp__title {
  font-size: clamp(26px, 2.7vw, 40px);
  line-height: 1.24;
}

.vpdp__price {
  font-size: 24px;
}

.vpdp__price-old del {
  font-size: 15px;
}

.vpdp__short-desc {
  font-size: 15px;
  line-height: 1.65;
}

.vpdp__form {
  gap: 16px;
  padding: 16px;
}

.vpdp__qty-row,
.vpdp__share-row {
  gap: 16px;
}

.vpdp__qty-label,
.vpdp__share-label {
  font-size: 15px;
}

/* the rule that separates the share row from the form above it */
.vpdp__share-row {
  margin-block-start: 14px;
  padding-block-start: 14px;
}

.vpdp__btn {
  height: 50px;
  font-size: 14px;
}

.vpdp__wishlist {
  width: 50px;
  height: 50px;
}

.vpdp__widgets .loyalty-points-products-section {
  padding: 10px 14px !important;
}

.vpdp__acc-head {
  padding-block: 14px;
  font-size: 15px;
}

.vpdp__sku {
  font-size: 12px;
}

@media (max-width: 767px) {
  .vpdp__info {
    padding: 26px 18px 34px;
  }

  .vpdp__info-inner {
    gap: 15px;
  }

  .vpdp__form {
    gap: 14px;
    padding: 14px;
  }
}


/* ---- accordion heading and empty state   [vineta-accpanel-2026-09-12]

   The row's 20px padding is symmetric and was never the problem; `line-height:
   1.2` was. On an 18px Arabic face that is a 21.6px line box, tighter than the
   script's own ascender/descender range, so the glyphs sat low inside a box
   that measured even. The line gets room instead and the padding stays put.

   The empty message had `margin: 0; padding: 0`, which left it touching the
   "add" control below it. */

.vpdp__acc-title {
  line-height: 1.65;
}

.vpdp__empty-state {
  padding-block: 22px 6px;
}

/* with the partial's own copy suppressed there is a single message and a single
   control, so the block can breathe like the reviews panel beside it */
.vpdp__acc-content .rateContainer:empty {
  display: none;
}