/* MY-PC 0.9.3: store presentation matched to the approved 20 October boards.
   Catalog data, form names, prices, and native keyboard controls are preserved. */

/* Store heroes have different aspect ratios in the two approved boards. */
body #app .storefront-carousel .hero-shop {
  height:clamp(210px,21.3vw,340px)!important;
  min-height:0!important;
}
body #app .storefront-carousel .gaming-hero {
  height:clamp(250px,27.65vw,440px)!important;
  min-height:0!important;
  background:#06151e!important;
}
body #app .storefront-carousel .hero-inner,
body #app .storefront-carousel .gaming-hero-inner {
  width:calc(100% - 48px)!important;
  max-width:1512px!important;
  height:100%!important;
  min-height:0!important;
}
body #app .storefront-carousel .ra-store-photo {width:62%!important}
body #app .storefront-carousel .ra-store-mascot {
  inset:0 0 0 auto!important;
  width:19%!important;
}
body #app .storefront-carousel .ra-store-mascot .reference-art {overflow:hidden}
body #app .storefront-carousel .ra-store-mascot .ra-full-photo>img {
  height:137%!important;
  width:100%!important;
  object-fit:contain!important;
  object-position:center top!important;
}
body #app .storefront-carousel .hero-shop:not(.hero-product-slide):not(.hero-editorial) .hero-copy {
  width:34%!important;
  margin-right:16%!important;
  padding:0!important;
}
body #app .storefront-carousel .hero-shop .hero-copy h1 {
  font-size:clamp(34px,4vw,59px)!important;
  line-height:1.04!important;
  letter-spacing:-.025em;
  margin:0 0 10px!important;
}
body #app .storefront-carousel .hero-shop .hero-copy p {
  font-size:clamp(15px,1.75vw,22px)!important;
  line-height:1.4!important;
  margin:0 0 12px!important;
}
body #app .storefront-carousel .ra-gaming-photo {
  width:76%!important;
  inset:0 auto 0 0!important;
  height:100%!important;
}
body #app .storefront-carousel .ra-gaming-photo::after {
  inset:0 0 0 auto!important;
  width:12%!important;
  background:linear-gradient(90deg,transparent,#06151e)!important;
}
body #app .storefront-carousel .gaming-hero-copy {
  width:28%!important;
  max-width:430px!important;
  margin:0!important;
  padding:0!important;
  text-align:right!important;
}
body #app .storefront-carousel .gaming-hero-copy h1 {
  white-space:normal!important;
  font-size:clamp(43px,5.55vw,78px)!important;
  line-height:1.02!important;
  margin:0 0 13px!important;
  letter-spacing:-.03em;
  color:#fff!important;
}
body #app .storefront-carousel .gaming-hero-copy h1 span {color:#0065ff!important}
body #app .storefront-carousel .gaming-hero-copy p {
  font-size:clamp(16px,1.85vw,24px)!important;
  line-height:1.35!important;
  color:#f0f4fa!important;
  margin:0 0 18px!important;
}
body #app .storefront-carousel .gaming-actions {margin-top:0!important}
body #app .storefront-carousel .gaming-actions .gaming-primary {
  min-height:42px!important;
  border:0!important;
  background:#0065ff!important;
  font-size:15px!important;
  padding:10px 15px!important;
  border-radius:3px!important;
  box-shadow:none!important;
  white-space:normal;
}

/* Photo categories, including the gaming all-categories opener. */
body #app .ra-category-strip {
  position:relative;
  padding-block:12px!important;
  gap:7px!important;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body #app .ra-category-strip::-webkit-scrollbar {display:none}
body #app .ra-category-strip>a,
body #app .ra-category-strip>button,
body #app .ra-category-strip .retail-all-tile {
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  min-height:118px!important;
  margin:0!important;
  padding:4px 7px 6px!important;
  gap:4px!important;
  border:1px solid #e0eaf4!important;
  border-radius:3px!important;
  background:#f4f9fd!important;
  color:#101d50!important;
  font:500 14px/1.25 Rubik,Arial!important;
  text-align:center!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
