/* ProductDetailTokens.kt: identity header, forest scorecard with best-day progress, history tiles,
   maker panels. Two columns when the page is wide enough, one otherwise (a container query, so the
   workspace sidebar counts). */
.app-shell .page.product-detail-page{max-width:1088px;padding:24px 32px 96px;font-family:var(--app-font);color:var(--ink)}
.product-detail{display:flex;flex-direction:column;gap:24px;container-type:inline-size}
.product-detail-page h1,.product-detail-page h2,.product-detail-page p{letter-spacing:0}
/* The small uppercase labels: category, scorecard and tile headings, panel titles. */
.product-hero-category,.product-score-head h2,.product-stat dt,.product-panel-label{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
/* Card surfaces: the history tiles, side panels and similar-product cards. */
.product-stat,.product-panel,.product-related-card{border-radius:20px;background:var(--card);border:1px solid var(--line);min-width:0}
/* Orange text links: earn points, the full board, the store. */
.product-push-earn,.product-top-head a,.product-cta-store{display:inline-flex;align-items:center;font-weight:700;color:var(--soft-primary-ink);text-decoration:none}
.product-push-earn:hover,.product-top-head a:hover,.product-cta-store:hover{text-decoration:underline}

/* Breadcrumb */
.product-breadcrumb ol{display:flex;align-items:center;gap:8px;min-width:0;list-style:none;margin:0;padding:0;font-size:13px;line-height:18px;color:var(--muted)}
.product-breadcrumb li{min-width:0;white-space:nowrap}
.product-breadcrumb li:last-child{overflow:hidden;text-overflow:ellipsis}
.product-breadcrumb li+li::before{content:'/';margin-right:8px;color:var(--app-ink-muted)}
.product-breadcrumb a{color:var(--muted);text-decoration:none;border-radius:6px}
.product-breadcrumb a:hover{color:var(--ink);text-decoration:underline}
.product-breadcrumb [aria-current]{color:var(--ink);font-weight:600}

/* Identity: logo, category, name, maker, pitch and the page actions. */
.product-hero{display:grid;grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"logo category actions" "logo name actions" "logo maker actions" "logo tagline tagline";column-gap:24px;align-items:start}
.product-hero-logo{grid-area:logo}
.product-hero-logo .product-icon{width:96px;height:96px;border-radius:24px;box-shadow:0 3px 0 var(--app-shadow)}
.product-hero-logo .product-logo-fallback{font-size:40px;font-weight:700}
.product-hero-category{grid-area:category;margin:2px 0 6px;color:var(--soft-primary-ink)}
.product-hero h1{grid-area:name;margin:0;font:700 38px/44px var(--app-font);letter-spacing:-1px;overflow-wrap:anywhere}
.product-hero-maker{grid-area:maker;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-top:2px;font-size:15px;line-height:22px;font-weight:600;color:var(--muted);text-decoration:none;border-radius:8px}
a.product-hero-maker:hover{color:var(--ink);text-decoration:underline}
.product-hero-maker small,.product-maker-link>small{padding:2px 8px;border-radius:999px;background:var(--soft-mint);color:var(--ink);font-size:11px;line-height:16px;font-weight:700}
.product-tagline{grid-area:tagline;max-width:64ch;margin:12px 0 0;font-size:18px;line-height:28px;color:var(--ink);overflow-wrap:anywhere}
.product-hero-actions{grid-area:actions;display:flex;align-items:center;gap:10px;padding-top:4px}
.product-hero-actions .button,.product-cta-actions .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;margin:0;padding:0 20px;border-radius:16px;font-size:15px;text-decoration:none;white-space:nowrap}
.product-hero-actions .button .ui-icon{width:20px;height:20px}
/* ProductDetailTokens.action: the streak screen's deeper orange keeps white text at AA contrast. */
.product-detail-page .button.primary{background:var(--action);border-color:var(--action);color:var(--on-action);box-shadow:var(--shadow-md)}
.product-hero-actions .product-share{background:var(--card)}
.product-detail-toolbar .icon-button{width:52px;height:52px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink)}

/* Two columns: scores on the left, people and actions on the right. */
.product-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,352px);gap:24px;align-items:start}
.product-detail-main,.product-detail-aside{display:flex;flex-direction:column;gap:16px;min-width:0}

