/* Product page, proposal B "La Firma". Rackets stand as big cut-outs on the black page and the
   pro signs them on load; apparel sits on paper plates. One ink break: the protections. */

/* ---------- Top: gallery + buy form ---------- */

.pdp {
    padding: clamp(8px, 2vw, 24px) 0 var(--sec);
}

.pdp__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 6vw, 112px);
}

/* Thumbnails in a column on the left of the photo; under it on phones. */
.gal {
    position: sticky;
    top: calc(var(--hdr-top) + 16px);
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "thumbs stage";
    gap: 16px;
    align-items: start;
}

.gal:not(:has(.gal__thumbs)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage";
}

.gal__stage {
    grid-area: stage;
    position: relative;
    aspect-ratio: 1;
}

.gal__stage--paper {
    background: var(--paper);
    --ink: #0c0c0c;
    --accent: var(--orange-deep);
    --ink-2: #2a2a2a;
    --ink-line: rgba(12, 12, 12, .16);
    --on-ink: #f2f0ec;
    --holo: #0c0c0c;
    color: var(--ink);
}

.gal__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), transform .8s var(--ease), visibility .45s;
}

.gal__img.is-on {
    opacity: 1;
    visibility: visible;
}

.gal__stage--paper .gal__img {
    object-fit: contain;
}

/* Cut-out rackets: no plate, straight on the black page, tilted like the home hero. */
.gal__img.is-cutout {
    object-fit: contain;
    padding: 2% 6%;
    transform: rotate(-18deg) scale(.94);
    filter: drop-shadow(0 40px 36px rgba(0, 0, 0, .45));
}

.gal__img.is-cutout.is-on {
    transform: rotate(-13deg);
}

.gal__stage:hover .gal__img.is-cutout.is-on {
    transform: rotate(-17deg) scale(1.02);
}

/* Entrance only on first paint: switching views must feel instant, not replay the flight. */
.js .gal.draw:not(.is-switched) .gal__img.is-cutout.is-on {
    animation: gal-in 1.2s var(--ease) backwards;
}

.gal.is-switched .gal__img {
    transition: opacity .25s var(--ease), transform .4s var(--ease);
}

@keyframes gal-in {
    from {
        transform: rotate(-4deg) translateY(8%) scale(.92);
        opacity: 0;
    }
}

/* The signature moment: the pro's name writes itself across the carbon, left to right. */
.gal__sign {
    position: absolute;
    left: 2%;
    bottom: 16%;
    z-index: 2;
    /* max-content: a long name must not be squeezed by the stage edge, or the reveal clip cuts it. */
    width: max-content;
    font-size: clamp(2rem, 3.6vw, 3.4rem);
    white-space: nowrap;
    color: var(--paper);
    transform: rotate(-11deg);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
    pointer-events: none;
    transition: opacity .3s;
}

.js .gal.draw .gal__sign {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.5s var(--ease) .7s, opacity .3s;
}

.js .gal.draw.is-in .gal__sign,
.js .gal.draw.is-static .gal__sign {
    /* Negative insets leave room for the marker strokes that overhang the text box. */
    clip-path: inset(-30% -8% -30% -4%);
}

/* On-court photos carry their own story: the signature only sits on the cut-outs. */
.gal__stage:has(.gal__img.is-on:not(.is-cutout)) .gal__sign {
    opacity: 0;
}

.gal__plate {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.gal__stage--paper .gal__plate {
    top: 16px;
    left: 16px;
}

.gal__thumbs {
    grid-area: thumbs;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - var(--hdr) - 48px);
    overflow-y: auto;
    scrollbar-width: none;
}

.gal__thumbs::-webkit-scrollbar {
    display: none;
}

.gal__thumb {
    flex: none;
    position: relative;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 0;
    background: var(--plate);
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s;
}

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

.gal__thumb.is-cutout img {
    object-fit: contain;
    padding: 6px;
    transform: rotate(-14deg);
}

.gal__thumb:hover {
    opacity: .85;
}