body #app .ra-category-strip img {
  display:block!important;
  width:100%!important;
  height:84px!important;
  padding:0 3px!important;
  object-fit:contain!important;
  object-position:center!important;
  mix-blend-mode:normal!important;
}
body #app .ra-category-strip>button[data-retail-open-all]>.icon {
  width:66px!important;
  height:80px!important;
  display:block!important;
  color:#0873ff!important;
}
body #app .ra-category-strip .retail-game-category-entry {position:static!important;display:block;min-width:0}
body #app .ra-category-strip .retail-all-tile {width:100%!important;height:100%!important;cursor:pointer}
body #app .ra-category-strip .retail-all-tile>.icon {width:66px!important;height:80px!important;display:block!important;color:#0873ff!important}
body #app .ra-category-strip>a:hover,
body #app .ra-category-strip>button:hover {border-color:#0065ff!important}
body #app .ra-category-strip :focus-visible {outline:2px solid #0065ff;outline-offset:3px}
body.gaming-theme #app .ra-category-strip>a,
body.gaming-theme #app .ra-category-strip>button,
body.gaming-theme #app .ra-category-strip .retail-all-tile {
  background:#0b1d29!important;
  border-color:#1a3445!important;
  color:#edf4ff!important;
}
body.gaming-theme #app .ra-category-strip>button[data-retail-open-all] {background:#0c263d!important;border-color:#0b4e81!important}
body.gaming-theme #app .ra-category-strip .retail-all-tile {background:#0c263d!important;border-color:#0b4e81!important}

/* Four compact cards at desktop width, with real product names allowed to wrap. */
body #app .approved-store .catalog-results-heading {
  min-height:0!important;
  margin:0 0 12px!important;
  padding:0!important;
  border-bottom:0!important;
}
body #app .approved-store .catalog-results-heading h2 {font-size:30px!important;line-height:1.15!important}
body #app .approved-store .catalog-results>.product-grid {
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
  align-items:stretch!important;
}
body #app .approved-store .catalog-results .product-card {
  min-height:0!important;
  height:auto!important;
  border-radius:3px!important;
  padding:0!important;
}
body #app .approved-store .catalog-results .product-card .product-image {
  height:128px!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  flex:0 0 128px!important;
  padding:24px 12px 2px!important;
}
body #app .approved-store .catalog-results .product-card .product-image img {
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  mix-blend-mode:normal!important;
}
body #app .approved-store .catalog-results .product-card .product-body {
  padding:7px 10px 10px!important;
  gap:0!important;
  min-height:0!important;
}
body #app .approved-store .catalog-results .product-card .product-type {
  font-size:12px!important;
  line-height:1.25!important;
  margin:0 0 4px!important;
}
body #app .approved-store .catalog-results .product-card .product-body h3 {
  font-size:13px!important;
  line-height:1.35!important;
  min-height:32px!important;
  margin:0 0 6px!important;
  font-weight:500!important;
  overflow-wrap:anywhere;
}
body #app .approved-store .catalog-results .product-card .product-stock,
body #app .approved-store .catalog-results .product-card .product-availability {
  font-size:11px!important;
  line-height:1.3!important;
  margin:0 0 4px!important;
}
body #app .approved-store .catalog-results .product-card .product-body>p {
  font-size:25px!important;
  line-height:1.2!important;
  min-height:30px!important;
  margin:5px 0 7px!important;
}
body #app .approved-store .catalog-results .product-card .product-actions {margin-top:auto!important}
body #app .approved-store .catalog-results .product-card .product-actions .btn {
  min-height:34px!important;
  font-size:13px!important;
  padding:7px 4px!important;
  background:#0065ff!important;
  background-image:none!important;
  box-shadow:none!important;
}
body.gaming-theme #app .approved-store .catalog-results .product-card {background:#0a1b27!important;border-color:#213b4d!important}
/* Transparent supplier images share the dark surface. Opaque photos keep their
   original pixels; blend filters would alter product colors and are not used. */
