/* ========================================================================
   AKREI V17 — Mobile Perfection & Responsive Reliability
   Final responsive layer. Loaded last so it safely resolves legacy conflicts.
   ======================================================================== */

:root{
  --ak-v17-gutter:clamp(8px,2.8vw,14px);
  --ak-v17-radius:clamp(16px,4vw,24px);
  --ak-v17-control:44px;
}

html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
.ak-shell{width:100%!important;min-width:0!important}
.ak-navbar,.ak-final-hero,.ak-v12-command,.ak-product-card,.ak-footer-shell{min-width:0}

/* Announcement remains readable in every appearance, including White. */
.ak-announcement-link{color:rgb(var(--cl-t-primary))!important}
html[data-ak-theme="light"] .ak-announcement-inner{
  color:#181a21!important;
  border-color:rgba(17,18,22,.09)!important;
  background:linear-gradient(90deg,rgba(var(--cl-accent),.10),rgba(255,255,255,.98) 48%,rgba(247,248,251,.98))!important;
  box-shadow:0 8px 28px rgba(30,34,45,.07),inset 0 1px rgba(255,255,255,.86)!important;
}
html[data-ak-theme="light"] .ak-announcement-link{color:#20222a!important}
html[data-ak-theme="light"] .ak-announcement-label{color:#555b68!important}

/* Mobile theme chooser inside the navigation drawer. */
.ak-v17-mobile-preferences{display:none}
.ak-v17-mobile-pref-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.ak-v17-mobile-pref-head strong{font-size:11px;font-weight:900;letter-spacing:.02em;color:rgb(var(--cl-t-primary))}
.ak-v17-mobile-pref-head small{font-size:8px;font-weight:750;color:rgba(var(--cl-t-primary),.45)}
.ak-v17-mobile-theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.ak-v17-mobile-theme-grid button{min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 5px;border:1px solid rgba(var(--cl-t-primary),.09);border-radius:13px;color:rgba(var(--cl-t-primary),.68);background:rgba(var(--cl-t-primary),.025);font-size:8px;font-weight:850;transition:.18s ease}
.ak-v17-mobile-theme-grid button i{font-size:14px}
.ak-v17-mobile-theme-grid button:hover,.ak-v17-mobile-theme-grid button.is-active{color:rgb(var(--cl-t-primary));border-color:rgba(var(--cl-accent),.42);background:rgba(var(--cl-accent),.11);box-shadow:0 10px 28px rgba(var(--cl-accent),.12)}
html[data-ak-theme="light"] .ak-v17-mobile-theme-grid button{background:rgba(17,18,22,.025);border-color:rgba(17,18,22,.09);color:#525866}
html[data-ak-theme="light"] .ak-v17-mobile-theme-grid button:hover,html[data-ak-theme="light"] .ak-v17-mobile-theme-grid button.is-active{color:#17191f;background:rgba(var(--cl-accent),.09)}

/* Desktop alignment polish remains stable. */
@media(min-width:901px){
  .ak-navbar-main{align-items:center!important}
  .ak-brand{min-width:0}
  .ak-header-actions{flex:none}
  .ak-v12-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:900px){
  #app.ak-shell{padding:10px var(--ak-v17-gutter) 26px!important}
  .ak-header{top:5px!important}
  .ak-navbar{overflow:visible!important;border-radius:20px!important}
  .ak-navbar-main{display:flex!important;min-height:64px!important;gap:7px!important;padding:8px!important}
  .ak-brand{flex:1 1 auto;min-width:0!important;gap:9px!important}
  .ak-brand-copy{min-width:0}
  .ak-brand-copy strong{max-width:150px!important;font-size:14px!important}
  .ak-brand-logo,.ak-brand-mark{width:42px!important;height:42px!important;border-radius:13px!important}
  .ak-header-actions{flex:0 0 auto;margin-left:auto!important;gap:5px!important}
  .ak-account-button{display:none!important}
  .ak-appearance{display:none!important}
  .ak-language-trigger,.ak-icon-button,.ak-mobile-toggle{width:42px!important;height:42px!important;min-height:42px!important;border-radius:13px!important}
  .ak-language-trigger{padding:0!important;justify-content:center!important}
  .ak-language-flag,.ak-language-code,.ak-language-trigger>svg{display:none!important}
  .ak-language-globe{display:grid!important}
  .ak-currency-selector{display:flex!important;width:78px!important;min-width:78px!important;height:42px!important;border-radius:13px!important}
  .ak-currency-selector .choices,.ak-currency-selector .choices__inner{width:100%!important;min-width:0!important;height:42px!important;min-height:42px!important;border-radius:13px!important}
  .ak-currency-selector .choices__inner{padding:0 15px 0 28px!important;display:flex!important;align-items:center!important}
  .ak-currency-selector .choices__item{font-size:9px!important;font-weight:900!important;white-space:nowrap!important}
  .ak-currency-leading{left:10px!important;font-size:10px!important}
  .ak-mobile-menu{margin-top:8px!important;padding:10px!important;border-top:1px solid rgba(var(--cl-t-primary),.07)!important;background:rgba(var(--cl-card),.96)!important;border-radius:0 0 19px 19px!important;box-shadow:0 24px 60px rgba(0,0,0,.22)!important}
  .ak-v17-mobile-preferences{display:block;margin:10px 0 2px;padding:11px;border:1px solid rgba(var(--cl-t-primary),.075);border-radius:16px;background:rgba(var(--cl-t-primary),.025)}
  .ak-mobile-menu nav{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .ak-mobile-menu nav a{min-height:42px!important;border-radius:12px!important;font-size:10px!important}

  /* The hero no longer consumes multiple phone screens before showing artwork. */
  .ak-final-hero-grid{grid-template-columns:1fr!important;gap:10px!important;margin-bottom:12px!important}
  .ak-final-hero{grid-template-columns:1fr!important;min-height:0!important;border-radius:var(--ak-v17-radius)!important;overflow:hidden!important}
  .ak-final-hero-copy{max-width:none!important;padding:34px 28px 12px!important}
  .ak-final-hero h1{font-size:clamp(42px,9.8vw,58px)!important;line-height:.94!important;margin:17px 0 13px!important}
  .ak-final-hero-copy>p{max-width:620px!important;font-size:14px!important;line-height:1.65!important}
  .ak-final-hero-actions{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr)!important;gap:9px!important;margin-top:20px!important}
  .ak-final-primary,.ak-final-secondary{width:100%!important;min-height:48px!important;padding:0 14px!important;border-radius:14px!important;font-size:12px!important}
  .ak-final-trust-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-top:18px!important}
  .ak-final-trust-row span{min-width:0;font-size:9px!important;line-height:1.3}
  .ak-final-hero-art{position:relative!important;min-height:220px!important;height:220px!important;overflow:hidden!important;transform:none!important;margin-top:-6px!important}
  .ak-default-hero-art{transform:scale(.78)!important;transform-origin:center!important}
  html[data-ak-theme="valorant"] .ak-game-character-valorant{right:-2%!important;bottom:-22%!important;width:min(79%,430px)!important;height:130%!important;opacity:.98!important}
  html[data-ak-theme="lol"] .ak-game-character-lol{inset:auto 0 -13% 0!important;width:100%!important;height:125%!important;object-position:68% center!important;opacity:.96!important}
  .ak-game-data-card{display:none!important}
  .ak-game-wordmark{top:14px!important;right:16px!important;font-size:7px!important}
  .ak-v-emblem,.ak-lol-crest,.ak-v-coordinate{display:none!important}

  /* A compact, inline catalog controller replaces the iOS-obscuring bottom sheet. */
  .ak-v12-command{margin:12px 0 17px!important;border-radius:20px!important;overflow:visible!important}
  .ak-v12-command-top{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(118px,.42fr)!important;gap:8px!important;padding:8px!important}
  .ak-v12-search{grid-column:1/-1!important;height:48px!important;border-radius:14px!important}
  .ak-v12-search input{font-size:12px!important;min-width:0!important}
  .ak-v12-search kbd{display:none!important}
  .ak-v12-filter-toggle,.ak-v12-result-pill{width:100%!important;height:43px!important;min-height:43px!important;border-radius:13px!important;justify-content:center!important}
  .ak-v12-filter-toggle>span{display:inline!important}
  .ak-v12-result-pill{grid-column:auto!important;font-size:9px!important}
  .ak-v12-quick-row{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overscroll-behavior-inline:contain;scrollbar-width:none;padding:2px 8px 9px!important;gap:7px!important}
  .ak-v12-quick-row::-webkit-scrollbar{display:none}
  .ak-v12-quick-title{display:none!important}
  .ak-v12-quick-row>button{flex:0 0 auto!important;min-height:37px!important;padding:0 12px!important;border-radius:12px!important;font-size:9px!important}
  .ak-v12-filter-panel{margin:0 8px 8px!important;padding:10px!important;border-radius:16px!important;overflow:visible!important}
  .ak-v12-filter-panel-head{margin-bottom:9px!important}
  .ak-v12-filter-panel-head span{font-size:7px!important}
  .ak-v12-filter-panel-head strong{font-size:9px!important}
  .ak-v12-reset{min-height:34px!important;padding:0 10px!important}
  .ak-v12-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;row-gap:8px!important;position:relative!important;z-index:20!important}
  .ak-v12-field{min-height:59px!important;padding:8px 10px!important;border-radius:13px!important}
  .ak-v12-field-label{font-size:7px!important}
  .ak-v12-field-trigger span{font-size:10px!important}
  .ak-v12-field.is-open:before{display:none!important;content:none!important}
  .ak-v12-menu{position:absolute!important;left:0!important;right:0!important;top:calc(100% + 6px)!important;bottom:auto!important;max-height:220px!important;padding:7px!important;border-radius:14px!important;z-index:999!important}
  .ak-v12-menu button{min-height:39px!important;font-size:10px!important;border-radius:10px!important}
  .ak-v12-active-row{padding:0 9px 9px!important;overflow:hidden!important}
  .ak-v12-active-chips{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none}
  .ak-v12-active-chips::-webkit-scrollbar{display:none}

  .ak-final-catalog-head{align-items:flex-start!important;gap:9px!important;margin:19px 0 13px!important}
  .ak-final-catalog-head h2{font-size:clamp(25px,7vw,34px)!important}
  .ak-final-catalog-head p{font-size:12px!important;line-height:1.55!important}
  .ak-final-catalog-head>button{min-height:39px!important;border-radius:12px!important}

  .ak-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}
  .ak-v7-product-card{border-radius:21px!important;overflow:hidden!important}
  .ak-v7-card-visual{aspect-ratio:1/1!important}
  .ak-v7-card-character{display:block!important;visibility:visible!important;opacity:1!important;right:-28%!important;bottom:-1%!important;width:auto!important;height:107%!important;z-index:3!important}
  .ak-v7-product-card.type-ranked .ak-v7-card-character{right:-20%!important;height:111%!important}
  .ak-v7-product-card.type-skinned .ak-v7-card-character{right:-31%!important;height:109%!important}
  .ak-v7-card-title-art{left:13px!important;right:11px!important;bottom:14px!important}
  .ak-v7-card-title-art>strong{font-size:clamp(19px,4.9vw,26px)!important;max-width:96%!important}
  .ak-v7-card-tags{gap:4px!important;margin-top:7px!important}
  .ak-v7-card-tags span{font-size:5.5px!important;padding:4px 5px!important}
  .ak-v7-card-topbar{inset:10px 10px auto!important}
  .ak-v7-card-delivery,.ak-v7-card-status,.ak-v10-card-hot{font-size:5.8px!important;padding:6px 7px!important}
  .ak-v7-card-body{padding:12px!important}
  .ak-v7-card-body h3{font-size:12px!important}
  .ak-v7-card-body p,.ak-v7-card-trust{display:none!important}
  .ak-v7-card-stock-row{margin-top:10px!important;padding-top:9px!important}
  .ak-v7-card-footer{margin-top:10px!important}
  .ak-v7-card-footer .ak-product-price{font-size:15px!important}
  .ak-v7-card-cta{width:34px!important;height:34px!important;border-radius:11px!important}

  .ak-final-stats,.ak-final-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important;border-radius:17px!important}
  .ak-final-stats>div,.ak-final-benefits>div{min-width:0!important;padding:12px!important}
  .ak-final-benefits>div p small{font-size:8px!important}

  /* Product, cart and editorial pages use a calm single-column mobile rhythm. */
  .ak-v7-product-cinematic{min-height:255px!important;border-radius:22px!important}
  .ak-v7-product-cinematic-copy{max-width:100%!important;padding:24px 20px!important}
  .ak-v7-product-cinematic h1{font-size:clamp(31px,9vw,42px)!important}
  .ak-v7-product-meta-rail{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ak-v7-smart-overview-grid,.ak-v7-blog-grid,.ak-v7-guide-grid{grid-template-columns:1fr!important}
  .ak-v7-article-content,.ak-v7-seo-article-body{font-size:15px!important;line-height:1.75!important}
  .ak-v7-blog-card-body p,.ak-v7-guide-card-copy p{font-size:12.5px!important;line-height:1.65!important}
  .ak-footer-main{grid-template-columns:1fr!important}
  .ak-footer-main>*{grid-column:auto!important}
}

@media(max-width:600px){
  #app.ak-shell{padding-inline:max(8px,env(safe-area-inset-left))!important;padding-right:max(8px,env(safe-area-inset-right))!important}
  .ak-announcement{margin-bottom:8px!important}
  .ak-announcement-inner{min-height:38px!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;padding:5px 9px!important;border-radius:14px!important}
  .ak-announcement-icon{width:27px!important;height:27px!important;border-radius:9px!important}
  .ak-announcement-content{text-align:left!important;min-width:0!important}
  .ak-announcement-link{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:9px!important}
  .ak-announcement-label{display:none!important}

  .ak-navbar-main{min-height:60px!important}
  .ak-brand-logo,.ak-brand-mark{width:40px!important;height:40px!important}
  .ak-brand-copy{display:none!important}
  .ak-language-trigger,.ak-icon-button,.ak-mobile-toggle{width:39px!important;height:39px!important;min-height:39px!important}
  .ak-currency-selector{width:70px!important;min-width:70px!important;height:39px!important}
  .ak-currency-selector .choices,.ak-currency-selector .choices__inner{height:39px!important;min-height:39px!important}
  .ak-currency-selector .choices__inner{padding-left:25px!important;padding-right:10px!important}
  .ak-currency-selector .choices__item{font-size:8px!important}
  .ak-currency-leading{left:8px!important}

  .ak-final-hero-copy{padding:27px 20px 10px!important}
  .ak-final-eyebrow{min-height:28px!important;font-size:8px!important}
  .ak-final-hero h1{font-size:clamp(39px,11.3vw,49px)!important}
  .ak-final-hero-copy>p{font-size:13px!important;line-height:1.58!important}
  .ak-final-hero-actions{grid-template-columns:1fr 1fr!important}
  .ak-final-primary,.ak-final-secondary{min-height:46px!important;font-size:10.5px!important;gap:7px!important;padding:0 10px!important}
  .ak-final-trust-row{grid-template-columns:1fr 1fr!important}
  .ak-final-trust-row>span:last-child{grid-column:1/-1!important}
  .ak-final-hero-art{height:195px!important;min-height:195px!important}
  html[data-ak-theme="valorant"] .ak-game-character-valorant{right:-8%!important;bottom:-18%!important;width:92%!important;height:124%!important}
  html[data-ak-theme="lol"] .ak-game-character-lol{height:121%!important;bottom:-16%!important}

  .ak-v12-command-top{grid-template-columns:1fr 1fr!important}
  .ak-v12-filter-toggle>span{display:inline!important}
  .ak-v12-result-pill>span:last-child{display:inline!important}
  .ak-v12-filter-grid{grid-template-columns:1fr!important}
  .ak-v12-field{min-height:56px!important}
  .ak-v12-menu{max-height:205px!important}

  .ak-product-grid{grid-template-columns:1fr!important;gap:13px!important}
  .ak-v7-card-visual{aspect-ratio:1.26/1!important}
  .ak-v7-card-character{right:-8%!important;height:112%!important}
  .ak-v7-product-card.type-ranked .ak-v7-card-character{right:-2%!important;height:115%!important}
  .ak-v7-product-card.type-skinned .ak-v7-card-character{right:-10%!important;height:114%!important}
  .ak-v7-card-title-art>strong{font-size:clamp(25px,8vw,34px)!important;max-width:82%!important}
  .ak-v7-card-body{padding:14px!important}
  .ak-v7-card-body h3{font-size:14px!important}
  .ak-v7-card-body p,.ak-v7-card-trust{display:flex!important}
  .ak-v7-card-footer .ak-product-price{font-size:18px!important}
  .ak-v7-card-cta{width:40px!important;height:40px!important;border-radius:13px!important}

  .ak-v7-product-meta-rail{grid-template-columns:1fr!important}
  .ak-v7-blog-hero{min-height:250px!important;padding:24px 20px!important}
  .ak-v7-blog-hero h1{font-size:clamp(34px,10vw,46px)!important}
  .ak-v7-guide-modal{padding:7px!important}
  .ak-v7-guide-modal-panel{max-height:calc(var(--ak-vh,100vh) - 18px)!important;border-radius:20px!important;padding:22px 17px!important}
}

@media(max-width:390px){
  .ak-navbar-main{gap:4px!important;padding:7px!important}
  .ak-language-trigger,.ak-icon-button,.ak-mobile-toggle{width:36px!important;height:36px!important;min-height:36px!important;border-radius:11px!important}
  .ak-currency-selector{width:62px!important;min-width:62px!important;height:36px!important}
  .ak-currency-selector .choices,.ak-currency-selector .choices__inner{height:36px!important;min-height:36px!important}
  .ak-currency-selector .choices__inner{padding-left:22px!important;padding-right:7px!important}
  .ak-currency-selector .choices__item{font-size:7.5px!important}
  .ak-brand-logo,.ak-brand-mark{width:37px!important;height:37px!important;border-radius:11px!important}
  .ak-v17-mobile-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ak-final-hero-copy{padding-inline:17px!important}
  .ak-final-hero-actions{grid-template-columns:1fr!important}
  .ak-final-trust-row{grid-template-columns:1fr!important}
  .ak-final-trust-row>span:last-child{grid-column:auto!important}
  .ak-v12-command-top{grid-template-columns:1fr!important}
  .ak-v12-search,.ak-v12-filter-toggle,.ak-v12-result-pill{grid-column:1!important}
  .ak-v12-result-pill{min-height:39px!important}
}

@media(hover:none),(pointer:coarse){
  .ak-v7-product-card:hover,.ak-final-primary:hover,.ak-final-secondary:hover,.ak-v12-quick-row>button:hover{transform:none!important}
  .ak-v7-card-scan,.ak-v7-card-flare,.ak-v7-card-orbit{animation-duration:11s!important}
}

@media(prefers-reduced-motion:reduce){
  .ak-v12-filter-panel,.ak-mobile-menu{animation:none!important;transition:none!important}
}

/* White appearance receives a true native light mobile control surface. */
html[data-ak-theme="light"] .ak-v12-command{
  border-color:rgba(17,18,22,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(246,247,250,.98))!important;
  box-shadow:0 22px 60px rgba(35,39,50,.11),inset 0 1px rgba(255,255,255,.95)!important;
}
html[data-ak-theme="light"] .ak-v12-search,
html[data-ak-theme="light"] .ak-v12-result-pill,
html[data-ak-theme="light"] .ak-v12-filter-panel,
html[data-ak-theme="light"] .ak-v12-field,
html[data-ak-theme="light"] .ak-v12-reset,
html[data-ak-theme="light"] .ak-v12-quick-row>button{
  color:#17191f!important;
  border-color:rgba(17,18,22,.09)!important;
  background:rgba(17,18,22,.025)!important;
}
html[data-ak-theme="light"] .ak-v12-search input,
html[data-ak-theme="light"] .ak-v12-field-trigger,
html[data-ak-theme="light"] .ak-v12-field-trigger span,
html[data-ak-theme="light"] .ak-v12-filter-panel-head strong{color:#17191f!important}
html[data-ak-theme="light"] .ak-v12-field-label,
html[data-ak-theme="light"] .ak-v12-filter-panel-head span{color:rgba(17,18,22,.52)!important}
html[data-ak-theme="light"] .ak-v12-filter-toggle{color:#fff!important;background:linear-gradient(135deg,#6f55ff,#8a6cff)!important;border-color:transparent!important;box-shadow:0 12px 28px rgba(111,85,255,.2)!important}
html[data-ak-theme="light"] .ak-v12-menu{background:rgba(255,255,255,.995)!important;border-color:rgba(17,18,22,.12)!important;box-shadow:0 26px 70px rgba(38,42,55,.2),inset 0 1px rgba(255,255,255,.95)!important}
html[data-ak-theme="light"] .ak-v12-menu button{color:#333743!important}
html[data-ak-theme="light"] .ak-v12-menu button:hover,
html[data-ak-theme="light"] .ak-v12-menu button.is-selected,
html[data-ak-theme="light"] .ak-v12-menu button[aria-selected="true"]{color:#17191f!important;background:rgba(111,85,255,.10)!important}
html[data-ak-theme="light"] .ak-mobile-menu{background:rgba(255,255,255,.985)!important;border-color:rgba(17,18,22,.08)!important;box-shadow:0 24px 65px rgba(36,40,52,.13)!important}