/* Selected view: full opacity and an off-white frame that reads on the black page. */
.gal__thumb[aria-selected="true"] {
    opacity: 1;
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* Buy form */

.buy {
    display: grid;
    gap: 28px;
    padding-top: clamp(0px, 2vw, 24px);
}

.buy__head {
    display: grid;
    gap: 16px;
}

.buy__title {
    font-size: clamp(2.8rem, 5.2vw, 4.8rem);
    line-height: .86;
    letter-spacing: 0;
    overflow-wrap: break-word;
}

.buy__sub {
    font-size: 1.125rem;
    font-weight: 600;
}

.buy__stars {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
}

.buy__stars:hover span:last-child {
    text-decoration: underline;
}

.buy__lead {
    font-size: 1.125rem;
    font-weight: 500;
    max-width: 46ch;
}

.buy__proof {
    margin-top: -14px;
    font-size: .9375rem;
}

.price {
    display: grid;
    gap: 10px;
    padding-top: 24px;
    border-top: 2px solid var(--ink);
}

.price__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.price__main b {
    font-size: clamp(2.8rem, 4.4vw, 3.8rem);
    line-height: 1;
}

.price__main s {
    font-size: 1.25rem;
    font-weight: 600;
}

.price__klarna {
    font-weight: 500;
}

.price__member {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 6px;
}

.price__member b {
    font-size: 1.5rem;
}

.price__member a {
    font-weight: 700;
}

.price__perk {
    font-size: .875rem;
    max-width: 52ch;
}

/* Options */

.opt {
    display: grid;
    gap: 14px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.opt legend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    margin-bottom: 14px;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
}

.opt legend b {
    font-weight: 500;
}

.opt legend a,
.opt legend > span {
    margin-left: auto;
    font-size: .875rem;
    font-weight: 600;
}

.opt__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opt__row--stack {
    display: grid;
}

.opt__err {
    display: none;
    font-weight: 700;
}

.opt.is-error .opt__err {
    display: block;
}

.opt.is-error .chip span {
    box-shadow: inset 0 0 0 3px var(--ink);
}

/* Chip: a radio drawn as an outline pill, filled ink when chosen. */
.chip {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.chip input,
.addon input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.chip span {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px var(--ink);
    font-weight: 700;
    transition: background-color .2s, color .2s;
}

.chip small {
    font-size: .8125rem;
    font-weight: 500;
}

.chip:hover span {
    background: rgba(242, 240, 236, .08);
}

.chip input:checked + span {
    background: var(--ink);
    color: var(--on-ink);
}

.chip input:focus-visible + span,
.addon input:focus-visible ~ .addon__dot {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.chip--sm span {
    min-height: 40px;
    padding: 0 14px;
    font-size: .875rem;
}

.chip--size span {
    justify-content: center;
    min-width: 56px;
    padding: 0 14px;
}

.chip--wide span {
    width: 100%;
    min-height: 56px;
    flex-wrap: wrap;
}

.chip--wide small {
    margin-left: auto;
}

.cswatch {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--paper);
    overflow: hidden;
    transition: box-shadow .2s;
    --ink: #0c0c0c;
    --accent: var(--orange-deep);
    --ink-2: #2a2a2a;
    --ink-line: rgba(12, 12, 12, .16);
    --on-ink: #f2f0ec;
    --holo: #0c0c0c;
    color: var(--ink);
}

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

.cswatch:hover {
    box-shadow: inset 0 0 0 2px var(--ink-line);
}

.cswatch.is-on {
    box-shadow: 0 0 0 3px var(--holo), 0 0 0 5px var(--ink);
}

/* Add-ons: protection plans and personalisation as rows ruled in ink, a ring for the choice. */
.addons {
    border-top: 2px solid var(--ink);
}

.addon {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 2px solid var(--ink-line);
    cursor: pointer;
}

.addon__dot {
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    transition: background-color .2s, box-shadow .2s;
}

.addon input:checked ~ .addon__dot {
    background: var(--ink);
    box-shadow: inset 0 0 0 4px var(--holo);
}

.addon__txt {
    font-size: .9375rem;
    line-height: 1.4;
}

.addon__txt b {
    display: block;
    font-size: 1.0625rem;
    font-weight: 800;
}

.addon__price {
    font-size: 1.125rem;
    white-space: nowrap;
}

.addon:hover .addon__txt b {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.pill-select {
    display: block;
}

.pill-select select,
.pill-select .dd {
    appearance: none;
    width: 100%;
    height: 52px;
    padding: 0 48px 0 22px;
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px var(--ink);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f0ec' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center / 16px;
    font-weight: 600;
    cursor: pointer;
}

.pill-select option {
    background: var(--paper);
    --ink: #0c0c0c;
    --accent: var(--orange-deep);
    --ink-2: #2a2a2a;
    --ink-line: rgba(12, 12, 12, .16);
    --on-ink: #f2f0ec;
    --holo: #0c0c0c;
    color: var(--ink);
}

.buy__cta {
    display: flex;
    gap: 10px;
}

.buy__cta .btn {
    flex: 1;
    height: 64px;
    font-size: 1.125rem;
}

.btn.is-done {
    background: var(--ink-2);
}

.buy__fav {
    display: grid;
    place-items: center;
    flex: none;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--ink);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.buy__fav:hover {
    background: rgba(242, 240, 236, .08);
}

.buy__fav[aria-pressed="true"] {
    background: var(--ink);
    color: var(--holo);
}

.buy__fav[aria-pressed="true"] .ico {
    fill: currentColor;
}

.buy__wa {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    font-size: 1rem;
    text-decoration: none;
}

.buy__wa .ico {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--holo);
}

.buy__wa:hover span {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.buy__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    font-weight: 600;
}

.buy__trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Sticky buy bar */

.sticky-buy {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    background: var(--holo);
    box-shadow: 0 -2px 0 var(--ink);
}

.sticky-buy__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 80px;
}

.sticky-buy img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    transform: rotate(-14deg);
}