body.gaming-theme #app .approved-store .catalog-results .product-card .product-image {background:#0a1b27!important}
body #app .approved-store .catalog-pagination {margin:12px 0!important}
body #app .approved-store .breadcrumb {margin-bottom:9px!important;padding-block:5px!important}
body #app .approved-store .retail-filter-group>summary {min-height:37px!important;padding:8px 12px!important}
body #app .approved-store .catalog-filter-disclosure>summary {font-size:18px!important;padding:11px 12px!important}
body #app .approved-store .catalog-choice-list label {min-height:28px!important;padding:4px 0!important}
body #app .approved-store .catalog-choice-list {max-height:205px!important}
body #app .approved-store .catalog-filters .catalog-price-fields {margin:0!important;padding:10px 12px!important}

/* Two native range inputs share a single visible rail. Their keyboard labels
   remain in the DOM and thumb focus stays visible. Values are synchronized by JS. */
body #app .approved-store .catalog-price-fields .ra-price-sliders {
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:32px!important;
  margin:9px 0 0!important;
  direction:ltr;
}
body #app .approved-store .catalog-price-fields .ra-price-sliders::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:14px;
  height:5px;
  border-radius:4px;
  background:linear-gradient(to right,#c1d7f4 0%,#c1d7f4 var(--range-low,0%),#0065ff var(--range-low,0%),#0065ff var(--range-high,100%),#c1d7f4 var(--range-high,100%),#c1d7f4 100%);
}
body #app .approved-store .catalog-price-fields .ra-price-sliders>label {
  position:absolute!important;
  inset:0!important;
  display:block!important;
  font-size:0!important;
  line-height:0!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none;
}
body #app .approved-store .catalog-price-fields .ra-price-sliders input[type=range] {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  appearance:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  pointer-events:none;
  direction:ltr;
}
body #app .approved-store .catalog-price-fields .ra-price-sliders label:first-child {z-index:2}
body #app .approved-store .catalog-price-fields .ra-price-sliders label:focus-within {z-index:3}
body #app .approved-store .catalog-price-fields .ra-price-sliders input[type=range]::-webkit-slider-runnable-track {background:transparent!important;height:5px}
body #app .approved-store .catalog-price-fields .ra-price-sliders input[type=range]::-moz-range-track {background:transparent!important;height:5px}
body #app .approved-store .catalog-price-fields .ra-price-sliders input[type=range]::-moz-range-progress {background:transparent!important}
body #app .approved-store .catalog-price-fields .ra-price-sliders input[type=range]::-webkit-slider-thumb {
  appearance:none;
  width:19px;
  height:19px;
  margin-top:-7px;
  border:0;
  border-radius:50%;
  background:#0065ff;
  pointer-events:auto;
  cursor:ew-resize;
}
body #app .approved-store .catalog-price-fields .ra-price-sliders input[type=range]::-moz-range-thumb {
  width:19px;
  height:19px;
  border:0;
  border-radius:50%;
  background:#0065ff;
  pointer-events:auto;
  cursor:ew-resize;
}
body #app .approved-store .catalog-price-fields .ra-price-sliders input:focus-visible {outline:2px solid #0065ff!important;outline-offset:3px!important}

body #app .approved-store .ra-builder-banner {
  height:118px!important;
  min-height:118px!important;
  margin:15px 0 8px!important;
}
body #app .approved-store .ra-builder-banner>div:last-child {padding:12px 18px!important}
body #app .approved-store .ra-builder-banner h2 {font-size:27px!important;line-height:1.15!important;margin-bottom:6px!important}
body #app .approved-store .ra-builder-banner p {font-size:14px!important;line-height:1.35!important;margin-bottom:8px!important}

