.pdp {
  max-width: 1440px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-12);
  align-items: start;
  padding-top: var(--space-8);
}

@media (max-width: 900px) {
  .pdp {
    grid-template-columns: 1fr;
  }
}

/* Grid items default to min-width: auto, same trap as flex items — meaning
   even a single too-wide descendant *anywhere* in this column (any of the
   delivery-check row, an unbreakable string, an option row that hasn't
   wrapped yet at first paint) can force the whole column wider than the
   viewport, not just that one descendant. Fixing individual rows inside
   (see .pdp__delivery-check-row below) helps but isn't sufficient on its
   own — this is the one rule that actually guarantees the column can't
   push past its 1fr track. */
.pdp__gallery,
.pdp__info {
  min-width: 0;
}

.pdp__gallery {
  display: flex;
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .pdp__gallery {
    flex-direction: column-reverse;
  }
}

.pdp__main-image {
  flex: 1;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-sand);
}

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

.pdp__main-image--placeholder {
  background: var(--color-sand);
}

/* Vertical thumbnail rail beside the main image (obeetee.in-style). */
.pdp__thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .pdp__thumbs {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--space-1);
  }

  .pdp__thumb {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
  }
}

.pdp__thumb {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: var(--border-default);
  padding: 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.pdp__thumb:hover {
  opacity: 0.9;
}

.pdp__thumb--active {
  opacity: 1;
  border-color: var(--color-rust);
}

.pdp__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.pdp__wishlist {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--border-default);
  color: var(--color-ink);
  margin-top: var(--space-1);
}

.pdp__wishlist:hover {
  border-color: var(--color-rust);
}

.pdp__wishlist--active {
  color: var(--color-rust);
  border-color: var(--color-rust);
}

.pdp__wishlist--active path {
  fill: var(--color-rust);
}

/* Slightly larger type on this page only (product title, copy, price,
   section text, trust badges) — deliberately does NOT apply to
   .pdp__option, which stays at the sitewide small size. */
.pdp__info h1 {
  font-size: 2.75rem;
}

.pdp__info > p.text-muted {
  font-size: 1.125rem;
}

.pdp__section h3 {
  font-size: 1.5rem;
}

.pdp__section > p.text-muted {
  font-size: 1.0625rem;
}

/* Multi-paragraph product description — reset.css zeroes <p> margins
   globally, so consecutive paragraphs here would otherwise sit flush
   against each other with no visible break between them. */
.pdp__description p.text-muted + p.text-muted {
  margin-top: var(--space-4);
}

/* Care instructions are set client-side via textContent (see pdp.js) since
   they depend on the Material/Construction the shopper picks, so real <p>
   tags aren't practical here — pre-line preserves the blank lines in the
   stored care text as visible paragraph breaks instead of one run-on block. */
#pdp-care-text {
  white-space: pre-line;
}

.pdp__trust p {
  font-size: 1rem;
}

.pdp__trust-links a {
  font-size: 1rem;
}

.pdp__price {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  margin: var(--space-4) 0 var(--space-6);
}

.pdp__actions {
  margin: var(--space-6) 0;
}

.pdp__actions #pdp-qty {
  margin-bottom: var(--space-3);
}

.pdp__actions-row {
  display: flex;
  gap: var(--space-3);
}

.pdp__actions-row-btn {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.pdp__option-group {
  margin-bottom: var(--space-4);
}

.pdp__option-label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
  display: block;
}

.pdp__option-label .text-muted {
  font-weight: 400;
}

.pdp__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pdp__option {
  padding: var(--space-2) var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.875rem; /* pinned — doesn't grow with the global type scale */
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pdp__option:hover {
  border-color: var(--color-rust);
}

.pdp__option--selected {
  background: var(--color-rust);
  border-color: var(--color-rust);
  color: var(--color-ivory);
}

.pdp__trust {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-sand);
}

.pdp__trust p {
  margin: 0 0 var(--space-2);
}

.pdp__trust p:last-of-type {
  margin-bottom: var(--space-3);
}

.pdp__trust-links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pdp__trust-links a {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-rust);
}

.pdp__delivery-check {
  margin-top: var(--space-4);
}

.pdp__delivery-check-row {
  display: flex;
  gap: var(--space-2);
}

.pdp__delivery-check-row .field__input {
  flex: 1;
  /* Same fix as the checkout coupon row: a flex item's default min-width
     is its content's natural width, not 0, so without this the pincode
     input refused to shrink on narrow screens (worse in Chrome, which
     gives <input> a wider default intrinsic min-width than Safari does)
     — pushing this row, and with it the whole .pdp__info column, wider
     than the viewport. Because reset.css clips (rather than scrolls)
     horizontal overflow, that showed up as unrelated content further up
     the page — the Size/Color option rows — getting cut off at the
     right edge instead of wrapping.  */
  min-width: 0;
}

.pdp__delivery-check-row .btn {
  flex-shrink: 0;
}

.pdp__delivery-check #pdp-pincode-result {
  margin-top: var(--space-2);
}

.pdp__section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-default);
}

.pdp__section h3 {
  margin-bottom: var(--space-2);
}

.pdp__review-form {
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-4);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-sand);
}

/* Star-rating input: radios are DOM-ordered 5→1 and laid out reversed, so
   the CSS-only ~ sibling selector below can light up "this star and every
   star before it" on hover/checked without any JS. */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: var(--space-1);
}

.star-rating input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.star-rating label {
  font-size: 2rem;
  line-height: 1;
  color: var(--color-sand-dark);
  cursor: pointer;
  transition: color 0.12s ease, transform 0.12s ease;
}

.star-rating label:hover {
  transform: scale(1.08);
}

.star-rating input:checked ~ label,
.star-rating:hover label:hover,
.star-rating:hover label:hover ~ label {
  color: var(--color-brass);
}

.star-rating input:focus-visible + label {
  outline: 2px solid var(--color-rust);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.pdp__review-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pdp__review {
  padding-bottom: var(--space-4);
  border-bottom: var(--border-default);
}

.pdp__review:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pdp__review-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.pdp__review-stars {
  color: var(--color-brass);
  letter-spacing: 0.05em;
}

.pdp__review-stars--empty {
  color: var(--color-sand-dark);
}

.pdp__review-title {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.pdp__review-photos {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.pdp__review-photos img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

@media (max-width: 480px) {
  .pdp__info h1 {
    font-size: var(--text-h1);
  }

  .pdp__price {
    font-size: var(--text-h2);
  }

  .pdp__section h3 {
    font-size: var(--text-h3);
  }

  .pdp__actions-row {
    flex-direction: column;
  }

  .pdp__actions-row-btn {
    flex: 1 1 100%;
  }
}