@layer pages {
  /* ================================================================ Hero: gallery + buy column
     Goodyear product page: gallery on white at the left, the buying decision at the right. */
  .pdp {
    padding-top: var(--space-l);
  }

  .pdp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: var(--space-xl) clamp(var(--space-xl), 5vw, var(--space-3xl));
    align-items: start;
    margin-top: var(--space-l);
  }

  /* ---------------------------------------------------------------- Gallery */
  .pdp-gallery {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-m));
    display: grid;
    gap: var(--space-s);
    min-width: 0;
  }

  .pdp-gallery__stage {
    position: relative;
  }

  /* The frame's ring sits above the photos so edge-to-edge close-ups keep the same outline. */
  .pdp-gallery__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-l);
    box-shadow: inset 0 0 0 2px var(--line);
    pointer-events: none;
  }

  /* Previous / next photo: solid navy buttons with the site's arrow, blue on hover like the CTAs. */
  .pdp-gallery__arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgb(6 18 46 / 0.55);
    translate: 0 -50%;
    transition:
      background-color var(--dur-fast) ease,
      scale var(--dur-press) var(--ease-out);
  }

  .pdp-gallery__arrow--prev {
    left: var(--space-m);
  }

  .pdp-gallery__arrow--next {
    right: var(--space-m);
  }

  .pdp-gallery__arrow .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp-gallery__arrow:hover {
      background: var(--blue);
    }
  }

  .pdp-gallery__arrow:active {
    scale: 0.94;
  }

  .pdp-gallery__arrow:focus-visible {
    outline-offset: 3px;
  }

  .pdp-gallery__count {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: var(--space-m);
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.92);
    box-shadow: 0 0 0 1px var(--line-2);
    color: var(--navy);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.25rem;
    translate: -50% 0;
    pointer-events: none;
  }

  .pdp-gallery__track {
    position: relative;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--r-l);
    background: var(--surface);
  }

  .pdp-gallery__track::-webkit-scrollbar {
    display: none;
  }

  .pdp-gallery__slide {
    flex: 0 0 100%;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 7%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .pdp-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Close-up cut off by its photo frame: fill the slide so the cut edges meet the frame edges. */
  .pdp-gallery__slide--fill {
    padding: 0;
  }

  .pdp-gallery__slide--fill img {
    object-fit: cover;
    object-position: 100% 100%;
  }

  .pdp-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .pdp-gallery__thumb {
    width: 5rem;
    aspect-ratio: 1;
    padding: 0.375rem;
    border-radius: var(--r-m);
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--line);
    transition:
      box-shadow var(--dur-fast) ease,
      transform var(--dur-press) var(--ease-out);
  }

  .pdp-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .pdp-gallery__thumb--fill {
    padding: 2px;
  }

  .pdp-gallery__thumb--fill img {
    border-radius: calc(var(--r-m) - 2px);
    object-fit: cover;
    object-position: 100% 100%;
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp-gallery__thumb:hover {
      box-shadow: inset 0 0 0 2px var(--line-3);
    }
  }

  .pdp-gallery__thumb:active {
    transform: scale(0.97);
  }

  .pdp-gallery__thumb[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--navy);
  }

  /* ---------------------------------------------------------------- Buy column */
  .pdp-buy {
    min-width: 0;
    max-width: 38rem;
  }

  .pdp-buy__title {
    margin-top: 0.25rem;
    font-size: clamp(2rem, 1.5rem + 1.2vw, 2.625rem);
    line-height: 1.1;
  }

  .pdp-buy__chips {
    margin-top: var(--space-s);
  }

  .pdp-offer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-m);
    margin-top: var(--space-m);
  }

  .pdp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.5rem;
  }

  .pdp-price__value {
    font-size: clamp(1.75rem, 1.45rem + 0.7vw, 2.25rem);
    line-height: 1.1;
  }

  .pdp-price__each {
    color: var(--ink-2);
    font-weight: 600;
  }

  .pdp-offer .stock {
    font-size: var(--fs-body);
  }

  /* Fitment */
  .pdp-fit {
    margin-top: var(--space-m);
    padding: var(--space-s) var(--space-m) var(--space-m);
    border-radius: var(--r-m);
    background: var(--surface-2);
  }

  .pdp-fit__title {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--fs-body-l);
    line-height: 1.3;
  }

  .pdp-fit__title .icon {
    color: var(--blue);
  }

  .pdp-fit__text {
    margin-top: 0.25rem;
    color: var(--ink-2);
  }

  .pdp-fit__choose {
    margin-top: var(--space-s);
  }

  .pdp-fit__status {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: var(--space-2xs);
    font-weight: 700;
  }

  .pdp-fit__status .icon {
    margin-top: 0.0625rem;
  }

  .pdp-fit__status.fit-line {
    align-items: flex-start;
    font-size: var(--fs-body);
    line-height: 1.4;
  }

  .pdp-fit__status--no .icon {
    color: var(--ink-3);
  }

  .pdp-fit__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
  }

  .pdp-fit__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-m);
    margin-top: var(--space-2xs);
  }

  .pdp-fit__links .link {
    min-height: 2.75rem;
  }

  /* Size selector (createSizeSelector) and its no-JS fallback.

     The fallback lists every size of the tyre; the selector that replaces it shows one rim's
     worth. On a tyre with a dozen sizes that is a difference of a thousand pixels, and until
     now the buy buttons and everything under them leapt up the page the moment the sizes
     arrived. The fallback is capped to about where the selector settles, and the block holds
     that height while it waits, so nothing moves. The list stays in the HTML for a crawler to
     read, and <noscript> in product.html lifts the cap for a visitor with no scripts. */
  [data-size-root] {
    min-height: 14rem;
  }

  .pdp-sizes {
    margin-top: var(--space-l);
    max-height: 14rem;
    overflow: hidden;
  }

  .pdp-sizes__list {
    display: grid;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pdp-sizes__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem var(--space-s);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--r-m);
    box-shadow: inset 0 0 0 2px var(--line-2);
  }

  .pdp-sizes__label {
    flex: 1;
    font-weight: 700;
    white-space: nowrap;
  }

  .pdp-sizes__pack {
    color: var(--ink-2);
    font-weight: 600;
  }

  /* The quantity stepper and total are written here by the script; holding their height stops
     the two buy buttons stepping down the page when they appear. */
  .pdp-summary {
    min-height: 5.25rem;
  }

  .pdp-summary .picker__summary {
    margin: var(--space-l) 0 0;
  }

  .pdp-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
    margin-top: var(--space-m);
  }

  .pdp-actions .btn {
    padding-inline: 1rem;
  }

  .pdp-actions__contact {
    grid-column: 1 / -1;
  }

  /* Buy dock: phones only, shown by product.js while the main buttons are off screen */
  .pdp-dock {
    display: none;
  }

  @media (max-width: 48rem) {
    .pdp-dock:not([hidden]) {
      position: fixed;
      z-index: var(--z-sticky);
      left: 0;
      right: 0;
      bottom: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-2xs) var(--gutter) calc(var(--space-2xs) + env(safe-area-inset-bottom));
      background: var(--surface);
      box-shadow: 0 -1px 0 var(--line-2), 0 -8px 20px -12px rgb(11 29 69 / 0.28);
    }

    .pdp-dock__info {
      display: grid;
      min-width: 0;
      line-height: 1.2;
    }

    .pdp-dock__size {
      overflow: hidden;
      color: var(--ink-2);
      font-size: var(--fs-small);
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .pdp-dock__price {
      font-size: 1.125rem;
    }

    .pdp-dock .btn {
      min-height: 3rem;
    }

    .pdp-dock__add {
      width: 3rem;
      padding: 0;
    }

    .pdp-dock__buy {
      padding-inline: 1.5rem;
    }

    .pdp-dock__contact {
      grid-column: 2 / -1;
      padding-inline: 1rem;
    }

    /* Keep the page's end and the toasts clear of the dock */
    .page-product:has(.pdp-dock:not([hidden])) .site-footer {
      padding-bottom: 4.5rem;
    }

    .page-product:has(.pdp-dock:not([hidden])) .toasts {
      bottom: calc(4.75rem + env(safe-area-inset-bottom));
    }
  }

  /* ================================================================ Details
     Description and features read down the left column; the size specifications stay beside
     them (sticky). A short description never leaves a hole under it (client feedback): the
     specs span both rows and the second row is flexible, so they never stretch the first. */
  .pdp-details {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "about specs"
      "features specs";
    gap: var(--space-2xl) clamp(var(--space-xl), 5vw, var(--space-3xl));
    align-items: start;
    margin-top: var(--section-gap);
  }

  .pdp-about {
    grid-area: about;
  }

  /* No features: description, then the specs as one wide band with the groups side by side. */
  .pdp-details--stacked {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "about"
      "specs";
    row-gap: var(--space-xl);
  }

  .pdp-details--stacked .pdp-specs {
    position: static;
  }

  @media (min-width: 60.0625rem) {
    .pdp-details--stacked .pdp-specs__groups {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      gap: var(--space-l) var(--space-xl);
    }

    .pdp-details--stacked .pdp-specs__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pdp-details--stacked .pdp-specs__list--wide {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pdp-details--stacked .pdp-specs__list > .pdp-specs__wide {
      grid-column: auto;
    }
  }

  .pdp-section-title {
    margin-bottom: var(--space-m);
  }

  .pdp-prose {
    max-width: var(--text-max);
    color: var(--ink-2);
    font-size: var(--fs-body-l);
  }

  .pdp-prose p + p {
    margin-top: 1em;
  }

  /* Size specifications: compact grouped definition grid, no row rules */
  .pdp-specs {
    grid-area: specs;
    position: sticky;
    top: calc(var(--nav-h) + var(--space-m));
    padding: var(--space-l);
    border-radius: var(--r-l);
    background: var(--surface-2);
  }

  .pdp-specs .pdp-section-title {
    margin-bottom: var(--space-2xs);
  }

  .pdp-specs__size {
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.3;
  }

  .pdp-specs__groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l) var(--space-m);
    margin-top: var(--space-m);
  }

  /* XL / HL / FP flags run under both groups */
  .pdp-specs__group:nth-child(3) {
    grid-column: 1 / -1;
  }

  .pdp-specs__heading {
    font-size: var(--fs-xs);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.25rem;
    text-transform: uppercase;
    color: var(--ink-2);
  }

  .pdp-specs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-s) var(--space-s);
    margin-top: var(--space-2xs);
    padding-top: var(--space-s);
    border-top: 2px solid var(--line-2);
  }

  .pdp-specs__list--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .pdp-specs__list > .pdp-specs__wide {
    grid-column: 1 / -1;
  }

  .pdp-specs__list > div {
    display: grid;
    align-content: start;
    gap: 0.125rem;
  }

  .pdp-specs__list dt {
    color: var(--ink-2);
    font-size: var(--fs-small);
  }

  .pdp-specs__list dd {
    margin: 0;
    font-size: var(--fs-body-l);
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
  }

  .pdp-specs__list dd span {
    color: var(--ink-2);
    font-size: var(--fs-body);
    font-weight: 400;
  }

  /* Codes in one column, descriptions aligned beside them however wide the code (EV-Ready). */
  .pdp-specs__flags {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-xs);
    margin: var(--space-2xs) 0 0;
    padding: var(--space-s) 0 0;
    list-style: none;
    border-top: 2px solid var(--line-2);
  }

  .pdp-specs__flags li {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
  }

  .pdp-specs__flags .chip {
    justify-self: start;
    background: var(--navy);
    color: var(--ink-on-dark);
    font-weight: 700;
  }

  /* Features: a typographic list between hairlines, under the description */
  .pdp-features {
    grid-area: features;
  }

  .pdp-features__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pdp-feature {
    padding-block: var(--space-m) var(--space-l);
    border-top: 2px solid var(--line);
  }

  .pdp-feature__title {
    font-size: var(--fs-h4);
    line-height: 1.25;
  }

  .pdp-feature__text {
    max-width: 60ch;
    margin-top: var(--space-2xs);
    color: var(--ink-2);
    font-size: var(--fs-body-l);
  }

  /* ================================================================ Related */
  .pdp-related {
    padding-bottom: 0;
  }

  .pdp-related__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-s) var(--space-l);
  }

  .pdp-related__grid {
    margin-top: var(--space-l);
  }

  /* ================================================================ Responsive */
  @media (max-width: 60rem) {
    .pdp-hero,
    .pdp-details {
      grid-template-columns: minmax(0, 1fr);
    }

    .pdp-details {
      grid-template-rows: none;
      grid-template-areas:
        "about"
        "specs"
        "features";
    }

    .pdp-gallery,
    .pdp-specs {
      position: static;
    }

    .pdp-buy {
      max-width: none;
    }
  }

  @media (max-width: 48rem) {
    .pdp-hero {
      gap: var(--space-l);
    }

    .pdp-gallery__thumb {
      width: 3.75rem;
      border-radius: var(--r-s);
    }

    .pdp-gallery__arrow {
      width: 2.75rem;
      height: 2.75rem;
    }

    .pdp-gallery__arrow--prev {
      left: var(--space-xs);
    }

    .pdp-gallery__arrow--next {
      right: var(--space-xs);
    }

    .pdp-gallery__arrow .icon {
      width: 1.25rem;
      height: 1.25rem;
    }

    .pdp-gallery__count {
      bottom: var(--space-xs);
    }

    .pdp-gallery__thumb--fill img {
      border-radius: calc(var(--r-s) - 2px);
    }

    .pdp-specs {
      padding: var(--space-m);
    }
  }

  @media (max-width: 30rem) {
    .pdp-actions,
    .pdp-specs__groups {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}