/* DrKeys brand layer for the storefront (never admin).
   Colours from the DrKeys identity: Vault Black, Key Gold, Receipt, Steel. Gold is a flat fill, never a gradient.
   Home is the dark Vault page; every other page is the cream Receipt page (html[data-theme=light]).
   Cards, the buy box and the key are printed like a key receipt: a perforated stub with notches.
   The gold diamond (.dia) is the bow of the key in the logo: it marks a key that works where you are. */

@font-face{font-family:Plex;src:url(/assets/fonts/plex-arabic-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;src:url(/assets/fonts/plex-arabic-arabic-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;src:url(/assets/fonts/plex-arabic-arabic-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Plex;src:url(/assets/fonts/plex-arabic-latin-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Plex;src:url(/assets/fonts/plex-arabic-latin-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Plex;src:url(/assets/fonts/plex-arabic-latin-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-latin-wdth.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2122,U+2212}

/* Tokens. The old --k*, --gold-grad and --glow names are re-pointed so every old rule turns flat. */
html .store-page.store-page{
  color-scheme:dark;
  --vault:#0A0A0A;--keygold:#F2A91C;--receipt:#F3EEE3;--steel:#8E8B84;
  --bg:#0A0A0A;--surface:#161513;--soft:#1F1E1B;--ink:#F3EEE3;--muted:#A8A49B;--line:#2B2925;
  --gold:#F2A91C;--gold-text:#F2A91C;--gold-1:#F2A91C;--gold-2:#F2A91C;--gold-3:#F2A91C;--gold-grad:#F2A91C;--gold-ink:#0A0A0A;--glow:transparent;
  --cream:#F3EEE3;--cream-2:#E4DCCB;--black:#0A0A0A;
  --paper:#F3EEE3;--paper-ink:#0A0A0A;--paper-muted:#5E5B55;--paper-tone:#E4DCCB;
  --radius:4px;--head:Archivo,Plex,system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-emph:cubic-bezier(.05,.7,.1,1);
  background:var(--bg);color:var(--ink);font-family:Plex,system-ui,sans-serif;
}
html[data-theme=light] .store-page.store-page{
  color-scheme:light;
  --bg:#F3EEE3;--surface:#FBF8F1;--soft:#E9E1D1;--ink:#0A0A0A;--muted:#5E5B55;--line:#DCD2BF;
  --gold-text:#8A5A00;--gold-1:#8A5A00;
  --cream:#0A0A0A;--cream-2:#2B2925;
  --paper:#0A0A0A;--paper-ink:#F3EEE3;--paper-muted:#A8A49B;--paper-tone:#1C1B19;
  background:var(--bg);
}
html[lang=ar] .store-page.store-page{--head:Plex,system-ui,sans-serif;line-height:1.8}

html .store-page.store-page{
  /* type: Archivo expanded for Latin headings (brand face), Plex for Arabic and text */
  & :is(h1,h2,h3){font-family:var(--head);font-weight:760;font-stretch:112%;letter-spacing:-.015em;line-height:1.06;color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
  & p{color:var(--muted)}
  & :is(.eyebrow,.hero-label,.verify-eyebrow,.buy-label,.brand small,.navigation a,.row-heading h2,.rank-panel h2,.footer-link-group strong,.platform-badge,.guide-badge,.game-cover-brand,.game-cover-title,.footer-payments-note,.card-cart .button,th){text-transform:none;letter-spacing:0}
  & .eyebrow{font-size:15px;font-weight:600;margin-bottom:12px}
  & bdi{unicode-bidi:isolate}

  /* flat surfaces: no gradients, glows or glass anywhere */
  & :is(.account-band,.category-tile,.game-cover,.hero,.mission-band,.rank-panel,.cart-summary,.checkout-summary,.product-card,.product-cover,.product-purchase-panel,.region-dialog,.newsletter-band,.trust-strip,.verify-card,.verify-mark,.wish-ribbon,.wish-ribbon-body,.site-footer,.mini-cart,.shop-sidebar,.gallery-stage,.cookie-notice,.footer-locale-panel,.header-account-panel,.search-suggestions,.store-settings-panel,.filter-dropdown,.sort-options,.guide-card){background-image:none;box-shadow:none}
  & .site-header{backdrop-filter:none;background:var(--bg);border:0}
  & .navigation-row{border:0}

  /* buttons: one shape, square-cornered; gold is the action */
  & .button{border:0;border-radius:var(--radius);background:var(--soft);color:var(--ink);font-weight:600;box-shadow:none;gap:10px;transition:transform .16s var(--ease-out),background-color .16s}
  & .button:hover{background:var(--line);color:var(--ink)}
  & .button:active{transform:scale(.97)}
  & .button.primary{background:var(--gold);color:var(--gold-ink);box-shadow:none}
  & .button.primary:hover{background:#FFB938;color:var(--gold-ink)}
  & .button:disabled,& .button.primary:disabled{background:var(--soft);color:var(--muted)}
  & .text-link{color:var(--gold-text);font-size:15px}
  & :focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  & ::selection{background:var(--gold);color:var(--gold-ink)}

  /* header: wordmark, the search as the main tool, a few plain links */
  & .header-row{min-height:76px;gap:28px}
  & .brand>span{font-family:var(--head);font-stretch:112%;font-weight:760;letter-spacing:-.01em;font-size:22px}
  & .brand small{font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
  & .brand img{box-shadow:none;border-radius:6px}
  & .header-search{max-width:560px;height:48px;border:0;border-radius:var(--radius);background:var(--surface)}
  & .header-search:focus-within{box-shadow:none;outline:3px solid var(--gold)}
  & .header-search input{font-size:16px}
  & .navigation{gap:26px;min-height:44px;font-size:15px;font-weight:600}
  & .navigation a{color:var(--muted)}
  & .navigation a:hover,& .navigation a[aria-current]{color:var(--ink);text-decoration:underline 3px var(--gold);text-underline-offset:8px}
  & .cart-link>span{background:var(--gold);color:var(--gold-ink);border-radius:2px;font-weight:700}

  /* the diamond from the logo */
  & .dia{display:inline-block;inline-size:.62em;block-size:.62em;background:var(--keygold);rotate:45deg;margin-inline-end:.55em;flex:none;transition:rotate .45s var(--ease-emph)}

  /* home: the opening */
  & .home-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(32px,6vw,96px) clamp(48px,7vw,112px)}
  & .home-hero h1{font-size:clamp(48px,6.6vw,108px);line-height:.98;max-width:9ch}
  & .home-hero .lead{font-size:clamp(18px,1.5vw,21px);color:var(--ink);max-width:44ch;margin-block:24px 32px}
  & .home-hero .button.primary{min-height:56px;padding-inline:28px;font-size:17px}
  & .home-since{margin-top:24px;font-weight:600;color:var(--muted)}

  /* the key receipt (home opening and the product buy box) */
  & .key-receipt{background:var(--paper);color:var(--paper-ink);border:0;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;padding:0}
  & .key-receipt :is(p,label){color:var(--paper-muted)}
  & .key-receipt-main{padding:28px 32px}
  & .key-receipt-title{font:760 20px var(--head);font-stretch:112%;color:var(--paper-ink)!important}
  & .key-receipt-game{margin-block:2px 16px}
  & .key-receipt-main{container-type:inline-size}
  & .key-receipt-code{font:700 min(32px,calc((100cqi - 40px) / 14.5))/1.2 Archivo,sans-serif;white-space:nowrap;font-stretch:118%;letter-spacing:.06em;color:var(--paper-ink)!important;background:var(--paper-tone);padding:14px 16px;text-align:center}
  & .key-receipt-note{font-size:15px;margin-top:14px}
  & :is(.key-receipt-stub,.card-stub){position:relative;background:var(--paper-tone);border-top:6px dotted var(--bg)}
  & :is(.key-receipt-stub,.card-stub)::before,& :is(.key-receipt-stub,.card-stub)::after{content:"";position:absolute;top:-14px;inline-size:22px;block-size:22px;border-radius:50%;background:var(--bg)}
  & :is(.key-receipt-stub,.card-stub)::before{inset-inline-start:-11px}
  & :is(.key-receipt-stub,.card-stub)::after{inset-inline-end:-11px}
  & .key-receipt-stub{display:grid;gap:12px;padding:24px 32px 28px}
  & .key-receipt-stub label{font-weight:600;color:var(--paper-ink)}
  & .key-receipt-stub select{font:600 16px Plex,sans-serif;padding:12px;border:0;border-radius:var(--radius);background:var(--paper);color:var(--paper-ink)}
  & .key-receipt-stub .button{justify-self:start;background:var(--paper-ink);color:var(--paper);min-height:48px}
  & .key-receipt-stub .button:hover{background:var(--paper-ink);opacity:.9}

  /* the one gold field on the home page: trust, said once */
  & .home-band{background:var(--keygold);color:var(--vault);display:grid;grid-template-columns:1fr 1fr;align-items:center}
  & .home-band img{width:100%;height:100%;object-fit:cover}
  & .home-band p{font:700 clamp(20px,2vw,30px)/1.35 var(--head);font-stretch:106%;color:var(--vault);padding:clamp(28px,5vw,72px);max-width:30ch}
  & .home-band a{color:var(--vault);text-decoration:underline 3px;text-underline-offset:5px;white-space:nowrap}

  /* rows */
  & .store-row{margin-block:clamp(56px,7vw,104px)}
  & .row-heading{border:0;margin-bottom:24px}
  & .row-heading h2,& .rank-panel h2{font-size:clamp(28px,3vw,44px)}
  & .rail-button{border:0;border-radius:var(--radius);background:var(--soft);color:var(--ink);box-shadow:none}

  /* product card = a key receipt */
  & .product-card{background:var(--paper);color:var(--paper-ink);border:0;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .16s var(--ease-out)}
  & .product-card:hover{box-shadow:none;border:0}
  & .product-image{display:block;aspect-ratio:460/215;overflow:hidden;background:var(--paper-tone);position:relative;border-radius:0}
  & .product-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out),opacity .24s var(--ease-out)}
  & .discount-badge{position:absolute;top:10px;inset-inline-start:10px;background:var(--keygold);color:var(--vault);font:700 14px/1.4 Archivo,Plex,sans-serif;padding:2px 8px;border-radius:2px;box-shadow:none;border:0}
  & .product-copy{padding:16px 18px 14px;flex:1;display:flex;flex-direction:column;gap:6px;background:none}
  & .product-card h3{font-size:19px;font-stretch:104%;line-height:1.2;color:var(--paper-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  & .product-card h3 a{color:inherit}
  & .product-meta{display:block;color:var(--paper-muted);font-size:14px;margin:0}
  & .card-score{color:var(--paper-ink);font-weight:700}
  & .price-tag{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:auto;padding-top:6px}
  & .price-tag strong{font:760 22px Archivo,Plex,sans-serif;font-stretch:106%;color:var(--paper-ink);font-variant-numeric:tabular-nums}
  & .price-tag s{color:var(--paper-muted);font-size:14px}
  & .card-left{font-size:14px;font-weight:700;color:var(--paper-ink)}
  & .card-stub{margin-top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 12px 16px;min-height:56px}
  & .card-fit{display:inline-flex;align-items:center;font-size:14px;font-weight:700;color:var(--paper-ink);line-height:1.25}
  & .card-fit.is-no{color:var(--paper-muted);font-weight:600}
  & .card-cart{margin:0}
  & .card-cart .button{min-height:38px;padding:6px 14px;font-size:14px;width:auto}
  & .card-cart .button svg{display:none}
  & .card-wishlist{top:10px;inset-inline-end:10px;inset-inline-start:auto;width:36px;height:36px;border:0;border-radius:2px;background:var(--paper);color:var(--paper-ink);box-shadow:none}
  & .product-card.is-out{opacity:.55;filter:saturate(.5)}

  /* rank lists and genre tiles */
  & .rank-panel{background:var(--surface);border:0;border-radius:var(--radius)}
  & .rank-list a{border:0}
  & .rank-number{background:none;color:var(--gold-text);-webkit-text-fill-color:currentColor;font-family:Archivo,Plex,sans-serif;font-stretch:112%}
  & .rank-copy strong{color:var(--ink)}
  & .rank-list .price-tag strong{color:var(--ink);font-size:17px}
  & .rank-list .price-tag s{color:var(--muted)}
  & .category-tile{background:var(--surface);border:0;border-radius:var(--radius);box-shadow:none}
  & .category-tile:hover{background:var(--soft)}
  & .genre-icon{color:var(--ink)}
  & .genre-icon path{stroke:currentColor}
  & .category-tile small{color:var(--muted)}

  /* home: activation in three steps */
  & .home-activate{background:var(--surface);border-radius:var(--radius);padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:1fr 2fr;gap:16px 48px;align-items:start}
  & .home-activate h2{font-size:clamp(26px,2.6vw,38px)}
  & .home-activate ol{margin:0;padding-inline-start:1.4em;display:grid;gap:10px;font-size:18px;color:var(--ink)}
  & .home-activate li::marker{color:var(--gold-text);font-weight:700}
  & .home-activate .text-link{grid-column:2}

  /* product page */
  & .product-page-heading h1{font-size:clamp(32px,4.2vw,58px)}
  & :is(.chip-type,.chip-region,.chip-genre,.product-heading-chips .platform-badge){background:var(--soft);color:var(--ink);border:0;border-radius:2px;box-shadow:none;font-weight:600}
  & .chip-type{background:var(--keygold);color:var(--vault)}
  & :is(.product-fact,.product-content-panel,.product-important){background:var(--surface);border:0;border-radius:var(--radius);box-shadow:none}
  & .gallery-stage{border-radius:var(--radius);border:0}
  & .product-section-links{border:0}
  & .product-section-links a{color:var(--muted);font-weight:600}
  & .product-section-links a:hover{color:var(--ink)}
  & .product-purchase-panel.key-receipt{position:sticky;top:136px}
  & .product-purchase-panel .key-receipt-main{display:grid;gap:12px}
  & .buy-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
  & .buy-price strong{font:760 clamp(34px,3.2vw,46px)/1 Archivo,Plex,sans-serif;font-stretch:108%;color:var(--paper-ink)}
  & .buy-price s{color:var(--paper-muted)}
  & .discount-pill{background:var(--keygold);color:var(--vault);border-radius:2px;padding:2px 8px;font-weight:700;border:0}
  & .buy-save{font-weight:700;color:var(--paper-ink)!important}
  & .stock-line{color:var(--paper-ink)!important;font-weight:600;margin:0}
  & .stock-line svg{display:none}
  & .buy-fit{display:flex;align-items:center;font-weight:700;color:var(--paper-ink)!important}
  & .buy-fit.is-no{color:var(--paper-muted)!important;font-weight:600;display:block}
  & .buy-fit a{color:var(--keygold)}
  & .quantity-row label{color:var(--paper-ink)}
  & .quantity-row input{background:var(--paper-tone);color:var(--paper-ink);border:0;border-radius:var(--radius)}
  & .product-cart-controls .button{min-height:54px;font-size:17px}
  & .product-cart-controls .buy-now{background:var(--paper-tone);color:var(--paper-ink)}
  & .buy-stub{gap:10px;padding:22px 28px 24px;font-size:15px}
  & .buy-stub p{color:var(--paper-ink)}
  & .buy-stub a{color:var(--keygold)}
  & .buy-payments{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  & .buy-payments li{background:var(--receipt);border-radius:2px;padding:6px 10px;display:grid;place-items:center}
  & .buy-payments img{height:20px;width:auto}
  & .buy-cr{font-size:14px;color:var(--paper-muted)!important}
  & .cashback-deal{background:var(--paper-tone);border:0;border-radius:var(--radius)}

  /* cart, checkout, account, support, info: flat panels */
  & :is(.cart-summary,.checkout-summary,.form-panel,.account-card,.account-panel,.profile-card,.verify-card,.guide-card,.faq-item,.policy-document,.ticket-message,.order-content-card,.empty-state){background:var(--surface);border-color:transparent;box-shadow:none;border-radius:var(--radius)}
  & .page-heading h1{font-size:clamp(34px,4.4vw,60px);background:none;-webkit-text-fill-color:currentColor}
  & .page-heading .lead{color:var(--muted)}

  /* footer: the back of the receipt (cream on the dark home, black on cream pages) */
  & .site-footer{--ink:var(--paper-ink);--muted:var(--paper-muted);--surface:var(--paper-tone);--soft:var(--paper-tone);--line:var(--paper-tone);--cream:var(--paper-ink);background:var(--paper);color:var(--paper-ink);border:0;margin-top:clamp(72px,9vw,140px);overflow:hidden}
  & .site-footer :is(p,a,strong,small,span){color:inherit}
  & .site-footer .footer-mission,& .site-footer .footer-legal{color:var(--paper-muted)}
  & .footer-link-group a{color:var(--paper-muted)}
  & .footer-link-group a:hover{color:var(--paper-ink)}
  & .footer-top,& .footer-bottom{border:0}
  & .newsletter-band{background:var(--keygold);color:var(--vault);border:0;border-radius:var(--radius)}
  & .newsletter-band :is(h2,p,a,svg){color:var(--vault)}
  & .newsletter-form input{background:var(--receipt);color:var(--vault);border:0;border-radius:var(--radius)}
  & .newsletter-form .button.primary{background:var(--vault);color:var(--receipt)}
  & .footer-payment-strip{background:none;border:0}
  & .footer-payments li{background:var(--receipt);border:0;box-shadow:none;border-radius:2px}
  & .footer-social a{background:none!important;border:0;box-shadow:none!important;color:var(--paper-ink)}
  & .footer-social a svg{fill:currentColor;stroke:none}
  & .footer-locale{color:var(--paper-ink)}

  /* dialogs and popovers float, so they may keep a shadow; no gradients */
  & :is(.mini-cart,.region-dialog,.cookie-notice,.header-account-panel,.search-suggestions,.store-settings-panel,.footer-locale-panel){background-color:var(--surface);border-radius:var(--radius);border:0;box-shadow:0 18px 48px -18px #0006}
}
html[lang=ar] .store-page.store-page :is(h1,h2,h3){letter-spacing:0;line-height:1.35}

/* motion: transform and opacity only, under 300ms except the cover morph */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-group(dk-cover){animation-duration:.28s;animation-timing-function:cubic-bezier(.05,.7,.1,1)}
.view-product .hero-cover-img{view-transition-name:dk-cover}
@media (hover:hover){
  html .store-page.store-page .product-card:hover{transform:translateY(-4px)}
  html .store-page.store-page .product-card:hover .product-image img{transform:scale(1.04)}
}
html .store-page.store-page .is-adding .dia,html .store-page.store-page .dia.turn{rotate:135deg}
html .store-page.store-page .is-adding .button.primary{background:var(--paper-ink);color:var(--paper)}
.dk-bump{animation:dk-bump .3s cubic-bezier(.23,1,.32,1)}
@keyframes dk-bump{50%{transform:scale(1.3)}}
.store-page img.dk-fade{opacity:0}
.store-page img.dk-fade.is-in{opacity:1;transition:opacity .24s cubic-bezier(.23,1,.32,1)}

@media (max-width:900px){
  html .store-page.store-page .home-hero,html .store-page.store-page .home-band,html .store-page.store-page .home-activate{grid-template-columns:1fr}
  html .store-page.store-page .home-activate .text-link{grid-column:auto}
  html .store-page.store-page .product-purchase-panel.key-receipt{position:static}
}
@media (max-width:600px){
  html .store-page.store-page :is(.key-receipt-main,.key-receipt-stub){padding-inline:20px}
  html .store-page.store-page .card-stub{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html .store-page.store-page *,html .store-page.store-page *::before,html .store-page.store-page *::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .store-page img.dk-fade{opacity:1}
}

/* fixes after the first screenshots */
html .store-page.store-page .navigation a[aria-current]{background:none;border-radius:0;padding-inline:0}
html .store-page.store-page .navigation-row{background:var(--bg)}
html .store-page.store-page .product-card h3{max-block-size:2.45em}
html .store-page.store-page .card-cart .button{white-space:nowrap;min-width:64px}
html .store-page.store-page .page-main .store-row>.container{width:100%}
html .store-page.store-page .footer-trust{background:none;border:0;padding:0;box-shadow:none}
html .store-page.store-page .footer-trust svg{color:var(--keygold)}
html .store-page.store-page .footer-locale{background:var(--paper-tone);border:0;border-radius:var(--radius)}
/* sign-in and register: one quiet panel, no background art */
html .store-page.store-page .auth-entry{--auth-art:none;background:none;border:0;box-shadow:none}
html .store-page.store-page .auth-copy{background:var(--paper)!important;color:var(--paper-ink);border-radius:var(--radius);box-shadow:none}
html .store-page.store-page .auth-copy::before,html .store-page.store-page .auth-copy::after,html .store-page.store-page .auth-entry::before,html .store-page.store-page .auth-entry::after{display:none}
html .store-page.store-page .auth-copy :is(h1,p){color:var(--paper-ink)}
html .store-page.store-page .auth-copy p{color:var(--paper-muted)}
html .store-page.store-page .auth-brand-mark{background:none;border:0;box-shadow:none}
html .store-page.store-page .auth-entry .form-panel{background:var(--surface);border:0;box-shadow:none}
html .store-page.store-page .page-heading .eyebrow,html .store-page.store-page .contact-intro .eyebrow{display:none}

/* organic layer: paper grain, a torn edge, and an inked rubber stamp (filter #dk-ink is inline in the footer markup) */
html .store-page.store-page{--grain:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.45%20%200%200%200%200%20.38%20%200%200%200%20.11%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22220%22%20height%3D%22220%22%20filter%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E");--torn:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%2212%22%20viewBox%3D%220%200%20600%2012%22%3E%3Cpath%20d%3D%22M0%200L600%200L600%206.0C594.0%205.9%20571.7%205.2%20564.0%205.5C556.3%205.8%20569.9%207.7%20553.9%207.6C537.8%207.5%20489.8%205.5%20467.8%204.8C445.7%204.1%20440.5%203.4%20421.7%203.3C402.8%203.3%20381.7%204.6%20354.7%204.7C327.7%204.9%20286.2%204.4%20259.7%204.3C233.3%204.1%20216.8%203.2%20196.0%203.7C175.2%204.3%20155.6%207.1%20134.9%207.5C114.2%207.9%2094.3%206.3%2071.9%206.1C49.4%205.8%2012.0%206.0%200.0%206.0L0%200Z%22%2F%3E%3C%2Fsvg%3E")}
html .store-page.store-page :is(.key-receipt,.product-card){background-image:var(--grain);background-blend-mode:multiply}
html[data-theme=light] .store-page.store-page :is(.key-receipt,.product-card){background-blend-mode:screen}
html .store-page.store-page :is(.key-receipt,.product-card){-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 11px) no-repeat,var(--torn) bottom/240px 12px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 11px) no-repeat,var(--torn) bottom/240px 12px repeat-x;border-radius:var(--radius) var(--radius) 0 0}
html .store-page.store-page :is(.key-receipt-stub,.card-stub){background-image:var(--grain);padding-bottom:22px}
html .store-page.store-page .ink-stamp{display:inline-flex;align-items:center;gap:.5em;justify-self:start;align-self:flex-start;font:800 clamp(17px,1.6vw,21px)/1.15 Archivo,Plex,sans-serif;font-stretch:108%;color:var(--stamp-ink,var(--paper-ink));border:3px solid currentColor;border-radius:6px;padding:8px 14px;rotate:-4deg;filter:url(#dk-ink);opacity:1}
html .store-page.store-page .ink-stamp .dia{margin:0;background:currentColor}
html .store-page.store-page .ink-stamp.is-pressed{animation:dk-stamp .34s cubic-bezier(.05,.7,.1,1) both}
@keyframes dk-stamp{0%{opacity:0;transform:scale(1.4) rotate(-6deg)}70%{opacity:.95;transform:scale(.97)}100%{opacity:.92;transform:none}}
html .store-page.store-page .dk-defs{position:absolute;width:0;height:0;overflow:hidden}
html .store-page.store-page .buy-fit .ink-stamp{margin-block:6px}

/* Colour harmony (owner, 2026-11-04): marble black ~55%, receipt cream ~30%, steel ~10%, Key Gold ~5%.
   Gold is only the main action, the diamond and at most one gold field per page; never gold text on cream.
   Black surfaces are Nero Marquina marble with warm veins (photo: devanstone Co., CC BY 2.0, credited in the footer). */
html .store-page.store-page{--marble:url(/assets/brand/marble.jpg?v=20261105);--steel:#8E8B84}
html .store-page.store-page.view-home{background:#0A0A0A var(--marble) center top/cover fixed}
html[data-theme=light] .store-page.store-page :is(.product-card,.product-purchase-panel.key-receipt,.auth-copy){background-color:#0A0A0A;background-image:var(--marble);background-size:900px auto;background-blend-mode:normal}
html[data-theme=light] .store-page.store-page .product-card:nth-child(4n+2){background-position:30% 40%}
html[data-theme=light] .store-page.store-page .product-card:nth-child(4n+3){background-position:70% 10%}
html[data-theme=light] .store-page.store-page .product-card:nth-child(4n){background-position:55% 85%}
html[data-theme=light] .store-page.store-page .card-stub{background-color:#151412cc}
html[data-theme=light] .store-page.store-page .site-footer{background:#0A0A0A var(--marble) center/cover}
html .store-page.store-page.view-home .site-footer{background:var(--receipt)}
/* gold, rationed */
html .store-page.store-page .discount-badge,html .store-page.store-page .discount-pill{background:var(--vault);color:var(--keygold)}
html .store-page.store-page .card-cart .button.primary{background:var(--paper-ink);color:var(--paper)}
html .store-page.store-page .card-cart .button.primary:hover{background:var(--paper-ink);opacity:.88}
html .store-page.store-page .newsletter-band{background:var(--paper-tone);color:var(--paper-ink)}
html .store-page.store-page .newsletter-band :is(h2,p,a,svg){color:var(--paper-ink)}
html .store-page.store-page .newsletter-form .button.primary{background:var(--keygold);color:var(--vault)}
html .store-page.store-page .chip-type{background:var(--soft);color:var(--ink)}
html .store-page.store-page :is(.home-since,.product-meta,.buy-cr,.footer-legal){color:var(--steel)}

/* Key-cut edge: each card ends in the bitting of a real pin-tumbler key; 8 cuts, picked by product number (dk_ui_product_card). */
html .store-page.store-page .product-card.cut-0{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%205L198%205L190%202L184%202L176%209L162%209L154%202L148%202L140%203L126%203L118%202L112%202L104%205L90%205L82%202L76%202L68%2013L54%2013L46%202L40%202L32%2011L18%2011L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%205L198%205L190%202L184%202L176%209L162%209L154%202L148%202L140%203L126%203L118%202L112%202L104%205L90%205L82%202L76%202L68%2013L54%2013L46%202L40%202L32%2011L18%2011L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat}
html .store-page.store-page .product-card.cut-1{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%2011L198%2011L190%202L184%202L176%2013L162%2013L154%202L148%202L140%207L126%207L118%202L112%202L104%205L90%205L82%202L76%202L68%207L54%207L46%202L40%202L32%205L18%205L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%2011L198%2011L190%202L184%202L176%2013L162%2013L154%202L148%202L140%207L126%207L118%202L112%202L104%205L90%205L82%202L76%202L68%207L54%207L46%202L40%202L32%205L18%205L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat}
html .store-page.store-page .product-card.cut-2{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%203L198%203L190%202L184%202L176%205L162%205L154%202L148%202L140%2011L126%2011L118%202L112%202L104%209L90%209L82%202L76%202L68%205L54%205L46%202L40%202L32%2011L18%2011L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%203L198%203L190%202L184%202L176%205L162%205L154%202L148%202L140%2011L126%2011L118%202L112%202L104%209L90%209L82%202L76%202L68%205L54%205L46%202L40%202L32%2011L18%2011L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat}
html .store-page.store-page .product-card.cut-3{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%2013L198%2013L190%202L184%202L176%209L162%209L154%202L148%202L140%207L126%207L118%202L112%202L104%2011L90%2011L82%202L76%202L68%2013L54%2013L46%202L40%202L32%203L18%203L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%2013L198%2013L190%202L184%202L176%209L162%209L154%202L148%202L140%207L126%207L118%202L112%202L104%2011L90%2011L82%202L76%202L68%2013L54%2013L46%202L40%202L32%203L18%203L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat}
html .store-page.store-page .product-card.cut-4{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%207L198%207L190%202L184%202L176%203L162%203L154%202L148%202L140%207L126%207L118%202L112%202L104%209L90%209L82%202L76%202L68%2011L54%2011L46%202L40%202L32%2013L18%2013L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%207L198%207L190%202L184%202L176%203L162%203L154%202L148%202L140%207L126%207L118%202L112%202L104%209L90%209L82%202L76%202L68%2011L54%2011L46%202L40%202L32%2013L18%2013L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat}
html .store-page.store-page .product-card.cut-5{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%207L198%207L190%202L184%202L176%207L162%207L154%202L148%202L140%209L126%209L118%202L112%202L104%203L90%203L82%202L76%202L68%2011L54%2011L46%202L40%202L32%203L18%203L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%207L198%207L190%202L184%202L176%207L162%207L154%202L148%202L140%209L126%209L118%202L112%202L104%203L90%203L82%202L76%202L68%2011L54%2011L46%202L40%202L32%203L18%203L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat}
html .store-page.store-page .product-card.cut-6{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%2013L198%2013L190%202L184%202L176%205L162%205L154%202L148%202L140%205L126%205L118%202L112%202L104%2013L90%2013L82%202L76%202L68%207L54%207L46%202L40%202L32%209L18%209L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%2013L198%2013L190%202L184%202L176%205L162%205L154%202L148%202L140%205L126%205L118%202L112%202L104%2013L90%2013L82%202L76%202L68%207L54%207L46%202L40%202L32%209L18%209L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat}
html .store-page.store-page .product-card.cut-7{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%205L198%205L190%202L184%202L176%2013L162%2013L154%202L148%202L140%209L126%209L118%202L112%202L104%2013L90%2013L82%202L76%202L68%203L54%203L46%202L40%202L32%2011L18%2011L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat;mask:linear-gradient(#000 0 0) top/100% calc(100% - 15px) no-repeat,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2216%22%20viewBox%3D%220%200%20240%2016%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H240V9L240%209L226%202L220%202L212%205L198%205L190%202L184%202L176%2013L162%2013L154%202L148%202L140%209L126%209L118%202L112%202L104%2013L90%2013L82%202L76%202L68%203L54%203L46%202L40%202L32%2011L18%2011L10%202L0%202Z%22%2F%3E%3C%2Fsvg%3E") bottom/100% 16px no-repeat}
/* Diamond watermark: the logo diamond printed faintly in the cream receipt paper, like security paper. */
html .store-page.store-page.view-home :is(.key-receipt-main,.product-copy){background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cpath%20d%3D%22M22%2014l6%208-6%208-6-8z%22%20fill%3D%22none%22%20stroke%3D%22%230A0A0A%22%20stroke-opacity%3D%22.07%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E");background-size:44px 44px}
/* Barcode: EAN-13, prefix 20 (in-store numbers), product number. */
html .store-page.store-page .dk-barcode{display:block;height:22px;width:auto;max-width:100%;color:var(--paper-ink);opacity:.85}
html .store-page.store-page .card-stub .dk-barcode{flex-basis:100%;height:18px;order:3}
html .store-page.store-page .card-stub{flex-wrap:wrap}
html .store-page.store-page .barcode-line{display:flex;align-items:center;gap:12px;font:600 13px/1 Archivo,Plex,sans-serif;font-variant-numeric:tabular-nums;color:var(--paper-muted)}
html .store-page.store-page .barcode-line .dk-barcode{height:28px}
html .store-page.store-page .card-stub .dk-barcode{flex-basis:auto;width:118px;height:18px;margin-inline-start:auto}

/* ECC visual review fixes (2026-11-04) */
html .store-page.store-page{
  & .home-hero h1{max-width:13ch}
  & .home-band p{font-size:clamp(20px,1.9vw,28px)}
  & .rank-panel h2{border:0;padding-bottom:0}
  & .row-heading::after{display:none}
  & .rank-copy strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  & .home-activate h2{max-width:none}
  /* genres: a wrapping list of names, not icon cards */
  & .genre-tiles{display:flex;flex-wrap:wrap;gap:12px 32px}
  & .genre-tiles .category-tile{background:none;padding:0;min-height:0;display:inline-flex;align-items:baseline;gap:8px;border:0}
  & .genre-tiles .category-tile:hover{background:none}
  & .genre-tiles .category-tile strong{font:760 clamp(22px,2.2vw,34px)/1.1 var(--head);font-stretch:108%;color:var(--ink);text-decoration:underline 3px transparent;text-underline-offset:6px;transition:text-decoration-color .16s}
  & .genre-tiles .category-tile:hover strong{text-decoration-color:var(--keygold)}
  & .genre-tiles .category-tile small{font-size:15px;color:var(--steel)}
  & .genre-tiles .genre-icon,& .genre-tiles img{display:none}
  /* footer */
  & .site-footer .footer-social a{color:var(--paper-ink)!important;background:none!important}
  & .site-footer .footer-social svg *{fill:currentColor!important}
  & .newsletter-form input{flex:none;min-height:48px}
  /* sold out: keep the receipt, grey only the picture, and stamp it */
  & .product-card.is-out{opacity:1;filter:none}
  & .product-card.is-out .product-image img{filter:grayscale(1);opacity:.7}
  & .product-card.is-out .card-fit{border:3px solid currentColor;border-radius:6px;padding:4px 10px;rotate:-3deg;font-family:Archivo,Plex,sans-serif;font-weight:800;color:var(--paper-muted)}
  /* shop sidebar, sort, pagination: flat */
  & .shop-sidebar{border:0;border-radius:var(--radius);background:var(--surface)}
  & .shop-sidebar :is(input,select),& .facet-search,& .shop-sort>summary{border:0;background:var(--soft);border-radius:var(--radius)}
  & .shop-facet,& .shop-sidebar details,& .shop-sidebar-heading{border:0}
  & .shop-pagination :is(a,span,.button){min-width:48px;min-height:48px;font-size:16px;border:0;border-radius:var(--radius);background:var(--soft)}
  & .shop-pagination [aria-current]{background:var(--ink);color:var(--bg)}
  & .product-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  & .product-card h3{line-height:1.2;max-block-size:2.4em;unicode-bidi:plaintext}
  /* product page */
  & .product-cart-controls .buy-now{background:var(--paper-ink);color:var(--paper)}
  & .chip-genre{padding:5px 12px;font-size:13px}
  & .product-genre-chips{display:none}
  & :is(.requirements-col){border:0;border-radius:var(--radius);background:var(--soft)}
  & .requirements-col :is(h3,th,td){color:var(--ink);background:none;border-color:transparent}
  & :is(.region-verdict-line,.region-verdict){background:var(--soft);border:0;color:var(--ink);border-radius:var(--radius)}
  & :is(.region-verdict-line,.region-verdict) svg{color:var(--ink)}
  & .gallery-stage{aspect-ratio:460/215}
  & .gallery-image{object-fit:cover;width:100%;height:100%}
  & :is(.product-content-panel,.policy-document,.legal-content) p{color:var(--ink);font-size:17px;unicode-bidi:plaintext}
  & .product-section-links a{font-size:15px}
  /* empty states, forms, auth */
  & .empty-icon{display:none}
  & .form-panel :is(input,select,textarea),& .field :is(input,select,textarea){border-radius:var(--radius)}
  & .form-panel h1{font-size:clamp(28px,3vw,40px)}
  /* eyebrows, callouts, pills and tinted icons on help pages */
  & .eyebrow{display:none}
  & .guide-steps li span{box-shadow:none;background:var(--keygold);color:var(--vault)}
  & .guide-steps li::after,& .guide-steps li:not(:last-child)::after{background:var(--line)}
  & .guide-badge{border-radius:2px;background:var(--soft);color:var(--ink)}
  & :is(.guide-card,.faq-topics a,.faq-links a) svg{color:var(--ink)}
  & .faq-topics a{border:0;border-radius:0;background:none;padding:4px 0;text-decoration:underline 2px var(--line);text-underline-offset:6px}
  & .faq-group h2 svg{display:none}
  & .legal-callout{border:0;background:var(--keygold);color:var(--vault);border-radius:var(--radius)}
  & .legal-callout :is(h2,h3,p,a){color:var(--vault)}
  & :is(.legal-callout,.faq-callout) .icon-tile{display:none}
  & .policy-contents{border:0;background:var(--soft);border-radius:var(--radius)}
  & .icon-tile{background:none;box-shadow:none;border:0;color:var(--ink)}
}
html[dir=rtl] .store-page.store-page .product-image .discount-badge{left:auto;right:10px}
@media (max-width:600px){
  html .store-page.store-page .row-heading{flex-wrap:wrap}
  html .store-page.store-page .rail-button{display:none}
}
@media (max-width:900px){
  html .store-page.store-page .auth-copy p{display:none}
  html .store-page.store-page .auth-copy{padding-block:24px}
}

/* ECC accessibility review fixes (2026-11-04) */
html[data-theme=light] .store-page.store-page :focus-visible{outline-color:var(--ink)}
html .store-page.store-page :is(.product-card,.key-receipt) :focus-visible{outline-color:var(--paper-ink)}
html .store-page.store-page .search-suggestions :is(.search-query-row,li>button,[data-search-value]):focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
html[dir=rtl] .store-page.store-page .header-search button svg{transform:scaleX(-1)}
html .store-page.store-page .auth-entry{--auth-accent:var(--gold-text)}
html .store-page.store-page .product-purchase-panel .button:disabled{opacity:1}
html .store-page.store-page .header-search button{min-width:40px;min-height:40px}
html .store-page.store-page :is(.card-cart .button){min-height:40px}
html .store-page.store-page .card-wishlist{width:40px;height:40px}
html .store-page.store-page :is(.rail-button){width:40px;height:40px}
html .store-page.store-page .gallery-control{min-width:40px;min-height:40px}
html .store-page.store-page :is(.filter-chip,.shop-mobile-filters,.shop-sort>summary){min-height:40px}
html .store-page.store-page .search-select-arrow{min-width:40px;min-height:40px}
html .store-page.store-page :is(.product-section-links a,.breadcrumb a){display:inline-block;padding-block:10px}
@media (max-width:480px){
  html .store-page.store-page .storefront-header :is(.icon-button,.account-trigger){width:40px;height:40px}
  html .store-page.store-page .header-tools{gap:0}
  html .store-page.store-page .brand>span{display:none}
}

html .store-page.store-page .home-hero h1{font-size:clamp(46px,5.4vw,88px);max-width:12ch}

/* Section rhythm (owner, 2026-11-04): stone, paper, gold fields with soft deckled or key-cut edges.
   Each field is full width with its own surface; neighbours never share one. */
html .store-page.store-page{--edge-soft:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%2224%22%20viewBox%3D%220%200%201200%2024%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2024L0.0%2012.0C13.9%2012.7%2067.5%2016.1%2083.3%2016.4C99.2%2016.7%2077.4%2013.6%2095.2%2013.6C113.1%2013.6%20159.0%2016.2%20190.6%2016.3C222.1%2016.5%20260.1%2015.1%20284.7%2014.5C309.3%2014.0%20319.1%2014.3%20338.2%2013.1C357.3%2012.0%20376.6%208.1%20399.4%207.7C422.1%207.3%20459.9%2010.6%20474.7%2010.7C489.4%2010.8%20474.0%208.6%20487.8%208.2C501.6%207.7%20544.2%208.4%20557.6%208.1C571.0%207.8%20558.6%206.5%20568.2%206.5C577.9%206.5%20601.0%206.6%20615.4%208.2C629.8%209.8%20645.9%2015.2%20654.4%2016.1C662.9%2017.1%20655.4%2014.6%20666.3%2013.7C677.3%2012.9%20702.2%2010.9%20720.0%2011.0C737.8%2011.2%20750.6%2015.1%20773.1%2014.6C795.6%2014.1%20839.9%209.4%20855.1%208.0C870.3%206.7%20853.8%205.4%20864.3%206.5C874.8%207.6%20903.1%2013.0%20918.1%2014.5C933.1%2016.0%20946.2%2015.4%20954.2%2015.3C962.3%2015.2%20951.4%2013.5%20966.3%2013.7C981.3%2013.8%201018.7%2016.1%201043.8%2016.2C1069.0%2016.3%201095.5%2014.0%201117.4%2014.1C1139.3%2014.2%201161.4%2017.1%201175.2%2016.7C1188.9%2016.4%201195.9%2012.8%201200.0%2012.0L1200%2024Z%22%2F%3E%3C%2Fsvg%3E");--edge-key:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22440%22%20height%3D%2220%22%20viewBox%3D%220%200%20440%2020%22%3E%3Cpath%20d%3D%22M0%2020L0%2016L6%2016Q8%2016%209%2014L13%2012Q14%2011%2016%2011L28%2011Q30%2011%2031%2012L35%2014Q36%2016%2038%2016L50%2016Q52%2016%2053%2014L57%206Q58%205%2060%205L72%205Q74%205%2075%206L79%2014Q80%2016%2082%2016L94%2016Q96%2016%2097%2014L101%204Q102%203%20104%203L116%203Q118%203%20119%204L123%2014Q124%2016%20126%2016L138%2016Q140%2016%20141%2014L145%2010Q146%209%20148%209L160%209Q162%209%20163%2010L167%2014Q168%2016%20170%2016L182%2016Q184%2016%20185%2014L189%206Q190%205%20192%205L204%205Q206%205%20207%206L211%2014Q212%2016%20214%2016L226%2016Q228%2016%20229%2014L233%2010Q234%209%20236%209L248%209Q250%209%20251%2010L255%2014Q256%2016%20258%2016L270%2016Q272%2016%20273%2014L277%2010Q278%209%20280%209L292%209Q294%209%20295%2010L299%2014Q300%2016%20302%2016L314%2016Q316%2016%20317%2014L321%208Q322%207%20324%207L336%207Q338%207%20339%208L343%2014Q344%2016%20346%2016L358%2016Q360%2016%20361%2014L365%2010Q366%209%20368%209L380%209Q382%209%20383%2010L387%2014Q388%2016%20390%2016L402%2016Q404%2016%20405%2014L409%206Q410%205%20412%205L424%205Q426%205%20427%206L431%2014Q432%2016%20434%2016L440%2016L440%2020Z%22%2F%3E%3C%2Fsvg%3E");}
html .store-page.store-page.view-home{background:#0A0A0A}
html .store-page.store-page section.field{position:relative;margin-block:0;padding-block:clamp(56px,7vw,96px)} /* section fields only; .field is also the form-field class */
html .store-page.store-page .field-marble{background:#0A0A0A var(--marble) 50% 20%/cover}
html .store-page.store-page .field-marble.field-alt{background-position:25% 80%}
html .store-page.store-page .field-hero{padding-block:clamp(40px,6vw,96px) clamp(64px,8vw,128px)}
html .store-page.store-page .field-charcoal{background:#161513 var(--grain)}
html .store-page.store-page .field-paper{background:#F3EEE3 var(--grain);color-scheme:light;
  --bg:#F3EEE3;--surface:#FBF8F1;--soft:#E9E1D1;--ink:#0A0A0A;--muted:#5E5B55;--line:#DCD2BF;--gold-text:#8A5A00;--cream:#0A0A0A;
  --paper:#0A0A0A;--paper-ink:#F3EEE3;--paper-muted:#A8A49B;--paper-tone:#1C1B19;color:var(--ink)}
html .store-page.store-page .field-paper .product-card{background-color:#0A0A0A;background-image:var(--marble);background-size:900px auto}
html .store-page.store-page .field-paper .product-card:nth-child(4n+2){background-position:30% 40%}
html .store-page.store-page .field-paper .product-card:nth-child(4n+3){background-position:70% 10%}
html .store-page.store-page .field-paper .product-card:nth-child(4n){background-position:55% 85%}
html .store-page.store-page .field-paper .card-stub{background-color:#151412cc}
html .store-page.store-page .field-paper :is(.product-copy,.key-receipt-main){background-image:none}
html .store-page.store-page .field-charcoal .rank-panel{background:#1F1E1B}
html .store-page.store-page .field-charcoal .home-activate{background:none;padding-inline:0}
/* edges: the lower field's surface curls up over the one above */
html .store-page.store-page :is(.edge-soft,.edge-key)::before{content:"";position:absolute;inset-inline:0;bottom:100%;height:22px;background:inherit;background-position:inherit;pointer-events:none;z-index:2;-webkit-mask:var(--edge-soft) 0 100%/1200px 24px repeat-x;mask:var(--edge-soft) 0 100%/1200px 24px repeat-x}
html .store-page.store-page .edge-key::before{height:20px;-webkit-mask:var(--edge-key) 0 100%/440px 20px repeat-x;mask:var(--edge-key) 0 100%/440px 20px repeat-x}
/* footer: black marble for the links, cream paper for the seal and a marble-filled wordmark; same on every page */
html .store-page.store-page .site-footer{background:none;margin-top:0;padding:0;position:relative}
html .store-page.store-page .site-footer::before{background:#0A0A0A var(--marble) center/cover}
html .store-page.store-page .footer-stone{background:#0A0A0A var(--marble) center/cover;padding-block:clamp(48px,6vw,80px) 32px;--ink:#F3EEE3;--muted:#A8A49B;--paper-ink:#F3EEE3;--paper-muted:#A8A49B;--paper-tone:#1C1B19;color:#F3EEE3}
html .store-page.store-page .footer-stone :is(p,a,strong,small,span){color:inherit}
html .store-page.store-page .footer-stone :is(.footer-mission,.footer-legal,.footer-link-group a){color:#A8A49B}
html .store-page.store-page .footer-stone .footer-link-group a:hover{color:#F3EEE3}
html .store-page.store-page .footer-stone .newsletter-band{background:#1C1B19;color:#F3EEE3}
html .store-page.store-page .footer-stone .newsletter-band :is(h2,p,a,svg){color:#F3EEE3}
html .store-page.store-page .footer-stone .footer-social a{color:#F3EEE3!important}
html .store-page.store-page .footer-stone .footer-locale{background:#1C1B19;color:#F3EEE3}
html .store-page.store-page .footer-paper{position:relative;background:#0F0C0A;color:#F3EEE3;padding-top:0;overflow:hidden;--paper-ink:#F3EEE3;--paper-muted:#A8A49B}
html .store-page.store-page .footer-paper::before{content:"";position:absolute;inset-inline:0;top:-21px;height:22px;background:inherit;-webkit-mask:var(--edge-soft) 0 100%/1200px 24px repeat-x;mask:var(--edge-soft) 0 100%/1200px 24px repeat-x}
html .store-page.store-page .footer-seal-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;position:relative;z-index:1}
html .store-page.store-page .field-hero .home-hero{padding-block:0}
html .store-page.store-page.view-home main{padding-bottom:0}
html .store-page.store-page .home-band{align-items:stretch;min-height:clamp(280px,30vw,420px)}
html .store-page.store-page .home-band img{height:100%;min-height:100%;object-fit:cover;align-self:stretch}
html .store-page.store-page .home-band p{align-self:center}
html .store-page.store-page .site-footer{overflow:visible}

/* Owner, 2026-11-04: no torn edges. Sections meet in clean straight lines; receipts end square.
   (Key-cut teeth stay on the game cards only.) */
html .store-page.store-page :is(.edge-soft,.edge-key)::before,
html .store-page.store-page .footer-paper::before{content:none;display:none}
html .store-page.store-page .key-receipt{-webkit-mask:none;mask:none;border-radius:var(--radius)}

/* Luxury headings, "Couture" (owner's choice 2026-11-04): Bodoni Moda for Latin, Amiri for Arabic. Body and UI stay IBM Plex. */
@font-face{font-family:Bodoni;src:url(/assets/fonts/bodoni-moda-latin-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2122,U+2212}
@font-face{font-family:Amiri;src:url(/assets/fonts/amiri-arabic-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
html .store-page.store-page{--head:Bodoni,Amiri,Georgia,serif}
html[lang=ar] .store-page.store-page{--head:Amiri,Bodoni,serif}
html .store-page.store-page :is(h1,h2,h3,.brand>span,.key-receipt-title,.price-tag strong,.buy-price strong,.genre-tiles .category-tile strong,.fact-title){font-family:var(--head)!important;font-stretch:100%!important;font-weight:700!important;letter-spacing:-.01em!important}
html[lang=ar] .store-page.store-page :is(h1,h2,h3){letter-spacing:0!important;line-height:1.45}

/* Type scale fixes (owner, 2026-11-04): readable UI sizes next to the Bodoni/Amiri headings; one page-title size; no cut-off wordmark. */
html .store-page.store-page{
  & .navigation a{font-size:15px}
  & .button{font-size:16px}
  & .card-cart .button{font-size:15px}
  & .brand small{font-family:Plex,system-ui,sans-serif!important;font-weight:600!important;font-size:13px;letter-spacing:0!important}
  & .footer-link-group a,& .footer-link-group strong{font-size:15px}
  & .footer-legal{font-size:13px}
  & .rank-copy strong{font-size:16px;font-weight:600}
  & .rank-copy small{font-size:13px}
  & :is(.page-heading .lead,.auth-copy p,.form-panel p,.empty-state p,.cart-summary p){font-size:17px}
  & .shop-sidebar p,& .shop-region-note{font-size:13px}
  & :is(.page-heading h1,.product-page-heading h1,.legal-content h1,.contact-intro h1,.faq-hero h1,.auth-copy h1){font-size:clamp(34px,4.2vw,60px);line-height:1.08}
  & .faq-group h2{font-size:clamp(26px,2.6vw,34px)}
  & .faq-item h3,& .faq-list h3{font-size:19px}
  & .requirements-col h3{font-size:18px}
  & .product-card h3{font-size:20px}
  & .home-band p{font-size:clamp(24px,2.4vw,34px)}
  & .header-search input{font-size:16px}
}
@media (max-width:600px){
  html .store-page.store-page .navigation a{font-size:15px}
  html .store-page.store-page :is(.page-heading .lead,.form-panel p){font-size:16px}
}
html .store-page.store-page.view-home{background-color:#F3EEE3}
html .store-page.store-page .site-header{background:var(--bg)}
html .store-page.store-page.view-home .site-header{background:#0A0A0A}

/* Back-in-stock alert form in the buy box, and the sold-out card link to it */
html .store-page.store-page .restock-form{display:grid;gap:8px;margin-top:4px}
html .store-page.store-page .restock-form label{font-weight:700;color:var(--paper-ink)}
html .store-page.store-page .restock-row{display:flex;gap:8px}
html .store-page.store-page .restock-row input{flex:1;min-width:0;min-height:48px;border:0;border-radius:var(--radius);background:var(--paper-tone);color:var(--paper-ink);padding:0 12px;font:500 16px Plex,sans-serif}
html .store-page.store-page .restock-note{font-size:14px;color:var(--paper-muted)!important;margin:0}
html .store-page.store-page a.card-notify{text-decoration:none}
html .store-page.store-page a.card-notify:hover{color:var(--keygold)}

/* Green, like SOLIS: sage #8FA86A means agree / done. Gold stays the buying colour. */
html .store-page.store-page{--ok:#8FA86A;--ok-ink:#0A0A0A}
html .store-page.store-page .button.ok{background:var(--ok);color:var(--ok-ink)}
html .store-page.store-page .button.ok:hover{background:#A3BB7E;color:var(--ok-ink)}
html .store-page.store-page .flash:not(.error){background:#8FA86A26;border:0;border-radius:var(--radius);color:var(--ink)}
html .store-page.store-page .newsletter-band{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
html .store-page.store-page .newsletter-on{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ok)!important;margin:0}
html .store-page.store-page .newsletter-on svg{color:var(--ok)}
html .store-page.store-page .news-prompt{position:fixed;z-index:60;inset-inline-end:20px;bottom:20px;width:min(420px,calc(100vw - 40px));background:#0A0A0A var(--marble) center/cover;color:#F3EEE3;border-radius:var(--radius);padding:22px 24px;box-shadow:0 22px 50px -20px #000a;animation:dk-sheet .24s cubic-bezier(.23,1,.32,1) both}
html .store-page.store-page .news-prompt p{color:#C9C4B8;margin:0 0 14px;font-size:15px}
html .store-page.store-page .news-prompt .news-prompt-title{font:700 22px/1.25 var(--head);color:#F3EEE3;margin-bottom:8px}
html .store-page.store-page .news-prompt-actions{display:flex;gap:10px;flex-wrap:wrap}
html .store-page.store-page .news-prompt .button:not(.ok){background:#1F1E1B;color:#F3EEE3}
@keyframes dk-sheet{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){html .store-page.store-page .news-prompt{animation:none}}

/* Trust, shown not told: the proof figure in the hero, the "what you get" receipt, and the About story. */
html .store-page.store-page{
  & .home-proof{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:28px;color:var(--ink)}
  & .home-proof strong{font:700 clamp(40px,4.4vw,64px)/1 var(--head);color:var(--keygold)}
  & .home-proof span{font-weight:600;font-size:17px;color:var(--ink);max-width:26ch}
  & .proof-receipt{background:var(--receipt) var(--grain);color:#0A0A0A;border-radius:var(--radius);padding:28px 32px 24px;margin:clamp(24px,4vw,56px);align-self:center;box-shadow:0 24px 50px -28px #0008}
  & .proof-title{font:700 clamp(24px,2.2vw,32px)/1.15 var(--head);color:#0A0A0A!important;margin:0 0 16px}
  & .ledger{list-style:none;margin:0;padding:0;display:grid;gap:12px}
  & .ledger li{display:flex;align-items:baseline;gap:10px;font-size:16px;color:#3B3934}
  & .ledger li i{flex:1;min-width:16px;border-bottom:3px dotted #0A0A0A40;translate:0 -4px}
  & .ledger li b{font:700 18px/1.25 var(--head);color:#0A0A0A;text-align:end}
  & .proof-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 12px}
  & .proof-links a{color:#0A0A0A!important;font-weight:700;text-decoration:underline 2px;text-underline-offset:4px;display:inline-flex;align-items:center;gap:6px}
  & .proof-receipt .dk-barcode{height:26px;width:150px;color:#0A0A0A;opacity:.8}
  & .home-band.field-gold{grid-template-columns:1fr 1fr}
  & .about-page{display:grid;gap:clamp(48px,7vw,96px);padding-block:clamp(24px,4vw,48px)}
  & .about-hero h1{font-size:clamp(38px,5.2vw,76px);max-width:16ch}
  & .about-hero .lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink);max-width:60ch;margin-top:18px}
  & .about-stat{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:28px}
  & .about-stat strong{font:700 clamp(56px,7vw,110px)/1 var(--head);color:var(--ink)}
  & .about-stat span{font-weight:600;font-size:19px}
  & .about-timeline ol{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  & .about-timeline .key-receipt{background-color:#0A0A0A;background-image:var(--marble);background-size:900px auto;color:#F3EEE3}
  & .about-timeline .key-receipt.is-now{background:#0A0A0A var(--marble) 70% 30%/900px auto;color:#F3EEE3;box-shadow:inset 0 0 0 1px #34C46A99}
  & .about-timeline .key-receipt-main{display:grid;gap:10px;min-height:220px;align-content:start}
  & .about-timeline .ink-stamp{font-size:clamp(22px,2vw,30px);color:inherit}
  & .about-timeline .about-where{font:700 22px/1.2 var(--head);color:inherit!important;margin:0}
  & .about-timeline .key-receipt p{color:inherit}
  & .about-proof-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:24px}
  & .about-proof .proof-receipt{margin:0}
  & .about-where-list ul{list-style:none;padding:0;margin:12px 0 20px;display:grid;gap:10px;font-size:18px}
  & .about-where-list p{color:var(--ink);margin-bottom:20px}
  & .about-where-list a{color:var(--ink);font-weight:700;text-decoration:underline 2px var(--keygold);text-underline-offset:5px}
  & .about-where-list .button{text-decoration:none}
}
@media (max-width:900px){
  html .store-page.store-page .home-band.field-gold,html .store-page.store-page .about-proof-grid{grid-template-columns:1fr}
  html .store-page.store-page .about-timeline ol{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){html .store-page.store-page .about-timeline ol{grid-template-columns:1fr}}
html[dir=rtl] .store-page.store-page :is(.about-where,.ledger b) bdi{unicode-bidi:plaintext}

/* Barcodes as buttons: a gold scanner line sweeps on hover; click opens the scan card (store.js). */
html .store-page.store-page :is(.dk-bc,.dk-bc-static){display:inline-flex;position:relative;overflow:hidden;border:0;background:none;padding:0;color:inherit;line-height:0}
html .store-page.store-page .dk-bc{cursor:zoom-in}
html .store-page.store-page .dk-bc::after{content:"";position:absolute;inset-block:-2px;inset-inline-start:-4px;width:3px;background:var(--keygold);box-shadow:0 0 0 1px #F2A91C55;opacity:0}
@media (hover:hover){html .store-page.store-page .dk-bc:hover::after{animation:dk-laser .9s cubic-bezier(.65,0,.35,1)}}
@keyframes dk-laser{0%{opacity:1;inset-inline-start:-4px}100%{opacity:1;inset-inline-start:calc(100% + 2px)}}
html .store-page.store-page .card-stub .dk-bc{margin-inline-start:auto}
html .store-page.store-page .card-stub .dk-bc .dk-barcode{width:118px;height:18px}
.bc-dialog{border:0;padding:0;border-radius:4px;background:#F3EEE3;color:#0A0A0A;max-width:min(380px,calc(100vw - 32px))}
.bc-dialog::backdrop{background:#0A0A0Acc}
.bc-sheet{position:relative;padding:28px 28px 24px;text-align:center;display:grid;gap:12px;font-family:Plex,system-ui,sans-serif}
.bc-title{font:700 24px/1.2 Bodoni,Amiri,Georgia,serif;margin:0}
.bc-qr svg{width:220px;height:220px;margin:0 auto;display:block}
.bc-hint{margin:0;color:#5E5B55;font-size:15px}
.bc-strip svg{width:260px;height:64px;color:#0A0A0A;margin:4px auto 0;display:block}
.bc-num{margin:0;font:700 18px/1 Plex,sans-serif;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.bc-close{position:absolute;top:8px;inset-inline-end:8px;width:40px;height:40px;border:0;border-radius:4px;background:#E4DCCB;color:#0A0A0A;font-size:24px;line-height:1;cursor:pointer}
@media (prefers-reduced-motion:reduce){html .store-page.store-page .dk-bc:hover::after{animation:none}}
html .store-page.store-page .bc-strip .dk-barcode{color:#0A0A0A;width:260px;height:64px;opacity:1;margin:4px auto 0;display:block}
html .store-page.store-page .bc-sheet :is(.bc-title,.bc-num){color:#0A0A0A}
html .store-page.store-page .bc-sheet .bc-hint{color:#5E5B55}

/* Phone overflow fix (2026-11-04): the gold band and the proof receipt must shrink to the screen. */
html .store-page.store-page .home-band.field-gold{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
html .store-page.store-page .home-band img{max-width:100%;min-width:0}
html .store-page.store-page :is(.proof-receipt,.about-proof-grid>*){min-width:0}
html .store-page.store-page .ledger li b{min-width:0;overflow-wrap:anywhere}
html .store-page.store-page .footer-payment-strip :is(.container,.footer-payments){flex-wrap:wrap;min-width:0}
html .store-page.store-page .footer-payments-note{white-space:normal;min-width:0}
@media (max-width:900px){
  html .store-page.store-page .home-band.field-gold,html .store-page.store-page .about-proof-grid{grid-template-columns:minmax(0,1fr)}
  html .store-page.store-page .home-band img{height:auto;aspect-ratio:1200/680}
  html .store-page.store-page .proof-receipt{margin:20px 16px 28px;padding:22px 20px}
}
@media (max-width:600px){
  /* receipt lines stack on phones: question above, answer below */
  html .store-page.store-page .ledger li{flex-wrap:wrap;gap:2px 8px}
  html .store-page.store-page .ledger li i{display:none}
  html .store-page.store-page .ledger li span{flex-basis:100%}
  html .store-page.store-page .ledger li b{text-align:start}
}
/* last-resort guard: nothing may widen the page sideways (clip keeps sticky elements working) */
html:has(.store-page),html body.store-page{overflow-x:clip}
html .store-page.store-page .proof-links a{white-space:normal;max-width:100%;flex-wrap:wrap}

/* Receipt legibility (owner, 2026-11-04): Bodoni's hairlines blur at small sizes, so the answers use bold Plex; the title stays Bodoni, larger. */
html .store-page.store-page .ledger li b{font:700 17px/1.35 Plex,system-ui,sans-serif!important;letter-spacing:0!important;color:#0A0A0A}
html .store-page.store-page .ledger li span{font-weight:500;color:#2B2925}
html .store-page.store-page .proof-title{font-size:clamp(28px,2.6vw,36px)!important;line-height:1.1}
html .store-page.store-page .about-timeline .about-where{font-size:24px}
/* The band's old one-sentence rule must not reach the receipt's own paragraphs. */
html .store-page.store-page .home-band .proof-receipt p{padding:0;max-width:none;font:500 16px/1.5 Plex,system-ui,sans-serif;letter-spacing:0}
html .store-page.store-page .home-band .proof-receipt .proof-title{font:700 clamp(28px,2.6vw,36px)/1.1 var(--head)!important;margin:0 0 18px}
html .store-page.store-page .proof-receipt .proof-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 12px}
html .store-page.store-page .proof-receipt .proof-links a{font:700 15px/1.4 Plex,system-ui,sans-serif}
html .store-page.store-page .home-band .proof-receipt{padding:32px 32px 24px}
@media (max-width:600px){html .store-page.store-page .home-band .proof-receipt{padding:24px 20px 20px}}
html .store-page.store-page .charge-note{background:#8FA86A26;border-radius:var(--radius);padding:12px 16px;color:var(--ink);font-weight:600;margin:0 0 20px}

/* Settings panels (language and currency): fit the screen, scroll inside, tight spacing; long lists scroll on their own. */
html .store-page.store-page :is(.store-settings-panel,.footer-locale-panel){max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
html .store-page.store-page .store-settings-panel :is(form,.store-settings-form){display:grid;gap:16px;align-content:start;min-height:0;height:auto}
html .store-page.store-page :is(.store-settings-panel,.footer-locale-panel) .field{margin:0;min-height:0}
html .store-page.store-page :is(.store-settings-panel,.footer-locale-panel) .dialog-actions{position:sticky;bottom:0;background:var(--surface);padding-top:12px;margin-top:4px}
html .store-page.store-page .search-select-list{max-height:min(260px,45dvh);overflow-y:auto;overscroll-behavior:contain}
/* In the settings panels the option list opens in place and pushes Save down, so it is never cut off by the panel. */
html .store-page.store-page :is(.store-settings-panel,.footer-locale-panel) .search-select{flex-wrap:wrap;height:auto}
html .store-page.store-page :is(.store-settings-panel,.footer-locale-panel) .search-select-arrow{top:24px}
html .store-page.store-page :is(.store-settings-panel,.footer-locale-panel) .search-select-list{position:static;flex:0 0 calc(100% - 10px);margin:0 5px 5px;box-shadow:none;max-height:min(240px,40dvh)}
/* Compact settings panel: tight padding and gaps, shorter fields, a list of about five options. */
html .store-page.store-page .store-settings-panel{padding:18px 20px}
html .store-page.store-page .store-settings-panel .popover-heading{margin-bottom:14px}
html .store-page.store-page .store-settings-panel :is(form,.store-settings-form){gap:12px}
html .store-page.store-page .store-settings-panel .field{gap:6px;font-size:13px}
html .store-page.store-page .store-settings-panel .field .search-select{min-height:42px}
html .store-page.store-page .store-settings-panel .field .search-select input{height:40px}
html .store-page.store-page .store-settings-panel .search-select-arrow{top:20px}
html .store-page.store-page :is(.store-settings-panel,.footer-locale-panel) .search-select-list{max-height:min(190px,32dvh)}
html .store-page.store-page .store-settings-panel .dialog-actions{padding-top:8px;margin-top:0}

/* Settings panel, laid out like Eneba's: a centred box over a dimmed page; region, language and currency stacked; plain dropdowns. */
html .store-page.store-page .store-settings-panel{position:fixed;top:50%!important;left:50%!important;right:auto!important;translate:-50% -50%;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:28px 32px;box-shadow:0 0 0 100vmax #0A0A0Ab3,0 24px 60px -20px #000}
html .store-page.store-page .store-settings-panel .popover-heading{margin-bottom:10px}
html .store-page.store-page .store-settings-panel>p{margin:0 0 20px;font-size:15px;color:var(--muted)}
html .store-page.store-page .store-settings-panel :is(form,.store-settings-form){grid-template-columns:1fr;gap:16px}
html .store-page.store-page .store-settings-panel .field select{height:46px;width:100%;margin-top:6px;font-size:15px}
html .store-page.store-page .store-settings-panel .dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:8px}
html .store-page.store-page .store-settings-panel .dialog-actions .button{justify-content:center}

/* Home strip (like Eneba's top bar, in DrKeys terms): one wide deal tile with a receipt, four tall bestseller covers with a price tab. Real Steam art only. */
html .store-page.store-page{
  & .home-strip{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr);height:clamp(300px,27vw,440px);background:#0A0A0A;border-bottom:2px solid #0A0A0A}
  & .home-strip a{position:relative;display:block;height:100%;overflow:hidden;color:#0A0A0A;text-decoration:none}
  & .home-strip img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.23,1,.32,1)}
  & .strip-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0;min-width:0}
  & .strip-tiles li{min-width:0;border-inline-start:2px solid #0A0A0A}
  & .strip-receipt{position:absolute;inset-inline-start:clamp(16px,2.6vw,40px);bottom:clamp(16px,2.6vw,40px);max-width:min(380px,82%);background:var(--receipt) var(--grain);border-radius:var(--radius);padding:16px 20px 18px;box-shadow:0 18px 40px -18px #000c}
  & .strip-note{margin:0 0 4px;font-size:14px;font-weight:600;color:#5E5B55}
  & .strip-name{margin:0 0 12px;font:700 clamp(20px,1.9vw,28px)/1.15 var(--head);color:#0A0A0A;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  & .strip-buy,.strip-price{display:flex;align-items:center;gap:10px}
  & .strip-off{background:var(--keygold);color:#0A0A0A;font-weight:700;font-size:15px;padding:3px 8px;border-radius:3px}
  & .strip-buy .price-tag strong{color:#0A0A0A;font-size:22px}
  & .strip-buy .price-tag s{color:#5E5B55}
  & .strip-price{position:absolute;inset-inline:0;bottom:0;justify-content:space-between;padding:10px 12px;background:#0A0A0Ae6;color:#F3EEE3}
  & .strip-price .price-tag{margin-inline-start:auto;text-align:end}
  & .strip-price .price-tag strong{color:#F3EEE3;font-size:16px}
  & .strip-price .price-tag s{color:#A8A39A;font-size:12px}
}
@media (hover:hover){html .store-page.store-page .home-strip a:hover img{scale:1.04}}
@media (prefers-reduced-motion:reduce){html .store-page.store-page .home-strip img{transition:none}}
@media (max-width:760px){
  html .store-page.store-page .home-strip{grid-template-columns:1fr;height:auto}
  html .store-page.store-page .strip-deal{height:62vw;min-height:250px}
  html .store-page.store-page .strip-receipt{padding:12px 14px}
  html .store-page.store-page .strip-tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44vw;height:66vw;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  html .store-page.store-page .strip-tiles li{scroll-snap-align:start;border-top:2px solid #0A0A0A}
}

/* Review 2026-11-05 (design audit). */
/* Gold marks buying: add-to-cart is gold; Google sign-in, rank numbers and "View all" links are neutral. */
html .store-page.store-page .card-cart .button.primary{background:var(--keygold);color:#0A0A0A}
html .store-page.store-page .card-cart .button.primary:hover{background:#FFB93A;color:#0A0A0A}
html .store-page.store-page .google-button{background:#F3EEE3;color:#0A0A0A;border:1px solid #0A0A0A26;border-radius:var(--radius)}
html .store-page.store-page .rank-number{color:var(--steel)}
html .store-page.store-page .text-link{color:var(--ink);text-decoration:underline 2px var(--keygold);text-underline-offset:5px}
/* Footer buttons stay readable on every page (the newsletter one was cream on cream on home). */
html .store-page.store-page .site-footer .button:not(.ok):not(.primary){background:#F3EEE3;color:#0A0A0A}
/* Grey text on paper fields passes contrast. */
html .store-page.store-page .field-paper,html[data-theme=light] .store-page.store-page{--steel:#6E6B64;--paper-muted:#6E6B64}
/* Arabic card titles start on the right even when the game name is English. */
html .store-page.store-page .product-card h3{text-align:start}
html .store-page.store-page .product-card h3 bdi{unicode-bidi:isolate}
/* Deals strip: covers keep their 2:3 shape, the wide deal tile takes the row height. */
html .store-page.store-page .home-strip{height:auto}
html .store-page.store-page .strip-tiles li{aspect-ratio:2/3}
@media (max-width:760px){html .store-page.store-page .strip-tiles{height:auto}}
/* Phone: everything you tap is at least 44px. */
@media (max-width:760px){
  html .store-page.store-page :is(.locale-trigger,.icon-button,.header-tools > a,.header-tools > button,.header-account > a,.header-account > button){min-height:44px;min-width:44px}
  html .store-page.store-page .site-footer :is(nav a,.footer-link-group a){display:inline-block;padding-block:10px}
  html .store-page.store-page .link-button{min-height:44px}
}
/* Copy added in the review: "keys, not accounts" under the price; reassurance at payment; two sign-in buttons at checkout. */
html .store-page.store-page .buy-own{margin:10px 0 0;font-size:15px;color:#D9D3C7}
html .store-page.store-page .checkout-assure{margin:14px 0;padding:12px 14px;border-radius:var(--radius);background:#8FA86A26;color:var(--ink);font-size:15px}
html .store-page.store-page .checkout-login-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}

/* Shop by genre: each genre is a key tag (a hotel key fob) in black marble with a punched hole, a gold ring and a gold line icon.
   On hover it swings from the hole. Eneba shows genre icons; this is the DrKeys version. */
html .store-page.store-page{
  & .genre-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:24px 18px;padding-top:12px}
  & .genre-tiles .category-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;min-height:212px;padding:48px 14px 18px;text-align:center;background:#0A0A0A var(--marble);background-size:760px auto;border:0;border-radius:46px 46px 8px 8px;color:#F3EEE3;box-shadow:0 16px 28px -20px #000b;transform-origin:50% 24px;transition:rotate .55s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
  & .genre-tiles .category-tile:nth-child(4n+2){background-position:35% 60%}
  & .genre-tiles .category-tile:nth-child(4n+3){background-position:70% 20%}
  & .genre-tiles .category-tile:nth-child(4n){background-position:15% 85%}
  & .genre-tiles .category-tile::before{content:"";position:absolute;top:16px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--bg,#F3EEE3);box-shadow:0 0 0 2px var(--keygold),inset 0 2px 3px #0007}
  & .genre-tiles .category-tile:hover{background-color:#0A0A0A;background-image:var(--marble);background-size:760px auto;box-shadow:0 22px 34px -20px #000d}
  & .genre-tiles .genre-icon{display:block;width:46px;height:46px;margin-top:4px;fill:none;stroke:var(--keygold);color:var(--keygold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  & .genre-tiles .category-tile strong{font-size:clamp(18px,1.5vw,22px)!important;line-height:1.2;color:#F3EEE3;text-decoration:none}
  & .genre-tiles .category-tile small{margin-top:auto;font-size:13px;color:#A8A39A}
}
@media (hover:hover){
  html .store-page.store-page .genre-tiles .category-tile:hover{rotate:-4deg}
  html .store-page.store-page .genre-tiles .category-tile:nth-child(even):hover{rotate:4deg}
}
@media (prefers-reduced-motion:reduce){html .store-page.store-page .genre-tiles .category-tile{transition:none}html .store-page.store-page .genre-tiles .category-tile:hover{rotate:none}}
@media (max-width:760px){
  html .store-page.store-page .genre-tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:132px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:10px}
  html .store-page.store-page .genre-tiles .category-tile{scroll-snap-align:start;min-height:188px}
}

/* "Your problem → our fix": the problem crossed out with a gold line, the fix under it with the gold diamond. */
html .store-page.store-page{
  & .home-fixes h2{font-size:clamp(28px,3.2vw,46px);max-width:22ch;margin:0 0 28px}
  & .fix-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  & .fix-card{display:grid;align-content:start;gap:14px;padding:24px 22px 26px;border-radius:var(--radius);background:#0A0A0A var(--marble);background-size:900px auto;color:#F3EEE3;box-shadow:0 18px 30px -22px #000b}
  & .fix-card:nth-child(2){background-position:40% 60%} & .fix-card:nth-child(3){background-position:75% 25%} & .fix-card:nth-child(4){background-position:10% 80%}
  & .fix-card > svg{width:34px;height:34px;fill:none;stroke:var(--keygold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  & .fix-problem{margin:0;font-size:17px;line-height:1.5;color:#B9B3A8}
  & .fix-problem s{text-decoration:line-through 2px #F2A91Cb3}
  & .fix-solution{margin:0;display:flex;gap:10px;align-items:baseline;font:700 clamp(18px,1.45vw,21px)/1.45 var(--head);color:#F3EEE3}
  & .fix-solution .dia{flex:none;translate:0 -.1em}
}
@media (max-width:1000px){html .store-page.store-page .fix-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){html .store-page.store-page .fix-list{grid-template-columns:1fr}}

/* Art direction 2026-11-05 (owner): flow instead of straight lines, Saudi culture on Arabic pages, less gold.
   All art is drawn in code (drkeys-sa-private/art/make_art.py, make_marble.py); camel and falcon are public-domain silhouettes. */
/* Section joins: a soft dune curve; on Arabic pages cream sections rise as a Najdi roof parapet. */
html .store-page.store-page :is(section.edge-soft,section.edge-key){position:relative}
html .store-page.store-page :is(section.edge-soft,section.edge-key)::before{content:"";display:block;position:absolute;inset-inline:0;bottom:100%;height:30px;background:var(--edge-fill,#0F0C0A);pointer-events:none;z-index:2;-webkit-mask:url(/assets/brand/edge-dune.svg) center bottom/100% 30px no-repeat;mask:url(/assets/brand/edge-dune.svg) center bottom/100% 30px no-repeat}
html .store-page.store-page .field-paper{--edge-fill:#F3EEE3}
html .store-page.store-page .field-charcoal{--edge-fill:#161513}
html .store-page.store-page :is(.field-marble,.field-desert){--edge-fill:#0F0C0A}
html[lang=ar] .store-page.store-page section.field-paper:is(.edge-soft,.edge-key)::before{-webkit-mask:url(/assets/brand/edge-najdi.svg) center bottom/56px 30px repeat-x;mask:url(/assets/brand/edge-najdi.svg) center bottom/56px 30px repeat-x}
/* Hero: flowing ribbons over the marble. */
html .store-page.store-page .field-marble.field-hero{background:url(/assets/brand/flow.svg) center/cover no-repeat,#0F0C0A var(--marble) 50% 20%/cover}
/* Trust band: a desert at dusk. Arabic: a camel caravan, palms and a falcon on the trade routes to Saudi Arabia. English: the routes and dunes. */
html .store-page.store-page .home-band.field-desert{position:relative;display:block;background:#0F0C0A var(--marble) 30% 60%/cover;color:#F3EEE3;padding:clamp(48px,6vw,88px) 16px clamp(210px,24vw,330px);min-height:0;overflow:hidden}
html .store-page.store-page .band-art{position:absolute;inset:auto 0 0 0;height:clamp(260px,29vw,430px);background:url(/assets/brand/routes.svg?v=2) center bottom/cover no-repeat;pointer-events:none}
html[lang=ar] .store-page.store-page .band-art{background-image:url(/assets/brand/caravan.svg?v=3)}
html .store-page.store-page .home-band.field-desert .proof-receipt{position:relative;z-index:1;max-width:560px;margin:0 auto}
html .store-page.store-page .home-band.field-desert .proof-receipt p{color:#0A0A0A}
/* Al Sadu weave above the footer, Arabic pages only. */
html .store-page.store-page .sadu-band{display:none;height:30px;background:url(/assets/brand/sadu.svg) center/auto 30px repeat-x;position:relative;z-index:1}
html[lang=ar] .store-page.store-page .sadu-band{display:block}
/* Less gold: rings, icons, strike lines and links in cream and steel; gold stays on buying and the small diamond. */
html .store-page.store-page .genre-tiles .category-tile::before{box-shadow:0 0 0 2px #E9E1D2,inset 0 2px 3px #0007}
html .store-page.store-page .genre-tiles .genre-icon{stroke:#E9E1D2;color:#E9E1D2;transition:stroke .3s}
html .store-page.store-page .genre-tiles .category-tile:hover .genre-icon{stroke:var(--keygold)}
html .store-page.store-page .fix-card > svg{stroke:#E9E1D2}
html .store-page.store-page .fix-problem s{text-decoration-color:#8E8B84}
html .store-page.store-page .fix-problem{font-size:18px}
html .store-page.store-page .fix-solution{font:600 17px/1.6 Plex,system-ui,sans-serif}
html .store-page.store-page .text-link{text-decoration-color:#8E8B84}
html .store-page.store-page .text-link:hover{text-decoration-color:var(--keygold)}

/* Owner's palm (swords removed, 2026-11-05): two dusk palms beside the caravan in the Arabic band.
   (The green velvet + gold palm in the problems section was removed at the owner's request.) */
html[lang=ar] .store-page.store-page .band-art{background:url(/assets/brand/palm-dusk.png) right 6% bottom 17%/auto 44% no-repeat,url(/assets/brand/palm-dusk.png) right 1.5% bottom 15%/auto 32% no-repeat,url(/assets/brand/caravan.svg?v=3) center bottom/cover no-repeat}

/* Full-width sections do not slide in (the trust band showed a cream gap while rising). */

/* Genre key tags (fix 2026-11-05): the link stays still and only the tag inside it swings, so the hover area never
   moves under the cursor (the old swing made the hover flicker on and off at the tag edges). */
html .store-page.store-page .genre-tiles .category-tile{display:block;width:auto;justify-self:stretch;padding:0;min-height:0;background:none!important;border-radius:0;box-shadow:none!important;rotate:none!important;transition:none}
html .store-page.store-page .genre-tiles .category-tile::before{content:none}
html .store-page.store-page .genre-tiles .key-tag{position:relative;box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:212px;padding:48px 14px 18px;text-align:center;background:#0A0A0A var(--marble);background-size:760px auto;border-radius:46px 46px 8px 8px;color:#F3EEE3;box-shadow:0 16px 28px -20px #000b;transform-origin:50% 24px;transition:rotate .55s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;will-change:rotate}
html .store-page.store-page .genre-tiles .category-tile:nth-child(4n+2) .key-tag{background-position:35% 60%}
html .store-page.store-page .genre-tiles .category-tile:nth-child(4n+3) .key-tag{background-position:70% 20%}
html .store-page.store-page .genre-tiles .category-tile:nth-child(4n) .key-tag{background-position:15% 85%}
html .store-page.store-page .genre-tiles .key-tag::before{content:"";position:absolute;top:16px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--bg,#F3EEE3);box-shadow:0 0 0 2px #E9E1D2,inset 0 2px 3px #0007}
@media (hover:hover){
  html .store-page.store-page .genre-tiles .category-tile:hover .key-tag{rotate:-4deg;box-shadow:0 22px 34px -20px #000d}
  html .store-page.store-page .genre-tiles .category-tile:nth-child(even):hover .key-tag{rotate:4deg}
}
html .store-page.store-page .genre-tiles .category-tile:focus-visible .key-tag{outline:3px solid var(--keygold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html .store-page.store-page .genre-tiles .key-tag{transition:none;rotate:none!important}}
@media (max-width:760px){html .store-page.store-page .genre-tiles .key-tag{min-height:188px}}
/* Tabler icons are drawn for a 2px stroke at 24px; 1.6 keeps them crisp at 46px. */
html .store-page.store-page .genre-tiles .genre-icon{stroke-width:1.6}

/* Header stays pinned while scrolling (owner 2026-11-05, like driffle.com). */
html .store-page.store-page .site-header{position:sticky;top:0;z-index:40;animation:dk-header-lift linear both;animation-timeline:scroll(root);animation-range:0 48px}
@keyframes dk-header-lift{to{box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}}
html:has(.store-page){scroll-padding-top:136px}

/* "Works in your country" marks use the same green as the region tags (owner 2026-11-05). */
html .store-page.store-page p.ink-stamp.is-region{color:#1F9D55}
html .store-page.store-page :is(.region-verdict,.region-verdict-line).is-ok svg{color:#1F9D55}
html .store-page.store-page .product-purchase-panel p.buy-cr{color:#34C46A!important}
html .store-page.store-page .product-card:not(.is-out) .card-fit.is-ok,html .store-page.store-page .buy-fit.is-ok{color:#34C46A!important}
html .store-page.store-page .buy-fit.is-ok .ink-stamp{color:#34C46A}

/* Card art stays clear: discount in the price row, a small heart at the bottom corner of the cover (owner 2026-11-05). */
html .store-page.store-page .product-card{container-type:inline-size}
html .store-page.store-page .product-card .price-tag .discount-badge{position:static;order:3;background:var(--keygold);color:#0A0A0A;font-size:13px;padding:1px 7px;align-self:center}
html .store-page.store-page .product-card .card-wishlist{top:calc(100cqi * 215 / 460 - 40px);right:8px;left:auto;width:32px;height:32px;background:#0A0A0Acc;color:#F3EEE3}
html .store-page.store-page .product-card .card-wishlist svg{width:16px;height:16px}
/* Any letter-spacing turns off Amiri's joining rules in Chrome (ي lost its dots in card titles). */
html[dir=rtl] .store-page.store-page :is(h1,h2,h3,h4,.brand>span,.key-receipt-title,.genre-tiles .category-tile strong,.fact-title){letter-spacing:0!important}
html[lang=ar] .store-page.store-page .product-card h3{max-block-size:none;padding-bottom:.1em} /* 2.4em cut the second Arabic line (Amiri lines are taller) */

/* Product page: the key card (owner 2026-11-05). Cover, name, proof pills and four icon tiles; the card holds the price and one green Buy button. */
html .store-page.store-page{
  & .product-hero{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr) 340px;gap:24px 36px;align-items:start;margin-block:4px 44px}
  & .product-hero>*{grid-area:auto;max-width:none}
  & .hero-cover{border-radius:var(--radius);overflow:hidden;background:var(--paper-tone);box-shadow:0 24px 40px -28px #000c}
  & .hero-cover :is(img,.game-cover){display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
  & .hero-cover.is-wide :is(img,.game-cover){aspect-ratio:460/215}
  & .hero-main{display:grid;gap:18px;min-width:0}
  & .product-hero .product-page-heading{display:flex;align-items:flex-start;gap:14px;margin:0}
  & .product-hero .product-heading-main{flex:0 1 auto;min-width:0}
  & .product-hero .product-heading-main{flex:1 1 auto}
  & .product-hero .wish-ribbon-wrap{flex:none;align-self:flex-start;margin-top:4px}
  & .product-hero .hero-main h1{font-size:clamp(30px,3.2vw,48px);margin:0 0 12px}
  & .proof-row{display:flex;flex-wrap:wrap;gap:8px;margin:0}
  & .proof-pill{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:4px;padding-inline-end:12px;border-radius:999px;background:var(--soft);color:var(--ink);font-size:14px;font-weight:600}
  & .proof-pill b{display:grid;place-items:center;min-width:28px;height:26px;padding:0 7px;border-radius:999px;background:var(--ink);color:var(--bg);font:700 13px Archivo,Plex,sans-serif}
  & .proof-pill:is(.is-positive,.is-high) b{background:#157F43;color:#fff}
  & .proof-pill:is(.is-mixed,.is-mid) b{background:#9A6212;color:#fff}
  & .proof-pill:is(.is-negative,.is-low) b{background:#B42318;color:#fff}
  & .proof-pill:is(.is-age,.is-os){padding-inline-end:4px}
  & .proof-pill .os-logos{display:flex;gap:8px;padding-inline:8px}
  & .proof-pill .os-logos img{height:18px;width:auto}
  & .buy-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  & .buy-tile{display:flex;gap:14px;align-items:center;padding:16px;border-radius:var(--radius);background:var(--surface)}
  & .tile-icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--soft);color:var(--ink)}
  & .tile-icon svg{width:24px;height:24px}
  & .tile-icon img{width:26px;height:26px}
  & .buy-tile.is-ok .tile-icon{background:#1F9D551f;color:#157F43}
  & .buy-tile.is-no .tile-icon{background:#B423181a;color:#B42318}
  & .tile-text{display:grid;gap:3px;min-width:0;justify-items:start}
  & .tile-text strong{font-size:16px;line-height:1.3;color:var(--ink)}
  & .buy-tile.is-ok .tile-text strong{color:#157F43}
  & .tile-text small{font-size:13px;color:var(--muted)}
  & .tile-link{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  & .tile-link:hover{color:var(--ink)}
  & .product-hero .product-purchase-panel{margin:0}
  & .buy-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
  & .buy-meta span{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px}
  & .save-chip{background:#1F9D5530;color:#5FD38E}
  & .stock-pill{background:#F3EEE31a;color:var(--paper-ink)}
  & .stock-pill.is-out{display:none}
  & .product-hero :is(.product-cart-controls,.restock-form){display:grid;grid-template-columns:minmax(0,1fr);width:100%;margin:0}
  & .product-hero .key-receipt-main{grid-template-columns:minmax(0,1fr)}
  & .product-hero .restock-row{display:flex;gap:8px}
  & .product-hero .restock-row input{flex:1;min-width:0}
  & .buy-actions{display:flex;gap:10px;width:100%}
  & .product-cart-controls .button.buy-cta,& .buy-bar .button.buy-cta{flex:1;min-height:56px;background:#157F43;color:#fff;border:0;border-radius:var(--radius);font-size:18px;font-weight:700;box-shadow:none}
  & .product-cart-controls .button.buy-cta:hover,& .buy-bar .button.buy-cta:hover{background:#178A49;color:#fff}
  & .product-cart-controls .button.cart-icon-btn{flex:none;width:56px;min-height:56px;padding:0;display:grid;place-items:center;background:transparent;border:1.5px solid #F3EEE355;color:var(--paper-ink);border-radius:var(--radius)}
  & .product-cart-controls .button.cart-icon-btn:hover{border-color:var(--paper-ink)}
  & .cart-icon-btn svg{width:24px;height:24px}
  & .qty-stepper{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
  & .qty-stepper label{font-size:14px;color:var(--paper-muted)}
  & .qty-box{display:inline-flex;align-items:center;border:1px solid #F3EEE333;border-radius:var(--radius)}
  & .qty-btn{width:44px;height:44px;background:none;border:0;color:var(--paper-ink);font-size:20px;cursor:pointer}
  & .qty-box input{width:40px;height:44px;text-align:center;border:0;background:transparent;color:var(--paper-ink);font:600 16px Archivo,Plex,sans-serif;-moz-appearance:textfield;appearance:textfield}
  & .qty-box input::-webkit-inner-spin-button,& .qty-box input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  & .buy-route{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;justify-content:space-between}
  & .buy-route li{flex:1;display:grid;justify-items:center;gap:6px;text-align:center;font-size:13px;font-weight:600;color:var(--paper-ink);position:relative}
  & .buy-route li+li::before{content:"";position:absolute;top:17px;inset-inline-end:calc(50% + 24px);width:calc(100% - 48px);border-top:1.5px dashed #F3EEE355}
  & .buy-route :is(svg,img){width:34px;height:34px;padding:7px;border-radius:50%;background:#F3EEE314;color:var(--paper-ink);box-sizing:border-box}
  & .buy-route li:last-child :is(svg,img){background:#1F9D5530;color:#5FD38E}
  & .buy-bar{position:fixed;inset-inline:0;bottom:0;z-index:45;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#0A0A0Af5;color:#F3EEE3;box-shadow:0 -12px 24px -16px #000}
  & .buy-bar[hidden]{display:none}
  & .buy-bar img{flex:none;width:72px;height:auto;border-radius:4px}
  & .buy-bar-text{flex:1;min-width:0;display:grid}
  & .buy-bar-text bdi{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#D9D3C7}
  & .buy-bar-text strong{font:700 18px Archivo,Plex,sans-serif;color:#F3EEE3}
  & .buy-bar .button.buy-cta{flex:none;min-height:48px;padding:0 20px;font-size:16px}
  & .product-hero~.product-gallery{max-width:880px;margin-bottom:40px}
}
@media (min-width:901px){html .store-page.store-page .buy-bar{display:none!important}}
@media (max-width:1100px) and (min-width:901px){html .store-page.store-page .product-hero{grid-template-columns:minmax(0,1fr) 320px}html .store-page.store-page .hero-cover{display:none}}
@media (max-width:900px){
  html .store-page.store-page .product-hero{grid-template-columns:minmax(0,1fr);gap:16px}
  html .store-page.store-page .hero-main{display:contents}
  html .store-page.store-page .hero-cover{order:1}
  html .store-page.store-page .hero-cover :is(img,.game-cover){aspect-ratio:460/215}
  html .store-page.store-page .product-hero .product-page-heading{order:2}
  html .store-page.store-page .proof-row{order:3}
  html .store-page.store-page .product-hero .product-purchase-panel{order:4;position:static}
  html .store-page.store-page .buy-tiles{order:5}
  html .store-page.store-page .product-hero .product-important{order:6}
  html .store-page.store-page .buy-tile{padding:12px;gap:10px}
  html .store-page.store-page .tile-icon{width:40px;height:40px}
  html .store-page.store-page .tile-text strong{font-size:14px}
  body.view-product.store-page{padding-bottom:76px}
}
html .store-page.store-page .about-timeline .is-now p.ink-stamp{color:#34C46A} /* «الحين» in region green (owner 2026-11-05) */

/* Footer end: our night-desert scene instead of the big wordmark (owner 2026-11-05). Home already shows the caravan in its trust band, so its footer keeps dunes and palms only. */
html .store-page.store-page .footer-scene{height:clamp(200px,24vw,360px);margin-top:clamp(-8px,-1vw,0px);background:url(/assets/brand/routes.svg?v=2) center bottom/cover no-repeat}
html[lang=ar] .store-page.store-page .footer-scene{background:url(/assets/brand/palm-dusk.png) right 6% bottom 17%/auto 44% no-repeat,url(/assets/brand/palm-dusk.png) right 1.5% bottom 15%/auto 32% no-repeat,url(/assets/brand/caravan.svg?v=3) center bottom/cover no-repeat}
html[lang=ar] .store-page.store-page.view-home .footer-scene{background:url(/assets/brand/palm-dusk.png) right 6% bottom 17%/auto 44% no-repeat,url(/assets/brand/palm-dusk.png) right 1.5% bottom 15%/auto 32% no-repeat,url(/assets/brand/routes.svg?v=2) center bottom/cover no-repeat}
html .store-page.store-page .footer-legal a{white-space:nowrap}
html .store-page.store-page .site-footer:has(.footer-paper){background:#0F0C0A var(--marble) 30% 40%/cover}
html .store-page.store-page .site-footer:has(.footer-paper) :is(.footer-stone,.footer-paper){background:transparent}
html .store-page.store-page .footer-stone>.footer-seal-row{margin-bottom:clamp(28px,3vw,44px)}
/* CR badge at the top of the footer: same layout as the official badges, with the national emblem in white (owner decision 2026-11-05). */
html .store-page.store-page .cr-badge{display:inline-flex;align-items:center;gap:14px;margin:0}
html .store-page.store-page .cr-mark{width:63px;height:60px;flex:none}
html .store-page.store-page .cr-text{display:grid;gap:2px;line-height:1.2}
html .store-page.store-page .footer-stone .cr-text span{font-size:16px;font-weight:700;color:#F3EEE3}
html .store-page.store-page .footer-stone .cr-text strong{font:700 22px Archivo,Plex,sans-serif;letter-spacing:.02em;color:#F3EEE3}

/* Game comments, Eneba-style (owner 2026-11-05): summary + write box on the side, comment cards beside it. */
html .store-page.store-page{
  & .comments-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
  & .comments-side{display:grid;gap:16px;padding:20px;border-radius:var(--radius);background:#0A0A0A var(--marble) 30% 40%/900px auto;color:#F3EEE3;position:sticky;top:136px}
  & .comments-side :is(p,legend,span,label){color:#F3EEE3}
  & .comments-summary{display:grid;gap:8px}
  & .comments-score{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14px}
  & .comments-score b{font:700 40px/1 Archivo,Plex,sans-serif;color:#5FD38E}
  & .comments-bar{display:block;height:8px;border-radius:999px;background:#F3EEE326;overflow:hidden}
  & .comments-bar i{display:block;height:100%;background:#34C46A;border-radius:inherit}
  & .comments-count{font-size:13px;color:#A8A49B!important}
  & .comments-note{margin:0;font-size:15px;line-height:1.6}
  & .comments-note a{color:#5FD38E;font-weight:700}
  & .comment-form{display:grid;gap:12px}
  & .comment-vote{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  & .comment-vote legend{font-weight:700;margin-bottom:8px;font-size:15px}
  & .vote{position:relative;display:grid;justify-items:center;gap:6px;padding:12px 6px;border-radius:var(--radius);border:1.5px solid #F3EEE333;cursor:pointer;font-size:13px;font-weight:700;text-align:center}
  & .vote input{position:absolute;opacity:0;pointer-events:none}
  & .vote svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  & .vote:has(input:focus-visible){outline:2px solid #5FD38E;outline-offset:2px}
  & .vote-up:has(input:checked){border-color:#34C46A;background:#1F9D5533;color:#5FD38E}
  & .vote-down:has(input:checked){border-color:#E5786B;background:#B4231833;color:#F2A49A}
  & .vote:has(input:checked) span{color:inherit}
  & .comment-form textarea{width:100%;box-sizing:border-box;min-height:96px;resize:vertical;padding:12px;border:0;border-radius:var(--radius);background:#F3EEE314;color:#F3EEE3;font:inherit;font-size:15px}
  & .comment-form textarea::placeholder{color:#A8A49B}
  & .comment-form .button.buy-cta{min-height:48px;background:#157F43;color:#fff;border:0;border-radius:var(--radius);font-weight:700}
  & .comment-form .button.buy-cta:hover{background:#178A49}
  & .comments-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  & .comment{display:flex;gap:12px;padding:16px;border-radius:var(--radius);background:var(--soft);min-width:0}
  & .comment-avatar{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0A0A0A;color:#F3EEE3;font:700 16px Archivo,Plex,sans-serif}
  & .comment.is-up .comment-avatar{background:#157F43}
  & .comment-body{min-width:0;display:grid;gap:6px}
  & .comment-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0;font-size:13px;color:var(--muted)}
  & .comment-head strong{font-size:15px;color:var(--ink)}
  & .comment-badge{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#157F43}
  & .comment-badge svg{width:14px;height:14px}
  & .comment-vote-icon svg{width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  & .comment.is-up .comment-vote-icon{color:#157F43}
  & .comment.is-down .comment-vote-icon{color:#B42318}
  & .comment-head time{margin-inline-start:auto}
  & .comment-text{margin:0;font-size:15px;line-height:1.7;color:var(--ink);overflow-wrap:anywhere;unicode-bidi:plaintext}
  & .comments-empty{display:grid;justify-items:center;gap:10px;margin:0;padding:36px 16px;border-radius:var(--radius);background:var(--soft);color:var(--muted);text-align:center}
  & .comments-empty svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.6}
}
html .store-page.store-page .comments-bar i.w-0{width:0}html .store-page.store-page .comments-bar i.w-5{width:5%}html .store-page.store-page .comments-bar i.w-10{width:10%}html .store-page.store-page .comments-bar i.w-15{width:15%}html .store-page.store-page .comments-bar i.w-20{width:20%}html .store-page.store-page .comments-bar i.w-25{width:25%}html .store-page.store-page .comments-bar i.w-30{width:30%}html .store-page.store-page .comments-bar i.w-35{width:35%}html .store-page.store-page .comments-bar i.w-40{width:40%}html .store-page.store-page .comments-bar i.w-45{width:45%}html .store-page.store-page .comments-bar i.w-50{width:50%}html .store-page.store-page .comments-bar i.w-55{width:55%}html .store-page.store-page .comments-bar i.w-60{width:60%}html .store-page.store-page .comments-bar i.w-65{width:65%}html .store-page.store-page .comments-bar i.w-70{width:70%}html .store-page.store-page .comments-bar i.w-75{width:75%}html .store-page.store-page .comments-bar i.w-80{width:80%}html .store-page.store-page .comments-bar i.w-85{width:85%}html .store-page.store-page .comments-bar i.w-90{width:90%}html .store-page.store-page .comments-bar i.w-95{width:95%}html .store-page.store-page .comments-bar i.w-100{width:100%}
@media (max-width:900px){
  html .store-page.store-page .comments-layout{grid-template-columns:1fr}
  html .store-page.store-page .comments-side{position:static}
  html .store-page.store-page .comments-list{grid-template-columns:1fr}
}

/* 2026-11-07 (owner request): official Saudi riyal sign, shorter phone opening, smaller cookie notice. */
/* U+20C1 (SAMA symbol, public-domain SVG) as a one-glyph font, merged into every site font so any price text can use it. */
@font-face{font-family:Plex;src:url(/assets/fonts/dk-riyal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+20C1}
@font-face{font-family:Archivo;src:url(/assets/fonts/dk-riyal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+20C1}
@font-face{font-family:Bodoni;src:url(/assets/fonts/dk-riyal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+20C1}
@font-face{font-family:Amiri;src:url(/assets/fonts/dk-riyal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+20C1}
/* Cookie notice: a small corner card on desktop, two short lines on phones, so it never covers the main button. */
html .store-page.store-page .cookie-notice{inset-inline:auto 16px;bottom:16px;width:min(400px,calc(100vw - 32px));max-width:none;margin:0;padding:14px 16px;gap:10px;flex-direction:column;align-items:stretch}
html .store-page.store-page .cookie-notice p{flex:none;font-size:12.5px;line-height:1.6}
html .store-page.store-page .cookie-notice form,html .store-page.store-page .cookie-notice .button{width:100%}
html .store-page.store-page .cookie-notice .button{padding:9px 14px;min-height:0;justify-content:center}
@media (max-width:760px){
  html .store-page.store-page .cookie-notice{inset-inline:10px;bottom:10px;width:auto;padding:12px 14px;gap:8px}
  html .store-page.store-page .cookie-notice p{font-size:12px}
  /* Phone opening: one deal banner, then the headline. The four cover tiles stay in the rails below. */
  html .store-page.store-page .strip-tiles{display:none}
  html .store-page.store-page .strip-deal{height:52vw;min-height:200px}
}

/* 2026-11-07 shop polish (owner: fix the mistakes found in the page check). */
/* A card title may run to three lines; the Arabic "Steam code" tail stays in one piece, so no word is cut. */
html .store-page.store-page .product-card h3{-webkit-line-clamp:3;text-wrap:balance}
html .store-page.store-page .product-card .title-kind{white-space:nowrap}
/* Filter counts and "Clear all" were 10 and 11 px. */
html .store-page.store-page .shop-sidebar label small{font-size:12px}
html .store-page.store-page .shop-sidebar-heading .text-link{font-size:13px;padding-block:8px}
/* On phones the tail "Steam code" is dropped from cards: every card is one, and "Steam" is in the line under it. */
@media (max-width:760px){html .store-page.store-page .product-card .title-kind{display:none}}
/* Phone tap targets: the product tiles' links and "View all" were 23 to 27 px tall; 44 px is the touch minimum. */
@media (max-width:760px){html .store-page.store-page :is(.tile-link,.row-tools .text-link){display:inline-flex;align-items:center;min-height:44px}}
/* Cart and checkout trust strip (2026-11-08): proof before payment, one quiet list, no badges. */
html .store-page.store-page .trust-strip{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
html .store-page.store-page .trust-strip li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px;line-height:1.5}
html .store-page.store-page .trust-strip li::before{content:'';flex:none;width:8px;height:8px;margin-top:7px;background:var(--gold);transform:rotate(45deg)}
html .store-page.store-page .trust-strip a{color:var(--gold-text)}
html .store-page.store-page .mini-cart .trust-strip{margin:12px 16px 16px;font-size:13px}
/* Order page right after payment: the key comes first, with one warm line. */
html .store-page.store-page .order-thanks{margin:0 0 20px;padding:18px 20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--gold)}
html .store-page.store-page .order-thanks h2{margin:0 0 6px;font-size:clamp(20px,3vw,26px)}
html .store-page.store-page .order-thanks p{margin:0 0 8px;color:var(--ink)}