.sticky-buy__info {
    display: grid;
    flex: 1;
    min-width: 0;
}

.sticky-buy__info b,
.sticky-buy__info span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sticky-buy__info b {
    font-weight: 800;
}

.sticky-buy__info span {
    font-size: .8125rem;
}

.sticky-buy__price {
    font-size: 1.5rem;
}

body:has(.sticky-buy:not([hidden])) .wa {
    bottom: 96px;
}

/* ---------- The pro who plays it ---------- */

.ppro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(40px, 6vw, 112px);
}

.ppro__copy {
    display: grid;
    gap: 22px;
    justify-items: start;
}

.ppro__copy h2 {
    margin-bottom: 10px;
}

.ppro__copy .mark > .br {
    stroke-width: 8;
}

.ppro__copy p:not(.lead) {
    font-size: 1.0625rem;
    max-width: 54ch;
}

.ppro__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    margin: 0;
}

.ppro__stats div {
    display: grid;
    gap: 6px;
    padding-top: 14px;
    border-top: 2px solid var(--ink);
}

.ppro__stats dt {
    font-size: .875rem;
    font-weight: 600;
}

.ppro__stats dd {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: .9;
}

.ppro__src {
    margin-top: 24px;
    font-size: .8125rem;
}

/* ---------- Description ---------- */

.desc {
    padding-top: 0;
}

.desc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 112px);
}

.desc__img {
    margin: 0;
}

.desc__img img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.desc__img.is-paper {
    background: var(--paper);
    --ink: #0c0c0c;
    --accent: var(--orange-deep);
    --ink-2: #2a2a2a;
    --ink-line: rgba(12, 12, 12, .16);
    --on-ink: #f2f0ec;
    --holo: #0c0c0c;
    color: var(--ink);
}

.desc__img.is-paper img {
    object-fit: contain;
}

.desc__img.is-cutout img {
    object-fit: contain;
    padding: 4% 10%;
    filter: drop-shadow(0 36px 32px rgba(0, 0, 0, .4));
}

