/* Shared rental-process component roles for standard-banner pages. */
body.catalog-home.public-banner-unified .home-stage>main .rental-step-number{font:var(--ui-control);color:var(--ui-accent);font-variant-numeric:tabular-nums}
body.catalog-home.public-banner-unified .home-stage>main .rental-process-callout{font:var(--ui-note);color:var(--ui-primary)}
body.catalog-home.public-banner-unified .home-stage>main .rental-process-facts li{font:var(--ui-note);color:var(--ui-primary)}
body.catalog-home.public-banner-unified .home-stage>main .rental-faq summary{font:var(--ui-card-title);color:var(--ui-primary)}
body.catalog-home.public-banner-unified .home-stage>main .rental-faq details[open]>summary,
body.catalog-home.public-banner-unified .home-stage>main .rental-faq summary:focus-visible{color:var(--ui-accent)}
body.catalog-home.public-banner-unified .home-stage>main .rental-faq details:not([open])>summary:focus-visible{background:color-mix(in srgb,var(--ui-accent) 7%,transparent)}
body.catalog-home.public-banner-unified .home-stage>main .rental-faq details>div p{color:color-mix(in srgb,var(--ui-secondary) 65%,var(--ui-primary))}
body.catalog-home.public-banner-unified .home-stage>main .rental-faq details>div strong{font-weight:600;color:var(--ui-primary)}
@media(hover:hover) and (pointer:fine){
 body.catalog-home.public-banner-unified .home-stage>main .rental-faq summary:hover{color:var(--ui-accent)}
 body.catalog-home.public-banner-unified .home-stage>main .rental-faq details:not([open])>summary:hover{background:color-mix(in srgb,var(--ui-accent) 7%,transparent)}
}

/* Canonical roles for the two page types. Loaded after component styles.
   References: index.php and God of War Ragnarok. Geometry stays in components. */
body.catalog-home{
 --ui-outline-width:1.5px;
 --ui-icon-colour:var(--top-accent);
 --ui-icon-circle-surface:var(--public-surface);
 --ui-step-icon-stroke:1.4px;
 --ui-section-accent-width:80px;
 --ui-section-icon-size:44px;
 --ui-info-panel-background:rgba(18,21,20,.32);
 --ui-info-panel-border:rgba(201,185,148,.10);
 --ui-info-panel-radius:14px;
 --ui-section-accent-background:linear-gradient(90deg,rgba(201,185,148,0),rgba(201,185,148,.95) 16%,rgba(201,185,148,.72) 48%,rgba(201,185,148,0));
 --ui-family:Manrope,Arial,sans-serif;
 --ui-primary:var(--top-text-primary);--ui-secondary:var(--top-text-secondary);
 --ui-muted:var(--top-text-muted);--ui-accent:var(--top-accent);
 --ui-body:400 16px/1.65 var(--ui-family);
 --ui-note:400 14px/1.5 var(--ui-family);
 --ui-meta:400 12px/1.45 var(--ui-family);
 --ui-label:500 13px/1.5 var(--ui-family);
 --ui-control:500 14px/1.4 var(--ui-family);
 --ui-field:400 16px/1.5 var(--ui-family);
 --ui-card-title:600 18px/1.35 var(--ui-family);
 --ui-section-title:600 28px/1.25 var(--ui-family);
 --ui-compact-section-title:600 22px/1.35 var(--ui-family);
 --ui-compact-section-icon-size:30px;
 --ui-price:700 23px/1.3 var(--ui-family);
 --ui-card-control:500 13px/1.4 var(--ui-family);
 --ui-radius:12px;--ui-control-radius:10px;
}
body.catalog-home .ui-section-heading{display:flex;align-items:flex-start;gap:14px}
body.catalog-home .ui-section-icon{display:block;flex:none;width:var(--ui-section-icon-size);height:var(--ui-section-icon-size);color:var(--ui-icon-colour)}
body.catalog-home .home-catalog-heading>h2.ui-section-heading{position:relative;display:block;padding-inline-start:calc(var(--ui-section-icon-size) + 14px)}
body.catalog-home .home-catalog-heading>h2.ui-section-heading>.ui-section-icon{position:absolute;inset-inline-start:0;top:0}
@media(max-width:600px){body.catalog-home{--ui-section-icon-size:36px}}
body.catalog-home .ui-section-heading>span::after{
 content:"";display:block;width:var(--ui-section-accent-width);height:1px;margin-top:12px;
 background:var(--ui-section-accent-background);pointer-events:none;
}
/* Catalogue and rental-guide headings share the same compact section role. */
body:is(.home-top-polish,.public-banner-unified) .home-stage>main :is(.home-catalog-heading>h2.ui-section-heading,.rental-process-heading,.rental-faq>h2.ui-section-heading){
 --ui-section-icon-size:var(--ui-compact-section-icon-size);
 font:var(--ui-compact-section-title);letter-spacing:-.02em;
}
@media(max-width:600px){body.catalog-home{--ui-compact-section-title:600 20px/1.35 var(--ui-family);--ui-compact-section-icon-size:24px}}
@media(max-width:350px){body.catalog-home{--ui-compact-section-title:600 18px/1.35 var(--ui-family);--ui-compact-section-icon-size:18px}}
body.game-header-compact{
 --ui-page-title:700 clamp(28px,3vw,42px)/1.15 var(--ui-family);
 --ui-section-title:600 clamp(20px,2vw,25px)/1.4 var(--ui-family);
 --ui-card-title:600 18px/1.4 var(--ui-family);
 --ui-price:650 26px/1.3 var(--ui-family);
 --ui-card-control:500 14px/1.4 var(--ui-family);
}
@media(max-width:600px){
 body:is(.home-top-polish,.public-banner-unified){--ui-section-title:600 24px/1.25 var(--ui-family)}
}
@media(max-width:700px){body.catalog-home{--ui-section-accent-width:72px}body.game-header-compact{--ui-page-title:700 29px/1.15 var(--ui-family)}}
@media(max-width:900px) and (min-width:701px), (max-width:360px){
 body.game-header-compact{--ui-price:650 23px/1.3 var(--ui-family)}
}