/* Forest scorecard (StreakTokens shares its forest and flame). */
.product-scorecard{padding:22px 24px 24px;border-radius:24px;background:var(--forest);color:var(--on-forest);min-width:0}
.product-score-head{display:flex;align-items:center;gap:10px;min-height:44px}
.product-score-head h2{flex:1;margin:0;color:var(--on-forest-muted)}
.product-score-head .icon-button{margin-right:-10px;color:var(--on-forest-muted)}
.product-score-head .icon-button:hover{background:rgb(255 255 255 / 8%)}
.product-today{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 16px;margin-top:2px}
.product-today-score{display:flex;align-items:baseline;gap:8px;min-width:0;margin:0}
.product-today-rank{display:flex;flex-direction:column;align-items:flex-end;margin:0 0 12px;text-align:right}
.product-today-rank strong{font:700 44px/48px var(--app-font);letter-spacing:-1.5px;color:var(--on-forest-highlight);font-variant-numeric:tabular-nums}
.product-today-rank span{font-size:13px;line-height:18px;color:var(--on-forest-muted)}
.product-today-score strong{font:700 82px/90px var(--app-font);letter-spacing:-4px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-width:0}
.product-today-score span{flex:none;font-size:15px;line-height:23px;color:var(--on-forest-muted)}