.desc__text {
    display: grid;
    gap: 18px;
}

.desc__text h2 {
    margin-bottom: 14px;
}

.desc__text p {
    font-size: 1.125rem;
    max-width: 54ch;
}

/* ---------- Specs: grouped, big readable values ---------- */

.specs__groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 64px);
}

.specs__group h3 {
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ink);
}

.specs__group dl {
    display: grid;
    gap: 26px;
    margin: 26px 0 0;
}

.specs__group dt {
    font-size: .875rem;
    font-weight: 600;
}

.specs__group dd {
    margin: 4px 0 0;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 800;
    font-family: var(--fd);
    font-variation-settings: var(--fd-var);
    line-height: .92;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.specs__notes {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
    font-weight: 500;
}

.specs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px clamp(24px, 4vw, 64px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.specs__list li,
.care li,
.plus__list li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
}

.specs__list li {
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
}

.specs__list .br,
.care .br,
.plus__list .br {
    width: 28px;
    height: 24px;
    stroke-width: 6;
}

/* Care: a paper reading panel, dark ticks. */
.care {
    margin-top: clamp(56px, 8vw, 112px);
    padding: clamp(28px, 4vw, 56px);
    background: var(--paper);
    --ink: #0c0c0c;
    --accent: var(--orange-deep);
    --ink-2: #2a2a2a;
    --ink-line: rgba(12, 12, 12, .16);
    --on-ink: #f2f0ec;
    --holo: #0c0c0c;
    color: var(--ink);
}

.care h3 {
    margin-bottom: 28px;
}

.care ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px clamp(24px, 4vw, 64px);
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.care .br {
    color: var(--holo);
}

/* ---------- Reviews ---------- */

.reviews__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 6vw, 112px);
    align-items: start;
}

.reviews__score {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.reviews__big {
    margin-top: 18px;
    font-size: clamp(5rem, 11vw, 9rem);
    line-height: .8;
}

.reviews__score .stars {
    font-size: 1.5rem;
}

.reviews__dist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 12px 0 0;
    font-size: .9375rem;
}

.reviews__dist div {
    display: flex;
    gap: 6px;
}

.reviews__dist dd {
    margin: 0;
}

.reviews__note {
    font-size: .875rem;
}

.reviews__list {
    display: grid;
    gap: clamp(36px, 4vw, 56px);
    justify-items: start;
}

.review {
    display: grid;
    gap: 14px;
}

.review p {
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    max-width: 36ch;
}

.review footer {
    font-size: .9375rem;
}

.review__photos {
    display: flex;
    gap: 8px;
}

.review__photos .photos__item {
    width: 88px;
}

.photos {
    margin-bottom: clamp(56px, 8vw, 112px);
}

.photos__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.photos__head h3 span {
    font-family: var(--f);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.photos__nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.photos__btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--ink);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.photos__btn:hover {
    background: var(--ink);
    color: var(--on-ink);
}

.photos__btn--prev .ico {
    transform: scaleX(-1);
}

.photos__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(160px, 18vw, 240px);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.photos__rail::-webkit-scrollbar {
    display: none;
}

.photos__rail li {
    scroll-snap-align: start;
}

.photos__item {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: var(--paper);
    overflow: hidden;
    --ink: #0c0c0c;
    --accent: var(--orange-deep);
    --ink-2: #2a2a2a;
    --ink-line: rgba(12, 12, 12, .16);
    --on-ink: #f2f0ec;
    --holo: #0c0c0c;
    color: var(--ink);
}

.photos__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.photos__item:hover img {
    transform: scale(1.05);
}

/* ---------- Protections: the one ink break ---------- */

.plus__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(36px, 6vw, 112px);
}

/* Dark panel inside the light protection section. */
.plus__plans {
    padding: clamp(28px, 3vw, 44px);
    background: #0c0c0c;
    --ink: #f2f0ec;
    --ink-line: rgba(242, 240, 236, .2);
    --on-ink: #0c0c0c;
    --holo: #f2f0ec;
    color: var(--ink);
}

