/* DUNEUS · Product page
 * ---------------------------------------------------------------------------
 * A restyle of Zid's existing product markup, not a replacement. Every hook —
 * #product-form, .btn-add-to-cart, variants_list, payment_widgets,
 * loyalty_points_widget, apple-pay, bundles, preorder — is left where Zid puts
 * it, so nothing in the buying path changes. Only presentation moves.
 * ------------------------------------------------------------------------ */

body[data-template='product_details'] { background: var(--pp-bg, #fff); }

/* ===========================================================================
 * 1 · TYPE
 * ======================================================================== */
.col-product-info .product-name,
.col-product-info h1 {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--pp-brand, #111);
  margin: 0 0 0.35rem;
}
.col-product-info .product-subtitle,
.col-product-info .product-short-description {
  color: var(--pp-title, #555);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}

.product-formatted-price {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-weight: 700;
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  color: var(--pp-price, #111);
  margin: 0;
}
.product-formatted-price-old { color: var(--pp-muted, #8A8A8A); font-size: 0.9375rem; }

/* ===========================================================================
 * 2 · VARIANTS — Zid owns this markup, so it is styled by state class
 * The reference fills the chosen size solid and greys the unavailable ones.
 * ======================================================================== */
.size-box .variant-item,
.size-box .product-options__item,
.size-box .btn-variant {
  min-height: var(--pp-var-h, 52px);
  border: 1px solid var(--pp-var-border, #DDD);
  border-radius: var(--pp-var-radius, 4px);
  background: transparent;
  color: var(--pp-brand, #111);
  font-family: var(--duneus-font-en-body, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
body.pp-var-pills .size-box .variant-item,
body.pp-var-pills .size-box .product-options__item { border-radius: 999px; }

/* Selected — solid fill, as in the reference. */
.size-box .variant-item.active,
.size-box .variant-item.selected,
.size-box .product-options__item.active,
.size-box .product-options__item.selected,
.size-box input:checked + .product-options__item {
  background: var(--pp-var-on-bg, #111) !important;
  border-color: var(--pp-var-on-bg, #111) !important;
  color: var(--pp-var-on-fg, #fff) !important;
  font-weight: 600;
}

/* Unavailable — greyed and struck, never hidden: seeing that a size exists but
   is gone is information a shopper wants. */
.size-box .variant-item.disabled,
.size-box .variant-item[disabled],
.size-box .product-options__item.disabled,
.size-box .product-options__item[disabled],
.size-box .out-of-stock {
  background: var(--pp-var-off-bg, #FAFAFA) !important;
  border-color: var(--pp-var-border, #DDD) !important;
  color: var(--pp-var-off-fg, #C9C9C9) !important;
  cursor: not-allowed;
}

.pp-sizehead { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.pp-sizeguide {
  font-size: 0.8125rem;
  color: var(--pp-brand, #111);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===========================================================================
 * 3 · GUIDANCE NOTES
 * ======================================================================== */
.pp-note,
.pp-low {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--pp-title, #555);
}
.pp-low { color: var(--duneus-accent, #FF5100); }
.pp-note svg, .pp-low svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.pp-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--pp-panel, #F7F7F7);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--pp-title, #555);
}
.pp-box svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ===========================================================================
 * 4 · GALLERY — large image with a thumbnail rail
 * ======================================================================== */
@media (min-width: 992px) {
  /* Thumbnails BELOW the main image (horizontal row) instead of a side rail. */
  body.pp-gal-main-thumbs .col-product-image-wrapper { display: flex; flex-direction: column; gap: 12px; }

  body.pp-gal-main-thumbs .product-images-carousel-thumbs {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.pp-gal-main-thumbs .product-images-carousel-thumbs::-webkit-scrollbar { display: none; }
  body.pp-gal-main-thumbs .product-images-carousel-thumbs .col-3 {
    width: 90px;
    max-width: 90px;
    flex: 0 0 90px;
    padding: 0;
  }
  body.pp-gal-main-thumbs .thumb-image-a {
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    transition: border-color 0.18s ease;
  }
  body.pp-gal-main-thumbs .thumb-image-a.is-active { border-color: var(--pp-brand, #111); }
  body.pp-gal-main-thumbs #product-images { width: 100%; min-width: 0; }

  /* Grid and stacked drop the rail entirely. */
  body.pp-gal-grid .product-images-carousel-thumbs,
  body.pp-gal-stack .product-images-carousel-thumbs { display: none !important; }

  /* The buying column follows the images down. */
  body:not(.pp-no-sticky-panel) .col-product-info {
    position: sticky;
    top: calc(var(--dn-header-h, 90px) + 16px);
    align-self: flex-start;
  }
}

/* ===========================================================================
 * 5 · DETAILS — tabs or accordion
 * ======================================================================== */
.pp-tabs { display: flex; gap: clamp(1rem, 4vw, 2rem); border-bottom: 1px solid var(--pp-line, #EEE); }
.pp-tabs button {
  all: unset;
  cursor: pointer;
  padding-block: 0.85rem;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  color: var(--pp-muted, #8A8A8A);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.pp-tabs button.is-on { color: var(--pp-brand, #111); font-weight: 600; border-bottom-color: var(--pp-brand, #111); }
.pp-panel { padding-block: 1.1rem; color: var(--pp-title, #555); font-size: 0.9375rem; line-height: 1.75; }
.pp-panel[hidden] { display: none; }

/* ===========================================================================
 * 6 · STICKY BUY BAR (mobile)
 * ======================================================================== */
.pp-stickybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--pp-bg, #fff);
  border-top: 1px solid var(--pp-line, #EEE);
  box-shadow: 0 -6px 20px -18px rgba(0, 0, 0, 0.6);
}
.pp-stickybar[hidden] { display: none; }
.pp-stickybar__meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pp-stickybar__name {
  font-size: 0.8125rem;
  color: var(--pp-title, #555);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-stickybar__price { font-size: 0.9375rem; font-weight: 700; color: var(--pp-price, #111); }
.pp-stickybar__cta {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 45%;
  text-align: center;
  padding: 0.95rem 1.25rem;
  background: var(--duneus-accent, #FF5100);
  color: #fff;
  border-radius: 5px;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[dir='rtl'] .pp-stickybar__cta { letter-spacing: 0; text-transform: none; }
.pp-stickybar.is-disabled .pp-stickybar__cta { opacity: 0.5; pointer-events: none; }

/* The bar belongs to phones; a desktop page has the button in view already. */
@media (min-width: 992px) { .pp-stickybar { display: none !important; } }
body.pp-no-sticky-bar .pp-stickybar { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .size-box .variant-item, .pp-tabs button, .thumb-image-a { transition: none; }
}

/* ===========================================================================
 * 7 · FEATURE STRIP
 * A short scannable grid, not a paragraph. Icons are supporting marks at a
 * fixed small size — the label carries the meaning.
 * ======================================================================== */
.pp-features {
  list-style: none;
  justify-items: var(--pp-feat-align, center);
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  padding: clamp(1rem, 3vw, 1.25rem) 0 0;
  border-top: 1px solid var(--pp-line, #EEE);
  display: grid;
  grid-template-columns: repeat(var(--pp-feat-cols-m, 2), minmax(0, 1fr));
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
}
@media (min-width: 768px) {
  .pp-features { grid-template-columns: repeat(var(--pp-feat-cols, 3), minmax(0, 1fr)); }
}

.pp-feature {
  display: flex;
  align-items: center;
  justify-content: var(--pp-feat-align, center);
  text-align: var(--pp-feat-text, center);
  gap: var(--pp-feat-gap, 10px);
  min-width: 0;
}
/* Mark above the label reads better when the artwork is a brand mark rather
   than a small utility icon. */
body.pp-feat-stack .pp-feature { flex-direction: column; }

.pp-feature__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-icon-accent, #FF5100);
}
.pp-feature__mark svg {
  width: var(--pp-feat-icon, 28px);
  height: var(--pp-feat-icon, 28px);
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* An uploaded mark keeps its own proportions — width is fixed, height follows,
   so a wide wordmark is not squashed into a square. */
.pp-feature__mark img {
  width: auto;
  height: var(--pp-feat-icon, 28px);
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.pp-feature__label {
  font-size: var(--pp-feat-label, 13px);
  line-height: 1.4;
  color: var(--pp-title, #555);
  min-width: 0;
}

/* ===========================================================================
 * 8 · ACCORDIONS
 * Content is present whether open or closed, so it stays indexable. Height is
 * animated with grid-template-rows, which needs no measuring in JS.
 * ======================================================================== */
.pp-acc { margin-block-start: clamp(1.5rem, 4vw, 2.25rem); }

.pp-acc__item { border-top: 1px solid var(--pp-line, #EEE); }
.pp-acc__item:last-child { border-bottom: 1px solid var(--pp-line, #EEE); }

.pp-acc__head {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1rem, 2.5vw, 1.35rem);
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pp-brand, #111);
}

/* Plus turning to minus — quieter than a rotating chevron at this size. */
.pp-acc__mark { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.pp-acc__mark i {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.28s cubic-bezier(.2, .7, .2, 1), opacity 0.28s ease;
}
.pp-acc__mark i:first-child { transform: translateY(-50%); }
.pp-acc__mark i:last-child { transform: translateY(-50%) rotate(90deg); }
.pp-acc__item.is-open .pp-acc__mark i:last-child { transform: translateY(-50%); opacity: 0; }

.pp-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(.2, .7, .2, 1);
}
.pp-acc__item.is-open .pp-acc__panel { grid-template-rows: 1fr; }
.pp-acc__inner { overflow: hidden; }
.pp-acc__item.is-open .pp-acc__inner { padding-block-end: clamp(1rem, 2.5vw, 1.35rem); }

.pp-rte { color: var(--pp-title, #555); font-size: 0.9375rem; line-height: 1.8; }
.pp-rte p { margin: 0 0 0.85rem; }
.pp-rte p:last-child { margin-bottom: 0; }
.pp-rte ul, .pp-rte ol { margin: 0 0 0.85rem; padding-inline-start: 1.15rem; }
.pp-rte li { margin-bottom: 0.35rem; }
.pp-rte a { color: var(--pp-brand, #111); text-decoration: underline; text-underline-offset: 3px; }
.pp-rte img { max-width: 100%; height: auto; }

/* ===========================================================================
 * 9 · RHYTHM
 * One column of information with a consistent vertical beat. The old template
 * spaced blocks ad hoc, which is what made it read as a generic store.
 * ======================================================================== */
.col-product-info > * + * { margin-block-start: clamp(0.9rem, 2.2vw, 1.35rem); }
.col-product-info .border-product { border: 0; padding: 0; margin-block-start: clamp(1.25rem, 3vw, 1.75rem); }

/* Related products belong after everything else, with clear separation. */
#related-products { margin-block-start: clamp(2.5rem, 6vw, 4rem); }

/* Zid's own widgets sit on the same panel surface, so the column reads as one
   system rather than several bolted-on blocks. */
.col-product-info .loyalty-points-widget,
.col-product-info .payment-widgets,
.col-product-info .tabby-promo-snippet {
  background: var(--pp-panel, #F7F7F7);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .pp-acc__panel, .pp-acc__mark i { transition: none; }
}

/* ===========================================================================
 * 10 · ELEMENT VISIBILITY
 * One class per hidden element, emitted on <body> only for the product page.
 * Hiding is done in CSS rather than by removing markup, so Zid's scripts still
 * find the nodes they expect — the variant engine, the add-to-cart handler and
 * the wishlist all query the DOM, and deleting an element would break them.
 * ======================================================================== */
body.pp-hide-badge .col-product-info .product-badge,
body.pp-hide-badge .col-product-info [class*='badge'] { display: none !important; }
body.pp-hide-rating .product-card-rating-wrapper,
body.pp-hide-rating .col-product-info .rating-stars { display: none !important; }
body.pp-hide-sold-count .col-product-info .product-count { display: none !important; }
body.pp-hide-price .product-formatted-price { display: none !important; }
body.pp-hide-old-price .product-formatted-price-old { display: none !important; }
body.pp-hide-discount .product-formatted-price-discount { display: none !important; }
body.pp-hide-loyalty .loyalty-points-widget,
body.pp-hide-loyalty [class*='loyalty'] { display: none !important; }
body.pp-hide-payments .payment-widgets,
body.pp-hide-payments [class*='tabby'],
body.pp-hide-payments [class*='tamara'] { display: none !important; }
body.pp-hide-variants .size-box { display: none !important; }
body.pp-hide-quantity .select-quantity,
body.pp-hide-quantity .quantity-box { display: none !important; }
body.pp-hide-wishlist .col-product-info .add-to-wishlist { display: none !important; }
body.pp-hide-buy-now .btn-buy-now { display: none !important; }
body.pp-hide-apple-pay .apple-pay-button,
body.pp-hide-apple-pay [class*='apple-pay'] { display: none !important; }
body.pp-hide-features .pp-features { display: none !important; }
body.pp-hide-fit-note .pp-note { display: none !important; }
body.pp-hide-low-stock .pp-low { display: none !important; }
body.pp-hide-delivery .pp-box { display: none !important; }
body.pp-hide-size-guide .pp-sizehead { display: none !important; }
body.pp-hide-accordions .pp-acc { display: none !important; }
body.pp-hide-sku .product-sku { display: none !important; }
body.pp-hide-weight .product-weight { display: none !important; }
body.pp-hide-share .product-icon,
body.pp-hide-share .social-icons { display: none !important; }
body.pp-hide-metafields .metafields-wrapper,
body.pp-hide-metafields [class*='metafield'] { display: none !important; }
body.pp-hide-bundles .bundle-offer-products,
body.pp-hide-bundles [class*='bundle-offer'] { display: none !important; }
body.pp-hide-reviews .card-review,
body.pp-hide-reviews [class*='customer-review'],
body.pp-hide-reviews .product-reviews { display: none !important; }
body.pp-hide-questions [class*='product-question'] { display: none !important; }
body.pp-hide-related #related-products,
body.pp-hide-related .related-products { display: none !important; }
body.pp-hide-thumbs .product-images-carousel-thumbs { display: none !important; }

/* With the rail hidden the main image takes the full column. */
body.pp-hide-thumbs.pp-gal-main-thumbs .col-product-image-wrapper { display: block; }

/* ===========================================================================
 * 11 · ICONS
 * The page carries icons from several sources — ours, Soft Theme's and Zid's
 * includes. They are brought to one size and colour so the column reads as a
 * single system.
 * ======================================================================== */
.col-product-info svg:not(.dn-wl-icon):not(.pp-acc__mark svg) {
  width: var(--pp-icon-size, 20px);
  height: var(--pp-icon-size, 20px);
  stroke-width: var(--pp-icon-stroke, 2);
}
.pp-note svg, .pp-box svg { color: var(--pp-icon, #111); }
.pp-low svg, .pp-feature__mark { color: var(--pp-icon-accent, #FF5100); }

/* Share row. */
.product-icon a, .social-icons a { color: var(--pp-share, #111); }
.product-icon svg, .product-icon i, .social-icons svg, .social-icons i {
  font-size: var(--pp-share-size, 22px);
  width: var(--pp-share-size, 22px);
  height: var(--pp-share-size, 22px);
}

/* Rating stars — Soft Theme draws these with an icon font through ::before,
   so the colour has to be set on that pseudo-element. */
.col-product-info .icon-star1:before,
.col-product-info .icon-half-star:before,
.col-product-info .icon-star1,
.col-product-info .icon-half-star { color: var(--pp-star, #E8B93B); }
.col-product-info .icon-star1.deactive:before,
.col-product-info .icon-star1.deactive { color: var(--pp-star-empty, #DDD); }

/* ===========================================================================
 * 12 · BREADCRUMB
 * ======================================================================== */
.pp-crumb {
  max-width: var(--d-max, 1440px);
  margin-inline: auto;
  padding: clamp(0.75rem, 2vw, 1.25rem) var(--d-gutter, 2rem) 0;
}
.pp-crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--pp-muted, #8A8A8A);
}
.pp-crumb li + li::before { content: '/'; margin-inline-end: 0.5rem; opacity: 0.55; }
.pp-crumb a { color: inherit; transition: color 0.18s ease; }
.pp-crumb a:hover { color: var(--pp-brand, #111); }
.pp-crumb li[aria-current] {
  color: var(--pp-brand, #111);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch;
}

/* ===========================================================================
 * 13 · BRAND LINE
 * The label reads first and the product name second, which is what gives the
 * reference its editorial feel.
 * ======================================================================== */
.pp-brand {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--pp-brand-size, 26px);
  font-weight: var(--pp-brand-weight, 800);
  letter-spacing: var(--pp-brand-track, 0.02em);
  line-height: 1.05;
  color: var(--pp-brand, #111);
  text-transform: uppercase;
  margin: 0 0 0.25rem;
}
[dir='rtl'] .pp-brand { text-transform: none; letter-spacing: 0; }

/* With a brand line above it the product name steps back to a subtitle. */
.pp-brand + .pp-name,
.pp-brand + h1 {
  font-family: var(--duneus-font-en-body, 'Montserrat'), sans-serif;
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-title, #555);
  margin: 0;
}

/* ===========================================================================
 * 14 · ACTION ROW — cart and wishlist together
 * The reference pairs them; a heart floating elsewhere reads as an
 * afterthought next to a full-width primary button.
 * ======================================================================== */
.pp-actions { display: flex; align-items: stretch; gap: 10px; }
.pp-actions .btn-add-to-cart { flex: 1 1 auto; margin-bottom: 0; }

body.pp-hide-wishlist .pp-actions .add-to-wishlist { display: none !important; }
.pp-actions .add-to-wishlist {
  position: static;
  flex: 0 0 auto;
  width: auto;
  min-width: 30%;
  height: auto;
  padding-inline: 1.1rem;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--pp-brand, #111);
  border-radius: var(--pp-var-radius, 4px);
}

/* ===========================================================================
 * 15 · TRUST STRIP
 * ======================================================================== */
.pp-trust {
  border-top: 1px solid var(--pp-trust-border, #EEE);
  border-bottom: 1px solid var(--pp-trust-border, #EEE);
  background: var(--pp-trust-bg, #fff);
  padding-block: clamp(2rem, 5vw, 3rem);
}
.pp-trust__inner {
  max-width: var(--d-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--d-gutter, 2rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
@media (min-width: 768px) {
  .pp-trust__inner { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.pp-trust__item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.pp-trust__mark { color: var(--pp-icon, #111); }
.pp-trust__mark svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.pp-trust__title {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--pp-brand, #111);
}
.pp-trust__text { font-size: 0.875rem; line-height: 1.6; color: var(--pp-title, #555); max-width: 30ch; }

/* ===========================================================================
 * 16 · SWATCHES AND PAYMENT SPLIT
 * ======================================================================== */
/* Colour options render as image chips with an underline on the chosen one —
   a border would compete with the garment inside the chip. */
.product-options__item--color {
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  position: relative;
  overflow: visible;
}
.product-options__item--color.active::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--pp-brand, #111);
}
.product-options__item--color img { border-radius: 2px; display: block; }

/* ===========================================================================
 * 17 · OPTION GROUP HEADINGS
 * "COLOR", "SIZE", "QUANTITY" are labels, not chips. They were boxed because
 * the chip rule matched every <label> inside the options block.
 * ======================================================================== */
.size-box label:not(.product-options__item),
.size-box > label,
.product-options__label,
.product-options > label,
.quantity-box label,
.select-quantity-label,
.col-product-info .product-title {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 0.55rem !important;
  min-height: 0 !important;
  display: block;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-muted, #8A8A8A);
}
[dir='rtl'] .size-box label:not(.product-options__item),
[dir='rtl'] .product-options__label { letter-spacing: 0; }

/* ===========================================================================
 * 18 · SELECTED OPTION — solid fill
 * duneus-skin.css tinted the active chip orange, which is why the chosen size
 * read as an outline rather than the filled state in the reference.
 * ======================================================================== */
body .size-box .product-options__item.active,
body .product-options__item.active {
  background-color: var(--pp-var-on-bg, #111) !important;
  border-color: var(--pp-var-on-bg, #111) !important;
  color: var(--pp-var-on-fg, #fff) !important;
  font-weight: 600;
}
/* A colour swatch keeps its image; only the underline marks it. */
body .product-options__item--color.active,
body .product-options__item--image.active {
  background: transparent !important;
  border-color: transparent !important;
}

/* ===========================================================================
 * 19 · SECONDARY BUTTONS
 * Both were drawn for a dark canvas: a white outline disappears on white.
 * ======================================================================== */
body .btn-buy-now {
  background-color: var(--pp-var-on-bg, #111) !important;
  border: 1px solid var(--pp-var-on-bg, #111) !important;
  color: #fff !important;
}
body .btn-buy-now:hover {
  background-color: transparent !important;
  color: var(--pp-var-on-bg, #111) !important;
}

/* The wishlist sits beside the primary button, so it borrows the page's
   hairline rather than a hard black rule that competes with it. */
.pp-actions .add-to-wishlist {
  border: 1px solid var(--pp-line, #EEE);
  border-radius: var(--pp-var-radius, 4px);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.pp-actions .add-to-wishlist:hover {
  border-color: var(--pp-brand, #111);
  background: transparent;
  transform: none;
}
.pp-actions .dn-wl-icon { stroke: var(--pp-brand, #111); }

/* ===========================================================================
 * 20 · OPTION CHIPS — one size for all
 * Widths followed the text, so "3XL" was wider than "L" and the row read as
 * ragged. A grid gives every chip the same cell and centres the label, which
 * is what makes the reference feel ordered. Colour swatches keep flowing,
 * since a thumbnail should not be stretched to a text cell.
 * ======================================================================== */
.size-box .product-options__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pp-chip-min, 62px), 1fr));
  gap: var(--pp-chip-gap, 8px);
  padding: 0;
  margin: 0 0 1.25rem;
  list-style: none;
}
/* Swatches are images, so they stay inline at their natural size. */
.size-box .product-options__list:has(.product-options__item--color),
.size-box .product-options__list:has(.product-options__item--image) {
  display: flex;
  flex-wrap: wrap;
}

.size-box .product-options__item {
  width: 100%;
  min-width: 0;
  min-height: var(--pp-var-h, 52px);
  margin: 0;
  padding-inline: 0.35rem;
  /* A hairline reads as an option; a hard rule reads as a disabled field. */
  border: 1px solid var(--pp-var-border, #DDD);
  border-radius: var(--pp-var-radius, 4px);
  font-size: 0.875rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  /* Bigger than the visible box, so the tap target is comfortable without
     making the chips themselves oversized. */
  position: relative;
}
.size-box .product-options__item::before {
  content: '';
  position: absolute;
  inset: -4px;
}
.size-box .product-options__item:hover { border-color: var(--pp-brand, #111); }

/* Swatches opt out of the grid sizing. */
.size-box .product-options__item--color,
.size-box .product-options__item--image {
  width: auto;
  min-height: 0;
  padding: 0;
}

/* ===========================================================================
 * 21 · QUANTITY STEPPER
 * The native select is kept for the form and hidden from view.
 * ======================================================================== */
.pp-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--pp-var-border, #DDD);
  border-radius: var(--pp-var-radius, 4px);
  overflow: hidden;
  height: var(--pp-var-h, 52px);
}
.pp-qty .select-quantity {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pp-qty__btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 46px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-brand, #111);
  transition: background-color 0.18s ease, opacity 0.18s ease;
}
.pp-qty__btn:hover { background: var(--pp-panel, #F7F7F7); }
.pp-qty__btn:disabled { opacity: 0.28; cursor: not-allowed; }
.pp-qty__btn svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round;
}
.pp-qty__value {
  min-width: 46px;
  text-align: center;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pp-brand, #111);
  border-inline: 1px solid var(--pp-var-border, #DDD);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===========================================================================
 * 22 · ICON ALIGNMENT
 * Icons arrive from our markup, Soft Theme and Zid's includes at whatever size
 * each source chose. One rule brings them to a shared box and baseline.
 * ======================================================================== */
.col-product-info .pp-note svg,
.col-product-info .pp-low svg,
.col-product-info .pp-box svg,
.col-product-info .pp-feature__mark svg {
  width: var(--pp-icon-size, 20px);
  height: var(--pp-icon-size, 20px);
  flex: 0 0 auto;
  stroke-width: var(--pp-icon-stroke, 2);
}
/* Text and mark share a baseline rather than a box centre. */
.pp-note, .pp-low, .pp-box, .pp-feature { line-height: 1.45; }
.pp-note svg, .pp-low svg, .pp-box svg, .pp-feature__mark svg { margin-block-start: 0.05em; }

/* Action row: all three controls the same height. */
.pp-actions .btn-add-to-cart,
.pp-actions .btn-buy-now,
.pp-actions .add-to-wishlist {
  min-height: var(--pp-var-h, 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-actions .dn-wl-icon {
  width: var(--pp-icon-size, 20px);
  height: calc(var(--pp-icon-size, 20px) * 0.862);
}

/* ===========================================================================
 * 23 · REFERENCE ALIGNMENT
 * Measurements taken from the Level Shoes markup rather than eyeballed:
 *   chips      4 cols mobile / 5 desktop, gap 8, radius 2, padding-block 12
 *   controls   48px tall, radius 2
 *   icons      20px, 8px from their label
 *   BNPL       two equal cells sharing one hairline, logo 20px + info mark
 * A single scale is what makes the column read as one system.
 * ======================================================================== */
:root {
  --pp-r: 2px;          /* rounded-sm */
  --pp-h: 48px;         /* h-12 — every control */
  --pp-line-soft: #EFEFEF;  /* white-smoke */
  --pp-line-mid: #E0E0E0;   /* platinum */
  --pp-ink: #161515;        /* charcoal */
  --pp-grey: #747474;       /* iron */
  --pp-grey-soft: #A8A8A8;  /* stone */
}

/* ---- Size chips ---- */
.size-box .product-options__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-block: 12px 0;
}
@media (min-width: 768px) {
  .size-box .product-options__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.size-box .product-options__item {
  min-height: 0;
  padding-block: 12px;
  border: 1px solid var(--pp-line-mid);
  border-radius: var(--pp-r);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
}
.size-box .product-options__item:hover {
  border-color: var(--pp-ink);
  background: var(--pp-ink);
  color: #fff;
}
/* Unavailable is filled and muted — no strike-through in the reference; the
   fill alone reads as "gone" without adding visual noise. */
body .size-box .product-options__item.disabled,
body .size-box .product-options__item[disabled],
body .size-box .product-options__item.out-of-stock {
  border-color: var(--pp-line-soft) !important;
  background: var(--pp-line-soft) !important;
  color: var(--pp-grey-soft) !important;
  text-decoration: none !important;
  cursor: not-allowed;
}

/* ---- Fit note ---- */
.pp-note {
  justify-content: center;
  gap: 8px;
  margin-block-start: 16px;
  color: var(--pp-grey);
  font-size: 0.75rem;
  font-weight: 600;
}
@media (min-width: 768px) { .pp-note { justify-content: flex-start; } }
.pp-note svg { width: 20px; height: 20px; stroke-width: 1.2; }

/* ---- Delivery box ---- */
.pp-box {
  height: var(--pp-h);
  margin-block-start: 16px;
  padding: 12px;
  justify-content: center;
  background: var(--pp-line-soft);
  border-radius: var(--pp-r);
  font-size: 0.75rem;
  color: var(--pp-ink);
}
.pp-box svg { width: 16px; height: 16px; stroke-width: 1.1; }

/* ---- Action row ---- */
.pp-actions { gap: 12px; margin-block-start: 24px; flex-direction: column; }
@media (min-width: 768px) { .pp-actions { flex-direction: row; } }

.pp-actions .btn-add-to-cart,
.pp-actions .btn-buy-now,
.pp-actions .add-to-wishlist {
  height: var(--pp-h);
  min-height: var(--pp-h);
  border-radius: var(--pp-r);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[dir='rtl'] .pp-actions .btn-add-to-cart,
[dir='rtl'] .pp-actions .btn-buy-now,
[dir='rtl'] .pp-actions .add-to-wishlist { letter-spacing: 0; text-transform: none; }

.pp-actions .add-to-wishlist {
  gap: 8px;
  border: 1px solid var(--pp-ink);
  color: var(--pp-ink);
  min-width: 0;
}
@media (min-width: 768px) {
  .pp-actions .btn-add-to-cart { flex: 1 1 auto; }
  .pp-actions .add-to-wishlist { flex: 0 0 160px; }
}
.pp-actions .dn-wl-icon { width: 20px; height: 17px; stroke-width: 1.2; }

/* ---- BNPL: tabby and tamara ----
   Two equal cells sharing one hairline, exactly as the reference. Zid renders
   the widgets' own markup inside; only the frame around them is ours. */
.col-product-info .payment-widgets,
.col-product-info .payment-widgets-wrapper {
  display: flex;
  flex-direction: row;
  margin-block-start: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 0;
  overflow: visible;
}
.col-product-info .payment-widgets > *,
.col-product-info .payment-widgets-wrapper > * {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  margin: 0;
  background: var(--pp-bg, #fff);
  border: 1px solid var(--pp-line-soft);
  border-radius: var(--pp-r);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--pp-ink);
}
/* Overlapping by a pixel merges the two borders into a single rule between
   the cells, which is what the reference does with -mr-px. */
.col-product-info .payment-widgets > * + *,
.col-product-info .payment-widgets-wrapper > * + * { margin-inline-start: -1px; }

/* Provider logos to one height, whatever each widget ships. */
.col-product-info .payment-widgets img,
.col-product-info .payment-widgets svg:not(.pp-info),
.col-product-info [class*='tabby'] img,
.col-product-info [class*='tamara'] img {
  height: 20px !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.col-product-info .payment-widgets a { color: inherit; text-decoration: none; }
.col-product-info .payment-widgets p,
.col-product-info .payment-widgets span { margin: 0; font-size: 0.75rem; }

/* ---- Icon scale across the column ---- */
.col-product-info .pp-feature__mark svg { width: 20px; height: 20px; }
.pp-low svg { width: 20px; height: 20px; stroke-width: 1.2; }
.pp-low { gap: 8px; font-size: 0.75rem; font-weight: 600; }

/* ===========================================================================
 * 24 · SIZE CHIPS — container-agnostic
 *
 * variants_list.jinja is rendered by Zid at runtime, so its wrapper class is
 * not knowable from the theme source. Earlier rules assumed
 * `.product-options__list`; if the real wrapper is anything else the grid
 * never applied, which is why the chips kept following their text width.
 *
 * `:has(> …)` finds whatever element directly contains the chips, so the grid
 * lands on the right node without needing its name.
 * ======================================================================== */
body .size-box ul:has(> li > .product-options__item),
body .size-box ul:has(> .product-options__item),
body .size-box ol:has(> li > .product-options__item),
body .size-box div:has(> .product-options__item),
body .size-box div:has(> li > .product-options__item),
body .size-box .product-options__list,
body .size-box .product-options,
body .size-box .variants-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media (min-width: 768px) {
  body .size-box ul:has(> li > .product-options__item),
  body .size-box ul:has(> .product-options__item),
  body .size-box ol:has(> li > .product-options__item),
  body .size-box div:has(> .product-options__item),
  body .size-box div:has(> li > .product-options__item),
  body .size-box .product-options__list,
  body .size-box .product-options,
  body .size-box .variants-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* A colour row is images, so it flows rather than filling equal cells. */
body .size-box ul:has(.product-options__item--color),
body .size-box div:has(.product-options__item--color),
body .size-box ul:has(.product-options__item--image),
body .size-box div:has(.product-options__item--image) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  grid-template-columns: none !important;
}

/* The chip may be wrapped in an <li>; that wrapper must not add width. */
body .size-box li { list-style: none; margin: 0; padding: 0; width: 100%; }
body .size-box li > .product-options__item { width: 100%; }

body .size-box .product-options__item {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 12px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pp-line-mid, #E0E0E0);
  border-radius: var(--pp-r, 2px);
  background: transparent;
  color: var(--pp-ink, #161515);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body .size-box .product-options__item:hover:not(.disabled):not([disabled]) {
  border-color: var(--pp-ink, #161515);
  background: var(--pp-ink, #161515);
  color: #fff;
}
body .size-box .product-options__item.active,
body .size-box .product-options__item.selected {
  border-color: var(--pp-ink, #161515);
  background: var(--pp-ink, #161515);
  color: #fff;
}
body .size-box .product-options__item.disabled,
body .size-box .product-options__item[disabled] {
  border-color: var(--pp-line-soft, #EFEFEF);
  background: var(--pp-line-soft, #EFEFEF);
  color: var(--pp-grey-soft, #A8A8A8);
  cursor: not-allowed;
}
/* Colour swatches opt out of the chip box entirely. */
body .size-box .product-options__item--color,
body .size-box .product-options__item--image {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

/* ===========================================================================
 * 25 · QUANTITY — hide everything the stepper replaces
 * The previous rule named `.select-quantity` specifically, so anything else
 * inside the wrapper stayed visible — which is the stray chevron sitting over
 * the minus. Hiding by exclusion covers the select and any wrapper or arrow a
 * plugin adds around it, without needing to know their names.
 *
 * The select is hidden from view, never removed: the form still submits
 * #product-quantity and Zid's scripts still read it.
 * ======================================================================== */
.pp-qty { position: relative; }

.pp-qty > *:not(.pp-qty__btn):not(.pp-qty__value),
.pp-qty select,
.pp-qty .select-quantity {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
  background: none !important;
}

/* The stepper's own parts must survive that sweep. */
.pp-qty > .pp-qty__btn,
.pp-qty > .pp-qty__value {
  position: static !important;
  width: auto !important;
  height: 100% !important;
  clip: auto !important;
  clip-path: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  margin: 0 !important;
}
.pp-qty > .pp-qty__btn { width: 46px !important; }
.pp-qty > .pp-qty__value { min-width: 46px !important; }

/* ===========================================================================
 * 26 · CHIP BORDER AND HOVER
 * A 2px rule holds its weight next to the filled selected state; at 1px the
 * unselected chips read as ghosts beside it. Hover fills solid so the chip
 * previews exactly what selecting it will look like.
 * ======================================================================== */
body .size-box .product-options__item {
  border-width: var(--pp-var-bw, 2px) !important;
  border-style: solid !important;
  border-color: var(--pp-var-border, #E0E0E0) !important;
}

body .size-box .product-options__item:hover:not(.disabled):not([disabled]),
body .size-box .product-options__item:focus-visible:not(.disabled):not([disabled]) {
  background: var(--pp-var-hover-bg, #000) !important;
  border-color: var(--pp-var-hover-bg, #000) !important;
  color: var(--pp-var-hover-fg, #fff) !important;
}

body .size-box .product-options__item.active,
body .size-box .product-options__item.selected {
  background: var(--pp-var-on-bg, #111) !important;
  border-color: var(--pp-var-on-bg, #111) !important;
  color: var(--pp-var-on-fg, #fff) !important;
}

body .size-box .product-options__item.disabled,
body .size-box .product-options__item[disabled] {
  background: var(--pp-var-off-bg, #FAFAFA) !important;
  border-color: var(--pp-var-off-bg, #FAFAFA) !important;
  color: var(--pp-var-off-fg, #C9C9C9) !important;
}

/* Swatches keep their image; the border rule must not box them. */
body .size-box .product-options__item--color,
body .size-box .product-options__item--image {
  border-width: 0 !important;
  background: transparent !important;
}

/* ===========================================================================
 * 27 · BADGE
 * badge.jinja is platform-owned and carries Zid's own colours, which is why
 * the product page showed a purple pill while the cards showed the DUNEUS
 * treatment — the card stylesheet overrides it, the product page never did.
 * The colour usually arrives inline, so !important is required to reach it.
 * ======================================================================== */
.col-product-info .product-badge,
.col-product-info [class*='product-badge'],
.col-product-info .badge,
.col-product-info .preorder-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: var(--pp-badge-py, 5px) var(--pp-badge-px, 9px) !important;
  background: var(--pp-badge-bg, #111) !important;
  background-color: var(--pp-badge-bg, #111) !important;
  color: var(--pp-badge-fg, #fff) !important;
  border: 0 !important;
  border-radius: var(--pp-badge-radius, 2px) !important;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif !important;
  font-size: var(--pp-badge-size, 10px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: var(--pp-badge-track, 0.1em) !important;
  text-transform: var(--pp-badge-transform, uppercase) !important;
  margin: 0 0 12px !important;
  box-shadow: none !important;
}
[dir='rtl'] .col-product-info .product-badge,
[dir='rtl'] .col-product-info .badge { letter-spacing: 0 !important; text-transform: none !important; }

body.pp-badge-pill .col-product-info .product-badge,
body.pp-badge-pill .col-product-info .badge { border-radius: 999px !important; }

body.pp-badge-outline .col-product-info .product-badge,
body.pp-badge-outline .col-product-info .badge {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--pp-badge-bg, #111) !important;
  color: var(--pp-badge-bg, #111) !important;
}

body.pp-badge-underline .col-product-info .product-badge,
body.pp-badge-underline .col-product-info .badge {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--pp-badge-bg, #111) !important;
  border-radius: 0 !important;
  border-bottom: 2px solid var(--pp-badge-bg, #111) !important;
  padding-inline: 0 !important;
}

/* Any inner span inherits, so a nested colour cannot leak through. */
.col-product-info .product-badge *,
.col-product-info .badge * {
  color: inherit !important;
  background: transparent !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
}

/* ===========================================================================
 * 28 · GALLERY DOTS
 * The thumbnail rail already shows position on desktop, and the image itself
 * scrolls on mobile — a dot row underneath repeats that and adds a stray line
 * of clutter under the image. Off by default, kept as a setting.
 * ======================================================================== */
body.pp-no-gdots .col-product-image-wrapper .carousel-indicators,
body.pp-no-gdots #product-images .carousel-indicators,
body.pp-no-gdots .product-images-carousel .carousel-indicators,
body.pp-no-gdots .col-product-image-wrapper .slick-dots,
body.pp-no-gdots #product-images .slick-dots,
body.pp-no-gdots .col-product-image-wrapper [class*='dots'],
body.pp-no-gdots #product-images [class*='indicator'] {
  display: none !important;
}

/* ===========================================================================
 * 29 · HEADER ON THIS PAGE
 * Transparent mode is written for a bar sitting over a hero image: it shows
 * the light logo. A product page has no hero, so that logo lands on white and
 * disappears — which is what emptied the mobile bar. Solid is therefore the
 * default here, and the dark logo is forced whenever the page is light.
 * ======================================================================== */
body[data-template='product_details']:not(.dn-transparent) .dn-logo--swap .dn-logo__dark { opacity: 1; }
body[data-template='product_details']:not(.dn-transparent) .dn-logo--swap .dn-logo__light { opacity: 0; }

/* A logo must never be invisible: if only one image is uploaded, the fallback
   copy is shown rather than a blank slot. */
body[data-template='product_details'] .dn-logo img.is-fallback { opacity: 1; }
body[data-template='product_details'] .dn-logo { min-width: 1px; }

/* ===========================================================================
 * 26 · PDP FIXES (2026-09-27) — gallery bg, quantity stepper, action alignment
 * Presentation only; commerce hooks untouched.
 * =========================================================================== */

/* ---- (1) Remove the gray background behind the main product image ----
   The tint comes from the platform's base gallery containers. Force them
   transparent so the product photo sits on the page background cleanly. */
body[data-template='product_details'] .product-images-carousel,
body[data-template='product_details'] .product-images-carousel .content,
body[data-template='product_details'] #product-images,
body[data-template='product_details'] #product-images-slick,
body[data-template='product_details'] #product-images .box-1-1,
body[data-template='product_details'] #product-images .slick-slide,
body[data-template='product_details'] #product-images .slick-track,
body[data-template='product_details'] #wrap {
  background: transparent !important;
}

/* ---- (2) Quantity stepper — cleaner, softer, modern ----
   Fixes the odd icon glitch on the minus button (a stray global rule was
   distorting the horizontal line) and softens the whole control. */
.pp-qty {
  border-color: #E6E6E6;
  border-radius: 10px;
  height: 50px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.pp-qty__btn {
  width: 48px;
  transition: background-color .25s cubic-bezier(.2,.7,.2,1), color .25s cubic-bezier(.2,.7,.2,1);
}
.pp-qty__btn:hover { background: #F4F4F4; color: var(--duneus-accent, #FF5100); }
.pp-qty__btn:active { background: #ececec; }
/* Stepper icons drawn purely in CSS (no SVG, no icon font) so nothing in the
   cascade can distort them. Minus = one bar; Plus = bar + vertical bar. */
.pp-qty__ico {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
}
/* horizontal bar (shared by minus and plus) */
.pp-qty__ico::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
/* vertical bar (plus only) */
.pp-qty__btn--inc .pp-qty__ico::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 14px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.pp-qty__value {
  min-width: 52px;
  border-color: #E6E6E6;
  font-weight: 700;
}

/* ---- (3) Action buttons — perfectly aligned on one baseline ----
   The wishlist span carried a Bootstrap `my-2` vertical margin that pushed
   it off the shared baseline. Neutralize it and lock all three to the same
   height and vertical centering. */
.pp-actions { align-items: center; }
.pp-actions .add-to-wishlist.my-2 { margin-top: 0 !important; margin-bottom: 0 !important; }
.pp-actions .btn-add-to-cart,
.pp-actions .btn-buy-now,
.pp-actions .add-to-wishlist {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  align-self: center;
}

/* ---- (FIX) Kill the leftover native <select> dropdown arrow ----
   Soft Theme's product-details.css draws an icomoon arrow (content '\e94b')
   via `.select-quantity-div > div.form-group > div::after` on the original
   quantity <select>. Our custom stepper hides the select, but that ::after
   arrow still painted over the minus button. Remove it in every direction. */
.select-quantity-div > div.form-group > div::after,
.select-quantity-div div.form-group > div::after,
.rtl .select-quantity-div div.form-group > div::after,
.pp-qty .select-quantity-div > div.form-group > div::after,
body[data-template='product_details'] .select-quantity-div > div.form-group > div::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* ---- (FIX) Uniform, larger size buttons ----
   Previously each variant sized to its text (M narrow, 2XL wide), so the row
   looked uneven. Give every size button the same fixed width + height and a
   consistent gap, matching the approved larger rectangle proportions. */
.size-box .variants-values,
.size-box .product-options,
.size-box .variants-list,
.size-box .d-flex,
.size-box ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
}
.size-box .variant-item,
.size-box .product-options__item,
.size-box .btn-variant,
.size-box label.variant-item,
.size-box li .variant-item {
  min-width: 84px !important;
  width: 84px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding-inline: 8px !important;
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  box-sizing: border-box !important;
}
/* On small screens keep them tidy but let them breathe a little less wide. */
@media (max-width: 480px) {
  .size-box .variant-item,
  .size-box .product-options__item,
  .size-box .btn-variant,
  .size-box label.variant-item,
  .size-box li .variant-item {
    min-width: 72px !important;
    width: 72px !important;
  }
}

/* ---- (FIX 2026-09-27) Wishlist button — pushed to the far end, gray plate,
   orange heart, aligned to the row baseline and the content below it ----
   The cart + buy-now buttons stay grouped at the start; an auto margin pushes
   the wishlist plate to the opposite end so it lines up with the section edge
   (and the aeondry / ultrabionic / vi-pure strip beneath it). */
.pp-actions .add-to-wishlist {
  margin-inline-start: 0 !important;      /* even gap, not pushed to the edge */
  flex: 0 0 auto !important;
  min-width: 120px;
  background: #F1F1F1 !important;         /* soft gray plate */
  border: 1px solid #ECECEC !important;
  border-radius: var(--pp-var-radius, 4px);
}
.pp-actions .add-to-wishlist:hover {
  background: #EAEAEA !important;
  border-color: #E0E0E0 !important;
}
/* Orange heart (the mask icon is colored via background-color) */
.pp-actions .add-to-wishlist .icon-heart-mask {
  background-color: var(--duneus-accent, #FF5100) !important;
}
/* If the SDK swaps in the inline SVG variant instead of the mask icon */
.pp-actions .add-to-wishlist .dn-wl-icon {
  stroke: var(--duneus-accent, #FF5100) !important;
}

/* On mobile the row stacks (flex-direction: column), so the auto margin would
   push the wishlist down awkwardly — reset it there and let it be full width. */
@media (max-width: 767px) {
  .pp-actions .add-to-wishlist {
    margin-inline-start: 0 !important;
    width: 100%;
  }
}

/* ===========================================================================
 * 27 · REVIEWS & QUESTIONS — clean DUNEUS redesign (2026-09-27)
 * Rebuilds the layout only; all Zid hooks (add-review-btn, rating_count_*,
 * rating-average, addQuestionButton, includes) are preserved.
 * =========================================================================== */
.dn-reviews { border-top: 1px solid #EEE; padding-top: 32px; }
.dn-reviews__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.dn-reviews__title {
  font-size: 1.4rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .01em; margin: 0; color: var(--pp-brand, #111);
}

/* Buttons — match the DUNEUS system (outline ghost, not loud orange fill) */
.dn-review-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding-inline: 22px;
  background: var(--pp-brand, #111); color: #fff;
  border: 1px solid var(--pp-brand, #111); border-radius: var(--pp-var-radius, 4px);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .25s cubic-bezier(.2,.7,.2,1), color .25s cubic-bezier(.2,.7,.2,1);
}
.dn-review-btn:hover { background: var(--duneus-accent, #FF5100); border-color: var(--duneus-accent, #FF5100); color: #000; }
.dn-review-btn .icon-add_circle { display: none; }
.dn-review-btn--ghost { background: transparent; color: var(--pp-brand, #111); }
.dn-review-btn--ghost:hover { background: var(--pp-brand, #111); color: #fff; border-color: var(--pp-brand, #111); }

/* Score summary */
.dn-reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; margin-bottom: 32px; }
.dn-reviews__score { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px; }
.dn-reviews__avg { font-size: 3rem; font-weight: 900; line-height: 1; margin: 0; color: var(--pp-brand, #111); }
.dn-reviews__score-stars { display: flex; gap: 2px; }
.dn-reviews__count { font-size: .8rem; color: #999; }

/* Rating breakdown bars — replaces the stacked star glitch with clean bars */
.dn-reviews__bars { flex: 1; min-width: 240px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.dn-reviews__bar-row { display: flex; align-items: center; gap: 12px; }
.dn-reviews__bar-label { font-size: .78rem; font-weight: 600; color: #555; min-width: 34px; display: inline-flex; align-items: center; gap: 3px; }
.dn-reviews__bar-label .dn-star { color: var(--duneus-accent, #FF5100); font-size: .7rem; }
.dn-reviews__bar-track { flex: 1; height: 6px; background: #EEE; border-radius: 999px; overflow: hidden; }
.dn-reviews__bar-fill { display: block; height: 100%; width: 0; background: var(--duneus-accent, #FF5100); border-radius: 999px; transition: width .5s ease; }
.dn-reviews__bar-count { font-size: .75rem; color: #999; min-width: 24px; text-align: end; }

.dn-reviews__empty {
  border: 1px solid #EEE; border-radius: var(--pp-var-radius, 4px);
  padding: 16px; color: #777; font-size: .9rem; text-align: center;
}
.dn-reviews__all { margin-top: 20px; text-align: center; }
.dn-questions { margin-top: 40px; }

/* Hide the old Soft-Theme review icon/star classes that caused the mess */
.dn-reviews .description-icon,
.dn-reviews .card-rate .icon-star1 { display: none !important; }

@media (max-width: 600px) {
  .dn-reviews__head { flex-direction: column; align-items: stretch; }
  .dn-review-btn { width: 100%; }
  .dn-reviews__summary { gap: 24px; }
}

/* ===========================================================================
 * 28 · SIZE OPTIONS — uniform width (2026-09-27, container-agnostic)
 * Earlier rules were scoped under `.size-box`, but the Zid SDK renders text
 * options into its own list (.product-options__list) that isn't always inside
 * .size-box. Target the real SDK classes directly, everywhere on the PDP.
 * Color/image swatches (--color / --icon) are explicitly excluded so they
 * stay as small rounded thumbnails.
 * =========================================================================== */
body[data-template='product_details'] .product-options__list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
body[data-template='product_details'] .product-options__item:not(.product-options__item--color):not(.product-options__item--icon) {
  min-width: 84px !important;
  width: 84px !important;
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 1px solid #DDD !important;
  border-radius: 4px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}
body[data-template='product_details'] .product-options__item:not(.product-options__item--color):not(.product-options__item--icon).active,
body[data-template='product_details'] .product-options__item:not(.product-options__item--color):not(.product-options__item--icon).selected {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}
@media (max-width: 480px) {
  body[data-template='product_details'] .product-options__item:not(.product-options__item--color):not(.product-options__item--icon) {
    min-width: 72px !important;
    width: 72px !important;
  }
}

/* ===========================================================================
 * 29 · WISHLIST — force to far end (2026-09-27, stronger targeting)
 * The earlier margin-auto rule may have lost to the wrapper's own flex. Anchor
 * the whole action row to space-between so cart+buy sit at the start and the
 * wishlist plate is pushed fully to the opposite edge.
 * =========================================================================== */
body[data-template='product_details'] .pp-actions {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
body[data-template='product_details'] .pp-actions > .add-to-wishlist {
  margin-inline-start: 0 !important;
  flex: 0 0 auto !important;
  min-width: 120px !important;
  background: #F1F1F1 !important;
  border: 1px solid #ECECEC !important;
  border-radius: 4px !important;
}
body[data-template='product_details'] .pp-actions > .add-to-wishlist .icon-heart-mask {
  background-color: var(--duneus-accent, #FF5100) !important;
}
@media (max-width: 767px) {
  body[data-template='product_details'] .pp-actions { flex-wrap: wrap !important; }
  body[data-template='product_details'] .pp-actions > .add-to-wishlist {
    margin-inline-start: 0 !important; width: 100% !important;
  }
}

/* ===========================================================================
 * 30 · SIZE OPTIONS — FINAL, correct targeting (2026-09-27)
 * Confirmed via live DOM inspection: sizes are <li> inside
 * `.size-box #product-variants-options ul`. Soft Theme's own rule
 * (.size-box #product-variants-options ul li { width:auto }) was winning on
 * specificity, which is why every earlier attempt was ignored. Match that
 * exact selector (prefixed with body[data-template] to guarantee the win).
 * =========================================================================== */
body[data-template='product_details'] .size-box #product-variants-options ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
body[data-template='product_details'] .size-box #product-variants-options ul li {
  width: 84px !important;
  min-width: 84px !important;
  height: 52px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 1px solid #DDD !important;
  border-radius: 4px !important;
  text-align: center !important;
}
body[data-template='product_details'] .rtl .size-box #product-variants-options ul li,
.rtl body[data-template='product_details'] .size-box #product-variants-options ul li {
  margin: 0 !important;
}
body[data-template='product_details'] .size-box #product-variants-options ul li span,
body[data-template='product_details'] .size-box #product-variants-options ul li a {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}
body[data-template='product_details'] .size-box #product-variants-options ul li.active {
  background: #111 !important;
  border-color: #111 !important;
}
body[data-template='product_details'] .size-box #product-variants-options ul li.active span,
body[data-template='product_details'] .size-box #product-variants-options ul li.active a {
  color: #fff !important;
}
@media (max-width: 480px) {
  body[data-template='product_details'] .size-box #product-variants-options ul li {
    width: 72px !important; min-width: 72px !important;
  }
}

/* ===========================================================================
 * 31 · ACTION ROW — uniform gap (2026-09-27)
 * The wishlist used to be auto-pushed to the far edge, which made the gap
 * before it larger than the gap between cart & buy-now. Now all three sit in
 * a single flex row with one identical gap between every pair.
 * =========================================================================== */
body[data-template='product_details'] .pp-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 12px !important;
}
body[data-template='product_details'] .pp-actions > * { margin: 0 !important; }
@media (max-width: 767px) {
  body[data-template='product_details'] .pp-actions { flex-wrap: wrap !important; }
}

/* ===========================================================================
 * LOW STOCK — Style 4 card (2026-09-29): side border + soft tint + bolt.
 * Bilingual text is built in the template. Overrides the old centered line.
 * =========================================================================== */
.pp-low--card {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px;
  margin: 14px 0 0 !important;
  padding: 12px 16px;
  background: #FFF8F5;
  border-inline-start: 3px solid var(--duneus-accent, #FF5100);
  border-radius: 4px;
  font-size: 0.82rem !important;
  font-weight: 600;
  color: #333 !important;
  line-height: 1.4;
  max-width: 340px;
}
.pp-low--card .pp-low__bolt { font-size: 0.95rem; line-height: 1; }
.pp-low--card .pp-low__text { color: #333; }
/* the number sits inside the sentence; keep the whole thing readable in RTL */
[dir='rtl'] .pp-low--card { text-align: right; }

.dn-reviews, .review-details { position: relative; z-index: 2; background: #fff; }

* DUNEUS · Product page
 * ---------------------------------------------------------------------------
 * A restyle of Zid's existing product markup, not a replacement. Every hook —
 * #product-form, .btn-add-to-cart, variants_list, payment_widgets,
 * loyalty_points_widget, apple-pay, bundles, preorder — is left where Zid puts
 * it, so nothing in the buying path changes. Only presentation moves.
 * ------------------------------------------------------------------------ */

body[data-template='product_details'] { background: var(--pp-bg, #fff); }

/* ===========================================================================
 * 1 · TYPE
 * ======================================================================== */
.col-product-info .product-name,
.col-product-info h1 {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--pp-brand, #111);
  margin: 0 0 0.35rem;
}
.col-product-info .product-subtitle,
.col-product-info .product-short-description {
  color: var(--pp-title, #555);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}

.product-formatted-price {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-weight: 700;
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  color: var(--pp-price, #111);
  margin: 0;
}
.product-formatted-price-old { color: var(--pp-muted, #8A8A8A); font-size: 0.9375rem; }

/* ===========================================================================
 * 2 · VARIANTS — Zid owns this markup, so it is styled by state class
 * The reference fills the chosen size solid and greys the unavailable ones.
 * ======================================================================== */
.size-box .variant-item,
.size-box .product-options__item,
.size-box .btn-variant {
  min-height: var(--pp-var-h, 52px);
  border: 1px solid var(--pp-var-border, #DDD);
  border-radius: var(--pp-var-radius, 4px);
  background: transparent;
  color: var(--pp-brand, #111);
  font-family: var(--duneus-font-en-body, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
body.pp-var-pills .size-box .variant-item,
body.pp-var-pills .size-box .product-options__item { border-radius: 999px; }

/* Selected — solid fill, as in the reference. */
.size-box .variant-item.active,
.size-box .variant-item.selected,
.size-box .product-options__item.active,
.size-box .product-options__item.selected,
.size-box input:checked + .product-options__item {
  background: var(--pp-var-on-bg, #111) !important;
  border-color: var(--pp-var-on-bg, #111) !important;
  color: var(--pp-var-on-fg, #fff) !important;
  font-weight: 600;
}

/* Unavailable — greyed and struck, never hidden: seeing that a size exists but
   is gone is information a shopper wants. */
.size-box .variant-item.disabled,
.size-box .variant-item[disabled],
.size-box .product-options__item.disabled,
.size-box .product-options__item[disabled],
.size-box .out-of-stock {
  background: var(--pp-var-off-bg, #FAFAFA) !important;
  border-color: var(--pp-var-border, #DDD) !important;
  color: var(--pp-var-off-fg, #C9C9C9) !important;
  cursor: not-allowed;
}

.pp-sizehead { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.pp-sizeguide {
  font-size: 0.8125rem;
  color: var(--pp-brand, #111);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===========================================================================
 * 3 · GUIDANCE NOTES
 * ======================================================================== */
.pp-note,
.pp-low {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--pp-title, #555);
}
.pp-low { color: var(--duneus-accent, #FF5100); }
.pp-note svg, .pp-low svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

.pp-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--pp-panel, #F7F7F7);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--pp-title, #555);
}
.pp-box svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ===========================================================================
 * 4 · GALLERY — large image with a thumbnail rail
 * ======================================================================== */
@media (min-width: 992px) {
  /* Thumbnails BELOW the main image (horizontal row) instead of a side rail. */
  body.pp-gal-main-thumbs .col-product-image-wrapper { display: flex; flex-direction: column; gap: 12px; }

  body.pp-gal-main-thumbs .product-images-carousel-thumbs {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.pp-gal-main-thumbs .product-images-carousel-thumbs::-webkit-scrollbar { display: none; }
  body.pp-gal-main-thumbs .product-images-carousel-thumbs .col-3 {
    width: 90px;
    max-width: 90px;
    flex: 0 0 90px;
    padding: 0;
  }
  body.pp-gal-main-thumbs .thumb-image-a {
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    transition: border-color 0.18s ease;
  }
  body.pp-gal-main-thumbs .thumb-image-a.is-active { border-color: var(--pp-brand, #111); }
  body.pp-gal-main-thumbs #product-images { width: 100%; min-width: 0; }

  /* Grid and stacked drop the rail entirely. */
  body.pp-gal-grid .product-images-carousel-thumbs,
  body.pp-gal-stack .product-images-carousel-thumbs { display: none !important; }

  /* The buying column follows the images down. */
  body:not(.pp-no-sticky-panel) .col-product-info {
    position: sticky;
    top: calc(var(--dn-header-h, 90px) + 16px);
    align-self: flex-start;
  }
}

/* ===========================================================================
 * 5 · DETAILS — tabs or accordion
 * ======================================================================== */
.pp-tabs { display: flex; gap: clamp(1rem, 4vw, 2rem); border-bottom: 1px solid var(--pp-line, #EEE); }
.pp-tabs button {
  all: unset;
  cursor: pointer;
  padding-block: 0.85rem;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  color: var(--pp-muted, #8A8A8A);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.pp-tabs button.is-on { color: var(--pp-brand, #111); font-weight: 600; border-bottom-color: var(--pp-brand, #111); }
.pp-panel { padding-block: 1.1rem; color: var(--pp-title, #555); font-size: 0.9375rem; line-height: 1.75; }
.pp-panel[hidden] { display: none; }

/* ===========================================================================
 * 6 · STICKY BUY BAR (mobile)
 * ======================================================================== */
.pp-stickybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--pp-bg, #fff);
  border-top: 1px solid var(--pp-line, #EEE);
  box-shadow: 0 -6px 20px -18px rgba(0, 0, 0, 0.6);
}
.pp-stickybar[hidden] { display: none; }
.pp-stickybar__meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pp-stickybar__name {
  font-size: 0.8125rem;
  color: var(--pp-title, #555);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-stickybar__price { font-size: 0.9375rem; font-weight: 700; color: var(--pp-price, #111); }
.pp-stickybar__cta {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 45%;
  text-align: center;
  padding: 0.95rem 1.25rem;
  background: var(--duneus-accent, #FF5100);
  color: #fff;
  border-radius: 5px;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[dir='rtl'] .pp-stickybar__cta { letter-spacing: 0; text-transform: none; }
.pp-stickybar.is-disabled .pp-stickybar__cta { opacity: 0.5; pointer-events: none; }

/* The bar belongs to phones; a desktop page has the button in view already. */
@media (min-width: 992px) { .pp-stickybar { display: none !important; } }
body.pp-no-sticky-bar .pp-stickybar { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .size-box .variant-item, .pp-tabs button, .thumb-image-a { transition: none; }
}

/* ===========================================================================
 * 7 · FEATURE STRIP
 * A short scannable grid, not a paragraph. Icons are supporting marks at a
 * fixed small size — the label carries the meaning.
 * ======================================================================== */
.pp-features {
  list-style: none;
  justify-items: var(--pp-feat-align, center);
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  padding: clamp(1rem, 3vw, 1.25rem) 0 0;
  border-top: 1px solid var(--pp-line, #EEE);
  display: grid;
  grid-template-columns: repeat(var(--pp-feat-cols-m, 2), minmax(0, 1fr));
  gap: clamp(0.85rem, 2.5vw, 1.25rem);
}
@media (min-width: 768px) {
  .pp-features { grid-template-columns: repeat(var(--pp-feat-cols, 3), minmax(0, 1fr)); }
}

.pp-feature {
  display: flex;
  align-items: center;
  justify-content: var(--pp-feat-align, center);
  text-align: var(--pp-feat-text, center);
  gap: var(--pp-feat-gap, 10px);
  min-width: 0;
}
/* Mark above the label reads better when the artwork is a brand mark rather
   than a small utility icon. */
body.pp-feat-stack .pp-feature { flex-direction: column; }

.pp-feature__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-icon-accent, #FF5100);
}
.pp-feature__mark svg {
  width: var(--pp-feat-icon, 28px);
  height: var(--pp-feat-icon, 28px);
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* An uploaded mark keeps its own proportions — width is fixed, height follows,
   so a wide wordmark is not squashed into a square. */
.pp-feature__mark img {
  width: auto;
  height: var(--pp-feat-icon, 28px);
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.pp-feature__label {
  font-size: var(--pp-feat-label, 13px);
  line-height: 1.4;
  color: var(--pp-title, #555);
  min-width: 0;
}

/* ===========================================================================
 * 8 · ACCORDIONS
 * Content is present whether open or closed, so it stays indexable. Height is
 * animated with grid-template-rows, which needs no measuring in JS.
 * ======================================================================== */
.pp-acc { margin-block-start: clamp(1.5rem, 4vw, 2.25rem); }

.pp-acc__item { border-top: 1px solid var(--pp-line, #EEE); }
.pp-acc__item:last-child { border-bottom: 1px solid var(--pp-line, #EEE); }

.pp-acc__head {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1rem, 2.5vw, 1.35rem);
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pp-brand, #111);
}

/* Plus turning to minus — quieter than a rotating chevron at this size. */
.pp-acc__mark { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.pp-acc__mark i {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.28s cubic-bezier(.2, .7, .2, 1), opacity 0.28s ease;
}
.pp-acc__mark i:first-child { transform: translateY(-50%); }
.pp-acc__mark i:last-child { transform: translateY(-50%) rotate(90deg); }
.pp-acc__item.is-open .pp-acc__mark i:last-child { transform: translateY(-50%); opacity: 0; }

.pp-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(.2, .7, .2, 1);
}
.pp-acc__item.is-open .pp-acc__panel { grid-template-rows: 1fr; }
.pp-acc__inner { overflow: hidden; }
.pp-acc__item.is-open .pp-acc__inner { padding-block-end: clamp(1rem, 2.5vw, 1.35rem); }

.pp-rte { color: var(--pp-title, #555); font-size: 0.9375rem; line-height: 1.8; }
.pp-rte p { margin: 0 0 0.85rem; }
.pp-rte p:last-child { margin-bottom: 0; }
.pp-rte ul, .pp-rte ol { margin: 0 0 0.85rem; padding-inline-start: 1.15rem; }
.pp-rte li { margin-bottom: 0.35rem; }
.pp-rte a { color: var(--pp-brand, #111); text-decoration: underline; text-underline-offset: 3px; }
.pp-rte img { max-width: 100%; height: auto; }

/* ===========================================================================
 * 9 · RHYTHM
 * One column of information with a consistent vertical beat. The old template
 * spaced blocks ad hoc, which is what made it read as a generic store.
 * ======================================================================== */
.col-product-info > * + * { margin-block-start: clamp(0.9rem, 2.2vw, 1.35rem); }
.col-product-info .border-product { border: 0; padding: 0; margin-block-start: clamp(1.25rem, 3vw, 1.75rem); }

/* Related products belong after everything else, with clear separation. */
#related-products { margin-block-start: clamp(2.5rem, 6vw, 4rem); }

/* Zid's own widgets sit on the same panel surface, so the column reads as one
   system rather than several bolted-on blocks. */
.col-product-info .loyalty-points-widget,
.col-product-info .payment-widgets,
.col-product-info .tabby-promo-snippet {
  background: var(--pp-panel, #F7F7F7);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .pp-acc__panel, .pp-acc__mark i { transition: none; }
}

/* ===========================================================================
 * 10 · ELEMENT VISIBILITY
 * One class per hidden element, emitted on <body> only for the product page.
 * Hiding is done in CSS rather than by removing markup, so Zid's scripts still
 * find the nodes they expect — the variant engine, the add-to-cart handler and
 * the wishlist all query the DOM, and deleting an element would break them.
 * ======================================================================== */
body.pp-hide-badge .col-product-info .product-badge,
body.pp-hide-badge .col-product-info [class*='badge'] { display: none !important; }
body.pp-hide-rating .product-card-rating-wrapper,
body.pp-hide-rating .col-product-info .rating-stars { display: none !important; }
body.pp-hide-sold-count .col-product-info .product-count { display: none !important; }
body.pp-hide-price .product-formatted-price { display: none !important; }
body.pp-hide-old-price .product-formatted-price-old { display: none !important; }
body.pp-hide-discount .product-formatted-price-discount { display: none !important; }
body.pp-hide-loyalty .loyalty-points-widget,
body.pp-hide-loyalty [class*='loyalty'] { display: none !important; }
body.pp-hide-payments .payment-widgets,
body.pp-hide-payments [class*='tabby'],
body.pp-hide-payments [class*='tamara'] { display: none !important; }
body.pp-hide-variants .size-box { display: none !important; }
body.pp-hide-quantity .select-quantity,
body.pp-hide-quantity .quantity-box { display: none !important; }
body.pp-hide-wishlist .col-product-info .add-to-wishlist { display: none !important; }
body.pp-hide-buy-now .btn-buy-now { display: none !important; }
body.pp-hide-features .pp-features { display: none !important; }
body.pp-hide-fit-note .pp-note { display: none !important; }
body.pp-hide-low-stock .pp-low { display: none !important; }
body.pp-hide-delivery .pp-box { display: none !important; }
body.pp-hide-size-guide .pp-sizehead { display: none !important; }
body.pp-hide-accordions .pp-acc { display: none !important; }
body.pp-hide-sku .product-sku { display: none !important; }
body.pp-hide-weight .product-weight { display: none !important; }
body.pp-hide-share .product-icon,
body.pp-hide-share .social-icons { display: none !important; }
body.pp-hide-metafields .metafields-wrapper,
body.pp-hide-metafields [class*='metafield'] { display: none !important; }
body.pp-hide-bundles .bundle-offer-products,
body.pp-hide-bundles [class*='bundle-offer'] { display: none !important; }
body.pp-hide-reviews .card-review,
body.pp-hide-reviews [class*='customer-review'],
body.pp-hide-reviews .product-reviews { display: none !important; }
body.pp-hide-questions [class*='product-question'] { display: none !important; }
body.pp-hide-related #related-products,
body.pp-hide-related .related-products { display: none !important; }
body.pp-hide-thumbs .product-images-carousel-thumbs { display: none !important; }

/* With the rail hidden the main image takes the full column. */
body.pp-hide-thumbs.pp-gal-main-thumbs .col-product-image-wrapper { display: block; }

/* ===========================================================================
 * 11 · ICONS
 * The page carries icons from several sources — ours, Soft Theme's and Zid's
 * includes. They are brought to one size and colour so the column reads as a
 * single system.
 * ======================================================================== */
.col-product-info svg:not(.dn-wl-icon):not(.pp-acc__mark svg) {
  width: var(--pp-icon-size, 20px);
  height: var(--pp-icon-size, 20px);
  stroke-width: var(--pp-icon-stroke, 2);
}
.pp-note svg, .pp-box svg { color: var(--pp-icon, #111); }
.pp-low svg, .pp-feature__mark { color: var(--pp-icon-accent, #FF5100); }

/* Share row. */
.product-icon a, .social-icons a { color: var(--pp-share, #111); }
.product-icon svg, .product-icon i, .social-icons svg, .social-icons i {
  font-size: var(--pp-share-size, 22px);
  width: var(--pp-share-size, 22px);
  height: var(--pp-share-size, 22px);
}

/* Rating stars — Soft Theme draws these with an icon font through ::before,
   so the colour has to be set on that pseudo-element. */
.col-product-info .icon-star1:before,
.col-product-info .icon-half-star:before,
.col-product-info .icon-star1,
.col-product-info .icon-half-star { color: var(--pp-star, #E8B93B); }
.col-product-info .icon-star1.deactive:before,
.col-product-info .icon-star1.deactive { color: var(--pp-star-empty, #DDD); }

/* ===========================================================================
 * 12 · BREADCRUMB
 * ======================================================================== */
.pp-crumb {
  max-width: var(--d-max, 1440px);
  margin-inline: auto;
  padding: clamp(0.75rem, 2vw, 1.25rem) var(--d-gutter, 2rem) 0;
}
.pp-crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--pp-muted, #8A8A8A);
}
.pp-crumb li + li::before { content: '/'; margin-inline-end: 0.5rem; opacity: 0.55; }
.pp-crumb a { color: inherit; transition: color 0.18s ease; }
.pp-crumb a:hover { color: var(--pp-brand, #111); }
.pp-crumb li[aria-current] {
  color: var(--pp-brand, #111);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch;
}

/* ===========================================================================
 * 13 · BRAND LINE
 * The label reads first and the product name second, which is what gives the
 * reference its editorial feel.
 * ======================================================================== */
.pp-brand {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: var(--pp-brand-size, 26px);
  font-weight: var(--pp-brand-weight, 800);
  letter-spacing: var(--pp-brand-track, 0.02em);
  line-height: 1.05;
  color: var(--pp-brand, #111);
  text-transform: uppercase;
  margin: 0 0 0.25rem;
}
[dir='rtl'] .pp-brand { text-transform: none; letter-spacing: 0; }

/* With a brand line above it the product name steps back to a subtitle. */
.pp-brand + .pp-name,
.pp-brand + h1 {
  font-family: var(--duneus-font-en-body, 'Montserrat'), sans-serif;
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pp-title, #555);
  margin: 0;
}

/* ===========================================================================
 * 14 · ACTION ROW — cart and wishlist together
 * The reference pairs them; a heart floating elsewhere reads as an
 * afterthought next to a full-width primary button.
 * ======================================================================== */
.pp-actions { display: flex; align-items: stretch; gap: 10px; }
.pp-actions .btn-add-to-cart { flex: 1 1 auto; margin-bottom: 0; }

body.pp-hide-wishlist .pp-actions .add-to-wishlist { display: none !important; }
.pp-actions .add-to-wishlist {
  position: static;
  flex: 0 0 auto;
  width: auto;
  min-width: 30%;
  height: auto;
  padding-inline: 1.1rem;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--pp-brand, #111);
  border-radius: var(--pp-var-radius, 4px);
}

/* ===========================================================================
 * 15 · TRUST STRIP
 * ======================================================================== */
.pp-trust {
  border-top: 1px solid var(--pp-trust-border, #EEE);
  border-bottom: 1px solid var(--pp-trust-border, #EEE);
  background: var(--pp-trust-bg, #fff);
  padding-block: clamp(2rem, 5vw, 3rem);
}
.pp-trust__inner {
  max-width: var(--d-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--d-gutter, 2rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
@media (min-width: 768px) {
  .pp-trust__inner { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.pp-trust__item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.pp-trust__mark { color: var(--pp-icon, #111); }
.pp-trust__mark svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.pp-trust__title {
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--pp-brand, #111);
}
.pp-trust__text { font-size: 0.875rem; line-height: 1.6; color: var(--pp-title, #555); max-width: 30ch; }

/* ===========================================================================
 * 16 · SWATCHES AND PAYMENT SPLIT
 * ======================================================================== */
/* Colour options render as image chips with an underline on the chosen one —
   a border would compete with the garment inside the chip. */
.product-options__item--color {
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  position: relative;
  overflow: visible;
}
.product-options__item--color.active::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--pp-brand, #111);
}
.product-options__item--color img { border-radius: 2px; display: block; }

/* ===========================================================================
 * 17 · OPTION GROUP HEADINGS
 * "COLOR", "SIZE", "QUANTITY" are labels, not chips. They were boxed because
 * the chip rule matched every <label> inside the options block.
 * ======================================================================== */
.size-box label:not(.product-options__item),
.size-box > label,
.product-options__label,
.product-options > label,
.quantity-box label,
.select-quantity-label,
.col-product-info .product-title {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 0.55rem !important;
  min-height: 0 !important;
  display: block;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-muted, #8A8A8A);
}
[dir='rtl'] .size-box label:not(.product-options__item),
[dir='rtl'] .product-options__label { letter-spacing: 0; }

/* ===========================================================================
 * 18 · SELECTED OPTION — solid fill
 * duneus-skin.css tinted the active chip orange, which is why the chosen size
 * read as an outline rather than the filled state in the reference.
 * ======================================================================== */
body .size-box .product-options__item.active,
body .product-options__item.active {
  background-color: var(--pp-var-on-bg, #111) !important;
  border-color: var(--pp-var-on-bg, #111) !important;
  color: var(--pp-var-on-fg, #fff) !important;
  font-weight: 600;
}
/* A colour swatch keeps its image; only the underline marks it. */
body .product-options__item--color.active,
body .product-options__item--image.active {
  background: transparent !important;
  border-color: transparent !important;
}

/* ===========================================================================
 * 19 · SECONDARY BUTTONS
 * Both were drawn for a dark canvas: a white outline disappears on white.
 * ======================================================================== */
body .btn-buy-now {
  background-color: var(--pp-var-on-bg, #111) !important;
  border: 1px solid var(--pp-var-on-bg, #111) !important;
  color: #fff !important;
}
body .btn-buy-now:hover {
  background-color: transparent !important;
  color: var(--pp-var-on-bg, #111) !important;
}

/* The wishlist sits beside the primary button, so it borrows the page's
   hairline rather than a hard black rule that competes with it. */
.pp-actions .add-to-wishlist {
  border: 1px solid var(--pp-line, #EEE);
  border-radius: var(--pp-var-radius, 4px);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.pp-actions .add-to-wishlist:hover {
  border-color: var(--pp-brand, #111);
  background: transparent;
  transform: none;
}
.pp-actions .dn-wl-icon { stroke: var(--pp-brand, #111); }

/* ===========================================================================
 * 20 · OPTION CHIPS — one size for all
 * Widths followed the text, so "3XL" was wider than "L" and the row read as
 * ragged. A grid gives every chip the same cell and centres the label, which
 * is what makes the reference feel ordered. Colour swatches keep flowing,
 * since a thumbnail should not be stretched to a text cell.
 * ======================================================================== */
.size-box .product-options__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pp-chip-min, 62px), 1fr));
  gap: var(--pp-chip-gap, 8px);
  padding: 0;
  margin: 0 0 1.25rem;
  list-style: none;
}
/* Swatches are images, so they stay inline at their natural size. */
.size-box .product-options__list:has(.product-options__item--color),
.size-box .product-options__list:has(.product-options__item--image) {
  display: flex;
  flex-wrap: wrap;
}

.size-box .product-options__item {
  width: 100%;
  min-width: 0;
  min-height: var(--pp-var-h, 52px);
  margin: 0;
  padding-inline: 0.35rem;
  /* A hairline reads as an option; a hard rule reads as a disabled field. */
  border: 1px solid var(--pp-var-border, #DDD);
  border-radius: var(--pp-var-radius, 4px);
  font-size: 0.875rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  /* Bigger than the visible box, so the tap target is comfortable without
     making the chips themselves oversized. */
  position: relative;
}
.size-box .product-options__item::before {
  content: '';
  position: absolute;
  inset: -4px;
}
.size-box .product-options__item:hover { border-color: var(--pp-brand, #111); }

/* Swatches opt out of the grid sizing. */
.size-box .product-options__item--color,
.size-box .product-options__item--image {
  width: auto;
  min-height: 0;
  padding: 0;
}

/* ===========================================================================
 * 21 · QUANTITY STEPPER
 * The native select is kept for the form and hidden from view.
 * ======================================================================== */
.pp-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--pp-var-border, #DDD);
  border-radius: var(--pp-var-radius, 4px);
  overflow: hidden;
  height: var(--pp-var-h, 52px);
}
.pp-qty .select-quantity {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pp-qty__btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  width: 46px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-brand, #111);
  transition: background-color 0.18s ease, opacity 0.18s ease;
}
.pp-qty__btn:hover { background: var(--pp-panel, #F7F7F7); }
.pp-qty__btn:disabled { opacity: 0.28; cursor: not-allowed; }
.pp-qty__btn svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round;
}
.pp-qty__value {
  min-width: 46px;
  text-align: center;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pp-brand, #111);
  border-inline: 1px solid var(--pp-var-border, #DDD);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===========================================================================
 * 22 · ICON ALIGNMENT
 * Icons arrive from our markup, Soft Theme and Zid's includes at whatever size
 * each source chose. One rule brings them to a shared box and baseline.
 * ======================================================================== */
.col-product-info .pp-note svg,
.col-product-info .pp-low svg,
.col-product-info .pp-box svg,
.col-product-info .pp-feature__mark svg {
  width: var(--pp-icon-size, 20px);
  height: var(--pp-icon-size, 20px);
  flex: 0 0 auto;
  stroke-width: var(--pp-icon-stroke, 2);
}
/* Text and mark share a baseline rather than a box centre. */
.pp-note, .pp-low, .pp-box, .pp-feature { line-height: 1.45; }
.pp-note svg, .pp-low svg, .pp-box svg, .pp-feature__mark svg { margin-block-start: 0.05em; }

/* Action row: all three controls the same height. */
.pp-actions .btn-add-to-cart,
.pp-actions .btn-buy-now,
.pp-actions .add-to-wishlist {
  min-height: var(--pp-var-h, 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-actions .dn-wl-icon {
  width: var(--pp-icon-size, 20px);
  height: calc(var(--pp-icon-size, 20px) * 0.862);
}

/* ===========================================================================
 * 23 · REFERENCE ALIGNMENT
 * Measurements taken from the Level Shoes markup rather than eyeballed:
 *   chips      4 cols mobile / 5 desktop, gap 8, radius 2, padding-block 12
 *   controls   48px tall, radius 2
 *   icons      20px, 8px from their label
 *   BNPL       two equal cells sharing one hairline, logo 20px + info mark
 * A single scale is what makes the column read as one system.
 * ======================================================================== */
:root {
  --pp-r: 2px;          /* rounded-sm */
  --pp-h: 48px;         /* h-12 — every control */
  --pp-line-soft: #EFEFEF;  /* white-smoke */
  --pp-line-mid: #E0E0E0;   /* platinum */
  --pp-ink: #161515;        /* charcoal */
  --pp-grey: #747474;       /* iron */
  --pp-grey-soft: #A8A8A8;  /* stone */
}

/* ---- Size chips ---- */
.size-box .product-options__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-block: 12px 0;
}
@media (min-width: 768px) {
  .size-box .product-options__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.size-box .product-options__item {
  min-height: 0;
  padding-block: 12px;
  border: 1px solid var(--pp-line-mid);
  border-radius: var(--pp-r);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
}
.size-box .product-options__item:hover {
  border-color: var(--pp-ink);
  background: var(--pp-ink);
  color: #fff;
}
/* Unavailable is filled and muted — no strike-through in the reference; the
   fill alone reads as "gone" without adding visual noise. */
body .size-box .product-options__item.disabled,
body .size-box .product-options__item[disabled],
body .size-box .product-options__item.out-of-stock {
  border-color: var(--pp-line-soft) !important;
  background: var(--pp-line-soft) !important;
  color: var(--pp-grey-soft) !important;
  text-decoration: none !important;
  cursor: not-allowed;
}

/* ---- Fit note ---- */
.pp-note {
  justify-content: center;
  gap: 8px;
  margin-block-start: 16px;
  color: var(--pp-grey);
  font-size: 0.75rem;
  font-weight: 600;
}
@media (min-width: 768px) { .pp-note { justify-content: flex-start; } }
.pp-note svg { width: 20px; height: 20px; stroke-width: 1.2; }

/* ---- Delivery box ---- */
.pp-box {
  height: var(--pp-h);
  margin-block-start: 16px;
  padding: 12px;
  justify-content: center;
  background: var(--pp-line-soft);
  border-radius: var(--pp-r);
  font-size: 0.75rem;
  color: var(--pp-ink);
}
.pp-box svg { width: 16px; height: 16px; stroke-width: 1.1; }

/* ---- Action row ---- */
.pp-actions { gap: 12px; margin-block-start: 24px; flex-direction: column; }
@media (min-width: 768px) { .pp-actions { flex-direction: row; } }

.pp-actions .btn-add-to-cart,
.pp-actions .btn-buy-now,
.pp-actions .add-to-wishlist {
  height: var(--pp-h);
  min-height: var(--pp-h);
  border-radius: var(--pp-r);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[dir='rtl'] .pp-actions .btn-add-to-cart,
[dir='rtl'] .pp-actions .btn-buy-now,
[dir='rtl'] .pp-actions .add-to-wishlist { letter-spacing: 0; text-transform: none; }

.pp-actions .add-to-wishlist {
  gap: 8px;
  border: 1px solid var(--pp-ink);
  color: var(--pp-ink);
  min-width: 0;
}
@media (min-width: 768px) {
  .pp-actions .btn-add-to-cart { flex: 1 1 auto; }
  .pp-actions .add-to-wishlist { flex: 0 0 160px; }
}
.pp-actions .dn-wl-icon { width: 20px; height: 17px; stroke-width: 1.2; }

/* ---- BNPL: tabby and tamara ----
   Two equal cells sharing one hairline, exactly as the reference. Zid renders
   the widgets' own markup inside; only the frame around them is ours. */
.col-product-info .payment-widgets,
.col-product-info .payment-widgets-wrapper {
  display: flex;
  flex-direction: row;
  margin-block-start: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 0;
  overflow: visible;
}
.col-product-info .payment-widgets > *,
.col-product-info .payment-widgets-wrapper > * {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  margin: 0;
  background: var(--pp-bg, #fff);
  border: 1px solid var(--pp-line-soft);
  border-radius: var(--pp-r);
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--pp-ink);
}
/* Overlapping by a pixel merges the two borders into a single rule between
   the cells, which is what the reference does with -mr-px. */
.col-product-info .payment-widgets > * + *,
.col-product-info .payment-widgets-wrapper > * + * { margin-inline-start: -1px; }

/* Provider logos to one height, whatever each widget ships. */
.col-product-info .payment-widgets img,
.col-product-info .payment-widgets svg:not(.pp-info),
.col-product-info [class*='tabby'] img,
.col-product-info [class*='tamara'] img {
  height: 20px !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.col-product-info .payment-widgets a { color: inherit; text-decoration: none; }
.col-product-info .payment-widgets p,
.col-product-info .payment-widgets span { margin: 0; font-size: 0.75rem; }

/* ---- Icon scale across the column ---- */
.col-product-info .pp-feature__mark svg { width: 20px; height: 20px; }
.pp-low svg { width: 20px; height: 20px; stroke-width: 1.2; }
.pp-low { gap: 8px; font-size: 0.75rem; font-weight: 600; }

/* ===========================================================================
 * 24 · SIZE CHIPS — container-agnostic
 *
 * variants_list.jinja is rendered by Zid at runtime, so its wrapper class is
 * not knowable from the theme source. Earlier rules assumed
 * `.product-options__list`; if the real wrapper is anything else the grid
 * never applied, which is why the chips kept following their text width.
 *
 * `:has(> …)` finds whatever element directly contains the chips, so the grid
 * lands on the right node without needing its name.
 * ======================================================================== */
body .size-box ul:has(> li > .product-options__item),
body .size-box ul:has(> .product-options__item),
body .size-box ol:has(> li > .product-options__item),
body .size-box div:has(> .product-options__item),
body .size-box div:has(> li > .product-options__item),
body .size-box .product-options__list,
body .size-box .product-options,
body .size-box .variants-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media (min-width: 768px) {
  body .size-box ul:has(> li > .product-options__item),
  body .size-box ul:has(> .product-options__item),
  body .size-box ol:has(> li > .product-options__item),
  body .size-box div:has(> .product-options__item),
  body .size-box div:has(> li > .product-options__item),
  body .size-box .product-options__list,
  body .size-box .product-options,
  body .size-box .variants-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* A colour row is images, so it flows rather than filling equal cells. */
body .size-box ul:has(.product-options__item--color),
body .size-box div:has(.product-options__item--color),
body .size-box ul:has(.product-options__item--image),
body .size-box div:has(.product-options__item--image) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  grid-template-columns: none !important;
}

/* The chip may be wrapped in an <li>; that wrapper must not add width. */
body .size-box li { list-style: none; margin: 0; padding: 0; width: 100%; }
body .size-box li > .product-options__item { width: 100%; }

body .size-box .product-options__item {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 12px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pp-line-mid, #E0E0E0);
  border-radius: var(--pp-r, 2px);
  background: transparent;
  color: var(--pp-ink, #161515);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body .size-box .product-options__item:hover:not(.disabled):not([disabled]) {
  border-color: var(--pp-ink, #161515);
  background: var(--pp-ink, #161515);
  color: #fff;
}
body .size-box .product-options__item.active,
body .size-box .product-options__item.selected {
  border-color: var(--pp-ink, #161515);
  background: var(--pp-ink, #161515);
  color: #fff;
}
body .size-box .product-options__item.disabled,
body .size-box .product-options__item[disabled] {
  border-color: var(--pp-line-soft, #EFEFEF);
  background: var(--pp-line-soft, #EFEFEF);
  color: var(--pp-grey-soft, #A8A8A8);
  cursor: not-allowed;
}
/* Colour swatches opt out of the chip box entirely. */
body .size-box .product-options__item--color,
body .size-box .product-options__item--image {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

/* ===========================================================================
 * 25 · QUANTITY — hide everything the stepper replaces
 * The previous rule named `.select-quantity` specifically, so anything else
 * inside the wrapper stayed visible — which is the stray chevron sitting over
 * the minus. Hiding by exclusion covers the select and any wrapper or arrow a
 * plugin adds around it, without needing to know their names.
 *
 * The select is hidden from view, never removed: the form still submits
 * #product-quantity and Zid's scripts still read it.
 * ======================================================================== */
.pp-qty { position: relative; }

.pp-qty > *:not(.pp-qty__btn):not(.pp-qty__value),
.pp-qty select,
.pp-qty .select-quantity {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
  background: none !important;
}

/* The stepper's own parts must survive that sweep. */
.pp-qty > .pp-qty__btn,
.pp-qty > .pp-qty__value {
  position: static !important;
  width: auto !important;
  height: 100% !important;
  clip: auto !important;
  clip-path: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  margin: 0 !important;
}
.pp-qty > .pp-qty__btn { width: 46px !important; }
.pp-qty > .pp-qty__value { min-width: 46px !important; }

/* ===========================================================================
 * 26 · CHIP BORDER AND HOVER
 * A 2px rule holds its weight next to the filled selected state; at 1px the
 * unselected chips read as ghosts beside it. Hover fills solid so the chip
 * previews exactly what selecting it will look like.
 * ======================================================================== */
body .size-box .product-options__item {
  border-width: var(--pp-var-bw, 2px) !important;
  border-style: solid !important;
  border-color: var(--pp-var-border, #E0E0E0) !important;
}

body .size-box .product-options__item:hover:not(.disabled):not([disabled]),
body .size-box .product-options__item:focus-visible:not(.disabled):not([disabled]) {
  background: var(--pp-var-hover-bg, #000) !important;
  border-color: var(--pp-var-hover-bg, #000) !important;
  color: var(--pp-var-hover-fg, #fff) !important;
}

body .size-box .product-options__item.active,
body .size-box .product-options__item.selected {
  background: var(--pp-var-on-bg, #111) !important;
  border-color: var(--pp-var-on-bg, #111) !important;
  color: var(--pp-var-on-fg, #fff) !important;
}

body .size-box .product-options__item.disabled,
body .size-box .product-options__item[disabled] {
  background: var(--pp-var-off-bg, #FAFAFA) !important;
  border-color: var(--pp-var-off-bg, #FAFAFA) !important;
  color: var(--pp-var-off-fg, #C9C9C9) !important;
}

/* Swatches keep their image; the border rule must not box them. */
body .size-box .product-options__item--color,
body .size-box .product-options__item--image {
  border-width: 0 !important;
  background: transparent !important;
}

/* ===========================================================================
 * 27 · BADGE
 * badge.jinja is platform-owned and carries Zid's own colours, which is why
 * the product page showed a purple pill while the cards showed the DUNEUS
 * treatment — the card stylesheet overrides it, the product page never did.
 * The colour usually arrives inline, so !important is required to reach it.
 * ======================================================================== */
.col-product-info .product-badge,
.col-product-info [class*='product-badge'],
.col-product-info .badge,
.col-product-info .preorder-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: var(--pp-badge-py, 5px) var(--pp-badge-px, 9px) !important;
  background: var(--pp-badge-bg, #111) !important;
  background-color: var(--pp-badge-bg, #111) !important;
  color: var(--pp-badge-fg, #fff) !important;
  border: 0 !important;
  border-radius: var(--pp-badge-radius, 2px) !important;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif !important;
  font-size: var(--pp-badge-size, 10px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: var(--pp-badge-track, 0.1em) !important;
  text-transform: var(--pp-badge-transform, uppercase) !important;
  margin: 0 0 12px !important;
  box-shadow: none !important;
}
[dir='rtl'] .col-product-info .product-badge,
[dir='rtl'] .col-product-info .badge { letter-spacing: 0 !important; text-transform: none !important; }

body.pp-badge-pill .col-product-info .product-badge,
body.pp-badge-pill .col-product-info .badge { border-radius: 999px !important; }

body.pp-badge-outline .col-product-info .product-badge,
body.pp-badge-outline .col-product-info .badge {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--pp-badge-bg, #111) !important;
  color: var(--pp-badge-bg, #111) !important;
}

body.pp-badge-underline .col-product-info .product-badge,
body.pp-badge-underline .col-product-info .badge {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--pp-badge-bg, #111) !important;
  border-radius: 0 !important;
  border-bottom: 2px solid var(--pp-badge-bg, #111) !important;
  padding-inline: 0 !important;
}

/* Any inner span inherits, so a nested colour cannot leak through. */
.col-product-info .product-badge *,
.col-product-info .badge * {
  color: inherit !important;
  background: transparent !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
}

/* ===========================================================================
 * 28 · GALLERY DOTS
 * The thumbnail rail already shows position on desktop, and the image itself
 * scrolls on mobile — a dot row underneath repeats that and adds a stray line
 * of clutter under the image. Off by default, kept as a setting.
 * ======================================================================== */
body.pp-no-gdots .col-product-image-wrapper .carousel-indicators,
body.pp-no-gdots #product-images .carousel-indicators,
body.pp-no-gdots .product-images-carousel .carousel-indicators,
body.pp-no-gdots .col-product-image-wrapper .slick-dots,
body.pp-no-gdots #product-images .slick-dots,
body.pp-no-gdots .col-product-image-wrapper [class*='dots'],
body.pp-no-gdots #product-images [class*='indicator'] {
  display: none !important;
}

/* ===========================================================================
 * 29 · HEADER ON THIS PAGE
 * Transparent mode is written for a bar sitting over a hero image: it shows
 * the light logo. A product page has no hero, so that logo lands on white and
 * disappears — which is what emptied the mobile bar. Solid is therefore the
 * default here, and the dark logo is forced whenever the page is light.
 * ======================================================================== */
body[data-template='product_details']:not(.dn-transparent) .dn-logo--swap .dn-logo__dark { opacity: 1; }
body[data-template='product_details']:not(.dn-transparent) .dn-logo--swap .dn-logo__light { opacity: 0; }

/* A logo must never be invisible: if only one image is uploaded, the fallback
   copy is shown rather than a blank slot. */
body[data-template='product_details'] .dn-logo img.is-fallback { opacity: 1; }
body[data-template='product_details'] .dn-logo { min-width: 1px; }

/* ===========================================================================
 * 26 · PDP FIXES (2026-09-27) — gallery bg, quantity stepper, action alignment
 * Presentation only; commerce hooks untouched.
 * =========================================================================== */

/* ---- (1) Remove the gray background behind the main product image ----
   The tint comes from the platform's base gallery containers. Force them
   transparent so the product photo sits on the page background cleanly. */
body[data-template='product_details'] .product-images-carousel,
body[data-template='product_details'] .product-images-carousel .content,
body[data-template='product_details'] #product-images,
body[data-template='product_details'] #product-images-slick,
body[data-template='product_details'] #product-images .box-1-1,
body[data-template='product_details'] #product-images .slick-slide,
body[data-template='product_details'] #product-images .slick-track,
body[data-template='product_details'] #wrap {
  background: transparent !important;
}

/* ---- (2) Quantity stepper — cleaner, softer, modern ----
   Fixes the odd icon glitch on the minus button (a stray global rule was
   distorting the horizontal line) and softens the whole control. */
.pp-qty {
  border-color: #E6E6E6;
  border-radius: 10px;
  height: 50px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.pp-qty__btn {
  width: 48px;
  transition: background-color .25s cubic-bezier(.2,.7,.2,1), color .25s cubic-bezier(.2,.7,.2,1);
}
.pp-qty__btn:hover { background: #F4F4F4; color: var(--duneus-accent, #FF5100); }
.pp-qty__btn:active { background: #ececec; }
/* Stepper icons drawn purely in CSS (no SVG, no icon font) so nothing in the
   cascade can distort them. Minus = one bar; Plus = bar + vertical bar. */
.pp-qty__ico {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
}
/* horizontal bar (shared by minus and plus) */
.pp-qty__ico::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
/* vertical bar (plus only) */
.pp-qty__btn--inc .pp-qty__ico::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 14px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.pp-qty__value {
  min-width: 52px;
  border-color: #E6E6E6;
  font-weight: 700;
}

/* ---- (3) Action buttons — perfectly aligned on one baseline ----
   The wishlist span carried a Bootstrap `my-2` vertical margin that pushed
   it off the shared baseline. Neutralize it and lock all three to the same
   height and vertical centering. */
.pp-actions { align-items: center; }
.pp-actions .add-to-wishlist.my-2 { margin-top: 0 !important; margin-bottom: 0 !important; }
.pp-actions .btn-add-to-cart,
.pp-actions .btn-buy-now,
.pp-actions .add-to-wishlist {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  align-self: center;
}

/* ---- (FIX) Kill the leftover native <select> dropdown arrow ----
   Soft Theme's product-details.css draws an icomoon arrow (content '\e94b')
   via `.select-quantity-div > div.form-group > div::after` on the original
   quantity <select>. Our custom stepper hides the select, but that ::after
   arrow still painted over the minus button. Remove it in every direction. */
.select-quantity-div > div.form-group > div::after,
.select-quantity-div div.form-group > div::after,
.rtl .select-quantity-div div.form-group > div::after,
.pp-qty .select-quantity-div > div.form-group > div::after,
body[data-template='product_details'] .select-quantity-div > div.form-group > div::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* ---- (FIX) Uniform, larger size buttons ----
   Previously each variant sized to its text (M narrow, 2XL wide), so the row
   looked uneven. Give every size button the same fixed width + height and a
   consistent gap, matching the approved larger rectangle proportions. */
.size-box .variants-values,
.size-box .product-options,
.size-box .variants-list,
.size-box .d-flex,
.size-box ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
}
.size-box .variant-item,
.size-box .product-options__item,
.size-box .btn-variant,
.size-box label.variant-item,
.size-box li .variant-item {
  min-width: 84px !important;
  width: 84px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding-inline: 8px !important;
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  box-sizing: border-box !important;
}
/* On small screens keep them tidy but let them breathe a little less wide. */
@media (max-width: 480px) {
  .size-box .variant-item,
  .size-box .product-options__item,
  .size-box .btn-variant,
  .size-box label.variant-item,
  .size-box li .variant-item {
    min-width: 72px !important;
    width: 72px !important;
  }
}

/* ---- (FIX 2026-09-27) Wishlist button — pushed to the far end, gray plate,
   orange heart, aligned to the row baseline and the content below it ----
   The cart + buy-now buttons stay grouped at the start; an auto margin pushes
   the wishlist plate to the opposite end so it lines up with the section edge
   (and the aeondry / ultrabionic / vi-pure strip beneath it). */
.pp-actions .add-to-wishlist {
  margin-inline-start: 0 !important;      /* even gap, not pushed to the edge */
  flex: 0 0 auto !important;
  min-width: 120px;
  background: #F1F1F1 !important;         /* soft gray plate */
  border: 1px solid #ECECEC !important;
  border-radius: var(--pp-var-radius, 4px);
}
.pp-actions .add-to-wishlist:hover {
  background: #EAEAEA !important;
  border-color: #E0E0E0 !important;
}
/* Orange heart (the mask icon is colored via background-color) */
.pp-actions .add-to-wishlist .icon-heart-mask {
  background-color: var(--duneus-accent, #FF5100) !important;
}
/* If the SDK swaps in the inline SVG variant instead of the mask icon */
.pp-actions .add-to-wishlist .dn-wl-icon {
  stroke: var(--duneus-accent, #FF5100) !important;
}

/* On mobile the row stacks (flex-direction: column), so the auto margin would
   push the wishlist down awkwardly — reset it there and let it be full width. */
@media (max-width: 767px) {
  .pp-actions .add-to-wishlist {
    margin-inline-start: 0 !important;
    width: 100%;
  }
}

/* ===========================================================================
 * 27 · REVIEWS & QUESTIONS — clean DUNEUS redesign (2026-09-27)
 * Rebuilds the layout only; all Zid hooks (add-review-btn, rating_count_*,
 * rating-average, addQuestionButton, includes) are preserved.
 * =========================================================================== */
.dn-reviews { border-top: 1px solid #EEE; padding-top: 32px; }
.dn-reviews__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.dn-reviews__title {
  font-size: 1.4rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .01em; margin: 0; color: var(--pp-brand, #111);
}

/* Buttons — match the DUNEUS system (outline ghost, not loud orange fill) */
.dn-review-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding-inline: 22px;
  background: var(--pp-brand, #111); color: #fff;
  border: 1px solid var(--pp-brand, #111); border-radius: var(--pp-var-radius, 4px);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .25s cubic-bezier(.2,.7,.2,1), color .25s cubic-bezier(.2,.7,.2,1);
}
.dn-review-btn:hover { background: var(--duneus-accent, #FF5100); border-color: var(--duneus-accent, #FF5100); color: #000; }
.dn-review-btn .icon-add_circle { display: none; }
.dn-review-btn--ghost { background: transparent; color: var(--pp-brand, #111); }
.dn-review-btn--ghost:hover { background: var(--pp-brand, #111); color: #fff; border-color: var(--pp-brand, #111); }

/* Score summary */
.dn-reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; margin-bottom: 32px; }
.dn-reviews__score { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px; }
.dn-reviews__avg { font-size: 3rem; font-weight: 900; line-height: 1; margin: 0; color: var(--pp-brand, #111); }
.dn-reviews__score-stars { display: flex; gap: 2px; }
.dn-reviews__count { font-size: .8rem; color: #999; }

/* Rating breakdown bars — replaces the stacked star glitch with clean bars */
.dn-reviews__bars { flex: 1; min-width: 240px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.dn-reviews__bar-row { display: flex; align-items: center; gap: 12px; }
.dn-reviews__bar-label { font-size: .78rem; font-weight: 600; color: #555; min-width: 34px; display: inline-flex; align-items: center; gap: 3px; }
.dn-reviews__bar-label .dn-star { color: var(--duneus-accent, #FF5100); font-size: .7rem; }
.dn-reviews__bar-track { flex: 1; height: 6px; background: #EEE; border-radius: 999px; overflow: hidden; }
.dn-reviews__bar-fill { display: block; height: 100%; width: 0; background: var(--duneus-accent, #FF5100); border-radius: 999px; transition: width .5s ease; }
.dn-reviews__bar-count { font-size: .75rem; color: #999; min-width: 24px; text-align: end; }

.dn-reviews__empty {
  border: 1px solid #EEE; border-radius: var(--pp-var-radius, 4px);
  padding: 16px; color: #777; font-size: .9rem; text-align: center;
}
.dn-reviews__all { margin-top: 20px; text-align: center; }
.dn-questions { margin-top: 40px; }

/* Hide the old Soft-Theme review icon/star classes that caused the mess */
.dn-reviews .description-icon,
.dn-reviews .card-rate .icon-star1 { display: none !important; }

@media (max-width: 600px) {
  .dn-reviews__head { flex-direction: column; align-items: stretch; }
  .dn-review-btn { width: 100%; }
  .dn-reviews__summary { gap: 24px; }
}

/* ===========================================================================
 * 28 · SIZE OPTIONS — uniform width (2026-09-27, container-agnostic)
 * Earlier rules were scoped under `.size-box`, but the Zid SDK renders text
 * options into its own list (.product-options__list) that isn't always inside
 * .size-box. Target the real SDK classes directly, everywhere on the PDP.
 * Color/image swatches (--color / --icon) are explicitly excluded so they
 * stay as small rounded thumbnails.
 * =========================================================================== */
body[data-template='product_details'] .product-options__list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
body[data-template='product_details'] .product-options__item:not(.product-options__item--color):not(.product-options__item--icon) {
  min-width: 84px !important;
  width: 84px !important;
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 1px solid #DDD !important;
  border-radius: 4px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}
body[data-template='product_details'] .product-options__item:not(.product-options__item--color):not(.product-options__item--icon).active,
body[data-template='product_details'] .product-options__item:not(.product-options__item--color):not(.product-options__item--icon).selected {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}
@media (max-width: 480px) {
  body[data-template='product_details'] .product-options__item:not(.product-options__item--color):not(.product-options__item--icon) {
    min-width: 72px !important;
    width: 72px !important;
  }
}

/* ===========================================================================
 * 29 · WISHLIST — force to far end (2026-09-27, stronger targeting)
 * The earlier margin-auto rule may have lost to the wrapper's own flex. Anchor
 * the whole action row to space-between so cart+buy sit at the start and the
 * wishlist plate is pushed fully to the opposite edge.
 * =========================================================================== */
body[data-template='product_details'] .pp-actions {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
body[data-template='product_details'] .pp-actions > .add-to-wishlist {
  margin-inline-start: 0 !important;
  flex: 0 0 auto !important;
  min-width: 120px !important;
  background: #F1F1F1 !important;
  border: 1px solid #ECECEC !important;
  border-radius: 4px !important;
}
body[data-template='product_details'] .pp-actions > .add-to-wishlist .icon-heart-mask {
  background-color: var(--duneus-accent, #FF5100) !important;
}
@media (max-width: 767px) {
  body[data-template='product_details'] .pp-actions { flex-wrap: wrap !important; }
  body[data-template='product_details'] .pp-actions > .add-to-wishlist {
    margin-inline-start: 0 !important; width: 100% !important;
  }
}

/* ===========================================================================
 * 30 · SIZE OPTIONS — FINAL, correct targeting (2026-09-27)
 * Confirmed via live DOM inspection: sizes are <li> inside
 * `.size-box #product-variants-options ul`. Soft Theme's own rule
 * (.size-box #product-variants-options ul li { width:auto }) was winning on
 * specificity, which is why every earlier attempt was ignored. Match that
 * exact selector (prefixed with body[data-template] to guarantee the win).
 * =========================================================================== */
body[data-template='product_details'] .size-box #product-variants-options ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
body[data-template='product_details'] .size-box #product-variants-options ul li {
  width: 84px !important;
  min-width: 84px !important;
  height: 52px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 1px solid #DDD !important;
  border-radius: 4px !important;
  text-align: center !important;
}
body[data-template='product_details'] .rtl .size-box #product-variants-options ul li,
.rtl body[data-template='product_details'] .size-box #product-variants-options ul li {
  margin: 0 !important;
}
body[data-template='product_details'] .size-box #product-variants-options ul li span,
body[data-template='product_details'] .size-box #product-variants-options ul li a {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}
body[data-template='product_details'] .size-box #product-variants-options ul li.active {
  background: #111 !important;
  border-color: #111 !important;
}
body[data-template='product_details'] .size-box #product-variants-options ul li.active span,
body[data-template='product_details'] .size-box #product-variants-options ul li.active a {
  color: #fff !important;
}
@media (max-width: 480px) {
  body[data-template='product_details'] .size-box #product-variants-options ul li {
    width: 72px !important; min-width: 72px !important;
  }
}

/* ===========================================================================
 * 31 · ACTION ROW — uniform gap (2026-09-27)
 * The wishlist used to be auto-pushed to the far edge, which made the gap
 * before it larger than the gap between cart & buy-now. Now all three sit in
 * a single flex row with one identical gap between every pair.
 * =========================================================================== */
body[data-template='product_details'] .pp-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 12px !important;
}
body[data-template='product_details'] .pp-actions > * { margin: 0 !important; }
@media (max-width: 767px) {
  body[data-template='product_details'] .pp-actions { flex-wrap: wrap !important; }
}

/* ===========================================================================
 * LOW STOCK — Style 4 card (2026-09-29): side border + soft tint + bolt.
 * Bilingual text is built in the template. Overrides the old centered line.
 * =========================================================================== */
.pp-low--card {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px;
  margin: 14px 0 0 !important;
  padding: 12px 16px;
  background: #FFF8F5;
  border-inline-start: 3px solid var(--duneus-accent, #FF5100);
  border-radius: 4px;
  font-size: 0.82rem !important;
  font-weight: 600;
  color: #333 !important;
  line-height: 1.4;
  max-width: 340px;
}
.pp-low--card .pp-low__bolt { font-size: 0.95rem; line-height: 1; }
.pp-low--card .pp-low__text { color: #333; }
/* the number sits inside the sentence; keep the whole thing readable in RTL */
[dir='rtl'] .pp-low--card { text-align: right; }

.dn-reviews, .review-details { position: relative; z-index: 2; background: #fff; }

/* ===========================================================================
 * PRODUCT PAGE MOBILE — remove the header-height top padding (2026-09-29)
 * The global rule adds padding-top equal to the header height on non-transparent
 * pages so content clears the fixed bar. On the product page (mobile) the image
 * is full-width and should sit right under the header, so that padding created
 * the big empty gap above the image. Remove it here only.
 * =========================================================================== */
@media (max-width: 991.98px) {
  body[data-template='product_details']:not(.dn-transparent) .app-content-padded {
    padding-top: 0 !important;
  }
  /* Also zero any residual top padding on the product section / breadcrumb so
     the image starts cleanly under the bar. */
  body[data-template='product_details'] .products-details-page > .container,
  body[data-template='product_details'] .products-details { padding-top: 0 !important; margin-top: 0 !important; }
}

/* ===========================================================================
 * PRODUCT BADGE (.badge-name) — DUNEUS style, Option 4 (2026-10-07)
 * Zid injects this label with an inline background/border/color carrying the
 * product's stored badge color (e.g. purple #6f42c1). We don't touch Zid's
 * data — we only restyle the presentation to match the theme: a soft light
 * tag with an orange dot. Needs !important to override the inline styles.
 * Works LTR + RTL, all screen sizes.
 * =========================================================================== */
body[data-template='product_details'] .badge-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #F2F2F2 !important;
  color: #111111 !important;
  border: 1px solid #ECECEC !important;
  border-radius: 3px !important;
  padding: 7px 14px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  margin: 0 0 14px !important;
  max-width: 100% !important;
}
/* Orange dot before the text (after it in RTL so it still leads the label). */
body[data-template='product_details'] .badge-name::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--duneus-accent, #FF5100) !important;
}
/* The inner <span> carries the actual text — keep it clean. */
body[data-template='product_details'] .badge-name > span {
  color: inherit !important;
  background: none !important;
  font: inherit !important;
}
/* Arabic: slightly looser letter-spacing reads better, and allow wrapping on
   very narrow phones so a long AR label never overflows. */
html[lang="ar"] body[data-template='product_details'] .badge-name {
  letter-spacing: 0 !important;
}
@media (max-width: 480px) {
  body[data-template='product_details'] .badge-name {
    white-space: normal !important;
    font-size: 0.68rem !important;
    padding: 6px 12px !important;
  }
}

/* ===========================================================================
 * 40 · MOBILE PDP RHYTHM + MODERN REVIEWS (v6.6.0)
 * A single, calm vertical beat between every block of the info column on
 * phones, clear separation between accordion rows, and a modern card treatment
 * for the customer reviews. Styling only — every Zid hook (add-review-btn,
 * rating_count_*, rating-average, includes, wishlist/cart/apple-pay) is intact.
 * =========================================================================== */

/* ---- Accordions: each panel is its own rounded row with space between,
 *       instead of rows glued together by shared hairlines. Applies on all
 *       sizes so the component reads the same everywhere. ---- */
body[data-template='product_details'] .pp-acc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body[data-template='product_details'] .pp-acc__item {
  border: 1px solid var(--pp-line, #ECECEC);
  border-radius: 12px;
  padding-inline: clamp(14px, 4vw, 18px);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body[data-template='product_details'] .pp-acc__item:last-child {
  border-bottom: 1px solid var(--pp-line, #ECECEC);
}
body[data-template='product_details'] .pp-acc__item.is-open {
  border-color: #D8D8D8;
  box-shadow: 0 10px 28px -22px rgba(0, 0, 0, 0.55);
}
body[data-template='product_details'] .pp-acc__head {
  padding-block: clamp(15px, 4vw, 18px);
  font-size: 0.95rem;
}
body[data-template='product_details'] .pp-acc__item.is-open .pp-acc__inner {
  padding-block-end: clamp(14px, 3.5vw, 18px);
}

/* ---- Mobile vertical rhythm: one even gap between the stacked blocks ---- */
@media (max-width: 767.98px) {
  body[data-template='product_details'] .pp-actions { gap: 12px; }
  body[data-template='product_details'] .pp-applepay-wrap { margin-block-start: 12px; }
  body[data-template='product_details'] .pp-features {
    margin-block-start: 30px;
    padding-block-start: 26px;
  }
  body[data-template='product_details'] .pp-acc { margin-block-start: 30px; }
  body[data-template='product_details'] .col-product-info .border-product {
    margin-block-start: 30px;
  }
  /* Share icons: larger, thumb-friendly spacing */
  body[data-template='product_details'] .product-social { gap: 20px; }
  body[data-template='product_details'] .product-social a i { font-size: 1.35rem; }
  /* Clear break before the reviews / questions / related blocks */
  body[data-template='product_details'] .dn-reviews { margin-block-start: 40px; }
}

/* ---- Add-comment / all-reviews buttons: premium black to match the primary
 *       button system (BUY NOW), orange on hover — not the loud stock orange. ---- */
body[data-template='product_details'] .dn-reviews .dn-review-btn {
  background: #111 !important;
  border: 1px solid #111 !important;
  color: #fff !important;
}
body[data-template='product_details'] .dn-reviews .dn-review-btn:hover {
  background: var(--duneus-accent, #FF5100) !important;
  border-color: var(--duneus-accent, #FF5100) !important;
  color: #000 !important;
}
body[data-template='product_details'] .dn-reviews .dn-review-btn--ghost {
  background: transparent !important;
  color: #111 !important;
}
body[data-template='product_details'] .dn-reviews .dn-review-btn--ghost:hover {
  background: #111 !important;
  color: #fff !important;
}

/* ---- Review summary: a little more rhythm, score centred on its own ---- */
body[data-template='product_details'] .dn-reviews__summary {
  gap: clamp(20px, 5vw, 40px);
  padding: clamp(16px, 4vw, 22px);
  background: #FAFAFA;
  border: 1px solid #F0F0F0;
  border-radius: 14px;
}

/* ---- Modern review cards ---- */
body[data-template='product_details'] .dn-reviews__list .card-review {
  background: #FAFAFA;
  border: 1px solid #F0F0F0;
  border-radius: 16px;
  padding: clamp(15px, 4vw, 18px);
  margin: 0 0 14px;
  box-shadow: none;
  transition: border-color .2s ease, background-color .2s ease;
}
body[data-template='product_details'] .dn-reviews__list .card-review:hover { border-color: #E6E6E6; background: #F7F7F7; }
body[data-template='product_details'] .dn-reviews__list .card-review:last-child { margin-bottom: 0; }
body[data-template='product_details'] .dn-reviews__list .card-review .card-body { padding: 0; }
body[data-template='product_details'] .dn-reviews__list .card-review > .card-body > .d-flex:first-child {
  align-items: center;
  gap: 12px;
}
/* Initial-letter avatar (JS fills the first letter); reply avatar holds the logo */
body[data-template='product_details'] .dn-reviews__list .icon-account_circle {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--duneus-accent, #FF5100);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
}
body[data-template='product_details'] .dn-reviews__list .icon-account_circle::before { content: none !important; }
body[data-template='product_details'] .dn-reviews__list .icon-account_circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-template='product_details'] .dn-reviews__list .card-name {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
body[data-template='product_details'] .dn-reviews__list .card-name-customer {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: #111;
}
body[data-template='product_details'] .dn-reviews__list .card-rate-comment { margin: 0; }
body[data-template='product_details'] .dn-reviews__list .card-rate-comment .icon-star1,
body[data-template='product_details'] .dn-reviews__list .card-rate-comment .icon-half-star { color: var(--duneus-accent, #FF5100); font-size: 0.8rem; }
body[data-template='product_details'] .dn-reviews__list .card-rate-comment .icon-star1.deactive { color: #DADADA; }
body[data-template='product_details'] .dn-reviews__list .card-date {
  margin-inline-start: auto;
  align-self: flex-start;
  font-size: 0.72rem;
  color: #9A9A9A;
  white-space: nowrap;
}
body[data-template='product_details'] .dn-reviews__list .card-paragraph {
  margin-top: 12px;
  color: #444;
  font-size: 0.9rem;
  line-height: 1.7;
}
body[data-template='product_details'] .dn-reviews__list .review-images-container {
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
body[data-template='product_details'] .dn-reviews__list .review-images-container img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
body[data-template='product_details'] .dn-reviews__list .review-images-container img:hover { opacity: 0.85; }
/* Store reply nested under the review */
body[data-template='product_details'] .dn-reviews__list .review-reply-card {
  margin-top: 14px;
  margin-inline-start: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #EEE;
  border-radius: 12px;
}
body[data-template='product_details'] .dn-reviews__list .review-reply-card .icon-account_circle {
  width: 30px;
  height: 30px;
  font-size: 0.78rem;
  background: #111;
}
body[data-template='product_details'] .dn-reviews__list .review-reply-card .card-name-customer { font-size: 0.85rem; }
body[data-template='product_details'] .dn-reviews__list .review-reply-card .card-paragraph { margin-top: 8px; font-size: 0.86rem; }

@media (max-width: 600px) {
  body[data-template='product_details'] .dn-reviews__list .card-date { font-size: 0.68rem; }
  body[data-template='product_details'] .dn-reviews__list .icon-account_circle { width: 38px; height: 38px; font-size: 0.9rem; }
}

/* Reset the stock Soft-Theme indents (margin-left/right:50px) that pushed the
   text, images and reply off-axis — the new card already provides its own
   padding and alignment. */
body[data-template='product_details'] .dn-reviews__list .card-paragraph,
body[data-template='product_details'] .dn-reviews__list .user-review-text,
body[data-template='product_details'] .dn-reviews__list .review-images-container {
  margin-inline: 0 !important;
}
body[data-template='product_details'] .dn-reviews__list .review-reply-card {
  margin-inline-end: 0 !important;
  margin-inline-start: 16px !important;
  background: #fff !important;
}
body[data-template='product_details'] .dn-reviews__list .review-images-container {
  display: flex !important;
}
body[data-template='product_details'] .dn-reviews__list .review-images-container img {
  width: 76px !important;
  height: 76px !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 10px !important;
}

/* ---- Hide the entire Questions block (header + button + items), not just the
   question items, when Questions is turned off in Element visibility. Default
   is now off, so the section is removed unless the merchant re-enables it. ---- */
body.pp-hide-questions .dn-questions { display: none !important; }

/* ---- Remove the short description + "more information" line on the PDP.
   The full description still lives in the Description accordion below. ---- */
body[data-template='product_details'] .text-short-description { display: none !important; }

/* ---- BNPL promo widgets (Tabby / Tamara): two equal columns side by side in
   one row, and scaled down a touch. The two widgets render as siblings inside
   the .pp-bnpl wrapper (from the official payment_widgets include), so a flex
   row with equal children lays them out as two columns; they wrap to stack only
   on very narrow screens. ---- */
body[data-template='product_details'] .pp-bnpl {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-block-start: 14px;
  zoom: 0.82;
}
/* The widgets ship their own <script>/<style> blocks as siblings. NEVER give
   them a display value or their source code renders as visible text — keep them
   hidden and lay out only the real widget elements. */
body[data-template='product_details'] .pp-bnpl script,
body[data-template='product_details'] .pp-bnpl style,
body[data-template='product_details'] .pp-bnpl template,
body[data-template='product_details'] .pp-bnpl noscript { display: none !important; }
/* Two equal-width columns (equal height via align-items:stretch on the parent).
   No `display` is set here, so hidden script/style children stay hidden. */
body[data-template='product_details'] .pp-bnpl > *:not(script):not(style):not(template):not(noscript) {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
  align-self: stretch;
}
@supports not (zoom: 1) {
  body[data-template='product_details'] .pp-bnpl {
    transform: scale(0.82);
    transform-origin: top right;
  }
  [dir='ltr'] body[data-template='product_details'] .pp-bnpl { transform-origin: top left; }
}

/* ---- "You may also like" + bundle section headings render white (Soft Theme
   default) and vanish on the light page. Force them dark on the PDP. ---- */
body[data-template='product_details'] .description-title,
body[data-template='product_details'] .description-title > div,
body[data-template='product_details'] .bundle-offer-title {
  color: #111 !important;
  font-family: var(--duneus-font-en-heading, 'Montserrat'), sans-serif;
  font-weight: 800;
}

/* ---- Transparent product-page header overlays the page, so the first content
   (the breadcrumb) was sliding underneath it with no gap. Clear the header
   height so there is proper space between the header and the breadcrumb. Only
   applies when the PDP header is in transparent mode. ---- */
body[data-template='product_details'].dn-transparent .pp-crumb {
  padding-top: calc(var(--dn-header-h, 112px) + 16px);
}
/* If the breadcrumb is turned off, give the gallery/title the same clearance. */
body[data-template='product_details'].dn-transparent.pp-hide-breadcrumb .col-product-media,
body[data-template='product_details'].dn-transparent.pp-hide-breadcrumb .col-product-info {
  margin-top: calc(var(--dn-header-h, 112px) + 8px);
}

/* ===========================================================================
 * PRODUCT IMAGES · full 2:3 portrait gallery
 * ---------------------------------------------------------------------------
 * Soft Theme's base `.box-1-1` is a 1:1 square (custom.css `:before`), which
 * crops the full-length studio shots to a square on the product page. The
 * product cards already run at 2:3 via --pc-aspect-ratio; this brings the PDP
 * main gallery and each slide to the same 2:3 frame so the photo shows whole,
 * exactly as uploaded. Scoped to the product template so it beats Soft Theme's
 * product-details.css (which loads after this file).
 * ======================================================================== */
body[data-template='product_details'] .box-1-1.product-images-carousel,
body[data-template='product_details'] #product-images-slick .box-1-1,
body[data-template='product_details'] .product-images-empty.box-1-1 {
  aspect-ratio: var(--pc-aspect-ratio, 2 / 3);
  height: auto;
}
/* Kill the square spacer so aspect-ratio alone drives the height. */
body[data-template='product_details'] .box-1-1.product-images-carousel::before,
body[data-template='product_details'] #product-images-slick .box-1-1::before,
body[data-template='product_details'] .product-images-empty.box-1-1::before {
  content: none !important;
  padding-top: 0 !important;
}
/* The photo fills the 2:3 frame; a true 2:3 upload shows complete, no crop. */
body[data-template='product_details'] #product-images-slick .carousel-img,
body[data-template='product_details'] #product-images-slick .image-link > img:first-child {
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--pc-image-fit, contain) !important;
  object-position: center !important;
  display: block !important;
}

/* ===========================================================================
 * BNPL relocated below the share block (v6.9.6)
 * The Tabby / Tamara widgets now render after the accordions + social share,
 * so give them a little breathing room and a hairline separator above. The
 * two-column widget styling (.pp-bnpl) is unchanged and still applies here.
 * ======================================================================== */
body[data-template='product_details'] .pp-bnpl--below {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #ECECEC;
}

/* ===========================================================================
 * BUNDLE "Get the Set" · relocated below accordions + bigger image  (v6.9.18)
 * ---------------------------------------------------------------------------
 * The bundle now renders directly below the accordions. Give the complementary
 * product a large, comfortable image: a single item spans the full width, two
 * or more sit 2-up. Replaces the tiny default .prod-col width.
 * ======================================================================== */
body[data-template='product_details'] .pp-bundle { margin-top: 18px; }
/* The container is a Bootstrap `.row`, which carries negative side margins
   (margin: 0 -15px). Those pulled the card off to the left and out of
   alignment. Reset them and lay the bundle out as a centred single column so
   the image is big, calm and perfectly aligned with the rest of the page. */
body[data-template='product_details'] .pp-bundle .bundle-offer-details-products {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px;
  margin: 16px auto 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 360px;
}
body[data-template='product_details'] .pp-bundle .bundle-offer-details-products .prod-col {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Card image: the store's 2:3 frame, filled and centred — no left shift/crop. */
body[data-template='product_details'] .pp-bundle .product-item .d-card-media { margin: 0 !important; }
body[data-template='product_details'] .pp-bundle .product-item .box-1-1 {
  aspect-ratio: var(--pc-aspect-ratio, 2 / 3) !important;
  width: 100% !important;
  margin: 0 !important;
}
body[data-template='product_details'] .pp-bundle .product-item .box-1-1 img,
body[data-template='product_details'] .pp-bundle .product-item .dn-card-slide {
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--pc-image-fit, cover) !important;
  object-position: center !important;
}