/* Shop-specific compact footer. Policy and contact links stay available. */
body #app .retail-commerce-footer {
  display:grid!important;
  grid-template-columns:1.1fr 1fr 1fr 1.15fr!important;
  gap:22px!important;
  align-items:center!important;
  padding:16px max(24px,calc((100% - 1512px)/2))!important;
  background:#071722!important;
  color:#fff!important;
  direction:rtl;
  text-align:right;
}
body #app .retail-commerce-footer p {margin:5px 0!important;font-size:13px!important;line-height:1.4!important;color:#ecf2f8!important}
body #app .retail-commerce-footer a {color:inherit;text-decoration:none}
body #app .retail-commerce-footer .retail-footer-brand img,
body #app .retail-commerce-footer .rh-footer-brand img {width:185px;max-width:100%;height:auto;display:block}
body #app .retail-commerce-footer .retail-footer-benefit {display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px}
body #app .retail-commerce-footer .retail-footer-benefit .icon {width:30px;height:30px;color:#0873ff}
body #app .retail-commerce-footer .retail-footer-contact {font-size:12px;line-height:1.55}
body #app .retail-commerce-footer .retail-footer-contact>a {display:flex;align-items:center;gap:8px}
body #app .retail-commerce-footer .retail-footer-contact .icon {width:17px;height:17px;color:#0873ff;flex:none}
body #app .retail-commerce-footer .retail-footer-legal {grid-column:1/-1;display:flex;gap:16px;flex-wrap:wrap;font-size:11px;border-top:1px solid #243b4a;padding-top:8px}