.plus__plans ol {
    margin: 18px 0 20px;
    padding: 0;
    list-style: none;
}

.plus__plans li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name price"
        "desc price";
    gap: 2px 20px;
    align-items: center;
    padding: 20px 0;
    border-top: 2px solid var(--ink);
}

.plus__name {
    grid-area: name;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.15;
}

.plus__desc {
    grid-area: desc;
    font-weight: 500;
}

.plus__price {
    grid-area: price;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1;
}

.plus__plans > p {
    font-size: .875rem;
    font-weight: 500;
}

.plus__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px clamp(32px, 5vw, 96px);
    margin: clamp(56px, 8vw, 112px) 0 0;
    padding: 0;
    list-style: none;
}

.plus__list .br {
    color: var(--holo);
}

.plus__list li div {
    display: grid;
    gap: 4px;
    justify-items: start;
}

.plus__list b {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 1.1875rem;
    font-weight: 800;
}

.plus__list span:not(.plate) {
    color: var(--on-ink-muted);
}

.plus__list .link {
    margin-top: 8px;
    color: var(--ink);
}

/* ---------- Help ---------- */

.help {
    padding: var(--sec) 0;
}

.help__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(32px, 5vw, 96px);
}

.help__title {
    font-size: clamp(3.2rem, 8vw, 7rem);
    line-height: .86;
    letter-spacing: 0;
}

.help__opts {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid var(--ink);
}

.help__opts li {
    border-top: 2px solid var(--ink);
}

.help__opts a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    text-decoration: none;
}

.help__opts a > span {
    display: grid;
    font-weight: 500;
}

.help__opts b {
    font-size: 1.25rem;
    font-weight: 800;
}

.help__opts .ico {
    width: 26px;
    height: 26px;
}

.help__go {
    transition: transform .3s var(--ease);
}

.help__opts a:hover .help__go {
    transform: translateX(6px);
}

.help__opts a:hover b {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* ---------- Responsive ---------- */

/* ---------- Buy column zones: the deal on a chalk plate, then numbered steps, then the CTA ----------
   The column reads in three blocks instead of one long list: what it costs and when it arrives
   (light plate), what you choose (1), what you add (2). */

.buy {
    gap: 36px;
    counter-reset: zone;
}

.deal {
    position: relative;
    display: grid;
    gap: 18px;
    padding: clamp(20px, 2.4vw, 30px);
}

/* Only the mark is clipped to the plate: the members explainer must be free to overflow it. */
.deal__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* The brush mark signs the plate, tonal, top right behind the price. */
.deal__mark {
    position: absolute;
    top: -18%;
    right: -12%;
    width: 62%;
    color: rgba(12, 12, 12, .06);
    transform: rotate(-10deg);
}

.deal > :not(.deal__bg) {
    position: relative;
}

.deal .price {
    padding-top: 0;
    border-top: 0;
}

.deal .mprice {
    margin-top: 8px;
}

.deal .ship {
    padding: 16px 0 0;
    border-top: 2px solid var(--ink-line);
    border-bottom: 0;
}

.zone {
    display: grid;
    gap: 24px;
}

.zone:not(:has(.opt)) {
    display: none;
}

/* Numbered by counter, so a hidden step (a box with no colour) does not leave a gap in 1, 2. */
.zone {
    counter-increment: zone;
}

.zone__n::before {
    content: counter(zone);
}

.zone__title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink);
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    font-weight: 800;
    font-family: var(--fd);
    font-variation-settings: var(--fd-var);
    line-height: 1;
    letter-spacing: 0;
}

.zone__n {
    display: grid;
    place-items: center;
    flex: none;
    align-self: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 1.125rem;
    line-height: 1;
}

/* The setup rows already carry their own rules: drop the doubled top line under the step title. */
.zone .setup {
    margin-top: -24px;
    border-top: 0;
}

/* ---------- Member price: the second price, circled in marker so it can't be missed ---------- */

.mprice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 22px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 2px solid var(--ink-line);
}