/* Shared role classes also cover newly introduced components. */
body.catalog-home .home-stage>main{font:var(--ui-body);color:var(--ui-primary)}
body.catalog-home .home-stage>main :is(h1,h2,h3,h4,h5,h6,p,span,strong,b,em,small,dt,dd,li,label,summary,a,button,input,select,textarea,th,td,time){font-family:var(--ui-family)}
body.catalog-home:is(.home-top-polish,.public-banner-unified,.game-header-compact) .home-stage [data-ui-role="body"]{font:var(--ui-body);color:var(--ui-secondary)}
body.catalog-home:is(.home-top-polish,.public-banner-unified,.game-header-compact) .home-stage [data-ui-role="note"]{font:var(--ui-note);color:var(--top-text-supporting)}
body.catalog-home:is(.home-top-polish,.public-banner-unified,.game-header-compact) .home-stage [data-ui-role="meta"]{font:var(--ui-meta);color:var(--ui-secondary)}
body.catalog-home:is(.home-top-polish,.public-banner-unified,.game-header-compact) .home-stage [data-ui-role="label"]{font:var(--ui-label);color:var(--ui-secondary)}
body.catalog-home:is(.home-top-polish,.public-banner-unified,.game-header-compact) .home-stage [data-ui-role="section-title"]{font:var(--ui-section-title);color:var(--ui-primary);letter-spacing:-.025em;text-transform:none}
body.catalog-home:is(.home-top-polish,.public-banner-unified,.game-header-compact) .home-stage [data-ui-role="card-title"]{font:var(--ui-card-title);color:var(--ui-primary);letter-spacing:-.02em;text-transform:none}
body.catalog-home:is(.home-top-polish,.public-banner-unified,.game-header-compact) .home-stage [data-ui-role="price"]{font:var(--ui-price);color:var(--ui-accent);font-variant-numeric:tabular-nums}
body.catalog-home:is(.home-top-polish,.public-banner-unified,.game-header-compact) .home-stage [data-ui-role="control"]{font:var(--ui-control);letter-spacing:0;text-transform:none}
body.catalog-home:is(.home-top-polish,.public-banner-unified,.game-header-compact) .home-stage [data-ui-role="field"]{font:var(--ui-field);color:var(--ui-primary);background:var(--public-surface);border:var(--ui-outline-width,1.5px) solid var(--public-border);border-radius:var(--ui-control-radius)}