@media(min-width:1500px) {
  body #app .approved-store .catalog-results .product-card .product-image {height:160px!important;flex-basis:160px!important}
  body #app .approved-store .catalog-results .product-card .product-body h3 {font-size:14px!important}
}
@media(min-width:901px) {
  /* The store boards include breathing room above the main logo/search row. */
  body #app:has(.approved-store) .site-header .mainbar {
    grid-template-rows:76px 49px!important;
    padding-top:20px!important;
    min-height:145px!important;
    box-sizing:border-box!important;
  }
  body #app .ra-category-strip {overflow:visible!important}
  body #app .gaming-page .ra-category-strip,
  body #app .gaming-page .gaming-catalog>.wrap {width:calc(100% - 48px)!important;max-width:1512px!important}
  body #app .gaming-page .catalog-layout {grid-template-columns:clamp(160px,16vw,230px) minmax(0,1fr)!important;gap:18px!important}
  body #app .gaming-page .breadcrumb {display:none!important}
}
@media(max-width:900px) {
  body #app .storefront-carousel .hero-shop,
  body #app .storefront-carousel .gaming-hero {height:300px!important;min-height:300px!important}
  body #app .storefront-carousel .hero-inner,
  body #app .storefront-carousel .gaming-hero-inner {width:calc(100% - 32px)!important}
  body #app .storefront-carousel .ra-store-photo,
  body #app .storefront-carousel .ra-gaming-photo {width:100%!important;inset:0!important;height:100%!important}
  body #app .storefront-carousel .ra-store-mascot {display:none!important}
  body #app .storefront-carousel .ra-gaming-photo::after,
  body #app .storefront-carousel .ra-store-photo::after {
    inset:0!important;width:100%!important;
    background:linear-gradient(270deg,rgba(5,17,30,.96) 4%,rgba(5,17,30,.78) 51%,rgba(5,17,30,.08) 100%)!important;
  }
  body #app .storefront-carousel .hero-shop:not(.hero-product-slide):not(.hero-editorial) .hero-copy,
  body #app .storefront-carousel .gaming-hero-copy {width:62%!important;max-width:390px!important;margin:0!important;padding:0!important}
  body #app .storefront-carousel .hero-shop .hero-copy h1 {font-size:clamp(28px,5.2vw,39px)!important;line-height:1.08!important}
  body #app .storefront-carousel .gaming-hero-copy h1 {font-size:clamp(36px,6.6vw,52px)!important;line-height:1.02!important}
  body #app .storefront-carousel .hero-shop .hero-copy p,
  body #app .storefront-carousel .gaming-hero-copy p {font-size:14px!important;line-height:1.4!important;margin:11px 0 14px!important}
  body #app .storefront-carousel .gaming-actions .gaming-primary {font-size:13px!important;min-height:44px!important;padding:10px 12px!important}
  body #app .ra-category-strip>a,
  body #app .ra-category-strip>button,
  body #app .ra-category-strip .retail-game-category-entry {flex:0 0 112px!important;min-height:110px!important;font-size:12px!important;scroll-snap-align:start}
  body #app .ra-category-strip .retail-all-tile {min-height:110px!important;font-size:12px!important}
  body #app .ra-category-strip img {height:76px!important}
  body #app .ra-category-strip>button[data-retail-open-all]>.icon {width:53px!important;height:72px!important}
  body #app .ra-category-strip .retail-all-tile>.icon {width:53px!important;height:72px!important}
  body #app .approved-store .catalog-layout {gap:13px!important}
  body #app .approved-store .catalog-results>.product-grid {grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body #app .approved-store .catalog-results-heading h2 {font-size:25px!important}
  body #app .approved-store .catalog-filter-disclosure[open]>summary {margin-bottom:0!important}
  body #app .approved-store .retail-filter-group>summary,
  body #app .approved-store .catalog-choice-list label {min-height:44px!important}
  body #app .approved-store .catalog-results .product-card .product-actions .btn {min-height:44px!important}
  body #app .approved-store .catalog-sort {margin-top:0!important}
  body #app .approved-store .catalog-results .product-card .product-body>p {font-size:23px!important}
  body #app .approved-store .ra-builder-banner {height:160px!important;min-height:160px!important;margin:18px 0 8px!important}
  body #app .approved-store .ra-builder-banner>div:last-child {width:100%!important}
  body #app .approved-store .ra-builder-banner h2 {font-size:24px!important}
  body #app .retail-commerce-footer {grid-template-columns:1fr 1fr!important;gap:18px!important;padding:22px 20px!important}
  body #app .retail-commerce-footer .retail-footer-brand {grid-column:1/-1}
}
@media(max-width:600px) {
  body #app .storefront-carousel .hero-shop,
  body #app .storefront-carousel .gaming-hero {height:300px!important;min-height:300px!important}
  body #app .storefront-carousel .hero-shop:not(.hero-product-slide):not(.hero-editorial) .hero-copy,
  body #app .storefront-carousel .gaming-hero-copy {width:70%!important}
  body #app .storefront-carousel .hero-shop .hero-copy h1 {font-size:clamp(25px,7vw,32px)!important}
  body #app .storefront-carousel .gaming-hero-copy h1 {font-size:clamp(36px,10vw,46px)!important}
  body #app .storefront-carousel .hero-shop .hero-copy p,
  body #app .storefront-carousel .gaming-hero-copy p {font-size:13px!important}
  body #app .approved-store .catalog-results>.product-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body #app .approved-store .catalog-results .product-card .product-image {height:125px!important;flex-basis:125px!important;padding:23px 8px 3px!important}
  body #app .approved-store .catalog-results .product-card .product-body {padding:7px 7px 9px!important}
  body #app .approved-store .catalog-results .product-card .product-body h3 {font-size:12px!important;min-height:48px!important;line-height:1.35!important}
  body #app .approved-store .catalog-results .product-card .product-type {font-size:11px!important}
  body #app .approved-store .catalog-results .product-card .product-body>p {font-size:22px!important}
  body #app .approved-store .catalog-results .product-card .product-actions .btn {font-size:12px!important}
  body #app .approved-store .catalog-results-heading h2 {font-size:23px!important}
  body #app .approved-store .ra-builder-banner h2 {font-size:22px!important}
  body #app .retail-commerce-footer .retail-footer-contact {grid-column:1/-1}
}
/* Preserve the existing list toggle as a separate layout from the dense grid. */
body #app .approved-store .catalog-results.retail-list-view>.product-grid {grid-template-columns:1fr!important}
body #app .approved-store .retail-list-view .product-card .product-body {align-items:flex-start!important;text-align:right!important;padding:14px 20px!important}
body #app .approved-store .retail-list-view .product-card .product-body h3 {min-height:0!important;font-size:16px!important}