.mprice .mb__badge {
    height: 38px;
    padding-right: 16px;
    font-size: .9375rem;
}

.mprice .mb__disc {
    width: 32px;
    height: 32px;
}

.mprice .mb__price {
    font-size: clamp(2rem, 3vw, 2.6rem);
}

.mprice__note {
    max-width: 30ch;
    font-size: .875rem;
    color: var(--ink-2);
}

.mprice__note b {
    color: var(--ink);
    font-size: 1.0625rem;
}

.mprice__note a {
    display: inline-block;
    margin-top: 4px;
    color: var(--ink);
    font-weight: 700;
}

/* On phones the saving note goes under the badge and price instead of squeezing beside them. */
@media (max-width: 640px) {
    .mprice {
        grid-template-columns: minmax(0, 1fr);
    }

    .mprice__note {
        max-width: none;
    }
}

/* ---------- Delivery: countdown, a hand arrow, the arrival day. Ruled, never a filled bar ---------- */

.ship {
    display: grid;
    grid-template-columns: auto 64px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 4px 0 16px;
    border-bottom: 2px solid var(--ink-line);
}

.ship__left,
.ship__right {
    display: grid;
    gap: 2px;
}

.ship__clock {
    font-size: clamp(1.9rem, 2.6vw, 2.4rem);
    line-height: .95;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.ship__left span {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink-2);
}

.ship__arrow {
    width: 64px;
    height: 40px;
    stroke-width: 6;
    transform: rotate(8deg);
}

.ship__right .hand {
    font-size: 1.125rem;
    line-height: 1;
    transform: rotate(-4deg);
    transform-origin: left;
}

.ship__right b {
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--fd);
    font-variation-settings: var(--fd-var);
    line-height: 1.05;
}

/* Racket swatches: the cut-out on a chalk disc, tilted like everywhere else. */
.cswatch--racket img {
    object-fit: contain;
    padding: 5px;
    transform: rotate(-20deg);
}

/* ---------- Setup: the optional choices as one list of rows, one open at a time ----------
   Closed rows read like an order summary (label left, current choice right), so the buy column
   stays short and the CTA sits close to the price. */

.setup {
    border-top: 2px solid var(--ink);
}

.setup__row {
    border-bottom: 2px solid var(--ink-line);
}

.setup__row summary {
    display: grid;
    grid-template-columns: 22px auto minmax(0, 1fr) 20px;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    list-style: none;
    cursor: pointer;
}

.setup__row summary::-webkit-details-marker {
    display: none;
}

.setup__row summary:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

.setup__icon {
    width: 22px;
    height: 22px;
    color: var(--ink-2);
}

.setup__row.is-set .setup__icon,
.setup__row[open] .setup__icon {
    color: var(--ink);
}

.setup__k {
    font-size: 1.0625rem;
    font-weight: 800;
}

.setup__row summary:hover .setup__k {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
}