/* History tiles */
.product-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.product-stat{padding:16px 18px 18px}
.product-stat dt{color:var(--muted)}
.product-stat dd{display:flex;flex-direction:column;gap:2px;margin:8px 0 0;min-width:0}
.product-stat strong{font:700 30px/36px var(--app-font);letter-spacing:-.8px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.product-stat dd span{font-size:13px;line-height:18px;color:var(--muted)}

/* Panels in the side column */
.product-panel{padding:18px}
.product-panel-label{margin:0 0 10px;color:var(--muted)}
.product-push-head .product-panel-label,.product-top-head .product-panel-label{margin:0}
.product-maker-link{display:flex;align-items:center;gap:12px;min-height:56px;margin:-6px;padding:6px;border-radius:14px;color:var(--ink);text-decoration:none}
a.product-maker-link:hover{background:var(--surface-secondary)}
.product-maker-link .avatar{width:48px;height:48px;margin:0;font-size:16px}
.product-maker-copy{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.product-maker-copy strong{font-size:16px;line-height:22px;font-weight:700;overflow-wrap:anywhere}
.product-maker-copy span{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;line-height:18px;color:var(--muted)}
.product-maker-flame{width:12px;height:14px}
.product-maker-link>.ui-icon{flex:none;width:18px;height:18px;color:var(--muted)}
.product-more ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.product-more li+li{border-top:1px solid var(--line)}
.product-more a{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0;color:var(--ink);text-decoration:none}
.product-more a:hover strong{text-decoration:underline}
.product-more .product-icon{width:44px;height:44px;flex:none;border-radius:12px}
.product-more-copy{display:flex;flex:1;flex-direction:column;min-width:0}
.product-more-copy strong{font-size:15px;line-height:21px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-more-copy span{font-size:13px;line-height:18px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-more a>.ui-icon{flex:none;width:16px;height:16px;color:var(--muted)}

/* Owner: push the balance here */
.product-push-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.product-push-head p{margin:0;font-size:13px;line-height:18px;color:var(--muted)}
.product-push-head strong{font-size:20px;line-height:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.product-push form{margin:14px 0 0}
.product-push .product-push-all{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:16px}
.product-push .product-push-all .ui-icon{width:20px;height:20px}
.product-push-amount{display:flex;align-items:flex-end;gap:8px;margin-top:12px}
.product-push-amount label{display:flex;flex:1;flex-direction:column;gap:6px;min-width:0;margin:0;font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.product-push-amount input{width:100%;min-height:48px;margin:0;box-sizing:border-box}
.product-push-amount .button{min-height:48px;margin:0;padding:0 18px}
.product-push .form-error:empty{display:none}
.product-push .form-error{margin:8px 0 0}
.product-push-earn{display:flex;gap:8px;min-height:44px;margin-top:8px;font-size:14px}
.product-push-earn .ui-icon{width:20px;height:20px}
.product-push-note{margin:0 0 12px;font-size:14px;line-height:20px;color:var(--muted)}

/* More in <category>: other makers' listings in a row that scrolls sideways, like mobile's */
.product-related h2{margin:8px 0 8px;font:700 20px/26px var(--app-font)}
.product-related ul{display:flex;gap:12px;margin:0;padding:4px 0 10px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.product-related li{display:flex;flex:0 0 212px;scroll-snap-align:start}
.product-related-card{display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box;padding:16px;color:var(--ink);text-decoration:none;transition:border-color .15s var(--ease-standard),transform .15s var(--ease-standard)}
.product-related-card:hover{border-color:var(--app-ink-muted);transform:translateY(-2px)}
.product-related-card .product-icon{width:48px;height:48px;margin-bottom:8px;border-radius:var(--radius-icon)}
.product-related-card strong{font-size:16px;line-height:22px;font-weight:700;overflow-wrap:anywhere}
.product-related-pitch{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:19px;color:var(--muted)}
.product-related-points{margin-top:auto;padding-top:8px;font-size:12px;line-height:16px;font-weight:700;color:var(--soft-primary-ink)}

/* Top today: the head of today's board */
.product-top-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.product-top-head a{gap:2px;min-height:32px;font-size:13px}
.product-top-head .ui-icon{width:14px;height:14px}
.product-top ol{margin:0 -8px;padding:0;list-style:none}
.product-top a{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 8px;border-radius:12px;color:var(--ink);text-decoration:none}
.product-top a:hover{background:var(--surface-secondary)}
.product-top .is-current a{background:var(--soft-primary)}
.product-top-rank{width:20px;flex:none;font-size:13px;font-weight:700;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.product-top .is-current .product-top-rank{color:var(--soft-primary-ink)}
.product-top .product-icon{width:32px;height:32px;flex:none;border-radius:9px}
.product-top .product-logo-fallback{font-size:14px}
.product-top-name{flex:1;min-width:0;font-size:14px;line-height:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-top a strong{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

/* Signed-out visitors */
.product-cta{background:var(--soft-primary);border-color:transparent}
.product-cta h2{margin:0;font:700 18px/24px var(--app-font)}
.product-cta p{margin:6px 0 16px;font-size:14px;line-height:21px;color:var(--ink)}
.product-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.product-cta-actions .button{min-height:48px;border-radius:var(--radius-large-button)}
.product-cta-store{gap:6px;min-height:44px;font-size:14px}
.product-cta-store .ui-icon{width:16px;height:16px}

.product-points-dialog{font-family:var(--app-font)}.product-points-dialog p{font-size:14px;line-height:22px;color:var(--muted)}

/* Links a crawler can follow from every product page */
.product-footer{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:8px;font-size:13px;line-height:18px}
.product-footer a{color:var(--muted);text-decoration:none}
.product-footer a:hover{color:var(--ink);text-decoration:underline}

/* Hidden: a listing its maker's lost streak locked, like a Threads spoiler that nothing reveals
   (AppSpoiler.kt / AppSpoiler.swift). Text and figures become specks in their own colour over the band
   their line fills; the logo is blurred, dimmed and covered in white specks. spoiler.js draws the
   specks on a canvas; until it does, and where it can't, two tiles of scattered dots drift as masks
   (each by whole tiles, so the loop has no seam). The text itself is never in the page. */
.product-detail-hidden .spoiler{position:relative;display:block;width:calc(var(--chars,8) * .56em);max-width:100%;height:.7em;margin:.25em 0 .15em;font-size:inherit;line-height:inherit;color:inherit;user-select:none;pointer-events:none}
.spoiler::before,.spoiler::after,.spoiler-media::before{content:'';position:absolute;inset:0;background:currentColor;-webkit-mask:var(--spoiler-tile) 0 0/var(--spoiler-size) var(--spoiler-size) repeat;mask:var(--spoiler-tile) 0 0/var(--spoiler-size) var(--spoiler-size) repeat}
.spoiler::before,.spoiler-media::before{--spoiler-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='61'%3E%3Cpath d='M57.4 0.1h0M37.0 37.5h0M22.2 26.3h0M18.2 0.2h0M42.8 20.0h0M46.5 45.2h0M5.5 58.4h0M18.0 33.9h0M49.5 24.5h0M34.8 59.0h0M8.9 59.0h0M28.0 5.0h0M58.5 43.4h0M10.0 2.2h0M11.2 29.6h0M21.9 34.3h0M37.3 36.8h0M58.4 56.0h0M52.9 26.2h0M19.1 30.0h0M3.3 11.7h0M58.4 23.6h0M8.6 43.0h0M7.4 28.3h0M27.8 15.2h0M59.1 13.7h0M27.5 58.8h0M59.1 4.5h0M43.9 32.2h0M23.3 31.8h0M35.8 17.6h0M57.2 35.7h0M37.3 28.8h0M2.3 13.6h0M27.9 59.3h0M34.0 34.6h0M22.6 22.3h0M19.5 58.9h0M15.1 54.7h0M0.3 7.6h0M9.0 43.4h0M45.5 33.9h0M45.4 7.3h0M50.9 42.4h0M9.7 7.0h0M52.4 10.4h0M24.7 39.6h0M37.0 59.7h0' stroke='%23000' stroke-opacity='.35' stroke-width='1.10' stroke-linecap='round'/%3E%3Cpath d='M56.5 10.6h0M17.4 24.9h0M17.2 40.4h0M27.0 54.2h0M32.1 19.9h0M46.2 44.6h0M49.0 21.2h0M55.4 13.7h0M24.7 38.6h0M13.6 24.4h0M17.3 56.0h0M24.6 15.8h0M41.9 1.5h0M43.7 48.4h0M5.7 3.6h0M46.1 9.5h0M12.7 27.9h0M48.4 44.4h0M60.2 21.3h0M40.8 61.0h0M39.6 5.3h0M57.1 39.9h0M44.8 5.6h0M3.8 54.1h0M17.3 40.7h0M1.7 49.9h0M8.7 36.7h0M15.0 30.5h0M18.7 15.9h0M60.4 44.2h0M7.2 55.9h0M29.4 1.7h0M50.8 45.7h0M49.8 9.2h0M41.2 18.0h0M27.8 26.8h0M26.3 12.7h0M49.7 18.2h0M57.8 24.4h0M0.1 32.8h0M60.4 59.5h0M27.2 57.3h0M35.0 19.6h0M10.6 30.0h0M51.0 18.9h0' stroke='%23000' stroke-opacity='.65' stroke-width='1.45' stroke-linecap='round'/%3E%3Cpath d='M15.3 26.7h0M21.1 27.3h0M30.8 23.9h0M19.9 4.8h0M37.4 14.5h0M18.8 9.2h0M29.8 17.3h0M43.4 33.7h0M6.1 15.7h0M55.1 38.0h0M21.2 31.7h0M6.6 44.6h0M50.8 24.2h0M21.8 19.5h0M23.5 47.0h0M17.7 36.5h0M14.0 29.0h0M56.8 55.9h0M21.9 25.4h0M52.7 15.8h0M2.5 16.5h0M36.5 19.0h0M36.6 12.3h0M53.9 8.7h0M60.5 17.4h0M11.0 0.1h0M5.3 13.7h0M34.1 33.5h0M0.9 60.4h0M22.3 45.5h0M3.8 33.5h0M14.0 56.0h0M50.4 4.6h0M17.4 12.4h0M22.7 1.1h0M28.1 27.2h0M38.0 3.7h0M11.2 53.1h0M42.2 26.4h0M41.1 2.7h0M14.2 15.2h0M1.9 43.0h0M25.7 57.8h0M27.1 29.7h0M34.9 22.7h0M30.7 56.1h0M31.2 51.9h0M2.7 1.5h0M60.7 16.9h0M54.2 57.9h0M27.1 53.2h0M12.4 47.1h0M30.9 14.6h0M11.4 13.9h0M44.6 28.8h0M18.2 53.3h0M19.8 59.2h0' stroke='%23000' stroke-opacity='1' stroke-width='1.80' stroke-linecap='round'/%3E%3C/svg%3E");--spoiler-size:61px;opacity:.75}
.spoiler::after{--spoiler-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47' height='47'%3E%3Cpath d='M22.8 6.1h0M46.3 24.9h0M8.0 40.4h0M23.1 15.9h0M24.8 1.2h0M17.0 11.5h0M8.8 14.4h0M18.7 23.7h0M19.1 29.8h0M40.7 33.9h0M8.7 2.6h0M16.3 27.3h0M30.4 26.3h0M6.4 38.1h0M43.8 7.7h0M20.5 22.5h0M39.3 18.2h0M30.5 42.4h0M11.7 12.8h0M11.9 4.5h0M41.7 10.1h0M33.2 34.2h0M42.7 20.4h0M12.8 28.2h0M24.8 46.1h0M34.9 38.4h0M33.2 5.9h0M44.0 33.8h0M34.5 10.5h0M36.8 28.0h0' stroke='%23000' stroke-opacity='.35' stroke-width='1.10' stroke-linecap='round'/%3E%3Cpath d='M5.0 41.4h0M16.8 16.3h0M9.4 27.8h0M15.9 35.1h0M34.8 0.0h0M17.2 7.7h0M33.8 9.8h0M44.2 22.1h0M15.8 12.9h0M28.6 15.6h0M7.0 19.9h0M16.6 27.9h0M24.0 9.1h0M25.8 22.5h0M26.0 38.0h0M27.0 38.7h0M19.1 45.2h0M14.0 28.5h0M25.0 31.1h0M12.2 25.0h0M9.4 14.4h0M19.3 42.5h0M40.6 1.3h0M25.5 34.9h0M0.9 9.7h0M24.2 16.1h0M45.1 27.4h0M34.8 4.9h0' stroke='%23000' stroke-opacity='.65' stroke-width='1.45' stroke-linecap='round'/%3E%3Cpath d='M20.9 40.5h0M3.2 23.6h0M9.5 24.5h0M17.1 32.4h0M45.7 9.8h0M23.7 25.5h0M38.0 28.1h0M13.7 40.7h0M19.2 24.6h0M9.1 17.3h0M32.8 29.0h0M0.0 30.5h0M4.6 24.7h0M41.9 28.7h0M26.7 12.6h0M38.1 19.6h0M3.5 35.8h0M10.4 30.5h0M21.8 33.0h0M15.2 46.7h0M39.4 38.4h0M44.7 43.2h0M46.6 24.6h0M14.9 32.6h0M25.5 16.3h0M29.1 26.6h0M35.6 40.7h0' stroke='%23000' stroke-opacity='1' stroke-width='1.80' stroke-linecap='round'/%3E%3C/svg%3E");--spoiler-size:47px;opacity:.5}
.spoiler.is-live::before,.spoiler.is-live::after,.spoiler-media.is-live::before{display:none}
.spoiler>canvas,.spoiler-media>canvas{position:absolute;inset:0;width:100%;height:100%}
.spoiler-media{position:relative;display:block;overflow:hidden;color:#fff;border-radius:24px;user-select:none;pointer-events:none}
.spoiler-media>:not(canvas){filter:blur(14px);transform:scale(1.2)}
.spoiler-media::after{content:'';position:absolute;inset:0;background:rgb(0 0 0 / 18%)}
.spoiler-media::before{z-index:1}.spoiler-media>canvas{z-index:2}
.product-hero-hidden .product-hero-logo .product-icon{box-shadow:none}
.product-hero-hidden .product-hero-maker{display:block;justify-self:stretch;min-height:0;margin-top:4px}
.product-detail-hidden .product-today-score strong{letter-spacing:0}
.product-detail-hidden .forest-progress p span{display:block;flex:1;color:var(--on-forest)}
.product-detail-hidden .product-stat dd>span{display:block}
.product-hero-hidden .product-visit,.product-hero-hidden .product-share:disabled{opacity:.45;cursor:not-allowed}
.product-more .product-more-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0}
.product-detail-hidden .product-push-all:disabled{opacity:.45;cursor:not-allowed}
.product-hidden-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.product-hidden{display:flex;align-items:flex-start;gap:14px}
.product-hidden>.ui-icon{flex:none;width:24px;height:24px;margin-top:1px}
.product-hidden h2{margin:0;font-size:16px;line-height:22px;font-weight:700}
.product-hidden p{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.product-hidden .product-restore{display:inline-flex;align-items:center;min-height:48px;margin:14px 0 0;padding:0 18px;border-radius:14px;font-size:15px}
@media(prefers-reduced-motion:no-preference){
  .spoiler::before,.spoiler-media::before{animation:spoiler-drift-a 9s linear infinite,spoiler-twinkle 1.7s ease-in-out infinite alternate}
  .spoiler::after{animation:spoiler-drift-b 7s linear infinite,spoiler-twinkle 2.3s ease-in-out infinite alternate-reverse}
}
@keyframes spoiler-drift-a{to{-webkit-mask-position:61px -61px;mask-position:61px -61px}}
@keyframes spoiler-drift-b{to{-webkit-mask-position:-47px 47px;mask-position:-47px 47px}}
@keyframes spoiler-twinkle{from{opacity:.3}to{opacity:.85}}

/* Loading */
.product-detail-skeleton{display:block;position:relative;overflow:hidden;background:var(--surface-secondary);border-radius:8px}
.product-detail-loading .product-hero{grid-template-areas:"logo name actions" "logo tagline actions" "logo . actions";row-gap:12px}
.product-skeleton-crumb{width:180px;height:18px}
.product-skeleton-logo{grid-area:logo;width:96px;height:96px;border-radius:24px}
.product-skeleton-title{grid-area:name;width:min(320px,100%);height:40px}
.product-skeleton-line{grid-area:tagline;width:min(520px,100%);height:24px}
.product-skeleton-card{width:100%;height:268px;border-radius:24px}
.product-skeleton-stat{height:108px;border-radius:20px}
.product-skeleton-panel{width:100%;height:168px;border-radius:20px}

.product-detail-page a:focus-visible,.product-detail-page button:focus-visible{outline:3px solid var(--soft-primary-ink);outline-offset:3px}

/* One column: the two column wrappers (plain divs) step aside so the maker comes before other products. */
@container (max-width:820px){
  .product-detail-grid{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .product-detail-main,.product-detail-aside{display:contents}
  .product-scorecard{order:1}.product-stats{order:2}.product-push{order:3}.product-maker{order:4}.product-more{order:5}
  .product-related{order:6}.product-top{order:7}.product-cta{order:8}
}
@container (max-width:640px){
  .product-hero{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"logo category" "logo name" "logo maker" "tagline tagline" "actions actions";column-gap:16px}
  .product-hero-logo .product-icon{width:72px;height:72px;border-radius:18px}
  .product-hero-logo .product-logo-fallback{font-size:30px}
  .product-hero-category{margin:0 0 4px}
  .product-hero h1{font-size:28px;line-height:34px;letter-spacing:-.6px}
  .product-hero-maker{min-height:28px;font-size:14px}
  .product-tagline{margin-top:16px;font-size:16px;line-height:25px}
  .product-hero-actions{padding-top:18px}
  .product-hero-actions .product-visit{flex:1}
  .product-hero-actions .product-share{padding:0 16px}
  .product-detail-loading .product-hero{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"logo name" "tagline tagline"}
  .product-skeleton-logo{width:72px;height:72px;border-radius:18px}
  .spoiler-media{border-radius:18px}
  .product-scorecard{padding:20px 20px 22px}
  .product-today-score strong{font-size:72px;line-height:80px;letter-spacing:-3px}
  .product-today-rank{margin-bottom:10px}
  .product-today-rank strong{font-size:36px;line-height:40px}
  .product-stat strong{font-size:26px;line-height:32px}
  .product-related li{flex-basis:168px}
  .product-related-card{padding:14px}
}
@media(max-width:760px){
  .app-shell .page.product-detail-page{padding:16px 16px 112px}
  /* The row runs to the screen edges, cards still line up with the page when snapped. */
  .product-related ul{margin:0 -16px;padding-inline:16px;scroll-padding-inline:16px}
}
@media(prefers-reduced-motion:no-preference){
  .product-detail-skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--card),transparent);transform:translateX(-100%);animation:product-detail-shimmer 1500ms ease-in-out infinite}
}
@keyframes product-detail-shimmer{to{transform:translateX(100%)}}