/* Shoe page (templates/shoe.php). Store pills and the release-alert card are in shoe-common.css (shared with the line page). */

/* ------------------------------------------------------------ hero */
.cd-shoe-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 48px; align-items: start; }
.cd-shoe-hero__media { grid-column: span 6; position: relative; min-width: 0; }
.cd-shoe-hero__info { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 24px; padding-top: 8px; min-width: 0; }
.cd-shoe-hero__tile { aspect-ratio: auto; height: 500px; border-radius: 24px; }
.cd-shoe-hero__tile .cd-tile__img { width: 92% !important; }
.cd-shoe-hero .cd-tile--missing { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; gap: 12px; }
.cd-shoe-hero .cd-tile--missing .cd-icon { width: 48px; height: 48px; stroke-width: 1.4; }
.cd-shoe-badge { position: absolute; left: 20px; top: 20px; background: var(--cd-ground); color: var(--cd-accent); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; }
.cd-shoe-hero .cd-crumbs ol { font-weight: 700; }
.cd .cd-shoe-hero .cd-crumbs a, .cd .cd-line-hero .cd-crumbs a, .cd .cd-lines-head .cd-crumbs a { color: var(--cd-accent); display: inline-block; padding: 10px 0; }
.cd .cd-shoe-hero .cd-crumbs a:hover { color: var(--cd-text); }
.cd-shoe-hero .cd-crumbs [aria-current] { color: var(--cd-text-2); }
.cd-shoe-hero .cd-crumbs li { display: flex; align-items: center; }

.cd-shoe-h1 { font-family: var(--cd-display); font-weight: 400; text-transform: uppercase; color: var(--cd-text); line-height: 0.9; letter-spacing: -0.5px; text-wrap: balance; overflow-wrap: break-word; }
.cd-shoe-h1--a { font-size: 128px; }
.cd-shoe-h1--b { font-size: 112px; }
.cd-shoe-h1--c { font-size: 80px; line-height: 0.95; }

