/* fix-pdp.css — launch-prep override layer (loads after motion-wc, wins cascade) */

/* ---- PDP main image ~20% larger ---- */
/* Widen the gallery grid column (was ~1.05fr : .95fr -> gallery ~694px)
   and grow the fixed main-image height (was 560px) by ~20% to ~672px.
   Summary column min lowered so it still fits the row without overflow. */
.jd-pdp .product,
.jd-pdp .product_layout_wrapper {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr);
}

.jd-gallery .jd-gallery-main-img,
.jd-pdp .jd-gallery-main-img {
  height: 672px !important;
  max-height: 672px !important;
}

@media (max-width: 800px) {
  /* Keep mobile sensible: it's already full-width, just a modest bump (390 -> ~468). */
  .jd-pdp .product,
  .jd-pdp .product_layout_wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  .jd-pdp .jd-gallery-main-img {
    height: 468px !important;
    max-height: 468px !important;
  }
}

/* Sale-only product view (?on_sale=1): tells the shopper why only a couple of
   options are showing, and links back to the full product. */
.jd-sale-only-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e5e5e5);
  border-left: 3px solid var(--accent, #c0392b);
  border-radius: 8px;
  background: var(--surface-2, #faf7f5);
  font-size: 14px;
  line-height: 1.45;
}

.jd-sale-only-note strong {
  font-weight: 600;
}

.jd-sale-only-note a {
  text-decoration: underline;
}

/* Sale tags on PDP swatches. The header price stays at the normal figure on a
   partially marked-down style, so the discount is flagged on the colour (and
   then the size) the shopper is choosing. */
.jdpm-swatch.jd-swatch-onsale {
  position: relative;
  overflow: visible;
}

.jd-swatch-sale-tag {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  padding: 0 4px;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

/* Size swatches are wide boxes in a row that clips anything above it, so their
   tag sits INSIDE the top-right corner rather than overhanging it. */
.jdpm-swatches-size .jd-swatch-sale-tag {
  top: 2px;
  right: 2px;
  padding: 0 3px;
  font-size: 7px;
}