/* Standard-banner pages: catalogue hierarchy, including administrative screens. */
body:is(.home-top-polish,.public-banner-unified) .home-stage>main :is(h2,[data-ui-role="section-title"]){font:var(--ui-section-title);color:var(--ui-primary);letter-spacing:-.025em;text-transform:none}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main :is(h3,h4,.home-game-title,.cart-item-info h2,.expected-game h3,.admin-support-card>header h2,.admin-customer-name,.admin-game-settings-title>div:first-child strong,.customer-rental-identity>strong,[data-ui-role="card-title"]){font:var(--ui-card-title);color:var(--ui-primary);letter-spacing:-.02em;text-transform:none}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main :is(p,.process-steps p,.cart-empty p,.expected-games-intro,.admin-support-message p){font:var(--ui-body);color:var(--ui-secondary)}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main :is(small,.admin-support-card>header time,.admin-customer-inline-contact,.rental-summary-meta,.customer-rental-history li,.rental-meeting-timing>p){font:var(--ui-note);color:var(--top-text-supporting)}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main :is(.eyebrow,.home-game-languages,.home-game-board-parameters,.admin-rental-kicker,.admin-game-finance span,.admin-finance-summary span,.admin-customer-stats>span){font:var(--ui-meta);color:var(--ui-secondary);letter-spacing:0;text-transform:none}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main :is(.process-steps strong,.customer-rental-history>summary,.club-cabinet-head strong,.account-summary strong,.cabinet-balance-placeholder h2){font:var(--ui-card-title);color:var(--ui-primary);letter-spacing:-.02em;text-transform:none}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main .home-catalog-heading>p{font:400 14px/1.4 var(--ui-family);color:var(--ui-accent)}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main .home-catalog-section-head h2{font:500 20px/1.35 var(--ui-family);color:var(--ui-accent);letter-spacing:-.02em}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main :is(.home-game-daily strong,.home-game-deposit strong,.cart-checkout strong,.admin-finance-summary strong,.admin-customer-stats strong,.admin-rental-stats strong,.admin-game-finance strong){font:var(--ui-price);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main :is(.home-game-daily strong,.home-game-deposit strong,.cart-checkout strong){color:var(--ui-accent)}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main :is(.home-game-rate-label,.home-game-deposit>small){font:400 12px/1.5 var(--ui-family);color:var(--ui-accent)}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main .home-game-languages b{font-weight:500;color:var(--ui-primary)}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main .home-game-daily em{font:500 12px/1.45 var(--ui-family);color:var(--ui-primary)}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main .home-game-daily small:not(.home-game-rate-label){font:500 12px/1.45 var(--ui-family);color:var(--ui-primary)}
body:is(.home-top-polish,.public-banner-unified) .home-stage>main .home-game-action{font:var(--ui-card-control)}

/* Administrative controls use the same vocabulary as public forms/buttons.
   Status and destructive-action colours remain semantic, not decorative. */
body.public-banner-unified .admin-main :is(label,th){font:var(--ui-label);color:var(--ui-secondary);letter-spacing:0;text-transform:none}
body.public-banner-unified .admin-main :is(td,dd){font:var(--ui-note);color:var(--ui-primary)}
body.public-banner-unified .admin-main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font:var(--ui-field);color:var(--ui-primary);background:var(--public-surface);border-color:var(--public-border);border-radius:var(--ui-control-radius)}
body.public-banner-unified .admin-main button{font:var(--ui-control);letter-spacing:0;text-transform:none;border-radius:var(--ui-control-radius);min-height:44px}
body.public-banner-unified .admin-main button:where(:not(.admin-support-close):not(.admin-delete-customer button)){color:var(--ui-primary);border-color:var(--public-border)}
body.public-banner-unified .admin-main button[type=submit]:not(.admin-support-close):not(.admin-delete-customer button){background:var(--public-fill);border-color:var(--public-fill);color:var(--public-surface);font-weight:600}
body.public-banner-unified .admin-main .admin-customer-menu-trigger{font-size:20px;background:transparent}
body.public-banner-unified .admin-main :is(.admin-game-settings,.admin-customer-summary,.admin-support-card,.admin-rental-card,.admin-finance-summary,.admin-users-tools){background:var(--public-surface);border-color:var(--public-border);border-radius:var(--ui-radius)}
body.public-banner-unified .admin-main .admin-user-filters button[aria-pressed=true]{background:var(--public-filter-fill);color:var(--public-surface);border-color:var(--ui-accent)}
body.public-banner-unified .admin-main .admin-user-filters button span{color:inherit}
body.public-banner-unified .admin-main :is(.admin-customer-avatar,.admin-game-state,.admin-rental-status,.admin-stock){font:var(--ui-label);letter-spacing:0;text-transform:none}
body.public-banner-unified .admin-main .admin-customer-menu-panel button{font:var(--ui-control)}
body.public-banner-unified .admin-main .admin-customer-stats>span:not(:nth-child(4)) strong{color:var(--ui-primary)}
body.public-banner-unified .admin-main .admin-game-finance strong{font:600 16px/1.4 var(--ui-family)}
body.public-banner-unified .admin-main .admin-finance-summary>div:not(.is-profit):not(.is-loss)>strong{color:var(--ui-accent)}