/* ------------------------------------------------------------ scores band */
.cd-shoe-scores { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; padding-top: 64px; }
.cd-score { background: var(--cd-raised); border: var(--cd-line) solid var(--cd-hair); border-radius: var(--cd-radius); padding: 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cd-score .cd-label { font-size: 13px; }
.cd-score--review { grid-column: span 3; grid-row: 1 / span 2; }
.cd-score--fan { grid-column: span 3; grid-row: 1; border-bottom: 0; border-radius: var(--cd-radius) var(--cd-radius) 0 0; padding-bottom: 0; }
.cd-score--rate { grid-column: 4 / span 3; grid-row: 2; border-top: 0; border-radius: 0 0 var(--cd-radius) var(--cd-radius); padding-top: 14px; gap: 2px; }
.cd-score--consensus { grid-column: 7 / span 6; grid-row: 1 / span 2; gap: 14px; }
.cd-score__num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cd-score__num[hidden] { display: none; }
.cd-score__num .cd-num { font-size: 80px; line-height: 0.9; }
.cd-score__of { font-size: 18px; color: var(--cd-muted); }
.cd-score__none { font-size: 19px; font-weight: 700; color: var(--cd-text); }
.cd-score__note { font-size: 15px; line-height: 1.5; color: var(--cd-muted); }
.cd-score__text { font-size: 19px; line-height: 1.6; color: var(--cd-text); }
.cd-shoe-rate__label { font-size: 14px; color: var(--cd-text-2); }
.cd-shoe-avg-abbr, .cd-shoe-short { display: none; }
.cd-shoe-scores--two .cd-score--review { grid-column: span 6; }
.cd-shoe-scores--two .cd-score--fan { grid-column: 7 / span 6; }
.cd-shoe-scores--two .cd-score--rate { grid-column: 7 / span 6; }

/* Not reviewed, no votes, no consensus: one slim strip that only asks for a rating. */
.cd-shoe-strip { margin-top: 64px; background: var(--cd-raised); border: var(--cd-line) solid var(--cd-hair); border-radius: var(--cd-radius); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.cd-shoe-strip__text { display: flex; align-items: center; gap: 28px; font-size: 17px; color: var(--cd-text-2); }
.cd-shoe-strip__text .cd-label { font-size: 13px; }
.cd-shoe-strip__rate { display: flex; align-items: center; gap: 12px; }
.cd-shoe-strip__ask { font-size: 16px; font-weight: 700; }

/* The wp-postratings widget, restyled: 44px star targets in the accent colour; its own number and vote count are
   hidden because the card shows them (js/shoe.js copies the new figures in after a vote). */
.cd-shoe .wp-postratings, .cd-shoe .wp-postratings-vote, .cd-shoe .wp-postratings-strip {
  --wp-postratings-size: 22px; --wp-postratings-gap: 0px; --wp-postratings-color-on: var(--cd-accent); --wp-postratings-color-off: var(--cd-border-strong); --wp-postratings-color-hover: var(--cd-accent-hover);
}
.cd-shoe-rate__stars .wp-postratings { display: block; font-size: 0; line-height: 0; }
.cd-shoe-rate__stars .fan-average-num, .cd-shoe-rate__stars .rate-this-shoe h5, .cd-shoe-rate__stars .user_rating { display: none !important; }
.cd-shoe-rate__stars .rate-this-shoe { display: block; }
.cd-shoe-rate__stars .wp-postratings-vote { display: inline-flex; margin-left: -11px; }
.cd-shoe-rate__stars .wp-postratings-vote label { padding: 11px; border-radius: 999px; }
.cd-shoe-rate__stars .wp-postratings-strip { margin: 11px 0; }
.cd-shoe-strip .cd-shoe-rate__stars .wp-postratings-vote { margin-left: 0; margin-right: -11px; }

/* ------------------------------------------------------------ about */
.cd-shoe-about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.cd-shoe-about > .cd-h2 { grid-column: span 4; }
.cd-shoe-about__body { grid-column: span 8; max-width: 820px; min-width: 0; }
.cd-shoe-about__text { font-size: 19px; line-height: 1.65; color: var(--cd-text-2); }
.cd-shoe-about__text > * + * { margin-top: 20px; }
.cd-shoe-about__text a { text-decoration: underline; text-underline-offset: 3px; }
.cd-shoe-about__text strong { color: var(--cd-text); }
.cd-shoe-about__text img { border-radius: var(--cd-radius-s); }
.cd-shoe-about__text ul, .cd-shoe-about__text ol { padding-left: 1.3em; }
@media (min-width: 768px) {
  .cd-shoe-about [data-cd-clamp] { display: block; -webkit-line-clamp: none; overflow: visible; }
  .cd-shoe-about__more { display: none; }
}

/* ------------------------------------------------------------ PEs */
.cd-shoe-pes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.cd-shoe-pes__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-shoe-pes__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cd .cd-pe { display: flex; flex-direction: column; gap: 14px; color: var(--cd-text); min-width: 0; }
.cd-pe[hidden] { display: none !important; }
.cd-pe__img { width: 100%; aspect-ratio: 16 / 11; height: auto !important; object-fit: cover; border-radius: 16px; background: var(--cd-raised); }
.cd-pe__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd-pe__date { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cd-muted); }
.cd-pe__player { font-size: 19px; font-weight: 700; line-height: 1.3; }
.cd-pe__cw { font-size: 16px; line-height: 1.4; color: var(--cd-text-2); }
.cd .cd-pe:hover .cd-pe__player { color: var(--cd-accent); }
.cd-shoe-pes__grid--one { grid-template-columns: minmax(0, 1fr); }
.cd-shoe-pes__grid--one .cd-pe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.cd-shoe-pes__grid--one .cd-pe__img { grid-column: span 7; aspect-ratio: auto; height: 380px !important; border-radius: 20px; }
.cd-shoe-pes__grid--one .cd-pe__text { grid-column: span 5; gap: 10px; }
.cd-shoe-pes__grid--one .cd-pe__date { font-size: 13px; }
.cd-shoe-pes__grid--one .cd-pe__player { font-family: var(--cd-display); font-weight: 400; font-size: 48px; line-height: 1; text-transform: uppercase; }
.cd-shoe-pes__grid--one .cd-pe__cw { font-size: 19px; }

/* ------------------------------------------------------------ players */
.cd-shoe-players__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.cd-shoe-players__grid .cd-playercard { gap: 8px; }
.cd-shoe-players__grid .cd-playercard[hidden] { display: none; }
.cd-shoe-players__grid .cd-playercard__img, .cd-shoe-players__grid .cd-tile--missing { aspect-ratio: 4 / 5; }
.cd-shoe-players--names:not(:has([data-cd-showall])) .cd-shoe-players__grid { display: none; }
.cd-shoe-names { background: var(--cd-raised); border: var(--cd-line) solid var(--cd-hair); border-radius: var(--cd-radius); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.cd-shoe-names[hidden] { display: none; }
.cd-shoe-names__title { font-size: 19px; font-weight: 700; }
.cd-shoe-names__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
.cd .cd-shoe-names__list a { display: block; color: var(--cd-text); font-size: 16px; padding: 10px 0; border-bottom: 1px solid var(--cd-hair); }
.cd .cd-shoe-names__list a:hover { color: var(--cd-accent); }

/* ------------------------------------------------------------ people also look for */
.cd-shoe-also > .cd-h2 { font-size: 48px; margin-bottom: 28px; }
.cd-shoe-also__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cd .cd-also { display: flex; align-items: stretch; background: var(--cd-raised); border: var(--cd-line) solid var(--cd-hair); border-radius: var(--cd-radius); overflow: hidden; color: var(--cd-text); min-width: 0; }
.cd-also__tile { width: 300px; height: 180px; aspect-ratio: auto; border-radius: 0; flex-shrink: 0; }
.cd-also__text { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px 28px; min-width: 0; }
.cd-also__name { font-size: 22px; font-weight: 700; line-height: 1.25; }
.cd-also__go { font-size: 15px; font-weight: 700; color: var(--cd-accent); }
.cd-also__arrow { display: none; }
.cd .cd-also:hover .cd-also__name { color: var(--cd-accent); }

/* ------------------------------------------------------------ narrower desktops: the 3-column score cards are too
   narrow for five 44px stars below ~1280px, so review and fan split the row and the consensus goes under them. */
@media (max-width: 1279px) {
  .cd-shoe-scores { row-gap: 0; }
  .cd-score--review { grid-column: span 6; }
  .cd-score--fan, .cd-score--rate { grid-column: 7 / span 6; }
  .cd-score--consensus { grid-column: 1 / -1; grid-row: 3; margin-top: 24px; }
  .cd-shoe-h1--a { font-size: 112px; }
  .cd-shoe-h1--b { font-size: 96px; }
  .cd-also__tile { width: 220px; height: 150px; }
}

/* ------------------------------------------------------------ tablet */
@media (max-width: 1099px) {
  .cd-shoe-hero { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-top: 32px; }
  .cd-shoe-hero__media, .cd-shoe-hero__info { grid-column: 1 / -1; }
  .cd-shoe-hero__info { padding-top: 0; }
  .cd-shoe-hero__tile { height: 420px; }
  .cd-shoe-hero__info .cd-buy, .cd-shoe-hero__info .cd-alert { max-width: 640px; }
  .cd-shoe-h1--a { font-size: 96px; }
  .cd-shoe-h1--b { font-size: 84px; }
  .cd-shoe-h1--c { font-size: 64px; }
  .cd-shoe-about { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .cd-shoe-about > .cd-h2, .cd-shoe-about__body { grid-column: 1 / -1; }
  .cd-shoe-pes__grid:not(.cd-shoe-pes__grid--one):not(.cd-shoe-pes__grid--two) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cd-shoe-pes__grid--one .cd-pe__img { grid-column: span 6; height: 300px !important; }
  .cd-shoe-pes__grid--one .cd-pe__text { grid-column: span 6; }
  .cd-shoe-players__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cd-shoe-names__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cd-shoe-also__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ phone */
@media (max-width: 767px) {
  .cd-shoe-hero { padding-top: 20px; row-gap: 16px; }
  .cd-shoe-hero__info { gap: 16px; }
  .cd-shoe-hero__tile { height: 230px; border-radius: 18px; }
  .cd-shoe-hero .cd-crumbs ol { font-size: 13px; }
  .cd-shoe-h1--a { font-size: 64px; }
  .cd-shoe-h1--b { font-size: 52px; }
  .cd-shoe-h1--c { font-size: 40px; line-height: 1; }
  .cd-shoe-badge { left: 12px; top: 12px; }

  .cd-shoe-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 40px; }
  .cd-score { padding: 18px; gap: 6px; border-radius: 18px; }
  .cd-score .cd-label { font-size: 12px; }
  .cd-shoe-avg-word { display: none; }
  .cd-shoe-avg-abbr { display: inline; }
  .cd-score--review, .cd-score--fan, .cd-shoe-scores--two .cd-score--review, .cd-shoe-scores--two .cd-score--fan { grid-column: span 1; grid-row: 1; }
  .cd-score--fan { border: var(--cd-line) solid var(--cd-hair); border-radius: 18px; padding-bottom: 18px; }
  .cd-score--rate, .cd-shoe-scores--two .cd-score--rate { grid-column: 1 / -1; grid-row: 2; border: var(--cd-line) solid var(--cd-hair); border-radius: 18px; padding: 4px 14px; flex-direction: row; align-items: center; justify-content: space-between; }
  .cd-score--consensus { grid-column: 1 / -1; grid-row: 3; margin-top: 0; padding: 20px; }
  .cd-score__num .cd-num { font-size: 48px; line-height: 1; }
  .cd-score__num { gap: 4px; }
  .cd-score__of { font-size: 14px; }
  .cd-score__sep { display: none; }
  .cd-score__votes { display: block; font-size: 13px; }
  .cd-score__none { font-size: 16px; }
  .cd-score__note { display: none; }
  .cd-score__text { font-size: 16px; line-height: 1.55; }
  .cd-shoe-rate__label { font-size: 15px; font-weight: 700; color: var(--cd-text); white-space: nowrap; }
  .cd-score--rate .wp-postratings-vote { margin-left: 0; margin-right: -11px; }
  .cd-shoe-strip { margin-top: 40px; padding: 16px 18px; flex-direction: column; align-items: flex-start; }
  .cd-shoe-strip__text { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 16px; }
  .cd-shoe-strip__rate { flex-wrap: wrap; gap: 4px 12px; }
  .cd-shoe-strip .cd-shoe-rate__stars .wp-postratings-vote { margin-left: -11px; margin-right: 0; }

  .cd-shoe-about__text { font-size: 17px; }
  .cd-shoe-about [data-cd-clamp] { display: block; max-height: calc(1.65em * 8); overflow: hidden; }
  .cd-shoe-head__eyebrow { display: none; }
  .cd-shoe-long { display: none; }
  .cd-shoe-short { display: inline; }

  .cd-shoe-pes__grid, .cd-shoe-pes__grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 12px; }
  .cd-shoe-pes__grid--one { grid-template-columns: minmax(0, 1fr) !important; }
  .cd-shoe-pes__grid--one .cd-pe { display: flex; align-items: stretch; }
  .cd-shoe-pes__grid--one .cd-pe__img { height: 200px !important; border-radius: 14px; }
  .cd-shoe-pes__grid--one .cd-pe__player { font-family: var(--cd-body); font-weight: 700; font-size: 17px; text-transform: none; line-height: 1.3; }
  .cd-pe { gap: 10px; }
  .cd-pe__img { border-radius: 12px; }
  .cd-pe__player { font-size: 16px; }
  .cd-pe__cw, .cd-shoe-pes__grid--one .cd-pe__cw { font-size: 15px; }
  .cd-shoe-pes:has([data-cd-showall]) .is-pmore, .cd-shoe-players:has([data-cd-showall]) .is-pmore { display: none; }

  .cd-shoe-players__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .cd-shoe-players__grid .cd-playercard__name { font-size: 14px; }
  .cd-shoe-names { padding: 20px; }
  .cd-shoe-names__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }

  .cd-shoe-also > .cd-h2 { font-size: 36px; margin-bottom: 14px; }
  .cd-shoe-also__grid { gap: 0; }
  .cd .cd-also { background: transparent; border: 0; border-top: 1px solid var(--cd-hair); border-radius: 0; align-items: center; gap: 14px; padding: 12px 0; }
  .cd-also__tile { width: 112px; height: 70px; border-radius: 10px; }
  .cd-also__text { padding: 0; flex-grow: 1; }
  .cd-also__name { font-size: 16px; line-height: 1.3; }
  .cd-also__go { display: none; }
  .cd-also__arrow { display: block; font-size: 20px; color: var(--cd-muted); padding-right: 4px; }
}
/* Zack, 2026-10-08: at 390 and below the five stars overflowed their box. Narrower targets (still 40px wide, and the
   row of five is one control) fit them down to 320. */
@media (max-width: 400px) {
  .cd-shoe-rate__stars .wp-postratings-vote label { padding: 9px 6px; }
  .cd-shoe-rate__stars .wp-postratings-vote { margin-left: -6px; }
  .cd-shoe .wp-postratings, .cd-shoe .wp-postratings-vote, .cd-shoe .wp-postratings-strip { --wp-postratings-size: 24px; }
}
@media (max-width: 340px) { .cd-shoe-rate__stars .wp-postratings-vote label { padding: 9px 4px; } }

/* "Coming next" release alert for the line's next model (replaced the OptinMonster box, 2026-10-17) */
.cd-shoe-next__card { max-width: 720px; }
.cd-shoe-next .cd-alert__text a { color: var(--cd-text); text-decoration: underline; text-decoration-color: var(--cd-accent); text-underline-offset: 3px; }
.cd-shoe-next .cd-alert__text a:hover { color: var(--cd-accent); }

/* Panels (design B2, Zack 2026-10-18; shared rules in base.css). The ratings panel follows the hero; inside a panel the
   score grid and strip lose their own top spacing, and About stacks its heading over the text. */
.cd .cd-shoe-ratings { margin-top: 56px; }
.cd .cd-shoe-ratings .cd-shoe-scores { padding-top: 0; }
.cd .cd-shoe-ratings .cd-shoe-strip { margin-top: 0; }
.cd .cd-panel.cd-section { padding-top: 28px; }
.cd .cd-panel.cd-shoe-about { display: block; }
.cd .cd-panel.cd-shoe-about .cd-shoe-about__body { max-width: 880px; }
.cd .cd-panel.cd-shoe-also > .cd-h2 { font-size: 40px; }
.cd .cd-shoe-next.cd-section { padding-top: 32px; }
@media (max-width: 1099px) { .cd .cd-panel.cd-section { padding-top: 24px; } }
@media (max-width: 767px) {
  .cd .cd-shoe-ratings { margin-top: 32px; }
  .cd .cd-panel.cd-section { padding-top: 18px; }
  .cd .cd-panel.cd-shoe-also > .cd-h2 { font-size: 30px; }
  .cd .cd-shoe-next.cd-section { padding-top: 16px; }
}