/* Racket list, proposal B "La Firma": a huge title on the black page, pill filters,
   cut-out rackets in a roomy grid, the compare tray as one ink pill at the bottom. */

/* ---------- Head ---------- */

/* Compact on purpose: products must show in the first viewport. */
.plp-head {
    padding: clamp(16px, 2vw, 28px) 0 clamp(20px, 2.6vw, 32px);
}

.plp-head__inner {
    margin-top: clamp(16px, 2.4vw, 32px);
}

.plp-head h1 {
    font-size: clamp(3.4rem, 9vw, 7.5rem);
    line-height: .8;
    letter-spacing: 0;
}

.plp-head__side {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 48px;
    margin-top: clamp(24px, 3vw, 40px);
}

.plp-head__side p {
    font-weight: 500;
    max-width: 46ch;
}

.plp-head__side .plp-head__count {
    display: flex;
    align-items: baseline;
    gap: .55em;
    font-size: 1.125rem;
    font-weight: 700;
}

.plp-head__count b {
    font-size: 3rem;
    line-height: 1;
}

.plp-head__count .loop > .br {
    inset: -30% -40%;
    width: 180%;
    height: 160%;
    --d: 500;
}

/* Quick chips: pills, outlined when off, ink when on. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(40px, 6vw, 80px);
}

.chip {
    flex: none;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--ink);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

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

.chip.is-on {
    background: var(--ink);
    color: var(--on-ink);
}

/* ---------- Filter bar: sticky, on the same black ground ---------- */

.plp-bar {
    position: sticky;
    top: var(--hdr-top);
    transition: top .35s var(--ease);
    z-index: 20;
    background: var(--holo);
    box-shadow: 0 1px 0 var(--ink-line), 0 -1px 0 var(--ink-line);
}

.plp-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 72px;
    overflow-x: auto;
    scrollbar-width: none;
}

.plp-filters::-webkit-scrollbar {
    display: none;
}

.sel {
    flex: none;
}

.sel select,
.sel .dd {
    appearance: none;
    height: 44px;
    padding: 0 40px 0 18px;
    border: 0;
    border-radius: 999px;
    background: rgba(242, 240, 236, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f0ec' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 15px;
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s;
}

.sel select:hover,
.sel .dd:hover,
.sel .dd[aria-expanded="true"] {
    background-color: rgba(242, 240, 236, .16);
}

.sel .dd.is-set {
    background-color: var(--ink);
    color: var(--on-ink);
}

.sel--sort {
    margin-left: auto;
}

.sel--sort select,
.sel--sort .dd {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px var(--ink);
}

.plp-reset {
    flex: none;
    height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .22em;
    cursor: pointer;
}

.plp-reset:hover {
    text-decoration-color: transparent;
    background: rgba(242, 240, 236, .1);
}

/* ---------- Grid ---------- */

.plp {
    padding: clamp(40px, 5vw, 72px) 0 var(--sec);
}

.plp__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(48px, 5vw, 80px) clamp(16px, 2.4vw, 36px);
}

.plp__grid .pc__name {
    font-size: clamp(1.25rem, 1.7vw, 1.6rem);
    font-weight: 800;
    font-family: var(--fd);
    font-variation-settings: var(--fd-var);
}

.pc.is-hidden {
    display: none;
}

/* Compare tile: a square cell of the grid, chalk ring on the black, headline written over it. */
.plp-cmp {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    padding: clamp(22px, 2.6vw, 40px);
    box-shadow: inset 0 0 0 2px var(--ink-line);
    text-decoration: none;
    transition: box-shadow .3s;
}

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

.plp-cmp__title {
    font-size: clamp(2.2rem, 3.6vw, 3.6rem);
}

.plp-cmp__txt {
    max-width: 30ch;
    color: var(--ink-2);
}

.plp-cmp__go {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    margin-top: auto;
    font-weight: 700;
}

.plp-cmp__go .ico {
    transition: transform .3s var(--ease);
}

.plp-cmp:hover .plp-cmp__go .ico {
    transform: translateX(4px);
}

/* Compare toggle: a small pill, filled once the racket is picked. */
.plp__grid .pc__cmp {
    /* Compare toggle: a small black pill pinned on the plate, not a form checkbox under the card. */
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    gap: 6px;
    height: 36px;
    margin: 0;
    padding: 0 14px 0 10px;
    border-radius: 999px;
    background: #0c0c0c;
    color: #f2f0ec;
    font-size: .8125rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s, transform .3s var(--ease), background-color .2s, color .2s;
}

.plp__grid .pc__cmp input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.plp__grid .pc__cmp .ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.6;
}

.plp__grid .pc__cmp-on,
.plp__grid .pc__cmp:has(input:checked) .pc__cmp-add,
.plp__grid .pc__cmp:has(input:checked) .pc__cmp-off {
    display: none;
}

.plp__grid .pc__cmp:has(input:checked) .pc__cmp-on {
    display: inline;
}

/* Shown on hover and focus, always once picked, and always on touch screens. */
.plp__grid .pc:hover .pc__cmp,
.plp__grid .pc__cmp:has(input:focus-visible),
.plp__grid .pc__cmp:has(input:checked) {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .plp__grid .pc__cmp {
        opacity: 1;
        transform: none;
    }
}

.plp__grid .pc__cmp:hover {
    background: #2a2a2a;
}

