:root {
    color-scheme: light;
    --blue: #0d3561;
    --blue-bright: #24689f;
    --lime: #ddeb59;
    --lime-deep: #718115;
    --background: #f5f7fa;
    --soft-blue: #eaf1f6;
    --ink: #10263d;
    --muted: #53677b;
    --muted-on-blue: #bcd0df;
    --line: #d6e0e8;
    --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--background); color: var(--ink); font: 400 16px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body::before { position: fixed; z-index: 100; inset: 0 0 auto; height: 4px; background: var(--lime); content: ""; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--lime-deep); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.shell, .hero-shell { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.eyebrow { display: block; color: var(--blue-bright); font-family: "Bitcount Prop Single", monospace; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow.light { color: var(--lime); }
.text-link, .arrow-link { color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Reusable padel fields. Both utilities use currentColor for their linework,
   so a surface controls the motif in the same way it controls its text. The
   custom properties are intentionally public: individual components may tune
   scale, crop and intensity without redefining either pattern. */
.padel-bg-01, .padel-bg-02 { position: relative; isolation: isolate; overflow: hidden; }
.padel-bg-01::before, .padel-bg-02::before, .padel-bg-02::after { position: absolute; z-index: 0; content: ""; pointer-events: none; }
.padel-bg-01 > *, .padel-bg-02 > * { position: relative; z-index: 1; }
.padel-bg-01::before { inset: var(--padel-bg-01-inset, -38% auto -38% -2%); width: var(--padel-bg-01-width, 62%); height: var(--padel-bg-01-height, auto); background: var(--padel-bg-color, currentColor); opacity: var(--padel-bg-opacity, .105); transform: rotate(var(--padel-bg-rotation, -7deg)); transform-origin: center; -webkit-mask: url("../images/patterns/padel-court-lines-fTCtWAN.svg") center / contain no-repeat; mask: url("../images/patterns/padel-court-lines-fTCtWAN.svg") center / contain no-repeat; }
.padel-bg-02::before { inset: 0; background: var(--padel-bg-color, currentColor); opacity: var(--padel-bg-opacity, .11); -webkit-mask: url("../images/patterns/padel-rally-lines-FHHIOPN.svg") center / cover no-repeat; mask: url("../images/patterns/padel-rally-lines-FHHIOPN.svg") center / cover no-repeat; }
.padel-bg-02::after { inset: 0; background: radial-gradient(circle at 12% 78%,var(--padel-bg-accent,var(--lime)) 0 var(--padel-bg-dot-size,5px),transparent calc(var(--padel-bg-dot-size,5px) + 1px)),radial-gradient(circle at 61% 41%,var(--padel-bg-accent,var(--lime)) 0 var(--padel-bg-dot-size,5px),transparent calc(var(--padel-bg-dot-size,5px) + 1px)),radial-gradient(circle at 88% 22%,var(--padel-bg-accent,var(--lime)) 0 var(--padel-bg-dot-size,5px),transparent calc(var(--padel-bg-dot-size,5px) + 1px)); opacity: var(--padel-bg-accent-opacity, .62); }

.site-header { position: relative; z-index: 10; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.header-row { min-height: 82px; display: flex; align-items: center; gap: 22px; }
.header-discovery { min-width: 0; display: flex; flex: 1 1 auto; align-items: center; gap: 22px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 11px; font-size: 20px; font-weight: 850; letter-spacing: -.045em; }
.brand-mark { display: block; width: 42px; height: 42px; overflow: hidden; flex: 0 0 auto; }
.brand-muted { color: #10263d70; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-search { min-width: 260px; max-width: 520px; height: 46px; display: grid; flex: 1 1 420px; grid-template-columns: minmax(0,1fr) 46px; border: 1px solid var(--line); background: var(--soft-blue); transition: border-color .18s ease, box-shadow .18s ease; }
.site-search:focus-within { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(36,104,159,.12); }
.site-search input { min-width: 0; padding: 0 15px; border: 0; outline: 0; background: transparent; font-size: 14px; }
.site-search input::placeholder { color: #6d8091; opacity: 1; }
.site-search button { display: grid; padding: 0; place-items: center; border: 0; background: var(--lime); color: var(--blue); }
.site-search button:hover { background: #e8f56c; }
.site-search svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.9; }
.main-nav { display: flex; align-items: center; gap: 30px; color: var(--muted); font-size: 14px; font-weight: 650; }
.main-nav a { padding-block: 28px; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a.active { border-bottom-color: var(--blue); color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 17px; margin-left: auto; font-size: 14px; }
.profile-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.profile-menu { position: relative; }
.profile-menu summary { cursor: pointer; list-style: none; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu nav { position: absolute; z-index: 20; top: calc(100% + 12px); right: 0; min-width: 210px; display: grid; padding: 7px; border: 1px solid var(--line); background: white; box-shadow: 0 18px 38px rgba(13,53,97,.14); }
.profile-menu nav a { padding: 10px 12px; font-size: 13px; }
.profile-menu nav a:hover { background: var(--soft-blue); color: var(--blue); }
/* The one action in a list of destinations, so it leads and carries the
   primary colour. The lift the buttons use elsewhere is dropped: inside a
   popover of this size it reads as a wobble. */
.profile-menu nav .profile-menu-action { min-height: 42px; margin-bottom: 6px; padding: 10px 12px; font-size: 13px; }
.profile-menu nav .profile-menu-action:hover { background: #e8f56c; color: var(--blue); transform: none; }
.avatar { flex: 0 0 auto; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--lime); color: var(--blue); font-size: 10px; font-weight: 850; }

.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 21px; border: 0; background: transparent; color: var(--blue); font-weight: 760; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--lime); color: var(--blue); }
.button-primary:hover { background: #e8f56c; }
.button-ghost { background: white; }
.button-small { min-height: 42px; padding-inline: 15px; font-size: 13px; }
.flash { width: min(var(--max), calc(100% - 48px)); margin: 16px auto; padding: 14px 18px; border-left: 4px solid var(--blue); background: white; }
.flash.success { border-color: var(--lime-deep); }

.site-footer { padding: 48px 0; background: var(--blue); color: white; }
.footer-grid { display: grid; grid-template-columns: 1.25fr .75fr 1fr; gap: 48px; align-items: start; }
.footer-heading { margin: 0 0 13px; color: white; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.footer-brand { color: white; }
.footer-brand .brand-muted { color: var(--muted-on-blue); }
.site-footer p, .footer-note { color: var(--muted-on-blue); font-size: 14px; }
.site-footer nav { display: grid; gap: 11px; font-size: 14px; font-weight: 700; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer nav a { color: var(--muted-on-blue); text-decoration: none; font-size: 14px; font-weight: 600; }
.site-footer nav a:hover { color: white; text-decoration: underline; text-underline-offset: 3px; }
.footer-note { display: grid; gap: 8px; text-align: right; }
.footer-note a { color: var(--lime); font-weight: 750; }
/* The destinations, stacked and in the accent the social link already uses,
   so the column reads as navigation rather than as legal fine print. */
.footer-column .footer-links { display: grid; gap: 5px; }
.footer-column .footer-links li { display: block; margin-right: 0; }
.footer-column .footer-links a { color: var(--lime); font-weight: 750; }

.home-hero { --padel-bg-01-inset: -150px auto -150px clamp(-70px, 4vw, 90px); --padel-bg-01-width: min(43vw, 500px); --padel-bg-opacity: .085; background: var(--blue); color: white; }
.home-hero-grid { position: relative; min-height: 690px; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 70px; padding-block: 68px; }
.home-hero-copy { position: relative; z-index: 2; }
.home-hero h1, .directory-intro h1 { margin: 15px 0 25px; font-size: clamp(62px, 7.4vw, 90px); font-weight: 760; line-height: .81; letter-spacing: -.075em; }
.home-hero-copy > p { max-width: 610px; margin: 0; color: var(--muted-on-blue); font-size: 18px; line-height: 1.62; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 31px; }
.hero-racket-stage { position: relative; min-height: 550px; --feather: 10px; }
.hero-stage-photo-link { position: absolute; inset: 0; display: block; overflow: hidden; }
.hero-stage-photo-link::after { position: absolute; inset: 28% 0 0; background: linear-gradient(transparent,rgba(13,53,97,.9)); content: ""; }
.hero-stage-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transition: transform .45s ease; }
.hero-stage-photo-link:hover .hero-stage-photo { transform: scale(1.025); }
.hero-stage-cta { position: absolute; z-index: 2; left: calc(var(--feather) + 14px); bottom: calc(var(--feather) + 12px); display: grid; color: white; pointer-events: none; }
.hero-stage-cta small { color: var(--lime); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.hero-stage-cta strong { margin-top: 3px; font-size: 23px; letter-spacing: -.035em; }
.hero-stage-credit { position: absolute; z-index: 3; right: 6px; bottom: 4px; color: rgba(255,255,255,.55); font-size: 9px; }
.hero-stage-credit:hover { color: white; text-decoration: underline; }
.directory-spotlight { position: relative; min-width: 0; min-height: 240px; }
.spotlight-slider { position: relative; min-height: 240px; overflow: hidden; border: 1px solid rgba(255,255,255,.26); background: white; box-shadow: 10px 10px 0 rgba(255,255,255,.07); }
.spotlight-slide { position: relative; min-height: 240px; opacity: 0; transform: translateX(14px); transition: opacity .25s ease, transform .25s ease; }
.spotlight-slide.is-active { opacity: 1; transform: translateX(0); }
.spotlight-link { display: grid; min-height: 240px; grid-template-columns: minmax(170px,.72fr) minmax(0,1.28fr); color: var(--ink); }
.spotlight-media { position: relative; min-height: 240px; display: grid; place-items: center; overflow: hidden; padding: 38px 18px 17px; border-right: 1px solid var(--line); background: var(--soft-blue); background-image: linear-gradient(rgba(13,53,97,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(13,53,97,.07) 1px,transparent 1px); background-size: 42px 42px; }
.spotlight-media::after { position: absolute; width: 158px; height: 158px; border: 1px solid rgba(13,53,97,.14); border-radius: 50%; content: ""; }
.spotlight-image-fallback { position: absolute; z-index: 1; display: grid; width: 82px; height: 112px; place-items: center; border: 4px solid rgba(13,53,97,.28); border-radius: 49% 49% 43% 43%; color: rgba(13,53,97,.44); font-size: 21px; font-weight: 850; }
.spotlight-image-fallback[hidden] { display: none; }
.spotlight-image-fallback::after { position: absolute; bottom: -31px; width: 9px; height: 34px; border-radius: 4px; background: rgba(13,53,97,.28); content: ""; }
.spotlight-media img { position: relative; z-index: 2; width: min(90%, 210px); height: 184px; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 14px 12px rgba(13,53,97,.18)); transform: rotate(-3deg); transition: transform .35s ease; }
.spotlight-link:hover .spotlight-media img { transform: rotate(-3deg) scale(1.035); }
.spotlight-label { position: absolute; z-index: 2; top: 17px; left: 18px; color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.spotlight-index { position: absolute; z-index: 2; left: 18px; bottom: 15px; color: #7890a4; font: 700 10px/1 ui-monospace, monospace; }
.spotlight-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 39px 22px 43px; background: white; }
.spotlight-copy-main { display: block; min-width: 0; }
.spotlight-copy-main > strong { display: block; margin: 6px 0 7px; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.02; letter-spacing: -.05em; }
.spotlight-copy-main > small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.spotlight-metric { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }
.spotlight-metric b { color: var(--blue); font-size: 27px; line-height: 1; letter-spacing: -.06em; }
.spotlight-metric small { color: var(--muted); font-size: 10px; line-height: 1.2; }
.spotlight-controls { position: absolute; z-index: 4; top: 12px; right: 12px; display: flex; gap: 5px; }
.spotlight-arrow { width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); background: white; color: var(--blue); font-size: 16px; line-height: 1; }
.spotlight-arrow:hover { background: var(--lime); }
.spotlight-dots { position: absolute; z-index: 4; right: 18px; bottom: 16px; display: flex; gap: 5px; }
.spotlight-dot { width: 22px; height: 4px; padding: 0; border: 0; background: #b8c8d4; }
.spotlight-dot.is-active, .spotlight-dot:hover { background: var(--blue); }
.spotlight-empty { min-height: 240px; display: grid; align-content: center; padding: 30px; color: var(--ink); }
.spotlight-empty .eyebrow { color: var(--blue-bright); }
.spotlight-empty strong { max-width: 320px; margin-top: 15px; font-size: 34px; line-height: .95; letter-spacing: -.05em; }

.section { padding: 82px 0; }
.section-alt { border-block: 1px solid var(--line); background: white; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 38px; }
.section-head h2, .result-head h2, .player-story h2, .final-cta h2 { max-width: 800px; margin: 10px 0 0; font-size: clamp(42px, 5.2vw, 68px); font-weight: 740; line-height: .95; letter-spacing: -.06em; }
.section-head > p { max-width: 470px; margin: 0; color: var(--muted); font-size: 15px; }
.racket-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.racket-card { display: block; border: 1px solid var(--blue); border-top: 3px solid var(--blue); background: white; transition: transform .18s ease, box-shadow .18s ease; }
.racket-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(13,53,97,.11); }
.racket-card-media { min-height: 290px; display: grid; place-items: center; overflow: hidden; background: var(--soft-blue); }
.racket-card-media img { width: 82%; height: 280px; object-fit: contain; mix-blend-mode: multiply; transform: rotate(9deg); }
.racket-card-copy { display: block; padding: 22px; }
.card-eyebrow { display: block; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.racket-card-copy > strong { display: block; margin: 7px 0 22px; font-size: 24px; line-height: 1.12; letter-spacing: -.04em; }
.card-meta { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 12px; }
.card-score { color: var(--blue); font-weight: 850; }
.paddle-icon { position: relative; display: inline-block; width: 15px; height: 20px; margin-right: 6px; vertical-align: -5px; transform: rotate(-10deg); }
.paddle-icon::before { position: absolute; top: 0; left: 1px; width: 13px; height: 15px; border-radius: 49% 49% 42% 42%; background: currentColor; content: ""; }
.paddle-icon::after { position: absolute; bottom: 0; left: 6px; width: 4px; height: 8px; border-radius: 2px; background: currentColor; content: ""; }
.racket-fallback { display: grid; place-items: center; text-align: center; }
.racket-fallback b { display: grid; width: 118px; height: 150px; place-items: center; border: 6px solid var(--blue); border-radius: 49% 49% 43% 43%; color: var(--blue); font-size: 30px; }
.racket-fallback small { margin-top: 15px; color: var(--muted); }
.racket-fallback.large b { width: 190px; height: 240px; font-size: 45px; }

.brand-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.brand-card { --brand-hue: 211; --brand-accent: hsl(var(--brand-hue) 67% 39%); --brand-field: hsl(var(--brand-hue) 72% 88%); --brand-deep: hsl(var(--brand-hue) 54% 23%); display: block; border-top: 3px solid var(--brand-accent); background: white; transition: transform .18s ease, box-shadow .18s ease; }
.brand-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(13,53,97,.11); }
.brand-card-media { position: relative; isolation: isolate; min-height: 196px; display: grid; place-items: center; padding: 34px; overflow: hidden; background-color: var(--brand-field); background-image: linear-gradient(hsl(var(--brand-hue) 45% 24% / .08) 1px,transparent 1px),linear-gradient(90deg,hsl(var(--brand-hue) 45% 24% / .08) 1px,transparent 1px); background-size: 58px 58px; }
.brand-card-media::after { position: absolute; z-index: -1; top: -112px; right: -82px; width: 245px; height: 245px; border: 1px solid hsl(var(--brand-hue) 48% 25% / .16); border-radius: 50%; box-shadow: 0 0 0 34px hsl(var(--brand-hue) 48% 25% / .045), 0 0 0 68px hsl(var(--brand-hue) 48% 25% / .035); content: ""; transition: transform .35s ease; }
.brand-card:hover .brand-card-media::after { transform: scale(1.08); }
.brand-card-media img { position: relative; z-index: 2; width: auto; max-width: 200px; height: auto; max-height: 56px; object-fit: contain; filter: grayscale(1) brightness(0); transition: transform .25s ease; }
.brand-card:hover .brand-card-media img { transform: scale(1.035); }
.brand-card-media.on-dark img { max-width: 210px; max-height: 78px; padding: 13px 18px; background: #242424; box-shadow: 7px 7px 0 hsl(var(--brand-hue) 48% 25% / .12); filter: none; }
/* An opaque white canvas cannot be filtered to black without taking the whole
   rectangle with it. Multiplying drops the canvas into the field behind it and
   the contrast push carries the artwork down to the silhouette of the others. */
.brand-card-media.on-blend img { filter: grayscale(1) contrast(4); mix-blend-mode: multiply; }
.brand-card-media b { position: relative; z-index: 2; color: var(--brand-deep); font-size: 28px; letter-spacing: -.04em; text-align: center; }
.brand-card-rank { position: absolute; z-index: 2; top: 16px; left: 17px; min-width: 31px; padding: 5px 7px; border: 1px solid hsl(var(--brand-hue) 48% 25% / .2); background: hsl(var(--brand-hue) 72% 94% / .7); color: var(--brand-deep); font: 750 10px/1 ui-monospace, monospace; text-align: center; }
.brand-card-watermark { position: absolute; z-index: -1; left: -8px; bottom: -23px; max-width: 115%; color: hsl(var(--brand-hue) 54% 23% / .085); font-size: 74px; font-weight: 850; line-height: 1; letter-spacing: -.075em; text-transform: uppercase; white-space: nowrap; }
.brand-card-copy { display: block; padding: 22px; }
.brand-card-copy > strong { display: flex; align-items: baseline; gap: 9px; margin: 7px 0 15px; font-size: 40px; line-height: 1; letter-spacing: -.05em; }
.brand-card-copy > strong small { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.brand-share-bar { display: block; height: 7px; margin-bottom: 17px; background: hsl(var(--brand-hue) 55% 91%); }
.brand-share-bar > i { display: block; min-width: 3px; height: 100%; background: var(--brand-accent); }
.brand-card .card-score { color: var(--brand-deep); }

/* Brand directory. The hero is the directory hero: the same blue field and the
   same two-column intro grid, with the catalog figures where the directory
   carries its spotlight. The jump strip below it reuses the profile brand strip
   unchanged and only gains the anchor that turns a tile into a jump. */
.brand-index-intro, .review-index-intro { padding: 44px 0; }
.brand-index-intro .brand-index-copy p, .review-index-intro .review-index-copy p { max-width: 620px; font-size: 15px; }
.brand-index-facts, .review-index-facts { display: flex; flex-wrap: wrap; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.26); background: white; box-shadow: 10px 10px 0 rgba(255,255,255,.07); }
.brand-index-facts > div, .review-index-facts > div { flex: 1 1 140px; padding: 26px 22px; border-right: 1px solid var(--line); }
.brand-index-facts > div:last-child, .review-index-facts > div:last-child { border-right: 0; }
.brand-index-facts dt, .review-index-facts dt { color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.brand-index-facts dd, .review-index-facts dd { margin: 7px 0 0; color: var(--blue); font-size: clamp(30px, 3vw, 40px); font-weight: 850; line-height: 1; letter-spacing: -.055em; }
.brand-jump-band { padding: 22px 0 26px; border-bottom: 1px solid var(--line); background: var(--soft-blue); }
.brand-jump-strip { margin: 0; }
.brand-jump-strip .eyebrow { margin-bottom: 13px; }
.brand-jump-strip li { transition: transform .18s ease, border-color .18s ease; }
.brand-jump-strip li:hover { transform: translateY(-3px); border-color: var(--blue); }
.brand-jump-strip li > a { display: grid; width: 100%; height: 100%; place-items: center; }
.brand-jump-strip .profile-brand-count { box-shadow: 0 0 0 4px var(--soft-blue); }
.brand-index-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.brand-index-card { --brand-hue: 211; --brand-accent: hsl(var(--brand-hue) 67% 39%); --brand-field: hsl(var(--brand-hue) 72% 88%); --brand-deep: hsl(var(--brand-hue) 54% 23%); display: grid; grid-template-columns: 210px minmax(0,1fr); border-top: 3px solid var(--brand-accent); background: white; scroll-margin-top: 26px; }
.brand-index-card:target { box-shadow: 0 0 0 3px var(--lime); }
.brand-index-card .brand-card-media { min-height: 176px; padding: 24px 18px; }
.brand-index-card .brand-card-media img { max-width: 160px; max-height: 70px; }
.brand-index-card .brand-card-media.on-dark img { max-width: 146px; max-height: 56px; padding: 11px 15px; }
.brand-index-card .brand-card-media b { font-size: 21px; }
.brand-index-card .brand-card-watermark { bottom: -14px; font-size: 50px; }
.brand-index-body { display: flex; min-width: 0; flex-direction: column; padding: 22px 24px 24px; }
.brand-index-body h3 { overflow-wrap: anywhere; margin: 0; font-size: 27px; line-height: 1; letter-spacing: -.045em; }
.brand-index-body > p { margin: 11px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.brand-index-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 17px 0 0; padding-top: 15px; border-top: 1px solid var(--line); }
.brand-index-stats dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.brand-index-stats dd { margin: 4px 0 0; color: var(--blue); font-size: 21px; font-weight: 850; line-height: 1; letter-spacing: -.05em; }
.brand-index-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: auto; padding-top: 18px; }
.brand-index-link { font-size: 13px; }
.brand-index-site { color: var(--muted); font-size: 12px; font-weight: 700; }
.brand-index-site:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* Review feed. One review per row across the full column, because a review is
   read as a paragraph and not compared side by side like a racket card: the
   racket photo anchors the row on the left, the player and their score head
   the note, and the hairline grid keeps consecutive reviews apart. */
.review-index-list { padding-top: 60px; }
.review-feed { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.review-feed-card { display: grid; grid-template-columns: 210px minmax(0,1fr); background: white; scroll-margin-top: 26px; }
.review-feed-card:target { box-shadow: 0 0 0 3px var(--lime); }
.review-feed-media { min-height: 200px; display: grid; place-items: center; overflow: hidden; background: var(--soft-blue); background-image: linear-gradient(rgba(13,53,97,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(13,53,97,.07) 1px,transparent 1px); background-size: 58px 58px; }
.review-feed-media img { width: 84%; height: 176px; object-fit: contain; mix-blend-mode: multiply; }
.review-feed-media .racket-fallback b { width: 70px; height: 92px; border-width: 4px; font-size: 17px; }
.review-feed-body { display: flex; min-width: 0; flex-direction: column; padding: 24px 26px 26px; }
.review-feed-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; }
.review-feed-player { display: inline-flex; min-width: 0; align-items: center; gap: 13px; }
.review-feed-avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; font-size: 13px; }
img.review-feed-avatar { background: var(--soft-blue); object-fit: cover; }
.review-feed-player-name { min-width: 0; }
.review-feed-player-name strong { display: block; overflow-wrap: anywhere; font-size: 17px; letter-spacing: -.03em; }
.review-feed-player-name small { display: block; color: var(--muted); font-size: 12px; }
.review-feed-player:hover .review-feed-player-name strong { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.review-feed-meta { display: flex; align-items: center; gap: 18px; }
.review-feed-rating { display: inline-flex; align-items: center; color: var(--blue); font-size: 21px; font-weight: 850; letter-spacing: -.045em; }
.review-feed-rating small { margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
.review-feed-card time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.review-feed-racket { display: block; width: fit-content; max-width: 100%; margin-top: 18px; }
.review-feed-racket strong { display: block; overflow-wrap: anywhere; margin-top: 4px; font-size: 21px; line-height: 1.1; letter-spacing: -.04em; }
.review-feed-racket:hover strong { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.review-feed-body > p { margin: 13px 0 0; color: #324a60; font-size: 15px; line-height: 1.65; }
/* A review is printed on white cards and on the dark profile panel, so the
   mention keeps the surrounding colour and marks itself with the lime rule. */
.review-racket-mention { color: inherit; font-weight: 750; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.review-racket-mention:hover { text-decoration-color: currentColor; }

.player-story { padding: 60px 0; background: var(--blue); color: white; }
.story-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }
.player-story h2 { margin-top: 15px; }
.story-lead { max-width: 470px; margin: 22px 0 24px; color: #c5d5e0; font-size: 16px; line-height: 1.62; }
.arrow-link.light { color: var(--lime); }
.story-steps { border-top: 1px solid rgba(255,255,255,.22); }
.story-steps > div { display: grid; grid-template-columns: 42px 200px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.story-steps span { color: var(--lime); font: 700 12px/1 ui-monospace, monospace; }
.story-steps p { margin: 0; color: #c5d5e0; font-size: 14px; }
.final-cta { background: var(--blue); color: white; text-align: center; }
.final-cta .eyebrow { color: var(--lime); }
.final-cta h2 { margin: 12px auto 30px; }

.directory-intro { overflow: hidden; padding: 30px 0; background-color: var(--blue); background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size: 74px 74px; color: white; border-bottom: 1px solid var(--blue); }
.intro-grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(480px,.98fr); gap: 58px; align-items: center; }
.directory-hero-copy { position: relative; z-index: 2; }
.directory-intro h1 { max-width: 680px; margin-bottom: 0; font-size: clamp(46px, 4.3vw, 58px); line-height: .91; }
.directory-intro p { max-width: 540px; margin: 16px 0 0; color: var(--muted-on-blue); font-size: 14px; line-height: 1.5; }
.directory-tools { padding: 16px 0; border-bottom: 1px solid var(--line); background: var(--soft-blue); }
.directory-results { padding-top: 60px; }
.filter-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.34fr) auto; gap: 1px; align-items: end; background: var(--line); border: 1px solid var(--line); }
.filter-grid label { display: block; min-width: 0; padding: 11px 15px; background: white; }
.filter-grid label > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.filter-grid input, .filter-grid select { width: 100%; min-height: 31px; padding: 0; border: 0; outline: 0; background: white; font-size: 14px; }
.filter-grid .button { align-self: stretch; min-height: 68px; }
.filter-shell { display: grid; gap: 9px; }

/* The specification panel. The bar above stays the fast path; everything else
   the catalog records about a racket sits one click below it and opens by
   itself as soon as a shared link already carries one of those filters. */
.filter-advanced { border: 1px solid var(--line); background: white; }
.filter-advanced > summary { display: flex; align-items: center; gap: 12px; padding: 12px 15px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; list-style: none; cursor: pointer; }
.filter-advanced > summary::-webkit-details-marker { display: none; }
.filter-advanced > summary::after { margin-left: auto; font-size: 10px; letter-spacing: 0; content: "▼"; transition: transform .18s ease; }
.filter-advanced[open] > summary::after { transform: rotate(180deg); }
.filter-advanced > summary:hover { background: var(--soft-blue); }
.filter-summary-hint { color: var(--muted); font-size: 12px; font-weight: 550; letter-spacing: 0; text-transform: none; }
.filter-count { min-width: 20px; height: 20px; display: inline-grid; padding: 0 6px; place-items: center; background: var(--lime); color: var(--blue); font-size: 11px; font-weight: 850; letter-spacing: 0; }
.filter-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px,1fr)); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.filter-group { min-inline-size: 0; margin: 0; padding: 14px 15px 16px; border: 0; background: white; }
.filter-group legend { float: left; width: 100%; margin-bottom: 9px; padding: 0; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.filter-group legend + * { clear: both; }
.filter-options { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-select { width: 100%; min-height: 37px; padding: 0 10px; border: 1px solid var(--line); background: var(--background); font-size: 13px; font-weight: 650; }
.filter-select:hover { border-color: var(--blue-bright); }
.filter-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); background: var(--background); font-size: 13px; font-weight: 650; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.filter-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filter-chip b { color: var(--muted); font-size: 11px; font-weight: 750; }
.filter-chip:hover { border-color: var(--blue-bright); }
.filter-chip:has(input:checked) { border-color: var(--blue); background: var(--blue); color: white; }
.filter-chip:has(input:checked) b { color: var(--lime); }
.filter-chip:has(input:focus-visible) { outline: 3px solid var(--lime-deep); outline-offset: 2px; }

/* Two native sliders share one rail. Both keep their keyboard behaviour, and
   without scripting they still submit a plain pair of query parameters. */
.range-readout { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.filter-range.is-narrowed .range-readout { color: var(--blue); }
.range-track { --thumb: 18px; position: relative; height: 30px; }
.range-track::before { position: absolute; inset-inline: 0; top: 13px; height: 4px; background: var(--line); content: ""; }
/* The handles never leave the rail, so the painted span follows their
   centres rather than the raw percentage, which would drift off the ends. */
.range-fill { position: absolute; top: 13px; height: 4px; inset-inline-start: calc(var(--from, 0) * 100% + (.5 - var(--from, 0)) * var(--thumb)); inset-inline-end: calc((1 - var(--to, 1)) * 100% + (var(--to, 1) - .5) * var(--thumb)); background: var(--blue-bright); }
.range-track input[type="range"] { position: absolute; inset: 0; width: 100%; height: 30px; margin: 0; padding: 0; border: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; }
.range-track input[type="range"]:focus { outline: 0; }
.range-track input[type="range"]::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.range-track input[type="range"]::-moz-range-track { height: 30px; background: transparent; }
.range-track input[type="range"]::-webkit-slider-thumb { box-sizing: border-box; width: var(--thumb); height: var(--thumb); margin-top: 6px; border: 2px solid var(--blue); background: var(--lime); pointer-events: auto; cursor: grab; appearance: none; -webkit-appearance: none; }
.range-track input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: var(--thumb); height: var(--thumb); border: 2px solid var(--blue); border-radius: 0; background: var(--lime); pointer-events: auto; cursor: grab; }
.range-track input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
.range-track input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--lime-deep); outline-offset: 2px; }
.range-bounds { display: flex; justify-content: space-between; margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.filter-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 15px; border-top: 1px solid var(--line); background: var(--soft-blue); }
.filter-panel-foot p { max-width: 640px; margin: 0; color: var(--muted); font-size: 12px; }
.filter-panel-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 18px; }
.filter-panel-actions .button { min-height: 42px; padding-inline: 18px; font-size: 13px; }
.result-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.result-head h2 { font-size: 48px; }
.directory-grid { grid-template-columns: repeat(3,1fr); }
.empty-state { grid-column: 1/-1; padding: 70px; border-block: 1px solid var(--line); background: white; text-align: center; }
.empty-state h3 { margin: 12px 0; font-size: 30px; }
.empty-state p { color: var(--muted); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 40px; font-size: 14px; }
.pagination a { color: var(--blue); font-weight: 750; }
.pagination span { color: var(--muted); }

.product-hero { overflow: hidden; background-color: var(--blue); color: white; }
.hero-shell { padding: 30px 0 40px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--muted-on-blue); font-size: 13px; }
.breadcrumb a, .breadcrumb strong { color: white; }
.breadcrumb span { color: #8fa9bd; }
.product-grid { display: grid; grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); min-height: 500px; }
.product-media { position: relative; min-height: 500px; display: grid; place-items: center; overflow: hidden; background: var(--soft-blue); background-image: linear-gradient(rgba(13,53,97,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(13,53,97,.08) 1px,transparent 1px); background-size: 74px 74px; }
.product-media::after { position: absolute; width: 400px; height: 400px; border: 1px solid rgba(13,53,97,.18); border-radius: 50%; content: ""; }
.media-note, .media-index { position: absolute; z-index: 2; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.media-note { top: 22px; left: 24px; }
.media-index { right: 24px; bottom: 20px; color: #7890a4; font-family: ui-monospace, monospace; }
/* The cheapest confirmed offer, as a tag on the photograph. Bottom left, which
   is the corner the racket's handle leaves empty and the diagonal opposite of
   the catalog number. */
.media-price-tag { position: absolute; z-index: 3; bottom: 20px; left: 24px; display: flex; flex-direction: column; gap: 2px; padding: 11px 15px 12px; border-left: 4px solid var(--lime); background: var(--blue); box-shadow: 0 12px 24px rgba(13,53,97,.2); color: white; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.media-price-tag span { color: var(--muted-on-blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.media-price-tag strong { display: flex; align-items: baseline; gap: 9px; font-size: 21px; line-height: 1.1; letter-spacing: -.03em; }
/* The arrow is what says the tag leads somewhere. */
.media-price-tag i { color: var(--lime); font-size: 15px; font-style: normal; transition: transform .18s ease; }
.media-price-tag:hover { background: #124478; box-shadow: 0 16px 30px rgba(13,53,97,.28); transform: translateY(-2px); }
.media-price-tag:hover i { transform: translateX(3px); }
.product-photo { position: relative; z-index: 1; width: min(82%,470px); height: 490px; object-fit: contain; mix-blend-mode: multiply; transform: rotate(-2deg); }
.product-copy { display: flex; flex-direction: column; justify-content: center; padding: 16px 0 16px 56px; }
.product-copy .eyebrow { color: var(--lime); }
.product-copy h1 { margin: 15px 0 20px; font-size: clamp(58px,6.8vw,96px); font-weight: 760; line-height: .88; letter-spacing: -.07em; }
.product-intro { max-width: 590px; margin: 0 0 27px; color: var(--muted-on-blue); font-size: 17px; line-height: 1.6; }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; }
.product-hero .button-ghost { border: 1px solid rgba(255,255,255,.5); background: transparent; color: white; }
.product-hero .button-ghost:hover { border-color: white; background: white; color: var(--blue); }
.profile-inline-stats { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.profile-inline-stats > div { padding: 24px 28px; border-right: 1px solid var(--line); }
.profile-inline-stats > div:last-child { border-right: 0; }
.profile-inline-stats span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 13px; }
.profile-inline-stats strong { font-size: 20px; letter-spacing: -.025em; }
/* The community rating, plainly under the actions: five paddles and the score,
   with nothing drawn around them. */
.hero-rating { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.hero-rating b { color: white; font-size: 23px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hero-rating small { color: var(--muted-on-blue); font-size: 13px; }
.hero-rating .rating-rackets-none { color: var(--muted-on-blue); font-size: 15px; }
/* Two identical rows of five paddles; the lime one is cut off at the score. */
.hero-rating .rating-rackets { --paddle: 15px; --paddle-gap: 4px; position: relative; display: block; width: calc(5 * var(--paddle) + 4 * var(--paddle-gap)); height: 20px; }
.hero-rating .rating-rackets-row { display: flex; gap: var(--paddle-gap); }
.hero-rating .rating-rackets-row .paddle-icon { flex: none; width: var(--paddle); margin: 0; color: rgba(255,255,255,.3); }
/* Cut on the right only: the tilted paddles overhang their boxes elsewhere. */
.hero-rating .rating-rackets-fill { position: absolute; top: 0; left: 0; width: 100%; clip-path: inset(-6px calc(100% - (var(--rating-full,0) * (var(--paddle) + var(--paddle-gap)) + var(--rating-part,0) * var(--paddle))) -6px -6px); }
.hero-rating .rating-rackets-fill .paddle-icon { color: var(--lime); }

/* The spec sheet. Five rows of the same shape, so the eye can run down the
   values, down the bars or down the sentences without re-reading the layout.
   Two kinds of bar, and the difference is deliberate: separate steps mean the
   maker picked one of a handful of categories, a continuous band means real
   grams. App\Racket\SpecSheet decides which row is which, and carries the
   wording. */
.spec-sheet { border: 1px solid var(--line); background: white; }
.spec-row { display: grid; grid-template-columns: 124px 136px minmax(190px,270px) minmax(0,1fr); gap: 30px; align-items: center; padding: 19px 26px; border-top: 1px solid var(--line); }
.spec-row:first-child { border-top: 0; }
.spec-name { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
/* The sprite is markup, not a picture: it has to occupy no space at all. */
.spec-icon-sprite { position: absolute; width: 0; height: 0; }
.spec-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--blue-bright); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.spec-row--unstated .spec-icon { stroke: #a3b3c0; }
.spec-value { font-size: 21px; letter-spacing: -.03em; }
.spec-meaning { margin: 0; color: var(--muted); font-size: 14px; }
/* The poles keep a column of their own on both sides, which is what lines all
   five bars up under each other however long "Handling" is. */
.spec-scale { display: grid; grid-template-columns: 60px minmax(0,1fr) 60px; gap: 11px; align-items: center; }
.spec-pole { color: var(--muted); font-size: 11px; font-weight: 650; }
.spec-scale .spec-pole:first-child { text-align: right; }
.spec-bar { position: relative; display: block; height: 10px; background: #d9e3ea; }
.spec-bar--stepped { display: flex; gap: 3px; background: none; }
.spec-bar--stepped i { flex: 1; background: #d9e3ea; }
.spec-bar--stepped i.is-here { background: var(--blue); }
.spec-bar--measured i { position: absolute; inset-block: 0; left: var(--weight-from, 0%); right: calc(100% - var(--weight-to, 100%)); background: var(--blue); }
/* The middle of the weight scale, to judge the band against. ::before, so the
   band paints over it once it reaches that far. */
.spec-bar--measured::before { position: absolute; inset-block: 0; left: 50%; width: 1px; background: white; content: ""; }
/* A hatched bar says "no data" without pretending to a position on the axis. */
.spec-bar--unstated { background: repeating-linear-gradient(135deg,#e6edf2 0 4px,#f2f6f9 4px 8px); }
.spec-row--unstated .spec-value { color: #8a9cab; font-weight: 500; }
.shop-section, .similar-section { background: #eef3f7; border-block: 1px solid var(--line); }
.shop-list { border: 1px solid var(--line); background: var(--line); }
.shop-row { position: relative; display: grid; grid-template-columns: minmax(190px,max-content) max-content minmax(150px,1fr) minmax(130px,200px); gap: 32px; align-items: center; min-height: 112px; padding: 20px 24px; background: white; transition: box-shadow .18s ease, transform .18s ease; }
.shop-row + .shop-row { border-top: 1px solid var(--line); }
.shop-retailer { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.shop-row strong { font-size: 18px; }
.shop-delivery, .shop-offer { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.shop-offer { align-items: flex-end; text-align: right; }
.shop-delivery small, .shop-offer small { color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.shop-delivery > span, .shop-offer > span { color: var(--muted); font-size: 11px; }
.shop-row .shop-destinations { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; font-weight: 600; }
.shop-destinations span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.shop-destinations i { font-size: 17px; font-style: normal; line-height: 1; }
.shop-delivery .shop-shipping-rate { color: var(--muted); font-weight: 400; }
.shop-row .shop-price { color: var(--ink); font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.shop-offer--unpriced strong { color: var(--muted); }
.shop-offer-status { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 650; white-space: nowrap; }
.shop-offer-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime-deep); box-shadow: 0 0 0 3px rgba(221,235,89,.4); }
.shop-offer-status--preorder i { background: var(--blue-bright); box-shadow: 0 0 0 3px rgba(36,104,159,.14); }
.shop-cta { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 11px 15px; border: 1px solid var(--blue); color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: .015em; transition: border-color .18s ease, color .18s ease, background .18s ease; margin-left: 20px; white-space: nowrap;}
.shop-cta > span:last-child { font-size: 18px; line-height: 1; transition: transform .18s ease; }
.shop-logo-frame { min-width: 0; width: 170px; height: 54px; display: grid; place-items: center; }
.shop-logo { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.shop-logo-frame--nuestro { justify-items: start; }
.shop-logo-frame--ofertas { width: 156px; padding: 8px 12px; background: var(--blue); }
.shop-logo-frame--ofertas .shop-logo { max-height: 38px; }
.shop-logo-frame--padel-point { width: 150px; justify-items: start; }
.shop-logo-frame--padel-market { justify-items: start; }
.shop-row:hover { z-index: 1; box-shadow: 0 12px 24px rgba(13,53,97,.11), inset 3px 0 0 var(--blue); transform: translateX(2px); }
.shop-row:hover .shop-cta { border-color: var(--blue); background: var(--blue); color: white; }
.shop-row:hover .shop-cta > span:last-child { transform: translateX(3px); }
.shop-empty { display: flex; flex-direction: column; gap: 7px; padding: 28px; background: white; }
.shop-empty strong { font-size: 19px; }
.shop-empty span { color: var(--muted); font-size: 13px; }
.community-section { border-block: 1px solid var(--line); background: white; }
.community-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-bottom: 36px; border: 1px solid var(--line); background: var(--line); }
.community-summary > div { min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px; background: var(--soft-blue); }
.community-summary span { color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.community-summary strong { display: flex; align-items: baseline; gap: 7px; font-size: 38px; line-height: 1; letter-spacing: -.055em; }
.community-summary small { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.community-summary-rating { background: var(--blue) !important; color: white; }
.community-summary-rating span, .community-summary-rating small { color: var(--muted-on-blue); }
.community-summary-rating strong { color: var(--lime); }
.analysis-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.data-module { padding: 34px; background: var(--background); }
.data-module h3 { margin: 0 0 24px; font-size: 22px; }
.dist-row { display: grid; grid-template-columns: 26px 1fr 90px; gap: 13px; align-items: center; margin: 13px 0; color: var(--muted); font-size: 13px; }
.dist-row strong { color: var(--ink); }
.bar { height: 9px; background: #d9e3ea; }
.bar i { display: block; height: 100%; background: var(--blue); }
.subscore-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.subscore-grid > div { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.subscore-grid span { display: block; color: var(--muted); font-size: 13px; }
.subscore-grid strong { display: block; margin-top: 7px; font-size: 25px; }
.community-list { border-top: 1px solid var(--line); }
.community-list > div { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.community-list span { color: var(--muted); font-size: 14px; }
.side-bar { display: flex; height: 14px; margin-top: 30px; background: #d9e3ea; }
.side-bar i:first-child { background: var(--blue); }
.side-bar i:nth-child(2) { background: var(--lime); }
.side-bar i:last-child { background: #8fa3b4; }
.side-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 11px; color: var(--muted); font-size: 12px; }
.community-reviews { margin-top: 70px; padding-top: 64px; border-top: 1px solid var(--line); }
.reviews-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; }
.review-intro h2 { margin: 10px 0 15px; font-size: clamp(42px,5vw,65px); line-height: .94; letter-spacing: -.06em; }
.review-intro p { color: var(--muted); }
.review { display: grid; grid-template-columns: 46px 1fr auto; gap: 16px; padding: 25px 0; border-top: 1px solid var(--line); }
.review:first-child { border-top: 0; padding-top: 0; }
.review h3 { margin: 0; font-size: 16px; }
.review h3 span { color: var(--blue); }
.review p { margin: 9px 0 0; color: #324a60; line-height: 1.65; }
.review time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.empty-review { padding: 30px 0; border-block: 1px solid var(--line); }
.empty-review h3 { margin: 0; }
.empty-review p { color: var(--muted); }

.auth-split { min-height: calc(100vh - 82px); display: grid; grid-template-columns: 1fr 1fr; background: white; }
.auth-form-panel { display: flex; justify-content: flex-end; padding: 64px clamp(35px,6vw,90px) 70px 24px; }
.auth-form-inner { width: min(560px,100%); }
.auth-form-inner h1, .auth-card h1, .verification-card h1 { margin: 12px 0 18px; font-size: clamp(48px,5vw,70px); line-height: .92; letter-spacing: -.065em; }
.auth-intro { max-width: 520px; margin-bottom: 29px; color: var(--muted); }
.auth-form-inner form > div, .auth-card form > div, .auth-card label { display: block; margin-bottom: 18px; }
.auth-form-inner label, .auth-card label > span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 750; }
.auth-card form > div > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 750; }
.auth-form-inner input, .auth-form-inner select, .auth-card input { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid var(--line); background: white; outline: 0; }
.auth-form-inner input:focus, .auth-form-inner select:focus, .auth-card input:focus { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.auth-form-inner .help-text, .auth-form-inner form small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.auth-form-inner ul { margin: 5px 0; padding: 0; color: #a23b32; font-size: 12px; list-style: none; }
.form-pair { display: grid!important; grid-template-columns: 1fr 1fr; align-items: end; gap: 12px; }
.form-pair > div { margin: 0!important; }
/* Month and year stay paired at any width, because they read as one date. Two
   handles do not: each carries its own label and hint, and both need room for
   a pasted profile link. */
@media (max-width: 720px) { .form-pair-stack { grid-template-columns: 1fr; gap: 18px; } }
.slug-preview { margin: -8px 0 18px!important; padding: 12px 14px; border-left: 3px solid var(--lime); background: var(--soft-blue); }
.slug-preview span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.slug-preview strong { display: block; margin-top: 2px; color: var(--blue); font-size: 13px; word-break: break-all; }
.button-full { width: 100%; }
.auth-footnote { color: var(--muted); font-size: 13px; text-align: center; }
.auth-footnote a { color: var(--blue); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.auth-story-panel { position: relative; min-height: 820px; overflow: hidden; padding: 70px; background: var(--blue); color: white; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 74px 74px; }
.auth-story-panel::after { position: absolute; right: -160px; bottom: -190px; width: 600px; height: 600px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; box-shadow: 0 0 0 100px rgba(255,255,255,.045),0 0 0 200px rgba(255,255,255,.025); content: ""; }
.auth-story-copy { position: relative; z-index: 3; max-width: 600px; }
.auth-story-copy h2 { margin: 12px 0 18px; font-size: clamp(47px,5vw,72px); line-height: .93; letter-spacing: -.06em; }
.auth-story-copy p { max-width: 540px; color: #c8d7e2; }
.auth-photo-stack { position: absolute; z-index: 2; inset: auto 0 0; height: 470px; }
.auth-photo-card { position: absolute; width: 245px; padding: 14px; background: #eef3f7; color: var(--ink); box-shadow: 0 24px 40px rgba(13,53,97,.35); }
.auth-photo-card img { width: 100%; height: 280px; object-fit: contain; mix-blend-mode: multiply; }
.auth-photo-card b { display: block; padding: 9px 3px 3px; font-size: 13px; }
.auth-photo-card.first { left: 14%; bottom: 50px; transform: rotate(-5deg); }
.auth-photo-card.second { right: 12%; bottom: 10px; transform: rotate(5deg); }
.auth-single, .auth-simple, .verification-page { min-height: calc(100vh - 82px); display: grid; place-items: center; padding: 70px 24px; background: var(--soft-blue); background-image: linear-gradient(rgba(13,53,97,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(13,53,97,.07) 1px,transparent 1px); background-size: 74px 74px; }
.auth-card, .verification-card { width: min(560px,100%); padding: 46px; border-top: 4px solid var(--blue); background: white; box-shadow: 0 24px 60px rgba(13,53,97,.12); }
.auth-card h1, .verification-card h1 { font-size: 52px; }
.form-error { margin-bottom: 18px; padding: 13px 15px; border-left: 4px solid #b64d42; background: #fff0ed; color: #78322b; font-size: 13px; }
.verification-card { text-align: center; }
.verification-icon { display: grid; width: 74px; height: 74px; margin: 0 auto 24px; place-items: center; border-radius: 50%; background: var(--lime); color: var(--blue); font-size: 27px; font-weight: 850; }
.verification-card p { color: var(--muted); }
.verification-card form { margin: 26px 0 18px; }

.page-profile { background: var(--blue); }
/* The snapshot reads as one band: the feature panel runs into the right page
   edge and the stats rule into the left one, both clipped by the section. */
.profile-snapshot { overflow-x: clip; border-bottom: 1px solid var(--line); background: white; }
.profile-snapshot-grid { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); }
.profile-summary { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 22px 56px 0 0; }
.profile-summary-identity { display: flex; align-items: center; gap: 24px; margin-top: 20px; }
.profile-avatar { flex: 0 0 auto; display: grid; width: 92px; height: 92px; place-items: center; border-radius: 50%; background: var(--blue); color: var(--lime); font-size: 23px; font-weight: 850; }
.profile-summary h1 { overflow-wrap: anywhere; margin: 8px 0 7px; font-size: clamp(48px,5vw,72px); line-height: .88; letter-spacing: -.068em; }
.profile-summary h1.long { font-size: clamp(42px,4.2vw,60px); }
.profile-summary-identity p { margin: 0; color: var(--muted); font-size: 14px; }
.profile-summary-bio { max-width: 570px; margin: 24px 0 0; color: var(--ink); font-size: 15px; line-height: 1.6; }
/* Named chips instead of brand glyphs: the site draws its own marks, and the
   handle is worth reading, because it is what a visitor searches for when the
   link is blocked or the app opens on a different account. */
.profile-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.profile-social a { display: inline-flex; align-items: baseline; gap: 9px; padding: 8px 12px; border: 1px solid var(--line); color: var(--blue); transition: border-color .18s ease, background-color .18s ease; }
.profile-social a:hover { border-color: var(--blue); background: var(--soft-blue); }
.profile-social span { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.profile-social b { overflow-wrap: anywhere; color: var(--muted); font-size: 13px; font-weight: 500; }
/* Sits above the identity, right against the feature panel: the owner reads
   the page as their own before reading the name. A quiet link, not a button —
   the page's own actions belong to the rackets, not to the profile. */
.profile-actions { display: flex; justify-content: flex-end; gap: 10px; }
.profile-actions .text-link { font-size: 13px; }
/* Same treatment as the racket detail quick facts: three columns that reach
   from the page edge to the feature panel and sit flush on the section floor. */
.profile-inline-stats { position: relative; grid-template-columns: repeat(3,1fr); margin-top: auto; margin-right: -56px; }
.profile-inline-stats::before { position: absolute; top: -1px; right: 100%; width: 100vw; height: 1px; background: var(--line); content: ""; }
.profile-inline-stats > div:first-child { padding-left: 0; }
.profile-active-feature { position: relative; display: grid; grid-template-columns: minmax(180px,.92fr) minmax(0,1.08fr); align-items: stretch; gap: 30px; padding: 34px; background: var(--blue); color: white; }
.profile-active-stage { display: grid; min-height: 360px; place-items: center; overflow: hidden; background: var(--soft-blue); background-image: linear-gradient(rgba(13,53,97,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(13,53,97,.08) 1px,transparent 1px); background-size: 44px 44px; }
.profile-active-stage img { width: 92%; height: 330px; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 18px 16px rgba(13,53,97,.18)); }
.profile-active-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding-block: 12px; }
.profile-active-copy h2 { overflow-wrap: anywhere; margin: 13px 0 17px; font-size: clamp(36px,3.4vw,48px); line-height: .92; letter-spacing: -.06em; }
.profile-active-copy > p { margin: 0; color: #c5d5e0; font-size: 14px; line-height: 1.6; }
.profile-active-copy .status-label { margin-top: 13px; }
.profile-active-footer { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 34px; }
.profile-active-rating { display: grid; color: var(--lime); font-size: 19px; font-weight: 850; }
.profile-active-rating small { margin-top: 3px; color: #c5d5e0; font-size: 10px; font-weight: 400; }
.profile-active-links { display: grid; justify-items: end; gap: 5px; }
.profile-active-links a { color: white; font-size: 11px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.profile-no-current { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 50px; background: var(--blue); color: white; }
.profile-active-feature::after, .profile-no-current::after { position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; background: var(--blue); content: ""; }
.profile-no-current h2 { max-width: 500px; margin: 12px 0 25px; font-size: 42px; line-height: .98; letter-spacing: -.05em; }
.profile-extra-current { padding: 36px 0; border-bottom: 1px solid var(--line); background: white; }
.profile-compact-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 25px; }
.profile-compact-head h2 { margin: 7px 0 0; font-size: clamp(36px,4.5vw,52px); line-height: .95; letter-spacing: -.055em; }
.profile-compact-head > p { margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
.profile-compact-head > strong { color: var(--blue); font-size: 28px; }
.profile-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.profile-mini-racket { display: grid; grid-template-columns: 105px 1fr; align-items: center; min-height: 115px; border: 1px solid var(--line); background: var(--background); }
.profile-mini-media { min-height: 113px; display: grid; place-items: center; background: var(--soft-blue); }
.profile-mini-media img { width: 88%; height: 105px; object-fit: contain; mix-blend-mode: multiply; }
.profile-mini-media .racket-fallback b { width: 44px; height: 58px; border-width: 3px; font-size: 12px; }
.profile-mini-racket > div { min-width: 0; padding: 15px; }
.profile-mini-racket h3 { overflow-wrap: anywhere; margin: 5px 0 0; font-size: 18px; line-height: 1.05; letter-spacing: -.035em; }
.profile-history { padding: 58px 0 74px; background: var(--background); }
.profile-brand-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 18px; margin: 0; padding: 0; list-style: none; }
.profile-brand-list li { position: relative; display: grid; width: 130px; height: 66px; place-items: center; padding: 13px 16px; border: 1px solid var(--line); background: white; }
.profile-brand-logo { display: grid; width: 100%; height: 100%; place-items: center; }
.profile-brand-logo img { display: block; width: auto; max-width: 98px; height: auto; max-height: 27px; object-fit: contain; filter: grayscale(1) brightness(0); }
.profile-brand-logo b { color: var(--ink); font-size: 13px; font-weight: 850; letter-spacing: -.02em; text-align: center; }
.profile-brand-count { position: absolute; top: -10px; right: -10px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--background); color: var(--lime); font-size: 11px; font-weight: 850; line-height: 1; }
.profile-brand-list li.has-dark-logo { background: #242424; }
.profile-brand-list li.has-dark-logo img { max-width: 102px; max-height: 32px; filter: none; }
.profile-brand-list li.has-blend-logo img { filter: grayscale(1) contrast(4); mix-blend-mode: multiply; }
.profile-history-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.profile-history-card { display: flex; min-width: 0; flex-direction: column; background: white; }
.profile-history-media { min-height: 220px; display: grid; place-items: center; overflow: hidden; background: var(--soft-blue); }
.profile-history-media img { width: 88%; height: 205px; object-fit: contain; mix-blend-mode: multiply; }
.profile-history-media .racket-fallback b { width: 82px; height: 105px; font-size: 19px; }
.profile-history-copy { display: flex; flex-direction: column; padding: 24px; }
.profile-history-copy h3 { overflow-wrap: anywhere; margin: 7px 0 12px; font-size: 26px; line-height: 1; letter-spacing: -.045em; }
.profile-history-copy > p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.profile-history-footer { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 24px; }
.profile-history-footer > span:first-child { color: var(--blue); font-size: 14px; font-weight: 850; }
.profile-history-footer > span:last-child { display: grid; justify-items: end; gap: 3px; }
.profile-history-footer a { color: var(--blue); font-size: 10px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.status-label { display: inline-flex; width: fit-content; margin-bottom: 12px; padding: 5px 8px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.status-label.current { border-color: var(--lime); background: var(--lime); color: var(--blue); }
.profile-quiet-empty { grid-column: 1/-1; display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 25px; padding: 20px 24px; background: white; color: var(--muted); font-size: 13px; }
.profile-quiet-empty strong { color: var(--ink); font-size: 15px; }
.profile-wishlist { padding: 52px 0 62px; background: #eef3f7; }

.account-form-page, .collection-form-page { min-height: calc(100vh - 82px); padding: 78px 0; background: var(--soft-blue); }
.account-form-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: start; }
.account-form-grid aside { position: sticky; top: 35px; }
.account-form-grid aside h1 { margin: 12px 0 22px; font-size: clamp(50px,6vw,78px); line-height: .92; letter-spacing: -.065em; }
.account-form-grid aside p { max-width: 470px; color: var(--muted); }
.account-form-card { padding: 40px; border-top: 4px solid var(--blue); background: white; }
.account-form-card form > div { margin-bottom: 22px; }
.account-form-card label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 750; }
.account-form-card select, .account-form-card textarea, .account-form-card input[type="text"] { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); background: white; }
.account-form-card textarea { resize: vertical; }
.account-form-card form small { color: var(--muted); font-size: 11px; }
.account-form-card form ul { padding: 0; color: #a23b32; font-size: 12px; list-style: none; }
.locked-identity { margin-bottom: 28px; padding: 18px; border-left: 4px solid var(--lime); background: var(--soft-blue); }
.locked-identity span, .locked-identity small { display: block; color: var(--muted); font-size: 11px; }
.locked-identity strong { display: block; margin: 4px 0; font-size: 21px; }

.collection-form-page { background: white; }
.collection-form-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; }
.collection-product-media { min-height: 390px; display: grid; place-items: center; margin: 22px 0; background: var(--soft-blue); background-image: linear-gradient(rgba(13,53,97,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(13,53,97,.07) 1px,transparent 1px); background-size: 58px 58px; }
.collection-product-media img { width: 82%; height: 360px; object-fit: contain; mix-blend-mode: multiply; }
.collection-product h1 { margin: 7px 0 20px; font-size: 52px; line-height: .95; letter-spacing: -.055em; }
.collection-form-card { padding: 46px; border-top: 4px solid var(--blue); background: var(--soft-blue); }
.step-number { color: var(--blue-bright); font: 750 11px/1 ui-monospace, monospace; }
.collection-form-card h2 { margin: 15px 0; font-size: 46px; line-height: .98; letter-spacing: -.05em; }
.collection-form-card > p { color: var(--muted); }
.status-choice { margin: 30px 0!important; }
.status-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.status-choice input { position: absolute; opacity: 0; pointer-events: none; }
.status-choice label { display: flex; min-height: 90px; align-items: center; justify-content: center; padding: 18px; border: 1px solid var(--line); background: white; font-weight: 800; text-align: center; cursor: pointer; }
.status-choice input:checked + label { border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue); }
.rating-choice { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.rating-choice input { position: absolute; opacity: 0; pointer-events: none; }
.rating-choice label { position: relative; display: grid; min-height: 64px; place-items: end center; padding: 11px; border: 1px solid var(--line); background: white; color: var(--muted); font-weight: 750; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.rating-choice label:hover { border-color: var(--blue-bright); color: var(--blue); }
.rating-choice label::before { position: absolute; top: 12px; width: 16px; height: 20px; border-radius: 49% 49% 42% 42%; background: #c3d2de; content: ""; transform: rotate(-8deg); transition: background-color .16s ease; }
.rating-choice input:checked + label { border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); background: var(--soft-blue); color: var(--blue); font-weight: 850; }
.rating-choice input:checked + label::before { background: var(--blue); }

/* The overall rating: five stars that fill by halves. The nine radios below
   them carry the value, their labels cover one half each, and the fill is
   driven by :has(), so a click still paints the row without JavaScript. The
   controller only adds dragging across the scale. */
.rating-stars-sprite { position: absolute; width: 0; height: 0; }
.rating-stars { --star: 40px; --star-gap: 8px; --rating-full: 0; --rating-part: 0; position: relative; width: calc(5 * var(--star) + 4 * var(--star-gap)); cursor: pointer; touch-action: pan-y; user-select: none; }
.rating-stars-row { display: flex; gap: var(--star-gap); margin: 0; }
.rating-star { display: block; flex: none; width: var(--star); height: var(--star); color: #ccd8e2; fill: currentColor; }
/* A whole star carries its gap with it, a half step stops in the middle of
   the next one, which is where the shape is symmetrical. */
.rating-stars-fill { position: absolute; top: 0; left: 0; clip-path: inset(0 calc(100% - (var(--rating-full) * (var(--star) + var(--star-gap)) + var(--rating-part) * var(--star))) 0 0); transition: clip-path .14s ease; }
.rating-stars-fill .rating-star { color: var(--blue); }
.rating-stars-steps { position: absolute; inset: 0; display: flex; }
.rating-stars-steps input { position: absolute; opacity: 0; pointer-events: none; }
/* The scale has no 0.5, so the whole first star is one target and twice as
   wide as every half that follows it. */
.rating-stars-step { flex: 1; margin: 0; cursor: pointer; }
.rating-stars-step:first-of-type { flex: 2; }
/* Keyboard focus rings the whole row: which step is focused is already shown
   by the fill, and a box around one half star reads as a glitch. */
.rating-stars:has(input:focus-visible) { outline: 2px solid var(--blue-bright); border-radius: 4px; outline-offset: 7px; }
.rating-stars:has(input[value="1"]:checked) { --rating-full: 1; --rating-part: 0; }
.rating-stars:has(input[value="1.5"]:checked) { --rating-full: 1; --rating-part: .5; }
.rating-stars:has(input[value="2"]:checked) { --rating-full: 2; --rating-part: 0; }
.rating-stars:has(input[value="2.5"]:checked) { --rating-full: 2; --rating-part: .5; }
.rating-stars:has(input[value="3"]:checked) { --rating-full: 3; --rating-part: 0; }
.rating-stars:has(input[value="3.5"]:checked) { --rating-full: 3; --rating-part: .5; }
.rating-stars:has(input[value="4"]:checked) { --rating-full: 4; --rating-part: 0; }
.rating-stars:has(input[value="4.5"]:checked) { --rating-full: 4; --rating-part: .5; }
.rating-stars:has(input[value="5"]:checked) { --rating-full: 5; --rating-part: 0; }
.rating-stars-hint { margin: 13px 0 0; color: var(--muted); font-size: 12px; }
/* A pointer that can hover previews the step it would set. Touch devices keep
   a stale hover after a tap, so they are left out. */
@media (hover: hover) {
    .rating-stars:has(.rating-stars-step[data-value="1"]:hover) { --rating-full: 1; --rating-part: 0; }
    .rating-stars:has(.rating-stars-step[data-value="1.5"]:hover) { --rating-full: 1; --rating-part: .5; }
    .rating-stars:has(.rating-stars-step[data-value="2"]:hover) { --rating-full: 2; --rating-part: 0; }
    .rating-stars:has(.rating-stars-step[data-value="2.5"]:hover) { --rating-full: 2; --rating-part: .5; }
    .rating-stars:has(.rating-stars-step[data-value="3"]:hover) { --rating-full: 3; --rating-part: 0; }
    .rating-stars:has(.rating-stars-step[data-value="3.5"]:hover) { --rating-full: 3; --rating-part: .5; }
    .rating-stars:has(.rating-stars-step[data-value="4"]:hover) { --rating-full: 4; --rating-part: 0; }
    .rating-stars:has(.rating-stars-step[data-value="4.5"]:hover) { --rating-full: 4; --rating-part: .5; }
    .rating-stars:has(.rating-stars-step[data-value="5"]:hover) { --rating-full: 5; --rating-part: 0; }
}
.rating-form .rating-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.rating-form .rating-head label, .rating-form .rating-head .eyebrow { margin: 0; }
.rating-form .rating-head small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rating-caption, .rating-counter { color: var(--blue); font-size: 13px; font-weight: 800; white-space: nowrap; }
.rating-caption.empty, .rating-counter { color: var(--muted); font-weight: 650; }
.rating-review textarea { min-height: 118px; }
.rating-review small { display: block; margin-top: 9px; }
.review-mention-picker { position: relative; margin-top: 20px; padding: 18px; border: 1px solid var(--line); background: var(--soft-blue); }
.review-mention-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.review-mention-heading label { margin: 0; }
.review-mention-heading small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.review-mention-picker > p { margin: 5px 0 13px; color: var(--muted); font-size: 12px; }
.review-mention-search { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); background: white; font: inherit; }
.review-mention-selected { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; padding: 0; list-style: none; }
.review-mention-selected:empty { display: none; }
.review-mention-selected li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #b8c9d5; background: white; color: var(--blue); font-size: 12px; font-weight: 750; }
.review-mention-selected button { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 10px; text-decoration: underline; cursor: pointer; }
.review-mention-results { position: absolute; z-index: 5; right: 18px; left: 18px; max-height: 230px; overflow-y: auto; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); background: white; box-shadow: 0 12px 24px rgba(13,53,97,.12); list-style: none; }
.review-mention-results li + li { border-top: 1px solid var(--line); }
.review-mention-results button { display: grid; width: 100%; gap: 2px; padding: 10px 12px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.review-mention-results li[aria-selected="true"] button, .review-mention-results button:hover { background: var(--soft-blue); }
.review-mention-results strong { font-size: 13px; }
.review-mention-results small { color: var(--muted); font-size: 11px; }
.review-mention-picker .review-mention-status { margin-bottom: 0; font-size: 11px; }
.rating-details { padding-block: 26px; border-block: 1px solid var(--line); }
.rating-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; padding-block: 11px; }
.rating-row + .rating-row { border-top: 1px solid var(--line); }
.rating-row-label label { margin: 0; }
.rating-row-label .rating-caption { font-size: 12px; font-weight: 700; }
.rating-choice-compact { grid-template-columns: auto repeat(5,42px); gap: 4px; }
.rating-choice-compact label { min-height: 42px; padding: 0; place-items: center; font-size: 14px; }
.rating-choice-compact label::before { content: none; }
.rating-choice-compact label[for$="_placeholder"] { padding-inline: 12px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rating-choice-compact input:checked + label[for$="_placeholder"] { border-color: var(--line); box-shadow: none; background: var(--background); color: var(--muted); }
.entry-brand { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; margin-top: 18px; padding: 11px 17px; border: 1px solid var(--line); background: white; }
/* Several brand SVGs carry a viewBox but no intrinsic size, so the height is
   explicit; `auto` collapses them to nothing inside the flex chip. */
.entry-brand img { width: auto; max-width: 128px; height: 32px; object-fit: contain; mix-blend-mode: multiply; }
.entry-brand.on-dark { border-color: #242424; background: #242424; }
.entry-brand.on-dark img { mix-blend-mode: normal; }
.rating-status { margin: 30px 0 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.rating-status > label { display: block; margin-bottom: 11px; font-size: 13px; font-weight: 750; }
.rating-status .status-choice label { min-height: 66px; padding: 14px; font-size: 14px; }
.rating-remove-row { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; }
.rating-remove-row .rating-remove { grid-column: 2; }
.rating-remove { margin-top: 26px; }
.rating-remove p { margin-bottom: 13px; color: var(--muted); font-size: 12px; }
.rating-remove button { padding: 0; border: 0; background: transparent; color: #a23b32; font-size: 13px; font-weight: 750; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: pointer; }
.action-row form { margin: 0; }
.pending-notice { display: inline-flex; margin-bottom: 16px; padding: 8px 11px; border: 1px solid #d5aa34; background: #fff8dc; color: #785600; font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.status-label.pending { border-color: #d5aa34; background: #fff8dc; color: #785600; }
/* Only the member ever sees this: an entry a moderator took off the public site
   stays in their own history, where it has to say so. */
.status-label.unpublished { border-color: #d98a84; background: #fde8e6; color: #9f1a12; }
.empty-state .text-link { display: inline-flex; margin-top: 15px; }
.auth-reset-link { display: inline-flex; margin-top: 16px; color: var(--blue); font-size: 13px; font-weight: 750; }

.analytics-consent { position: fixed; z-index: 1000; right: 18px; bottom: 18px; width: min(520px, calc(100% - 36px)); }
.analytics-consent-card { padding: 25px 28px; border-top: 4px solid var(--lime); background: var(--blue); color: white; box-shadow: 0 18px 45px rgba(13,53,97,.28); }
.analytics-consent-card h2 { margin: 8px 0 10px; font-size: 29px; line-height: 1; letter-spacing: -.045em; }
.analytics-consent-card p { margin: 0; color: #cad8e3; font-size: 13px; line-height: 1.5; }
.analytics-consent-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.analytics-consent-actions .button-ghost { color: var(--blue); }
.footer-links li { display: inline; margin-right: 10px; }
.footer-settings { padding: 0; border: 0; background: transparent; color: var(--muted-on-blue); font: inherit; font-size: 14px; font-weight: 750; text-align: left; cursor: pointer; }
.footer-settings:hover { text-decoration: underline; text-underline-offset: 4px; }

.add-racket-page { min-height: calc(100vh - 82px); padding: 72px 0 90px; background: var(--soft-blue); }
.add-racket-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; margin-bottom: 42px; }
.add-racket-head h1 { max-width: 820px; margin: 12px 0 0; font-size: clamp(58px,7vw,92px); line-height: .9; letter-spacing: -.07em; }
.add-racket-head > p { max-width: 510px; margin: 0 0 8px; color: var(--muted); font-size: 16px; }
.add-racket-layout { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 24px; align-items: start; }
.add-search-panel { border-top: 4px solid var(--blue); background: white; }
.add-search-form { display: grid; grid-template-columns: 1fr auto; gap: 1px; padding: 24px; background: var(--line); }
.add-search-form label { display: block; padding: 10px 14px; background: white; }
.add-search-form label > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.add-search-form input { width: 100%; min-height: 34px; padding: 0; border: 0; outline: 0; background: white; font-size: 16px; }
.add-search-form .button { min-width: 165px; }
.add-result-head { display: flex; align-items: end; justify-content: space-between; gap: 25px; padding: 30px 28px 23px; border-bottom: 1px solid var(--line); }
.add-result-head h2 { margin: 6px 0 0; font-size: 31px; line-height: 1; letter-spacing: -.045em; }
.add-result-head p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.add-result-list { padding-inline: 28px; }
.add-result { display: grid; grid-template-columns: 118px minmax(0,1fr) auto; gap: 22px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.add-result:last-child { border-bottom: 0; }
.add-result-media { min-height: 112px; display: grid; place-items: center; overflow: hidden; background: var(--soft-blue); background-image: linear-gradient(rgba(13,53,97,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(13,53,97,.07) 1px,transparent 1px); background-size: 34px 34px; }
.add-result-media img { width: 90%; height: 105px; object-fit: contain; mix-blend-mode: multiply; }
.add-result-media .racket-fallback b { width: 50px; height: 65px; border-width: 3px; font-size: 13px; }
.add-result-copy h3 { margin: 5px 0 7px; font-size: 25px; line-height: 1.04; letter-spacing: -.04em; }
.add-result-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.add-result-actions { min-width: 116px; display: grid; justify-items: stretch; gap: 9px; text-align: center; }
.add-result-actions .text-link { font-size: 11px; }
.add-no-results { padding: 72px 24px; text-align: center; }
.add-no-results h3 { margin: 10px 0; font-size: 31px; }
.add-no-results p { max-width: 530px; margin-inline: auto; color: var(--muted); }
.add-pagination { margin: 0 28px; padding: 27px 0 30px; border-top: 1px solid var(--line); }
.add-fallback-panel { position: sticky; top: 24px; padding: 34px; background: var(--blue); color: white; }
.add-fallback-panel h2 { margin: 12px 0 18px; font-size: 43px; line-height: .95; letter-spacing: -.055em; }
.add-fallback-panel p { color: #cad8e3; font-size: 14px; }
.add-fallback-panel ul { margin: 24px 0 30px; padding: 22px 0; border-block: 1px solid rgba(255,255,255,.2); color: #cad8e3; font-size: 13px; list-style-position: inside; }
.add-fallback-panel li + li { margin-top: 8px; }
.add-fallback-panel .button { width: 100%; border-color: white; }

@media (max-width: 1040px) {
    .header-row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px 18px; padding-block: 12px; }
    .brand { grid-column: 1; }
    .header-actions { grid-column: 2; }
    .header-discovery { grid-column: 1 / -1; grid-row: 2; gap: 18px; }
    .site-search { width: 100%; max-width: none; }
    .main-nav { flex: 0 0 auto; align-self: stretch; font-size: 13px; }
    .main-nav a { display: flex; align-items: center; padding: 0 2px; }
    .home-hero-grid, .product-grid, .auth-split, .account-form-grid, .collection-form-grid, .add-racket-head, .add-racket-layout { grid-template-columns: 1fr; }
    .home-hero-grid { gap: 45px; }
    .home-hero-copy { padding-top: 20px; }
    .product-media { min-height: 500px; }
    .product-copy { padding: 40px 0 0; }
    .analysis-grid, .reviews-layout, .story-grid { grid-template-columns: 1fr; }
    .reviews-layout { gap: 44px; }
    .filter-grid .button { min-height: 56px; }
    .racket-grid, .brand-grid { grid-template-columns: repeat(2,1fr); }
    .brand-index-grid { grid-template-columns: 1fr; }
    .auth-form-panel { justify-content: center; padding: 60px 35px; }
    .auth-story-panel { min-height: 720px; }
    .account-form-grid, .collection-form-grid { gap: 45px; }
    .account-form-grid aside { position: static; }
    .rating-remove-row { grid-template-columns: 1fr; gap: 45px; }
    .rating-remove-row .rating-remove { grid-column: 1; }
    .add-racket-head { gap: 25px; }
    .add-fallback-panel { position: static; }
    .profile-snapshot-grid { grid-template-columns: 1fr; }
    .profile-summary { min-height: 420px; padding: 54px 0 45px; }
    .profile-active-feature { min-height: 430px; }
    /* Stacked, every panel keeps the page gutter on both sides. */
    .profile-active-feature::after, .profile-no-current::after, .profile-inline-stats::before { content: none; }
    .profile-inline-stats { margin-right: 0; }
    .profile-history-grid, .profile-mini-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
    .intro-grid { grid-template-columns: 1fr; gap: 28px; }
    .directory-intro h1 { max-width: 760px; }
    .directory-intro p { max-width: 680px; }
    .directory-spotlight, .spotlight-slider, .spotlight-slide, .spotlight-link { min-height: 230px; }
    .spotlight-link { grid-template-columns: minmax(190px,.6fr) minmax(0,1.4fr); }
    .spotlight-media { min-height: 230px; }
    .spotlight-media img { height: 178px; }
    .community-summary { grid-template-columns: repeat(2,1fr); }
    .spec-row { grid-template-columns: 118px 124px minmax(0,1fr); gap: 12px 22px; }
    .spec-meaning { grid-column: 1 / -1; }
    .review-feed-card { grid-template-columns: 160px minmax(0,1fr); }
    .review-feed-media { min-height: 100%; }
    .review-feed-media img { height: 148px; }
    .footer-grid { grid-template-columns: 1.2fr .8fr; gap: 40px; }
    .footer-note { text-align: left; }
}

@media (max-width: 720px) {
    .shell, .hero-shell { width: min(var(--max), calc(100% - 28px)); }
    .header-row { min-height: 70px; gap: 9px 12px; padding-block: 10px; }
    .header-discovery { gap: 12px; }
    .brand { gap: 8px; font-size: 18px; }
    .brand-mark { width: 36px; height: 36px; }
    .site-search { min-width: 0; height: 44px; grid-template-columns: minmax(0,1fr) 44px; }
    .site-search input { padding-inline: 12px; font-size: 16px; }
    .main-nav { font-size: 12px; }
    .header-actions .text-link { display: none; }
    .header-actions .button { min-height: 40px; padding-inline: 11px; font-size: 12px; }
    .home-hero { --padel-bg-01-inset: -80px auto auto -35px; --padel-bg-01-width: 380px; --padel-bg-01-height: 720px; --padel-bg-opacity: .07; --padel-bg-rotation: -6deg; }
    .home-hero-grid { min-height: auto; padding-block: 52px; }
    .home-hero h1 { font-size: 56px; }
    .directory-intro h1 { font-size: 42px; }
    .home-hero-copy > p { font-size: 16px; }
    .hero-actions, .hero-actions .button, .action-row, .action-row .button { width: 100%; }
    .hero-racket-stage { min-height: 470px; --feather: 30px; }
    .hero-stage-photo { object-position: center 52%; }
    .hero-stage-cta { left: calc(var(--feather) + 10px); bottom: calc(var(--feather) + 10px); }
    .hero-stage-credit { right: 4px; bottom: 2px; }
    .directory-spotlight, .spotlight-slider, .spotlight-slide, .spotlight-link { min-height: 138px; }
    .spotlight-link { grid-template-columns: 100px minmax(0,1fr); }
    .spotlight-media { min-height: 138px; padding: 28px 8px 12px; }
    .spotlight-media::after { width: 78px; height: 78px; }
    .spotlight-image-fallback { width: 48px; height: 65px; border-width: 3px; font-size: 14px; }
    .spotlight-image-fallback::after { bottom: -20px; width: 6px; height: 22px; }
    .spotlight-media img { width: 100%; height: 104px; }
    .spotlight-label { top: 9px; left: 9px; font-size: 7px; }
    .spotlight-index { left: 9px; bottom: 8px; font-size: 8px; }
    .spotlight-copy { padding: 31px 12px 25px; }
    .spotlight-copy-main > strong { margin-block: 4px; padding-right: 45px; font-size: 20px; }
    .spotlight-copy-main > small { display: none; }
    .spotlight-metric { margin-top: 8px; padding-top: 7px; }
    .spotlight-metric b { font-size: 19px; }
    .spotlight-controls { top: 8px; right: 8px; }
    .spotlight-arrow { width: 24px; height: 24px; font-size: 13px; }
    .spotlight-dots { right: 9px; bottom: 8px; }
    .spotlight-dot { width: 13px; height: 3px; }
    .filter-grid, .racket-grid, .brand-grid, .footer-grid { grid-template-columns: 1fr; }
    .filter-panel { grid-template-columns: 1fr; }
    .filter-summary-hint { display: none; }
    .filter-panel-foot { align-items: stretch; flex-direction: column; }
    .filter-panel-actions { justify-content: space-between; }
    .shop-row { grid-template-columns: minmax(0,1fr) auto; gap: 16px; min-height: 0; padding: 18px; }
    .shop-retailer { grid-column: 1; }
    .shop-delivery { grid-column: 1; }
    .shop-offer { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; }
    .shop-cta { grid-column: 1 / -1; }
    .shop-logo-frame, .shop-logo-frame--nuestro, .shop-logo-frame--ofertas, .shop-logo-frame--padel-point, .shop-logo-frame--padel-market { width: 104px; height: 32px; justify-items: start; }
    .shop-logo-frame--ofertas { padding: 4px 7px; }
    .shop-row .shop-logo { max-width: 96px; max-height: 28px; }
    .shop-row .shop-price { font-size: 22px; }
    .shop-offer-status { gap: 5px; font-size: 9px; letter-spacing: -.01em; }
    .shop-offer-status i { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(221,235,89,.4); }
    .shop-cta { min-height: 40px; padding: 9px 14px; font-size: 11px; }
    .most-collected-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .most-collected-grid .racket-card:nth-child(n+5) { display: none; }
    .most-collected-grid .racket-card-media { min-height: 190px; }
    .most-collected-grid .racket-card-media img { height: 174px; }
    .most-collected-grid .racket-card-copy { padding: 15px; }
    .most-collected-grid .racket-card-copy > strong { margin-bottom: 15px; font-size: 19px; }
    .most-collected-grid .card-eyebrow { font-size: 9px; }
    .most-collected-grid .card-meta { align-items: flex-start; flex-direction: column; gap: 4px; font-size: 10px; }
    .spec-row { grid-template-columns: minmax(0,1fr) auto; gap: 11px 14px; padding: 16px 15px; }
    .spec-value { font-size: 19px; text-align: right; }
    .spec-scale { grid-column: 1 / -1; }
    .brand-card-media { min-height: 158px; padding: 28px; }
    .brand-card-copy > strong { font-size: 34px; }
    .brand-index-intro { padding: 30px 0 34px; }
    /* The directory hides its hero paragraph on a phone because the spotlight
       carries the page; here that paragraph is the page's own introduction. */
    .brand-index-intro .brand-index-copy p, .review-index-intro .review-index-copy p { display: block; margin-top: 12px; font-size: 14px; }
    .brand-index-facts, .review-index-facts { flex-wrap: nowrap; box-shadow: 6px 6px 0 rgba(255,255,255,.07); }
    .brand-index-facts > div, .review-index-facts > div { min-width: 0; flex: 1 1 0; padding: 18px 10px; }
    .brand-index-facts dt, .review-index-facts dt { min-height: 2.4em; line-height: 1.2; }
    .brand-index-facts dt span, .review-index-facts dt span { display: block; }
    .brand-jump-band { padding: 18px 0 22px; }
    .brand-jump-strip .profile-brand-count { box-shadow: 0 0 0 3px var(--soft-blue); }
    .brand-index-card { grid-template-columns: 1fr; }
    .brand-index-card .brand-card-media { min-height: 132px; padding: 22px 16px; }
    .brand-index-card .brand-card-watermark { font-size: 44px; }
    .brand-index-body { padding: 20px; }
    .review-index-list { padding-top: 44px; }
    .review-feed-card { grid-template-columns: 104px minmax(0,1fr); }
    .review-feed-media img { height: 112px; }
    .review-feed-media .racket-fallback b { width: 48px; height: 62px; border-width: 3px; font-size: 12px; }
    .review-feed-body { padding: 18px 18px 20px; }
    .review-feed-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .review-feed-racket { margin-top: 15px; }
    .review-feed-racket strong { font-size: 18px; }
    .review-feed-body > p { font-size: 14px; }
    .section { padding: 58px 0; }
    .section-head, .result-head { align-items: flex-start; flex-direction: column; }
    .section-head h2, .player-story h2, .final-cta h2 { font-size: 43px; }
    .racket-card-media { min-height: 270px; }
    .racket-card-media img { height: 245px; }
    .player-story { padding: 62px 0; }
    .story-grid { gap: 45px; }
    .story-lead { margin: 18px 0 20px; font-size: 15px; }
    .story-steps > div { grid-template-columns: 35px 1fr; }
    .story-steps p { grid-column: 2; }
    .directory-intro { padding: 24px 0; }
    .directory-hero-copy p { display: none; }
    .intro-grid { gap: 16px; }
    .directory-tools { padding: 14px 0; }
    .filter-grid { gap: 1px; }
    .product-media { min-height: 430px; }
    .product-photo { width: 82%; height: 370px; }
    .product-copy h1 { font-size: 55px; }
    .data-module { padding: 25px 18px; }
    .subscore-grid { grid-template-columns: 1fr; }
    .community-reviews { margin-top: 48px; padding-top: 44px; }
    .reviews-layout { gap: 30px; }
    .review { grid-template-columns: 40px 1fr; }
    .review time { grid-column: 2; }
    .footer-grid { gap: 34px; }
    .footer-note { text-align: left; }
    .auth-form-panel { padding: 48px 14px 58px; }
    .auth-form-inner h1 { font-size: 50px; }
    .auth-story-panel { min-height: 660px; padding: 50px 24px; }
    .auth-story-copy h2 { font-size: 46px; }
    .auth-photo-card { width: 185px; }
    .auth-photo-card img { height: 210px; }
    .auth-photo-card.first { left: 5%; }
    .auth-photo-card.second { right: 3%; }
    .auth-card, .verification-card { padding: 34px 22px; }
    .auth-card h1, .verification-card h1 { font-size: 43px; }
    .profile-summary-identity { align-items: flex-start; flex-direction: column; }
    .profile-summary { min-height: 0; padding: 46px 0 38px; }
    .profile-summary h1 { font-size: 51px; }
    .profile-inline-stats { margin-top: 32px; }
    .profile-inline-stats > div { padding: 18px 14px; border-right: 1px solid var(--line); border-bottom: 0; }
    .profile-inline-stats > div:last-child { border-right: 0; }
    .profile-inline-stats span { font-size: 12px; }
    .profile-active-feature { grid-template-columns: 1fr; min-height: 0; gap: 24px; padding: 24px; }
    .profile-active-stage { min-height: 275px; }
    .profile-active-stage img { height: 255px; }
    .profile-active-copy { min-height: 300px; padding-block: 3px; }
    .profile-active-copy h2 { font-size: 43px; }
    .profile-active-footer { align-items: flex-start; flex-direction: column; }
    .profile-active-links { justify-items: start; }
    .profile-no-current { min-height: 330px; padding: 32px 24px; }
    .profile-compact-head { align-items: flex-start; flex-direction: column; margin-bottom: 20px; }
    .profile-compact-head > p { margin: 0; }
    .profile-brand-strip { margin-bottom: 38px; }
    .profile-brand-list { gap: 16px 18px; }
    .profile-brand-list li { width: 102px; height: 58px; padding: 12px; }
    .profile-brand-logo img { max-width: 78px; max-height: 23px; }
    .profile-brand-count { top: -8px; right: -8px; width: 22px; height: 22px; box-shadow: 0 0 0 3px var(--background); font-size: 10px; }
    .profile-history, .profile-wishlist { padding-block: 48px; }
    .profile-history-grid, .profile-mini-grid { grid-template-columns: 1fr; }
    .profile-history-card { display: grid; grid-template-columns: 110px minmax(0,1fr); }
    .profile-history-media { min-height: 100%; }
    .profile-history-media img { height: 115px; }
    .profile-history-copy { min-height: 205px; padding: 20px; }
    .profile-history-footer { align-items: flex-start; flex-direction: column; }
    .profile-history-footer > span:last-child { justify-items: start; }
    .profile-quiet-empty { align-items: flex-start; flex-direction: column; }
    .account-form-page, .collection-form-page { padding: 55px 0; }
    .account-form-card, .collection-form-card { padding: 30px 20px; }
    .account-form-grid aside h1, .collection-product h1 { font-size: 46px; }
    .collection-form-card h2 { font-size: 39px; }
    .collection-product-media { min-height: 310px; }
    .collection-product-media img { height: 285px; }
    .status-choice { grid-template-columns: 1fr; }
    .rating-row { grid-template-columns: 1fr; gap: 9px; padding-block: 14px; }
    .rating-stars { --star: 44px; --star-gap: 9px; }
    .rating-choice-compact { grid-template-columns: repeat(6,1fr); }
    .rating-choice-compact label[for$="_placeholder"] { padding-inline: 4px; }
    .add-racket-page { padding: 50px 0 60px; }
    .add-racket-head h1 { font-size: 55px; }
    .add-search-form { grid-template-columns: 1fr; padding: 14px; }
    .add-search-form .button { min-height: 48px; }
    .add-result-head { align-items: flex-start; flex-direction: column; padding-inline: 18px; }
    .add-result-list { padding-inline: 18px; }
    .add-result { grid-template-columns: 86px 1fr; gap: 15px; }
    .add-result-media { min-height: 90px; }
    .add-result-media img { height: 84px; }
    .add-result-actions { grid-column: 2; grid-template-columns: 1fr auto; align-items: center; }
    .add-fallback-panel { padding: 30px 22px; }
}