.setup__v {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    color: var(--ink-2);
    font-size: .9375rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* A row with a real choice gets the marker tick and full-strength text. */
.setup__row.is-set .setup__v {
    color: var(--ink);
}

.setup__row.is-set .setup__v::before {
    content: "";
    flex: none;
    width: 18px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22l13 12L43 5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22l13 12L43 5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.setup__ico {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    transition: transform .3s var(--ease);
}

.setup__row[open] .setup__ico {
    transform: rotate(45deg);
}

.setup__body {
    padding-bottom: 22px;
    animation: setup-in .4s var(--ease);
}

@keyframes setup-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.setup .addons {
    border-top: 0;
}

.setup .addon:last-child {
    border-bottom: 0;
}

.setup__more {
    justify-self: start;
    font-size: .875rem;
    font-weight: 700;
}

.setup + .buy__eta {
    margin-top: -12px;
}

/* ---------- Who it's for: the play style in hand lettering, then one plain line ---------- */

.buy__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

/* Spec chips: quiet rings; the play style is the one filled chip, it links to the list. */
.buy__chips li {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px var(--ink-line);
    font-size: .875rem;
    font-weight: 700;
}

.buy__chips li:first-child {
    padding: 0;
    box-shadow: none;
}

.buy__chips .buy__style {
    height: 38px;
    padding: 0 16px;
    background: var(--ink);
    color: var(--on-ink);
    box-shadow: none;
}

.buy__chips .buy__style:hover {
    background: var(--ink-2);
}

/* Here the chip is always chalk, so the lettering takes the deep orange. */
.buy__chips .buy__style .hand {
    color: var(--orange-deep);
}

.buy__who {
    max-width: 52ch;
    font-size: .9375rem;
    color: var(--ink-2);
}

.buy__who a {
    color: var(--ink);
    font-weight: 700;
}

.buy__style {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 8px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px var(--ink);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.buy__style .hand {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--accent);
    transform: translateY(2px) rotate(-4deg);
}

/* On hover the chip turns chalk: the darker accent keeps the lettering readable there. */
.buy__style:hover .hand {
    color: var(--orange-deep);
}

.buy__style:hover {
    background: var(--ink);
    color: var(--on-ink);
}

/* Kit add-ons carry the product photo on its plate. */
.addon--kit {
    grid-template-columns: 24px 56px minmax(0, 1fr) auto;
    align-items: center;
}

.addon__img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: var(--paper);
}

.buy__eta {
    margin-top: 12px;
    font-size: .9375rem;
    font-weight: 600;
}

.buy__eta:empty {
    display: none;
}

/* ---------- Page index: sticky under the header, the current section underlined in marker ---------- */

.toc {
    position: sticky;
    top: var(--hdr-top);
    transition: top .35s var(--ease);
    z-index: 30;
    margin-top: clamp(32px, 4vw, 56px);
    background: var(--holo);
    box-shadow: inset 0 1px 0 var(--ink-line), 0 1px 0 var(--ink-line);
}

.toc__list {
    display: flex;
    gap: clamp(20px, 3vw, 44px);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.toc__list::-webkit-scrollbar {
    display: none;
}

.toc__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 60px;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink-2);
    transition: color .2s;
}

.toc__link:hover,
.toc__link.is-on {
    color: var(--ink);
}

.toc__score {
    font-size: .875rem;
}

.toc__link .br {
    position: absolute;
    left: -6%;
    width: 112%;
    bottom: 12px;
    height: 9px;
    stroke-width: 6;
}

.js .toc__link .br use {
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 500ms var(--ease);
}

.js .toc__link:hover .br use,
.js .toc__link.is-on .br use {
    stroke-dashoffset: 0;
}

/* The compare pickers stick under the index, not under it. */
.pcmp .cmp__head {
    top: calc(var(--hdr-top) + 61px);
}

/* The bar sits under the header; sections jump into view below both. */
html:has(.toc) {
    scroll-padding-top: calc(var(--hdr) + 76px);
}

/* ---------- Reviews: level filter and titles ---------- */