.plp__grid .pc__cmp:has(input:checked) {
    background: #f2f0ec;
    color: #0c0c0c;
    box-shadow: inset 0 0 0 2px #0c0c0c;
}

.plp__grid .pc__cmp:has(input:focus-visible) {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.pc.is-picked .pc__media {
    box-shadow: inset 0 0 0 3px var(--ink);
}

/* ---------- Empty state ---------- */

.plp-empty {
    display: grid;
    justify-items: start;
    gap: 28px;
    padding: clamp(24px, 4vw, 64px) 0 clamp(40px, 6vw, 96px);
}

.plp-empty .d {
    font-size: clamp(3rem, 9vw, 7rem);
    line-height: .86;
}

.plp-empty .loop > .br {
    inset: -18% -16% -22%;
    width: 132%;
    height: 140%;
    stroke-width: 7;
}

/* The block is hidden at load, so the stroke draws itself when the empty state appears. */
.plp-empty:not([hidden]) .br use {
    animation: plp-draw var(--draw) var(--ease) .2s both;
}

@keyframes plp-draw {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.plp-empty__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
}

/* ---------- Quiz band ---------- */

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

.quizband__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: end;
    gap: 32px clamp(32px, 5vw, 80px);
    padding-top: clamp(48px, 6vw, 88px);
    border-top: 2px solid var(--ink);
}

.quizband__title {
    font-size: clamp(3.4rem, 10vw, 8.5rem);
    line-height: .84;
    letter-spacing: 0;
}

.quizband__title .mark > .br {
    bottom: -.06em;
    height: .18em;
    stroke-width: 9;
}

.quizband__side {
    display: grid;
    justify-items: start;
    gap: 24px;
    padding-bottom: .4em;
}

/* ---------- Compare tray: one ink pill floating at the bottom ---------- */

.tray {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(14px, 2vw, 28px);
    z-index: 40;
    display: flex;
    justify-content: center;
    pointer-events: none;
    animation: tray-in .5s var(--ease);
}

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

.tray__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 1040px);
    padding: 8px 8px 8px 24px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-ink);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6);
    pointer-events: auto;
}

.tray__label small {
    font-family: var(--f);
    font-size: .8125rem;
    font-weight: 700;
}

.tray__count {
    display: none;
    flex: 1;
    min-width: 0;
    padding-left: 12px;
    font-size: .9375rem;
    font-weight: 700;
}

.tray__label {
    flex: none;
    margin-right: 6px;
    color: var(--holo);
    font-size: 1.375rem;
}

.tray__slots {
    display: flex;
    flex: 1;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tray__slots li {
    flex: 1;
    min-width: 0;
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--ink-2);
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tray__slots li.is-empty {
    background: none;
    box-shadow: inset 0 0 0 1px var(--on-ink-muted);
    color: var(--on-ink-muted);
    font-weight: 500;
}

.tray__go {
    flex: none;
    background: var(--holo);
    color: var(--ink);
}

.tray__go:hover {
    background: var(--holo-soft);
}

.tray__go:focus-visible {
    outline-color: var(--holo);
}

.tray__go[aria-disabled="true"] {
    background: var(--ink-2);
    color: var(--on-ink-muted);
    pointer-events: none;
}

/* While the tray is open the WhatsApp pill steps up above it, and the footer leaves room. */
.wa {
    transition: transform .3s var(--ease), bottom .4s var(--ease);
}

body:has(.tray:not([hidden])) .wa {
    bottom: calc(clamp(14px, 2vw, 28px) + 84px);
}

body:has(.tray:not([hidden])) .ftr {
    padding-bottom: 120px;
}

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

@media (max-width: 1080px) {
    .plp__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .quizband__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .plp-head__inner {
        margin-top: 28px;
    }

    .chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: calc(var(--gutter) * -1);
        padding-right: var(--gutter);
        scrollbar-width: none;
    }

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

    .chip {
        height: 44px;
        padding: 0 18px;
        font-size: .9375rem;
    }

    .plp-filters {
        min-height: 64px;
        margin-right: calc(var(--gutter) * -1);
        padding-right: var(--gutter);
    }

    .sel--sort {
        margin-left: 0;
    }

    .plp__grid {
        gap: 40px 12px;
    }

    .plp__grid .pc__cmp {
        top: 8px;
        right: 8px;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
    }

    /* Icon-only on phones: the word stays for screen readers. */
    .plp__grid .pc__cmp span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .tray__inner {
        padding-left: 8px;
        gap: 6px;
    }

    .tray__label {
        display: none;
    }

    /* Four names do not fit a phone: the pill says how many are picked instead. */
    .tray__slots {
        display: none;
    }

    .tray__count {
        display: block;
    }

    .plp-cmp {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .tray__go {
        height: 44px;
        padding: 0 16px;
        font-size: .9375rem;
    }

    body:has(.tray:not([hidden])) .wa {
        bottom: calc(clamp(14px, 2vw, 28px) + 72px);
    }
}

/* ---------- Search box (Cerca) ---------- */

.search {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 560px;
}

.search input {
    flex: 1;
    min-width: 0;
    height: 56px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--paper);
    color: #0c0c0c;
    font-size: 1.0625rem;
}

.search input::placeholder {
    color: #5c5955;
}

.search input:focus-visible {
    outline-offset: 2px;
}

.chips .chip small {
    margin-left: .3em;
    font-weight: 500;
    opacity: .7;
}