/* ===== TRUST STATS ROW (sits inside the existing dark header) ===== */
  .hr-trust-row{
    display:flex;align-items:center;justify-content:center;
    gap:0;max-width:1120px;margin:0 auto;padding:16px 24px 18px;
    flex-wrap:wrap;
  }
  .hr-trust-item{
    display:flex;align-items:center;gap:10px;padding:0 22px;
    color:#fff;white-space:nowrap;
  }
  .hr-trust-item svg{color:var(--green);flex-shrink:0;width:22px;height:22px;}
  .hr-trust-item .hr-trust-num{display:block;font-family:'Poppins';font-weight:700;font-size:1rem;line-height:1.2;}
  .hr-trust-item .hr-trust-label{display:block;font-size:.72rem;color:rgba(255,255,255,.7);}
  .hr-trust-divider{width:1px;height:32px;background:rgba(255,255,255,.18);flex-shrink:0;}
  @media (max-width:600px){
    .hr-trust-row{padding:14px 10px 16px;gap:0;}
    .hr-trust-item{padding:0 10px;gap:7px;}
    .hr-trust-item svg{width:19px;height:19px;}
    .hr-trust-item .hr-trust-num{font-size:.86rem;}
    .hr-trust-item .hr-trust-label{font-size:.64rem;}
  }
  @media (max-width:400px){
    .hr-trust-item{padding:0 6px;}
    .hr-trust-divider{margin:0 2px;}
  }

  /* Desktop-only: trust row felt slightly undersized against the black
     space around it — bump icons/numbers/labels up a little and give the
     three groups a touch more breathing room. Row padding trimmed slightly
     to help keep the header's total height unchanged despite the larger
     content. */
  @media (min-width:900px){
    .hr-trust-row{padding:14px 24px 16px;}
    .hr-trust-item{padding:0 26px;}
    .hr-trust-item svg{width:25px;height:25px;}
    .hr-trust-item .hr-trust-num{font-size:1.1rem;}
    .hr-trust-item .hr-trust-label{font-size:.76rem;}
  }

  /* ===== CATEGORY SECTION ===== */
  /* Background matches the product photos' own white background exactly —
     this is what makes the rectangular photo edges disappear, rather than
     any box/border styling on the cards themselves. */
  .hr-category{background:#fff;padding:28px 24px 6px;}
  .hr-category-inner{max-width:1120px;margin:0 auto;}

  /* -- Mobile/tablet (default): heading + arrows in one row, carousel below -- */
  .hr-category-head{
    display:flex;flex-wrap:nowrap;align-items:flex-end;justify-content:space-between;gap:12px;
  }
  .hr-category-eyebrow{
    display:block;font-family:'IBM Plex Mono';font-size:.76rem;letter-spacing:.06em;
    color:var(--green-dark);text-transform:uppercase;margin-bottom:6px;
  }
  .hr-category-head h2{font-size:clamp(1.3rem, 5vw, 2.1rem);line-height:1.15;margin:0;color:var(--ink);}
  .hr-category-arrows{display:flex;gap:8px;flex-shrink:0;}
  .hr-arrow-btn{
    width:34px;height:34px;border-radius:50%;background:#fff;border:1.5px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;
  }
  .hr-arrow-btn:hover{border-color:var(--green-dark);color:var(--green-dark);}
  .hr-arrows-desktop{display:none;}
  .hr-carousel-toprow{display:none;}

  .hr-category-carousel-col{margin-top:18px;}
  .hr-carousel-track{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 6px;
  }
  .hr-carousel-track::-webkit-scrollbar{display:none;}
  .hr-card{
    flex:0 0 auto;scroll-snap-align:start;text-decoration:none;color:var(--ink);
    display:flex;flex-direction:column;align-items:center;
  }
  .hr-card-img{
    width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;
    background:var(--white);border-radius:10px;padding:10px;
  }
  .hr-card-img img{width:100%;height:100%;object-fit:contain;object-position:center;}
  .hr-card-name{font-family:'Poppins';font-weight:600;text-align:center;}

  /* Per-image balancing — normalizes visual weight across differing source photos */
  .hr-card-img.im-nintendo img{transform:scale(.92);}
  .hr-card-img.im-playstation img{transform:scale(1.1);}
  .hr-card-img.im-xbox img{transform:scale(1.02);}
  .hr-card-img.im-handhelds img{transform:scale(1);}
  .hr-card-img.im-sega img{transform:scale(.98);}
  .hr-card-img.im-games img{transform:scale(1.04);}

  .hr-carousel-dots{display:flex;gap:7px;justify-content:center;align-items:center;margin:12px 0 0;}
  .hr-dot{width:7px;height:7px;border-radius:50%;background:#D8DBD3;border:none;padding:0;flex-shrink:0;}
  .hr-dot.active{background:var(--green);width:9px;height:9px;}

  /* Mobile card sizing: ~2.5–3 visible, next card peeking */
  .hr-card{width:35%;min-width:128px;}
  .hr-card-img{height:118px;}
  .hr-card-name{font-size:.82rem;margin-top:9px;}

  @media (min-width:600px){
    .hr-category{padding:40px 24px 8px;}
    .hr-category-carousel-col{margin-top:22px;}
    .hr-card-img{height:150px;}
    .hr-card-name{font-size:.9rem;margin-top:11px;}
  }

  /* -- Mobile/tablet (<900px): circular clone-based rail, same positioning
     approach as desktop (unbounded pos + modulo wrap), but driven by touch
     instead of mouse/wheel — see js/home-carousel.js. Cards must be a fixed,
     container-independent unit (vw) rather than a % of the rail, since the
     rail's own width is content-driven here and percentage widths against
     an auto-sized flex container don't resolve reliably. Scoped to
     max-width:899px so nothing here can ever affect the ≥900px desktop
     rules below. -- */
  @media (max-width:899px){
    .hr-category-eyebrow{font-family:'Poppins',sans-serif;font-weight:600;font-size:.88rem;}
    .hr-carousel-track{overflow:hidden;touch-action:pan-y;scroll-snap-type:none;}
    .hr-carousel-track.hr-dragging{user-select:none;-webkit-user-select:none;}
    .hr-carousel-track.hr-dragging .hr-card{pointer-events:none;}
    .hr-carousel-rail{display:flex;gap:16px;position:relative;}
    .hr-card{width:32vw;flex:0 0 32vw;min-width:128px;}
  }

  /* -- Desktop (900px+): two-column layout, arrows move to sit above the
     carousel itself, cards lose the boxed/tile treatment, images go large.
     The track becomes a fixed-size viewport; the actual card row (.hr-carousel-rail,
     built by JS) is what gets transformed/animated — see js/home-carousel.js. -- */
  @media (min-width:900px){
    .hr-category{padding:24px 24px 0;}
    .hr-category-inner{
      max-width:1360px;
      display:grid;grid-template-columns:23% 1fr;gap:32px;align-items:start;
    }
    .hr-category-head{display:block;margin-top:8px;}
    .hr-category-head h2{font-size:2.15rem;margin-top:2px;}
    .hr-category-eyebrow{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.05rem;}
    .hr-arrows-mobile{display:none;}
    .hr-arrows-desktop{display:flex;}
    .hr-carousel-toprow{display:flex;justify-content:flex-end;margin-bottom:6px;}
    .hr-category-carousel-col{margin-top:0;min-width:0;}

    .hr-carousel-track{
      overflow:hidden;scroll-snap-type:none;cursor:grab;
    }
    .hr-carousel-track.hr-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none;}
    .hr-carousel-track.hr-dragging .hr-card{pointer-events:none;}
    .hr-carousel-rail{display:flex;gap:18px;width:300%;position:relative;}
    .hr-card{width:10%;flex:0 0 10%;}
    .hr-card-img{
      aspect-ratio:6/5;height:auto;
      background:transparent;border-radius:0;padding:0;
    }
    .hr-card-img img{-webkit-user-drag:none;user-select:none;}
    .hr-card-name{font-size:1.05rem;margin-top:8px;}
    .hr-carousel-dots{justify-content:center;margin-top:0;}
  }

  /* ===== NEW HERO (replaces photo hero) ===== */
  .hr-hero2{
    position:relative;isolation:isolate;overflow:hidden;
    padding:40px 24px 56px;background:#fff;
  }
  .hr-hero2::before{
    content:"";position:absolute;left:0;bottom:-15%;width:70%;height:75%;z-index:0;
    background:radial-gradient(ellipse at 20% 100%, rgba(143,194,42,.13) 0%, rgba(143,194,42,0) 70%);
  }
  .hr-hero2-inner{position:relative;z-index:1;max-width:1120px;margin:0 auto;}
  .hr-hero2 h1{
    font-size:clamp(1.7rem, 5.4vw, 2.6rem);line-height:1.14;color:var(--ink);
    margin:0 0 14px;max-width:16ch;
  }
  .hr-hero2 h1 em{color:var(--green-dark);font-style:normal;}
  .hr-hero2 p{font-size:clamp(.92rem, 1.6vw, 1.05rem);color:var(--ink-soft);max-width:40ch;margin:0 0 24px;}
  @media (min-width:761px){
    .hr-hero2{padding:0 24px 36px;margin-top:-14px;}
    .hr-hero2-inner{max-width:1360px;}
    .hr-hero2 h1{max-width:14ch;margin-bottom:8px;}
    .hr-hero2 p{margin-bottom:16px;}
  }
  .hr-hero2-cta{
    background:#111;color:#fff;border:none;padding:15px 28px;border-radius:8px;
    font-weight:700;font-size:.98rem;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  }
  .hr-hero2-cta:hover{background:#000;}
  .hr-hero2-cta svg{width:17px;height:17px;flex-shrink:0;}