.rfilter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rfilter .chip {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.rfilter .chip[aria-pressed="true"] span {
    background: var(--ink);
    color: var(--on-ink);
}

.rfilter .chip:focus-visible {
    outline: 0;
}

.rfilter .chip:focus-visible span {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.review__title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.review p {
    font-weight: 500;
}

/* ---------- Try it on court: lead, three hand-numbered steps, centres ---------- */

.ptest__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "lead lead" "steps centers";
    gap: clamp(40px, 5vw, 80px) clamp(32px, 6vw, 112px);
}

.ptest__lead {
    grid-area: lead;
    display: grid;
    gap: 24px;
}

.ptest__lead .mark > .br {
    stroke-width: 8;
}

.ptest__steps {
    grid-area: steps;
    display: grid;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ptest__steps li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
    padding-top: 22px;
    border-top: 2px solid var(--ink);
    font-size: 1.125rem;
}

.ptest__steps b {
    font-weight: 800;
}

.ptest__n {
    font-size: 3rem;
    line-height: .8;
    transform: rotate(-8deg);
}

.ptest__centers {
    grid-area: centers;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 28px;
}

.ptest__centers ul {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ptest__centers li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    font-size: .9375rem;
    color: var(--ink-2);
}

.ptest__centers b {
    color: var(--ink);
    font-size: 1.0625rem;
}

/* ---------- On-court ratings under the spec groups ---------- */

.specs__play {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 24px clamp(32px, 6vw, 112px);
    margin-top: clamp(56px, 7vw, 96px);
    padding-top: 24px;
    border-top: 2px solid var(--ink);
}

.specs__play p {
    margin-top: 12px;
    max-width: 32ch;
    color: var(--ink-2);
    font-size: .9375rem;
}

.specs__play .rate-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px clamp(24px, 4vw, 64px);
}

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

    .plus__top,
    .help__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .pdp__grid,
    .ppro__grid,
    .desc__grid,
    .reviews__grid {
        grid-template-columns: 1fr;
    }

    .gal {
        position: static;
    }

    .gal__stage--racket {
        width: min(100%, 560px);
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .pdp {
        padding-top: 0;
    }

    .gal__sign {
        font-size: clamp(2.2rem, 11vw, 3rem);
        left: 0;
    }

    .gal__thumb {
        width: 56px;
        height: 56px;
    }

    .buy__title {
        font-size: clamp(2.4rem, 12vw, 3.4rem);
    }

    .buy__cta .btn,
    .buy__fav {
        height: 56px;
    }

    .buy__fav {
        width: 56px;
    }

    .addon {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .addon__price {
        grid-column: 2;
    }

    .addon--kit {
        grid-template-columns: 24px 48px minmax(0, 1fr);
    }

    .ship {
        grid-template-columns: auto 44px minmax(0, 1fr);
        gap: 10px;
    }

    .ship__arrow {
        width: 44px;
        height: 28px;
    }

    .ship__clock {
        font-size: 1.75rem;
    }

    .addon--kit .addon__img {
        width: 48px;
        height: 48px;
    }

    .addon--kit .addon__price {
        grid-column: 3;
    }

    .ptest__steps li {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .ptest__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "lead" "steps" "centers";
    }

    .specs__play,
    .specs__play .rate-bars {
        grid-template-columns: minmax(0, 1fr);
    }

    .toc__link {
        height: 52px;
        font-size: .9375rem;
    }

    .toc__link .br {
        bottom: 9px;
    }

    .pcmp .cmp__head {
        top: calc(var(--hdr-top) + 53px);
    }

    .specs__groups,
    .specs__list,
    .care ol,
    .plus__list {
        grid-template-columns: 1fr;
    }

    .specs__group dl {
        grid-template-columns: 1fr 1fr;
        gap: 22px 16px;
    }

    .care {
        margin-inline: calc(var(--gutter) * -1);
        padding: 32px var(--gutter);
    }

    .plus__plans {
        margin-inline: calc(var(--gutter) * -1);
        padding: 24px var(--gutter);
    }

    .plus__plans li {
        grid-template-areas:
            "name price"
            "desc desc";
    }

    .sticky-buy__inner {
        height: 72px;
        gap: 12px;
    }

    .sticky-buy img {
        display: none;
    }

    .sticky-buy__price {
        font-size: 1.25rem;
    }

    .sticky-buy .btn {
        width: 52px;
        padding: 0;
    }

    .sticky-buy .btn span {
        display: none;
    }

    body:has(.sticky-buy:not([hidden])) .wa {
        bottom: 84px;
    }
}

/* Phones: icon left, label and its note stacked, so both delivery chips align. */
@media (max-width: 640px) {
    .chip--wide span {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: center;
        padding-block: 10px;
    }

    .chip--wide small {
        grid-column: 2;
        margin-left: 0;
    }
}

@media (max-width: 760px) {
    .gal {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "stage" "thumbs";
    }

    .gal__thumbs {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
        padding: 4px 4px 4px 3px;
    }

    .gal__thumb {
        width: 64px;
        height: 64px;
    }
}