/* All game pages: God of War typography, regardless of platform or artwork. */
body.game-header-compact .game-detail .gd-heading h1{font:var(--ui-page-title);letter-spacing:-.6px}
body.game-header-compact .game-detail :is(.gd-about h2,.gd-section h2){font:var(--ui-section-title);color:var(--ui-primary);letter-spacing:-.02em;text-transform:none}
body.game-header-compact .game-detail :is(.gd-description-heading,.gd-characteristics-heading){font:var(--ui-card-title);color:var(--banner-title-accent);letter-spacing:0;text-transform:none}
body.game-header-compact .game-detail .gd-description p{font:var(--ui-body);color:var(--ui-secondary)}
body.game-header-compact .game-detail .gd-characteristics{font:400 14px/1.5 var(--ui-family)}
body.game-header-compact .game-detail .gd-characteristics :is(dt,dd){font:inherit}
body.game-header-compact .game-detail .gd-characteristics dt{color:var(--ui-secondary)}
body.game-header-compact .game-detail .gd-characteristics dd{color:var(--ui-primary)}
body.game-header-compact .game-detail .gd-characteristics dt svg{width:22px;height:22px}
body.game-header-compact .game-detail .gd-characteristics dt{gap:10px}
body.game-header-compact .game-detail .gd-characteristics dd{padding-left:32px}
body.game-header-compact .game-detail .gd-how-illustrated strong{font:600 15px/1.4 var(--ui-family);color:var(--ui-primary)}
body.game-header-compact .game-detail .gd-how-illustrated p{font:var(--ui-note);color:var(--top-text-supporting)}
body.game-header-compact .game-detail .gd-how-illustrated .gd-step-number{font:500 14px/1.4 var(--ui-family);color:var(--ui-muted)}
body.game-header-compact .game-detail .gd-rental-panel .gd-prices>div>div>strong{font:var(--ui-price);color:var(--ui-accent);letter-spacing:0;font-variant-numeric:tabular-nums}
body.game-header-compact .game-detail .gd-rental-panel .gd-prices .gd-price-label{font:400 12px/1.5 var(--ui-family);color:var(--ui-accent);text-transform:none}
body.game-header-compact .game-detail .gd-rental-panel .gd-prices em{font:500 12px/1.45 var(--ui-family);color:var(--ui-primary)}
body.game-header-compact .game-detail .gd-rental-panel .gd-prices :is(.gd-first-period,.gd-later-rate){font:400 13px/1.5 var(--ui-family);color:var(--ui-primary)}
body.game-header-compact .game-detail .gd-rental-panel .gd-prices .gd-later-rate strong{font:600 14px/1.5 var(--ui-family);color:var(--ui-primary)}
body.game-header-compact .game-detail .gd-rental-panel .gd-pickup{font:var(--ui-note);color:var(--ui-primary)}
body.game-header-compact .game-detail .gd-rental-panel .gd-pickup small{font:400 13px/1.5 var(--ui-family);color:color-mix(in srgb,var(--ui-secondary) 40%,var(--ui-primary))}
body.game-header-compact .game-detail :is(.gd-button,.gd-rental-panel .home-game-action){font:var(--ui-control);letter-spacing:0;text-transform:none;border-radius:var(--ui-control-radius)}
body.game-header-compact .game-detail .gd-rental-panel .home-game-action{height:auto;min-height:46px;padding:10px 9px;white-space:normal}
body.game-header-compact .game-detail .gd-rental-panel:not(.is-selected) .home-game-add:not(.home-game-notify){background:linear-gradient(115deg,#d0b78c,#c9b994 55%,#bfa780);border-color:#d4c19d;color:#0c0e0e}
body.catalog-home .home-stage>main :is(.button-primary,.gd-primary){font-weight:600}
body.catalog-home .home-stage>main [data-game-card]:not(.is-selected) .home-game-add:not(.home-game-notify){font-weight:600}
@media(max-width:430px){body.game-header-compact .game-detail .gd-characteristics{font-size:13px}}
@media(max-width:700px){
 body.game-header-compact .game-detail .gd-characteristics dt svg{width:20px;height:20px}
 body.game-header-compact .game-detail .gd-characteristics dt{gap:8px}
 body.game-header-compact .game-detail .gd-characteristics dd{padding-left:28px}
}

/* Keep browser/system high-contrast rendering and semantic statuses intact. */
/* Neutral card/control outlines share the same weight across both page types.
   Icons within a block always share colour, size and centred visible bounds. */
body.catalog-home :is(.rental-step-marker,.game-detail .gd-how-illustrated .gd-step-icon){color:var(--ui-icon-colour);border-color:var(--ui-icon-colour);background:var(--ui-icon-circle-surface);box-shadow:none;display:grid;place-items:center}
body.catalog-home .game-detail .gd-how-illustrated .gd-step-icon svg{display:block;place-self:center;margin:0;color:var(--ui-icon-colour)}
body.catalog-home :is(.rental-step-marker,.game-detail .gd-how-illustrated .gd-step-icon) svg{overflow:visible}
body.catalog-home :is(.rental-step-marker,.game-detail .gd-how-illustrated .gd-step-icon) svg :is(path,circle,ellipse,rect){vector-effect:non-scaling-stroke;stroke-width:var(--ui-step-icon-stroke)}
/* Match the reference outlines in the facts card without scaling SVG strokes. */
body.catalog-home .rental-process-facts li svg :is(path,circle,ellipse,rect){vector-effect:non-scaling-stroke;stroke-width:2px}
body.catalog-home .rental-process-facts li svg path[stroke="#0c0e0e"]{stroke-width:4px}
/* Preserve the guide's approved outline weight as all five icons shrink on phones. */
@media(max-width:600px){body.catalog-home .rental-step-marker{--ui-step-icon-stroke:1.2px}}
/* Neutral card/control outlines share the same weight across both page types.
   Border styles remain owned by components, so borderless elements stay so. */
body.catalog-home :is(.cart-item,.cart-empty,.cart-checkout,.expected-games,.expected-game,.customer-rental,.customer-rental-history,.rental-finance-row>div,.rental-facts,.rental-information,.rental-addresses>article,.club-cabinet-card,.action-dialog,.support-panel,.support-message,.calculator-days-control,.account-form input,.apply-form input,.lookup-form input,.support-start input,.support-start textarea,.support-send textarea){border-width:var(--ui-outline-width)}
body.catalog-home.public-banner-unified .admin-main :is(.admin-game-settings,.admin-customer-summary,.admin-support-card,.admin-rental-card,.admin-finance-summary,.admin-users-tools,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea,button){border-width:var(--ui-outline-width)}
@media(forced-colors:active){body.catalog-home [data-ui-role]{color:CanvasText}}