/* tradeinplus responsive styles */

    /* ───────────────────────────────────────────────
       UNIVERSAL: Apply to all viewport sizes
       ─────────────────────────────────────────────── */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { overflow-x: hidden; max-width: 100vw; }

    /* Fix any element that overflows the viewport */
    img, video, iframe, svg { max-width: 100%; height: auto; }
    table { max-width: 100%; }

    /* Prevent any element from forcing horizontal scroll */
    section, main, header, footer, article, aside { max-width: 100vw; }

    /* Dashboard-synced product media: keep the baked fallback unrecognisable
       until the current catalog image is fully available. This prevents the
       old product photo from flashing before live-product scripts replace it. */
    body:not([data-live-product-ready]) .phero-image > .product-photo,
    body:not([data-live-product-ready]) .uhero-media > img:first-of-type,
    body:not([data-live-product-ready]) #productMedia .product-photo,
    body:not([data-live-product-ready]) #productMedia > svg {
      opacity: .14 !important;
      filter: blur(28px) saturate(.7) !important;
      transform: scale(1.045);
      transition: opacity .22s ease, filter .22s ease, transform .22s ease;
    }
    body[data-live-product-ready] .phero-image > .product-photo,
    body[data-live-product-ready] .uhero-media > img:first-of-type,
    body[data-live-product-ready] #productMedia .product-photo,
    body[data-live-product-ready] #productMedia > svg {
      transition: opacity .22s ease, filter .22s ease, transform .22s ease;
    }
    @media (prefers-reduced-motion: reduce) {
      body:not([data-live-product-ready]) .phero-image > .product-photo,
      body:not([data-live-product-ready]) .uhero-media > img:first-of-type,
      body:not([data-live-product-ready]) #productMedia .product-photo,
      body:not([data-live-product-ready]) #productMedia > svg {
        transition: none;
      }
    }

    /* Fluid typography baseline */
    :root {
      --tip-fluid-h1: clamp(1.75rem, 5vw, 3.5rem);
      --tip-fluid-h2: clamp(1.5rem, 4vw, 2.8rem);
      --tip-fluid-h3: clamp(1.2rem, 3vw, 2rem);
      --tip-fluid-body: clamp(0.95rem, 1.5vw, 1.05rem);
      --tip-fluid-gap: clamp(1rem, 3vw, 2rem);
      --tip-fluid-pad: clamp(1rem, 4vw, 2.5rem);
    }

    /* ───────────────────────────────────────────────
       LARGE DESKTOP (>= 1440px)
       Wide screens — extra breathing room
       ─────────────────────────────────────────────── */
    @media (min-width: 1441px) {
      .phero, .section-inner, .features-inner,
      .specs-table, .related-grid, .footer-grid {
        max-width: 1400px !important;
      }
    }

    /* ───────────────────────────────────────────────
       DESKTOP (1024px - 1440px)
       Standard desktop
       ─────────────────────────────────────────────── */
    @media (min-width: 1025px) and (max-width: 1440px) {
      .site-nav { padding: 0 1.5rem !important; }
    }

    /* ───────────────────────────────────────────────
       TABLET LANDSCAPE (901px - 1024px)
       ─────────────────────────────────────────────── */
    @media (min-width: 901px) and (max-width: 1024px) {
      .nav-links { gap: 1.2rem !important; }
      .nav-links a { font-size: 13px !important; }
      .phero-title, .uhero-info h1 {
        font-size: clamp(2rem, 5vw, 2.8rem) !important;
      }
    }

    /* ───────────────────────────────────────────────
       TABLET PORTRAIT (768px - 900px)
       iPad portrait, large phones landscape
       ─────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .nav-links { display: none !important; }
      .hamburger { display: inline-flex !important; align-items: center; justify-content: center; }

      /* Stack 2-col grids */
      .phero, .uhero {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 2rem 1.25rem !important;
      }
      .phero-info { order: 2 !important; }
      .phero-image { order: 1 !important; min-height: 360px !important; }

      /* Features grid: 2 columns */
      .features-grid,
      .related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
      }

      /* Footer compact */
      .footer-top {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
      }

      /* Quick facts: 2-col on tablet */
      .quick-facts {
        grid-template-columns: 1fr 1fr !important;
      }

      /* Buttons: prevent overflow */
      .actions { flex-wrap: wrap; gap: 0.5rem !important; }
      .actions .btn { min-width: 140px; flex: 1; }

      /* Spec rows */
      .spec-row { padding: 1rem 1.25rem !important; }

      /* Section padding */
      section, .section { padding: 3rem 1.5rem !important; }
    }

    /* ───────────────────────────────────────────────
       MOBILE LARGE (481px - 768px)
       Phones landscape, small tablets
       ─────────────────────────────────────────────── */
    @media (max-width: 768px) {
      /* Hide things that don't fit */
      .announcement-ticker .ticker-track span { font-size: 11px !important; }

      /* Container padding */
      section, .section, .phero, .uhero {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }

      /* Headings */
      .phero-title, .uhero-info h1 {
        font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
        letter-spacing: -0.5px !important;
      }
      .phero-eyebrow { letter-spacing: 2px !important; font-size: 10px !important; }
      .phero-tagline { font-size: 1rem !important; }
      .phero-price { font-size: 2.2rem !important; }

      /* Better tap targets — minimum 44px */
      button, a.btn, .nav-icon, .color-swatch, .storage-opt {
        min-height: 44px;
      }

      /* Color swatches */
      .color-swatch { width: 38px !important; height: 38px !important; }
      .storage-opt { padding: 10px 14px !important; font-size: 13.5px !important; }

      /* Features: keep 2 cols on mobile-large */
      .features-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.8rem !important;
      }
      .feature-card { padding: 1.2rem 1rem !important; }
      .feature-name { font-size: 14px !important; }
      .feature-desc { font-size: 12px !important; }
    }

    /* ───────────────────────────────────────────────
       PREMIUM CARD POLISH — only on light-themed pages
       Skip dark-themed pages (tech, gaming) where cards have custom styling
       ─────────────────────────────────────────────── */
    body:not(.theme-dark) .cat-card,
    body:not(.theme-dark) .prod-card,
    body:not(.theme-dark) .rel-card,
    body:not(.theme-dark) .feature-card,
    body:not(.theme-dark) .store-card,
    body:not(.theme-dark) .why-card,
    body:not(.theme-dark) .review-card,
    body:not(.theme-dark) .used-card {
      background: #fff !important;
      border: 1px solid rgba(0,0,0,0.06) !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
      transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                  box-shadow 0.3s cubic-bezier(0.22,1,0.36,1),
                  border-color 0.3s !important;
    }
    body:not(.theme-dark) .cat-card:hover,
    body:not(.theme-dark) .prod-card:hover,
    body:not(.theme-dark) .rel-card:hover,
    body:not(.theme-dark) .feature-card:hover,
    body:not(.theme-dark) .store-card:hover,
    body:not(.theme-dark) .used-card:hover {
      transform: translateY(-4px) !important;
      box-shadow: 0 18px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04) !important;
      border-color: rgba(0,0,0,0.1) !important;
    }

    /* Image area inside cat-card (light pages only) */
    body:not(.theme-dark) .cat-card .cat-img {
      background: #fff !important;
      border-bottom: none !important;
    }
    body:not(.theme-dark) .cat-card .cat-img img {
      filter: drop-shadow(0 10px 24px rgba(0,0,0,0.12)) !important;
    }
    body:not(.theme-dark) .cat-card .cat-info {
      background: #fff !important;
    }

    /* Dark theme support */
    html[data-theme="dark"] .cat-card,
    html[data-theme="dark"] .rel-card,
    html[data-theme="dark"] .feature-card,
    html[data-theme="dark"] .store-card,
    html[data-theme="dark"] .used-card {
      background: #181818 !important;
      border-color: rgba(255,255,255,0.08) !important;
    }
    /* .prod-card stays light in dark mode (see index.html inline dark-theme rules) —
       product photos have a white backing, so the card body matches it instead of
       leaving a white image box floating on a dark card. */
    html[data-theme="dark"] .prod-card {
      border-color: rgba(0,0,0,0.06) !important;
    }
    html[data-theme="dark"] .cat-card .cat-img {
      background: #181818 !important;
      border-bottom: none !important;
    }
    html[data-theme="dark"] .cat-card .cat-info {
      background: #181818 !important;
    }
    html[data-theme="dark"] .cat-card:hover,
    html[data-theme="dark"] .prod-card:hover {
      box-shadow: 0 18px 40px rgba(0,0,0,0.4) !important;
      border-color: rgba(255,255,255,0.15) !important;
    }

    /* ───────────────────────────────────────────────
       DARK THEME PAGES (tech, gaming) — enhanced mobile experience
       Keep glassmorphism but ensure mobile usability
       ─────────────────────────────────────────────── */
    body.theme-dark .prod-card {
      min-height: auto !important;
      padding: 1.25rem !important;
    }

    @media (max-width: 900px) {
      body.theme-dark .prod-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
      }
      body.theme-dark .prod-card {
        padding: 1rem !important;
        border-radius: 22px !important;
      }
      body.theme-dark .prod-mockup-wrap {
        height: 150px !important;
        border-radius: 16px !important;
        margin-bottom: 0.8rem !important;
      }
      body.theme-dark .prod-name {
        font-size: 14px !important;
        line-height: 1.3 !important;
      }
      body.theme-dark .prod-specs {
        font-size: 11px !important;
        gap: 3px !important;
      }
      body.theme-dark .prod-price {
        font-size: 16px !important;
      }
      body.theme-dark .prod-cta {
        padding: 6px 12px !important;
        font-size: 12px !important;
      }
      body.theme-dark .sec-title,
      body.theme-dark .spatial-title {
        font-size: clamp(1.6rem, 6vw, 2.4rem) !important;
      }
      body.theme-dark .hero {
        padding: 4rem 1rem 2rem !important;
      }
      body.theme-dark .hero-blueprint {
        margin: 2rem 0 !important;
      }
      body.theme-dark .pills {
        gap: 6px !important;
      }
      body.theme-dark .pill {
        padding: 7px 14px !important;
        font-size: 12px !important;
      }
    }

    @media (max-width: 480px) {
      body.theme-dark .prod-card {
        padding: 0.85rem !important;
      }
      body.theme-dark .prod-mockup-wrap {
        height: 125px !important;
      }
      body.theme-dark .prod-name {
        font-size: 13px !important;
      }
      body.theme-dark .prod-specs span {
        padding: 2px 5px !important;
        font-size: 10px !important;
      }
      body.theme-dark .prod-price {
        font-size: 14px !important;
      }
      body.theme-dark .prod-price small {
        font-size: 9.5px !important;
      }
      body.theme-dark .prod-row {
        gap: 6px !important;
      }
      /* Better hero device positioning */
      body.theme-dark .devices-stage {
        height: 220px !important;
        overflow: hidden;
      }
      body.theme-dark .device {
        max-width: 40px !important;
      }
      body.theme-dark .hero-center { max-width: 50px !important; }
      body.theme-dark .marquee-item {
        font-size: 14px !important;
      }
    }

    /* ───────────────────────────────────────────────
       UNIVERSAL CARD GRIDS — 2 columns on mobile with breathing room
       Cards feel premium and comfortable, not cramped
       ─────────────────────────────────────────────── */
    @media (max-width: 900px) {
      .cat-grid,
      .prod-grid,
      .features-grid,
      .related-grid,
      .stores-grid,
      .why-grid,
      .reviews-grid,
      .used-grid,
      .check-grid,
      .device-grid,
      .grade-grid,
      .photo-grid,
      .lab-grid,
      .bp-grid,
      .faq-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
      }

      /* Cards: comfortable padding */
      .cat-card, .prod-card, .feature-card, .rel-card, .store-card,
      .why-card, .review-card, .used-card {
        padding: 1.5rem 1.25rem !important;
        border-radius: 18px !important;
      }

      /* Images: tall and present */
      .cat-img, .prod-img-wrap, .rel-img {
        height: 200px !important;
      }

      /* Sections: more vertical space */
      .section, section.section {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
      }

      /* Section heading area */
      .sec-head { margin-bottom: 3rem !important; }
    }

    @media (max-width: 640px) {
      .cat-grid,
      .prod-grid,
      .features-grid,
      .related-grid,
      .stores-grid,
      .why-grid,
      .reviews-grid,
      .used-grid,
      .check-grid,
      .device-grid,
      .grade-grid,
      .photo-grid,
      .lab-grid,
      .bp-grid,
      .faq-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
      }

      /* Cards still spacious */
      .cat-card, .prod-card, .feature-card, .rel-card, .store-card,
      .why-card, .review-card, .used-card {
        padding: 1.25rem 1rem !important;
        border-radius: 18px !important;
      }

      .cat-img, .prod-img-wrap, .rel-img {
        height: 170px !important;
      }

      .cat-name, .prod-name, .feature-name, .rel-name {
        font-size: 15px !important;
        margin-bottom: 6px !important;
      }
      .prod-price, .rel-price { font-size: 15px !important; }

      /* Sections breathe */
      .section, section.section {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
      }
      .sec-head { margin-bottom: 2.5rem !important; }
    }

    @media (max-width: 380px) {
      .cat-grid,
      .prod-grid,
      .features-grid,
      .related-grid,
      .stores-grid,
      .why-grid,
      .reviews-grid,
      .used-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
      }

      .cat-card, .prod-card, .feature-card, .rel-card {
        padding: 1rem 0.85rem !important;
      }

      .cat-img, .prod-img-wrap, .rel-img { height: 140px !important; }
      .cat-name, .prod-name, .feature-name { font-size: 14px !important; }
    }

    /* Section headings: consistent fluid sizing with breathing room */
    @media (max-width: 900px) {
      .sec-title, .features-title, .related-title, .specs-title,
      .uhero-info h1, .why-title, .reviews-title, .stores-title,
      h2.sec-title {
        font-size: clamp(1.6rem, 5.5vw, 2.4rem) !important;
        letter-spacing: -0.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 0.7rem !important;
      }
      .sec-eyebrow, .features-eyebrow, .related-eyebrow {
        font-size: 11px !important;
        letter-spacing: 3px !important;
        margin-bottom: 1rem !important;
      }
    }

    @media (max-width: 480px) {
      .sec-title, .features-title, .related-title, .specs-title,
      .uhero-info h1, .why-title, .reviews-title, .stores-title {
        font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
      }
    }

    /* ───────────────────────────────────────────────
       MOBILE (320px - 480px)
       Standard phone sizes
       ─────────────────────────────────────────────── */
    @media (max-width: 480px) {
      /* Roomy spacing — section sides only, NOT vertical (handled above) */
      section, .section, .phero, .uhero {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
      }

      /* Inspiration/inclusive/release grids — these can stay 1 col */
      .insp-grid,
      .incl-grid,
      .rel-grid {
        grid-template-columns: 1fr !important;
      }

      /* Footer single column */
      .footer-top {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
      }
      .footer-bottom {
        flex-direction: column !important;
        gap: 0.8rem !important;
        text-align: center !important;
      }

      /* Quick facts single col on small phones */
      .quick-facts {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
      }
      .quick-facts li {
        padding: 0.6rem 0.8rem;
        background: rgba(0,0,0,0.025);
        border-radius: 8px;
        font-size: 12.5px !important;
      }

      /* Hero adjustments */
      .phero-image {
        min-height: 280px !important;
      }
      .phero-image .product-photo {
        max-width: 92% !important;
      }
      .phone-mockup {
        max-width: 200px !important;
      }

      /* Compact price block */
      .phero-price-block {
        padding: 1.1rem 1.2rem !important;
        border-radius: 14px !important;
      }
      .phero-price { font-size: 1.9rem !important; }
      .phero-monthly { font-size: 12.5px !important; flex-wrap: wrap; }

      /* Action buttons stack on tiny screens */
      .actions {
        flex-direction: column !important;
        gap: 0.6rem !important;
      }
      .actions .btn {
        width: 100% !important;
        min-width: auto !important;
        font-size: 14px !important;
        padding: 12px 20px !important;
      }

      /* Spec rows: stack key/value */
      .spec-row {
        grid-template-columns: 1fr !important;
        gap: 0.3rem !important;
        padding: 1rem 1.2rem !important;
      }
      .spec-label { font-size: 12px !important; }
      .spec-value { font-size: 13.5px !important; }

      /* Hero section reduces height */
      .hero { min-height: 70vh !important; padding: 4rem 1rem 3rem !important; }
      .hero-brand { font-size: clamp(2.5rem, 12vw, 4.5rem) !important; }

      /* Buttons */
      .btn { padding: 0.7rem 1.4rem !important; font-size: 13.5px !important; }

      /* Trust badges compact */
      .feature-card { padding: 1rem 0.85rem !important; }
      .feature-icon { width: 36px !important; height: 36px !important; }
      .feature-icon svg { width: 18px !important; height: 18px !important; }

      /* Mobile menu padding */
      .mobile-menu { padding: 0.8rem !important; }
      .mobile-menu a { padding: 0.7rem 1rem !important; font-size: 14px !important; }

      /* Nav icons */
      .nav-actions { gap: 0.5rem !important; }
      .nav-icon { padding: 6px !important; }
      .nav-icon svg { width: 19px !important; height: 19px !important; }
      .theme-toggle { width: 34px !important; height: 34px !important; }

      /* Sections in shop */
      .shop-grid { grid-template-columns: 1fr 1fr !important; gap: 0.8rem !important; }
      .product-card { padding: 0.8rem !important; }

      /* Logo size */
      .logo { font-size: 17px !important; }
      .logo img { height: 22px !important; }
      .logo-mark { width: 28px !important; height: 28px !important; }

      /* The floating cart remains available; remove the duplicate header icon
         so search, account, theme and menu all fit without clipping. */
      .site-nav .nav-actions > button.nav-icon[aria-label="عربة التسوق"] {
        display: none !important;
      }
    }

    /* ───────────────────────────────────────────────
       TINY MOBILE (< 360px)
       iPhone SE 1st gen, very small phones
       ─────────────────────────────────────────────── */
    @media (max-width: 360px) {
      section, .section, .phero, .uhero {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
      }

      .phero-title, .uhero-info h1 {
        font-size: 1.5rem !important;
      }

      .phero-price { font-size: 1.6rem !important; }

      .nav-icon { padding: 4px !important; }
      .nav-icon svg { width: 17px !important; height: 17px !important; }
      .nav-actions { gap: 0.3rem !important; }

      .logo span { font-size: 14px !important; }
      .logo img { height: 18px !important; }
      .logo-mark { width: 24px !important; height: 24px !important; }

      /* Login is also available inside the mobile menu on very narrow phones. */
      .site-nav .nav-actions > a.nav-icon[href="#account"] {
        display: none !important;
      }

      /* Hide non-essential nav items on tiny screens */
      .announcement-ticker { display: none !important; }

      /* Keep product cards paired even on the smallest supported phones. */
      .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    }

    /* ───────────────────────────────────────────────
       LANDSCAPE PHONE (height < 500px)
       Optimizations for landscape orientation
       ─────────────────────────────────────────────── */
    @media (max-height: 500px) and (orientation: landscape) {
      .hero, .uhero, .phero {
        min-height: auto !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
      }
      .phero-image { min-height: 200px !important; }
    }

    /* ───────────────────────────────────────────────
       HIGH-DPI / RETINA ENHANCEMENTS
       ─────────────────────────────────────────────── */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      img { image-rendering: -webkit-optimize-contrast; }
    }

    /* ───────────────────────────────────────────────
       SAFE AREAS — Notched phones (iPhone X+)
       ─────────────────────────────────────────────── */
    @supports (padding: env(safe-area-inset-bottom)) {
      footer, .footer-bottom {
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
      }
      .mobile-menu, #tip-cart-fab, #tip-search-fab {
        bottom: max(1rem, env(safe-area-inset-bottom)) !important;
      }
    }

    /* ───────────────────────────────────────────────
       PRINT (hide UI chrome when printing)
       ─────────────────────────────────────────────── */
    @media print {
      .site-header, .site-nav, .mobile-menu, .announcement-ticker,
      footer, #tip-cart-fab, #tip-search-fab, .actions, .nav-actions {
        display: none !important;
      }
      body { color: #000 !important; background: #fff !important; }
    }

    /* ───────────────────────────────────────────────
       ADAPTIVE MOBILE PERFORMANCE
       Keep every section and product, but avoid painting off-screen work.
       ─────────────────────────────────────────────── */
    @media (max-width: 768px) {
      html { overscroll-behavior-y: contain; }
      button, a, input, select, textarea, summary, [role="button"] {
        touch-action: manipulation;
      }
      button, summary, [role="button"] {
        min-height: 44px !important;
      }
      button[aria-label], a[aria-label], .nav-icon, .hamburger, .menu {
        min-width: 44px !important;
        min-height: 44px !important;
      }

      .products,
      .products.g3,
      .prod-grid,
      .product-grid,
      .products-grid,
      .shop-grid,
      .used-grid,
      .related-grid,
      .rel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }

      .products > *,
      .prod-grid > *,
      .product-grid > *,
      .products-grid > *,
      .shop-grid > *,
      .used-grid > *,
      .related-grid > *,
      .rel-grid > * {
        min-width: 0 !important;
        width: 100% !important;
      }

      .products .name,
      .prod-grid .prod-name,
      .product-grid .product-name,
      .products-grid .product-name,
      .shop-grid .product-name,
      .used-grid .used-name,
      .related-grid .rel-name,
      .rel-grid .rel-name {
        overflow-wrap: anywhere;
        word-break: normal;
      }

      .card, .prod-card, .cat-card, .used-card, .feature-card, .rel-card {
        box-shadow: 0 8px 24px rgba(0,0,0,.07) !important;
        transition: transform .2s ease, background-color .2s ease !important;
      }

      /* Late style changes must never animate paint-heavy properties. */
      .btn, .cat-card, .prod-card, .feature-card, .rel-card, .store-card,
      .used-card, .device-choice, .condition-choice, .capacity-choice,
      .box-choice, .photo-slot {
        transition-property: transform, opacity, background-color !important;
      }

      .stage-glow, .showcase-spotlight, .cursor-glow {
        filter: none !important;
      }

      img { backface-visibility: hidden; }

      .tech-section, [id^="product-"], [id^="category-"] {
        scroll-margin-top: 150px;
      }
    }

    /* Save-Data, slow connections and lower-memory phones get the same
       content with the continuous decorative work switched off. */
    html.tip-lite .ticker-track,
    html.tip-lite .marquee-track,
    html.tip-lite .hero-card,
    html.tip-lite .device,
    html.tip-lite .stars,
    html.tip-lite .ambient {
      animation: none !important;
    }
    html.tip-lite * {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    @media (max-width: 640px) {
      .home-page .hero {
        min-height: auto !important;
        padding: 2.6rem 1rem 280px !important;
      }
      .home-page .hero-content {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .home-page .hero-brand {
        width: max-content;
        max-width: 100%;
        margin-inline: auto;
        align-items: flex-start !important;
        text-align: center;
        white-space: nowrap;
      }
      .home-page .hero-brand-plus { margin-inline: 0; align-self: flex-start; }
      .home-page .hero-products {
        left: 50% !important;
        bottom: 0 !important;
        width: 118% !important;
        height: 250px !important;
        overflow: hidden;
        transform: translateX(-50%) !important;
        will-change: auto;
      }
      .home-page .hero-product {
        bottom: 0 !important;
        animation: none !important;
      }
      .home-page .hero-product--macbook { height: 34% !important; left: -2% !important; }
      .home-page .hero-product--ipad { height: 64% !important; left: 7% !important; }
      .home-page .hero-product--iphone { height: 90% !important; left: 50% !important; transform: translateX(-50%) !important; }
      .home-page .hero-product--airpods-max { height: 54% !important; right: 8% !important; }
      .home-page .hero-product--watch { height: 42% !important; right: -1% !important; bottom: 2% !important; }
      .home-page .hero-products::after { height: 55%; }

      .used-page .used-hero {
        display: block !important;
        min-height: auto !important;
        padding: 2.5rem 1rem 230px !important;
      }
      .used-page .hero-copy {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 100%;
        text-align: center;
      }
      .used-page .hero-actions { justify-content: center; }
      .used-page .hero-stage {
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 0 !important;
        height: 220px !important;
        overflow: hidden;
        opacity: .8;
      }
      .used-page .product-stack { width: min(390px, 100vw) !important; height: 220px !important; }
      .used-page .hero-mac {
        width: 300px !important;
        height: 186px !important;
        left: 50% !important;
        bottom: -24px !important;
        transform: translateX(-50%) rotate(-2deg) !important;
      }
      .used-page .hero-ipad {
        width: 142px !important;
        height: 194px !important;
        left: 2% !important;
        top: 30px !important;
        transform: rotate(-7deg) !important;
      }
      .used-page .hero-phone {
        width: 138px !important;
        height: 176px !important;
        right: 2% !important;
        top: 24px !important;
        transform: rotate(5deg) !important;
      }
    }
  /* ───────────────────────────────────────────────────────────
   tradeinplus — site-wide performance & smoothness layer
   Loaded on every page. Safe, layout-neutral optimisations.
   ─────────────────────────────────────────────────────────── */

/* 1) Smooth anchor scrolling (auto-disabled for reduced motion). */
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}

/* 2) When JS detects the tab is hidden or a heavy section has scrolled
      off-screen, it adds these classes so the GPU stops repainting
      animations nobody can see. Pure play-state — no layout impact. */
.tip-anim-paused,
.tip-anim-paused *,
.tip-anim-paused *::before,
.tip-anim-paused *::after{
  animation-play-state:paused !important;
}

/* 3) Honour reduced-motion / battery-saver: drop the expensive
      always-on ambient effects and heavy compositing entirely. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .stars,.ambient,.showcase-spotlight,.cursor-glow{ display:none !important; }
}

/* ───────────────────────────────────────────────────────────
   Trade In Plus — 2026 interface polish
   Shared visual layer for cards, trade-in forms and product pages.
   The selectors stay component-scoped so business logic remains untouched.
   ─────────────────────────────────────────────────────────── */
:root{
  --tip-ink:#101012;
  --tip-muted:#68686f;
  --tip-canvas:#ffffff;
  --tip-surface:#f6f6f8;
  --tip-surface-raised:#ffffff;
  --tip-line:rgba(16,16,18,.09);
  --tip-line-strong:rgba(16,16,18,.17);
  --tip-focus:#1967d2;
  --tip-radius-control:12px;
  --tip-radius-card:20px;
  --tip-radius-panel:28px;
  --tip-shadow-card:0 0 0 1px rgba(16,16,18,.045),0 2px 5px rgba(16,16,18,.035),0 18px 44px -34px rgba(16,16,18,.38);
  --tip-shadow-raised:0 0 0 1px rgba(16,16,18,.055),0 10px 30px -22px rgba(16,16,18,.34);
}

html,body{max-inline-size:100%;overflow-x:clip}
.phero>*,.trade-portal-grid>*,.portal-card>*,.prod-card>*,.used-card>*{min-inline-size:0}

/* Product/category cards — one surface system and true, uncropped product art. */
.home-page .cat-card,
.home-page .prod-card,
.used-page .used-card{
  border:1px solid var(--tip-line)!important;
  border-radius:var(--tip-radius-card)!important;
  background:var(--tip-surface-raised)!important;
  box-shadow:var(--tip-shadow-card)!important;
  overflow:hidden!important;
  transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s cubic-bezier(.23,1,.32,1),border-color .22s ease!important;
}
.home-page .cat-card:hover,
.home-page .cat-card:focus-visible,
.home-page .prod-card:hover,
.home-page .prod-card:focus-visible,
.used-page .used-card:hover,
.used-page .used-card:focus-visible{
  transform:translateY(-3px)!important;
  border-color:var(--tip-line-strong)!important;
  box-shadow:var(--tip-shadow-raised)!important;
}
.home-page .cat-img,
.home-page .prod-img-wrap,
.used-page .used-img{
  background:linear-gradient(180deg,#fbfbfc 0%,#f3f3f6 100%)!important;
  border-block-end:1px solid rgba(16,16,18,.055)!important;
  overflow:hidden!important;
  isolation:isolate;
}
.home-page .cat-img img,
.home-page .prod-img-wrap img,
.used-page .used-img img{
  inline-size:auto!important;
  block-size:auto!important;
  max-inline-size:86%!important;
  max-block-size:86%!important;
  object-fit:contain!important;
  object-position:center!important;
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 16px 20px rgba(16,16,18,.13))!important;
}
.home-page .prod-name,
.used-page .used-name{color:var(--tip-ink)!important;text-wrap:balance}
.home-page .prod-price,
.used-page .used-price{font-variant-numeric:tabular-nums}

/* Product hero — preserve the real device proportions on every screen. */
.phero{min-inline-size:0!important}
.phero-info{min-inline-size:0!important}
.phero-title,
.phero-product-name{
  max-inline-size:100%!important;
  overflow-wrap:anywhere!important;
  text-wrap:balance;
}
.phero-title[lang="en"],
.phero-product-name{direction:ltr;text-align:start}
.phero-image,
.phero-media{
  min-inline-size:0!important;
  overflow:hidden!important;
  border-radius:var(--tip-radius-panel)!important;
}
.phero-image .product-photo,
.phero-media img.product-photo{
  inline-size:auto!important;
  block-size:auto!important;
  max-inline-size:min(88%,680px)!important;
  max-block-size:min(70svh,700px)!important;
  object-fit:contain!important;
  object-position:center!important;
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 24px 34px rgba(16,16,18,.16))!important;
}

/* Specifications — compact information cards instead of one long grey slab. */
.specs-table,
.specs-section .specs-table{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
}
.specs-table .spec-row,
.specs-section .spec-row{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:7px!important;
  min-inline-size:0!important;
  padding:20px!important;
  border:1px solid var(--tip-line)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fafafc,#f4f4f7)!important;
  box-shadow:0 1px 2px rgba(16,16,18,.025)!important;
}
.specs-table .spec-label,
.specs-section .spec-label{
  color:var(--tip-muted)!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.02em;
  line-height:1.35!important;
}
.specs-table .spec-value,
.specs-section .spec-value{
  inline-size:100%;
  color:var(--tip-ink)!important;
  font-size:15px!important;
  font-weight:600!important;
  line-height:1.65!important;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}
.specs-section-head,.specs-head{max-inline-size:720px}
.specs-title{color:var(--tip-ink);text-wrap:balance}

/* Trade-in gateway — immersive, compact and usable as a real valuation wizard. */
.trade-portal{
  padding:16px!important;
  overscroll-behavior:contain;
  background:rgba(5,5,6,.88)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  scrollbar-gutter:stable;
}
.trade-portal-shell{
  inline-size:min(1520px,calc(100vw - 32px))!important;
  max-inline-size:100%!important;
  min-block-size:calc(100dvh - 32px)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:32px!important;
  background:#0b0b0c!important;
  box-shadow:0 34px 100px rgba(0,0,0,.58)!important;
  overflow:clip!important;
}
.trade-portal-shell::before{display:none!important}
.trade-portal-grid{
  inline-size:100%;
  max-inline-size:100%;
  grid-template-columns:minmax(400px,.78fr) minmax(0,1.22fr)!important;
  align-items:start;
}
.portal-hero{
  position:relative;
  min-inline-size:0;
  min-block-size:calc(100dvh - 32px)!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column;
  justify-content:space-between!important;
  gap:32px;
  text-align:right!important;
  border-inline-end:1px solid rgba(255,255,255,.08)!important;
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.12),transparent 28%),
    radial-gradient(circle at 85% 88%,rgba(122,122,132,.16),transparent 34%),
    #0b0b0c;
  overflow:hidden;
}
.portal-hero::before{
  content:'';
  position:absolute;
  inline-size:420px;
  block-size:420px;
  inset-inline-start:-210px;
  inset-block-end:-210px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:0 0 0 58px rgba(255,255,255,.015),0 0 0 116px rgba(255,255,255,.012);
  pointer-events:none;
}
.portal-hero>*:not(.portal-close){position:relative;z-index:1}
.portal-hero-main{
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  padding:72px clamp(32px,4vw,64px) 24px;
}
.portal-close{
  position:absolute!important;
  top:22px!important;
  inset-inline-end:22px!important;
  inset-inline-start:auto!important;
  inline-size:46px!important;
  block-size:46px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background-color .18s ease,transform .18s ease,border-color .18s ease!important;
}
.portal-close:hover{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.28)!important;transform:rotate(4deg)}
.portal-close:focus-visible{outline:3px solid rgba(255,255,255,.72)!important;outline-offset:3px!important}
.portal-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px!important;
  color:rgba(255,255,255,.48)!important;
  font-size:10px!important;
  letter-spacing:3.4px!important;
}
.portal-eyebrow::before{content:'';inline-size:28px;block-size:1px;background:rgba(255,255,255,.4)}
.portal-title{
  max-inline-size:660px;
  margin:0 0 20px!important;
  color:#fff;
  font-size:clamp(3rem,5vw,5.4rem)!important;
  line-height:1.02!important;
  letter-spacing:-.055em!important;
  text-wrap:balance;
}
.portal-desc{
  max-inline-size:590px!important;
  margin:0 0 34px!important;
  color:rgba(255,255,255,.62)!important;
  font-size:clamp(15px,1.2vw,18px)!important;
  line-height:1.9!important;
  text-wrap:pretty;
}
.portal-steps{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px!important;
  margin:0!important;
}
.portal-step{
  min-inline-size:0!important;
  padding:14px!important;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}
.portal-step strong{
  display:grid!important;
  place-items:center;
  inline-size:28px;
  block-size:28px;
  margin:0 0 10px!important;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  color:rgba(255,255,255,.78)!important;
  font-size:11px!important;
}
.portal-step span{color:rgba(255,255,255,.62)!important;font-size:12px!important;line-height:1.5!important}
.portal-hero-footer{display:grid;gap:12px;padding:0 clamp(32px,4vw,64px) 36px}
.portal-confidence-card{
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:19px;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.portal-live{
  display:flex;
  align-items:center;
  gap:8px;
  margin-block-end:9px;
  color:rgba(255,255,255,.56);
  font-size:11.5px;
  font-weight:700;
}
.portal-live i{inline-size:7px;block-size:7px;border-radius:50%;background:#59d38c;box-shadow:0 0 0 5px rgba(89,211,140,.1)}
.portal-confidence-card strong{display:block;color:#fff;font-size:18px;margin-block-end:5px}
.portal-confidence-card p{max-inline-size:520px;color:rgba(255,255,255,.54);font-size:12.5px;line-height:1.75}
.portal-safe-note{
  inline-size:100%;
  justify-content:center;
  padding:10px 12px!important;
  border-color:rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.025)!important;
  color:rgba(255,255,255,.48)!important;
  font-size:11.5px!important;
  white-space:normal;
  text-align:center;
}
.portal-panel{
  min-inline-size:0;
  padding:28px clamp(22px,3vw,44px) 48px!important;
  align-items:flex-start!important;
  background:#f1f1f3!important;
}
.portal-card{
  inline-size:100%!important;
  max-inline-size:820px!important;
  margin-inline:auto;
  padding:clamp(20px,2.4vw,30px)!important;
  border:1px solid rgba(16,16,18,.07)!important;
  border-radius:28px!important;
  background:#fff!important;
  box-shadow:0 20px 60px -42px rgba(16,16,18,.55),0 1px 2px rgba(16,16,18,.035)!important;
}
.portal-card-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin:0!important;
  padding:0 0 20px!important;
  border-block-end:1px solid var(--tip-line);
}
.portal-card-kicker{
  display:block;
  margin-block-end:7px;
  color:#77777f;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.portal-card-title{margin:0!important;color:var(--tip-ink);font-size:clamp(1.45rem,2.5vw,1.9rem)!important;line-height:1.25!important}
.portal-card-desc{margin-block-start:7px;color:#717178;font-size:12.5px;line-height:1.65}
.portal-progress{
  position:relative;
  display:flex!important;
  flex:0 0 auto;
  gap:8px!important;
  direction:ltr;
}
.portal-progress::before{content:'';position:absolute;inset-inline:16px;inset-block-start:15px;block-size:1px;background:#d9d9de}
.portal-dot{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  inline-size:31px!important;
  block-size:31px!important;
  border:1px solid #d8d8dd;
  border-radius:50%!important;
  background:#fff!important;
  color:#8b8b92;
  font:800 11px/1 var(--font-en);
}
.portal-dot.is-active{border-color:#0b0b0c;background:#0b0b0c!important;color:#fff}
.portal-card:has(.condition-choice.is-selected) .portal-dot:nth-child(2),
.portal-card:has(.photo-slot[data-slot="front"].has-image):has(.photo-slot[data-slot="back"].has-image):has(.photo-slot[data-slot="right"].has-image):has(.photo-slot[data-slot="left"].has-image) .portal-dot:nth-child(3){
  border-color:#0b0b0c;
  background:#0b0b0c!important;
  color:#fff;
}
.portal-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-block-start:18px;
}
.portal-group{
  min-inline-size:0;
  margin:0!important;
  padding:15px!important;
  border:1px solid var(--tip-line)!important;
  border-radius:18px;
  background:#fafafc;
}
.portal-group--device,.portal-group--condition,.portal-group--photos{grid-column:1/-1}
.portal-label{
  display:flex!important;
  align-items:center;
  gap:8px;
  margin-block-end:10px!important;
  color:#242428!important;
  font-size:12.5px!important;
}
.portal-group--device>.portal-label::before,
.portal-group--condition>.portal-label::before,
.portal-group--photos>.portal-label::before{
  display:grid;
  place-items:center;
  inline-size:25px;
  block-size:25px;
  border-radius:8px;
  background:#111114;
  color:#fff;
  font:800 9px/1 var(--font-en);
}
.portal-group--device>.portal-label::before{content:'01'}
.portal-group--condition>.portal-label::before{content:'02'}
.portal-group--photos>.portal-label::before{content:'03'}
.portal-select,.portal-input{
  min-inline-size:0!important;
  block-size:48px!important;
  border:1px solid var(--tip-line-strong)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:inset 0 1px 2px rgba(16,16,18,.025);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease!important;
}
.portal-select:focus,.portal-input:focus{
  outline:0!important;
  border-color:var(--tip-focus)!important;
  box-shadow:0 0 0 3px rgba(25,103,210,.13)!important;
}
.device-grid,.choice-row{gap:8px!important}
.device-choice,.condition-choice,.capacity-choice,.box-choice{
  position:relative;
  min-inline-size:0!important;
  min-block-size:74px!important;
  border:1px solid #dedee3!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(16,16,18,.025);
  transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .16s ease,box-shadow .16s ease,background-color .16s ease!important;
}
.device-choice:hover,.condition-choice:hover,.capacity-choice:hover,.box-choice:hover{border-color:#a9a9b0!important;box-shadow:0 8px 18px -16px rgba(16,16,18,.5)}
.device-choice.is-selected,.condition-choice.is-selected,.capacity-choice.is-selected,.box-choice.is-selected{
  border-color:#111114!important;
  background:#f3f3f5!important;
  box-shadow:inset 0 0 0 1px #111114!important;
}
.device-choice.is-selected::after,.condition-choice.is-selected::after,.capacity-choice.is-selected::after,.box-choice.is-selected::after{
  content:'✓';
  position:absolute;
  inset-block-start:7px;
  inset-inline-end:7px;
  display:grid;
  place-items:center;
  inline-size:19px;
  block-size:19px;
  border-radius:50%;
  background:#111114;
  color:#fff;
  font:800 10px/1 var(--font-en);
}
.device-choice:focus-visible,.condition-choice:focus-visible,.capacity-choice:focus-visible,.box-choice:focus-visible,
.photo-slot:focus-within{outline:3px solid rgba(25,103,210,.2)!important;outline-offset:2px!important}
.device-choice img{
  inline-size:auto!important;
  block-size:44px!important;
  max-inline-size:68px!important;
  object-fit:contain!important;
  mix-blend-mode:normal!important;
}
.box-ico,.cond-emoji{
  display:grid!important;
  place-items:center;
  inline-size:28px;
  block-size:28px;
  margin:0 auto 5px!important;
  color:#343439;
}
.box-ico svg,.cond-emoji svg{inline-size:23px;block-size:23px;display:block}
.condition-choice{min-block-size:96px!important}
.portal-hint{color:#787880!important;font-size:11px!important;line-height:1.65!important}
.portal-group--photos .photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.photo-slot{
  aspect-ratio:4/3!important;
  border:1px dashed #b9b9c0!important;
  border-radius:13px!important;
  background:#fff!important;
}
.photo-slot:hover{border-color:#57575e!important;background:#f6f6f8!important}
.photo-placeholder svg{inline-size:24px!important;block-size:24px!important}
.photo-placeholder span{font-size:10.5px!important}
.photo-tag{inset-block-end:7px!important;inset-inline-end:7px!important;padding:4px 7px!important;border-radius:7px!important}
.ai-evaluate-btn{
  min-block-size:48px!important;
  margin-block-start:12px!important;
  border-radius:13px!important;
  background:#111114!important;
  box-shadow:0 10px 24px -18px rgba(16,16,18,.8);
  transition:transform .14s cubic-bezier(.23,1,.32,1),background-color .18s ease,box-shadow .18s ease!important;
}
.ai-evaluate-btn:disabled{background:#d0d0d5!important;color:#fff!important;box-shadow:none!important}
.portal-actions{
  display:grid!important;
  grid-template-columns:1.15fr .85fr;
  gap:10px!important;
  margin-block-start:16px!important;
}
.portal-primary,.portal-secondary{
  inline-size:100%;
  min-block-size:50px!important;
  border-radius:13px!important;
  transition:transform .14s cubic-bezier(.23,1,.32,1),background-color .18s ease,box-shadow .18s ease!important;
}
.portal-primary{background:#111114!important;box-shadow:0 12px 22px -18px rgba(16,16,18,.85)}
.portal-primary:hover{background:#27272b!important}
.portal-secondary:hover{background:#e2e2e6!important}
.portal-primary:active,.portal-secondary:active,.ai-evaluate-btn:active{transform:scale(.985)}
.portal-result,.ai-result{border-radius:18px!important;overflow:hidden}
.portal-fineprint{
  margin-block-start:12px!important;
  padding:12px 14px;
  border:1px solid #e5e5e8;
  border-radius:13px;
  background:#f8f8fa;
  color:#6e6e75!important;
  font-size:11.5px!important;
  line-height:1.75!important;
  text-wrap:pretty;
}

/* The valuation gateway is a focused task: hide unrelated floating actions. */
body:has(#tradePortal:not([hidden])) #tip-cart-fab,
body:has(#tradePortal:not([hidden])) .social-fab{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(10px)!important;
}

@media(min-width:901px){
  .portal-hero{position:sticky;inset-block-start:0;block-size:calc(100dvh - 32px);align-self:start}
}

@media(min-width:901px) and (max-width:1120px){
  .trade-portal-grid{grid-template-columns:minmax(350px,.7fr) minmax(0,1.3fr)!important}
  .portal-hero-main{padding-inline:30px}
  .portal-hero-footer{padding-inline:30px}
  .portal-title{font-size:clamp(2.6rem,5.2vw,4.2rem)!important}
  .portal-confidence-card{padding:15px}
  .portal-panel{padding-inline:20px!important}
  .portal-card{padding:20px!important}
}

@media(max-height:740px) and (min-width:901px){
  .portal-hero{gap:20px}
  .portal-hero-main{padding-block-start:56px}
  .portal-hero-footer{padding-block-end:24px}
  .portal-title{font-size:clamp(2.6rem,4.6vw,4.3rem)!important;margin-block-end:14px!important}
  .portal-desc{margin-block-end:22px!important;line-height:1.7!important}
  .portal-confidence-card{display:none}
}

@media(max-width:900px){
  .trade-portal{padding:0!important;overflow-x:hidden!important}
  .trade-portal-shell{
    inline-size:100%!important;
    min-block-size:100dvh!important;
    border:0!important;
    border-radius:0!important;
  }
  .trade-portal-grid{grid-template-columns:minmax(0,1fr)!important}
  .portal-hero{min-block-size:600px!important}
  .portal-hero-main{padding:74px clamp(24px,7vw,64px) 24px}
  .portal-hero-footer{padding:0 clamp(24px,7vw,64px) 34px}
  .portal-title{font-size:clamp(2.8rem,9vw,5rem)!important}
  .portal-panel{padding:24px!important}
  .portal-card{max-inline-size:760px!important}
  .device-grid,#capacityChoices,#conditionChoices{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #boxChoices{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* The home hero keeps the full central iPhone visible instead of burying it
   under the decorative bottom fade on real phone viewports. */
@media(max-width:640px){
  .home-page .hero{padding-block-end:300px!important}
  .home-page .hero-products{block-size:275px!important;inline-size:116%!important}
  .home-page .hero-product--iphone{block-size:96%!important;opacity:1!important}
  .home-page .hero-products::after{
    block-size:18%!important;
    background:linear-gradient(180deg,transparent,rgba(10,10,10,.72))!important;
  }

  .home-page .cat-img,
  .home-page .prod-img-wrap{
    block-size:auto!important;
    aspect-ratio:1/1!important;
    padding:12px!important;
  }
  .home-page .cat-card{padding:0!important}
  .home-page .prod-card{padding:10px!important}
  .home-page #shop .cat-grid>.cat-item:last-child{grid-column:1/-1}
  .home-page #shop .cat-grid>.cat-item:last-child .cat-img{aspect-ratio:2/1!important}
  .used-page .used-img{
    block-size:auto!important;
    aspect-ratio:4/5!important;
    padding:14px!important;
  }

  .phero{inline-size:100%!important;max-inline-size:100%!important}
  .phero-image,.phero-media{
    inline-size:100%!important;
    min-block-size:360px!important;
    max-block-size:420px!important;
    border-radius:22px!important;
  }
  .phero-image .product-photo,
  .phero-media img.product-photo{
    max-inline-size:88vw!important;
    max-block-size:360px!important;
  }
  .phero-title,.phero-product-name{
    font-size:clamp(1.8rem,8.6vw,2.45rem)!important;
    line-height:1.12!important;
    letter-spacing:-.035em!important;
  }

  section.specs,.specs-section{padding:48px 16px!important}
  .specs-table{grid-template-columns:1fr!important;gap:10px!important}
  .specs-section #specsTable{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row dense;
  }
  .specs-section #specsTable .spec-row{grid-column:auto!important}
  .specs-section #specsTable .spec-row:first-child,
  .specs-section #specsTable .spec-row:nth-child(4){grid-column:1/-1!important}
  .specs-section #specsTable:has(>.spec-row:nth-child(odd):last-child)>.spec-row:last-child{grid-column:1/-1!important}
  .specs-table .spec-row,.specs-section .spec-row{padding:16px!important;border-radius:14px!important}
  .specs-table .spec-value,.specs-section .spec-value{font-size:14px!important}

  .trade-portal-shell{
    inline-size:100%!important;
    min-block-size:100dvh!important;
  }
  .portal-hero{min-block-size:auto!important;gap:22px;text-align:right!important}
  .portal-hero-main{padding:70px 18px 12px}
  .portal-hero-footer{padding:0 18px 24px}
  .portal-close{top:14px!important;inset-inline-end:14px!important;inline-size:44px!important;block-size:44px!important}
  .portal-title{font-size:clamp(2.35rem,12vw,3.25rem)!important;line-height:1.03!important;margin-block-end:16px!important}
  .portal-desc{font-size:14.5px!important;line-height:1.8!important;margin-block-end:22px!important}
  .portal-steps{gap:7px!important}
  .portal-step{padding:10px!important;border-radius:13px}
  .portal-step strong{inline-size:24px;block-size:24px;margin-block-end:7px!important}
  .portal-step span{font-size:10.5px!important}
  .portal-confidence-card{padding:15px 16px;border-radius:16px}
  .portal-confidence-card strong{font-size:16px}
  .portal-confidence-card p{font-size:11.5px}
  .portal-safe-note{max-inline-size:100%;white-space:normal;text-align:center;justify-content:center}
  .portal-panel{inline-size:100%!important;padding:12px!important;align-items:flex-start!important}
  .portal-card{max-inline-size:100%!important;padding:15px!important;border-radius:22px!important}
  .portal-card-head{gap:12px!important;padding-block-end:16px!important}
  .portal-card-title{font-size:1.4rem!important}
  .portal-card-desc{font-size:11.5px}
  .portal-progress{gap:5px!important}
  .portal-dot{inline-size:27px!important;block-size:27px!important}
  .portal-progress::before{inset-block-start:13px}
  .portal-form-grid{grid-template-columns:minmax(0,1fr);gap:9px;margin-block-start:12px}
  .portal-group--device,.portal-group--condition,.portal-group--photos{grid-column:auto}
  .portal-group{padding:13px!important;border-radius:16px}
  .device-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  #capacityChoices{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  #conditionChoices{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  #boxChoices{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .portal-group--photos .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .device-choice,.capacity-choice{padding:10px 6px!important}
  .condition-choice{padding:11px 5px!important;min-block-size:106px!important}
  .condition-choice span:not(.cond-emoji),.capacity-choice span{font-size:10.5px!important}
  .box-choice span:not(.box-ico){font-size:11px!important}
  .portal-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .portal-primary,.portal-secondary{inline-size:100%!important;padding-inline:10px!important}
}

/* ─── Final mobile composition: home hero + compact footer ───────────────
   Keep this block last so the homepage's older embedded responsive rules
   cannot stack every product on the same baseline again. */
@media (max-width:640px){
  .home-page .hero{
    min-block-size:auto!important;
    padding:clamp(34px,8vw,46px) 16px 270px!important;
  }
  .home-page .hero-content{
    inline-size:100%!important;
    max-inline-size:440px!important;
  }
  .home-page .hero-products{
    display:block!important;
    inset-inline-start:auto!important;
    left:50%!important;
    right:auto!important;
    bottom:0!important;
    inline-size:min(108vw,500px)!important;
    block-size:260px!important;
    overflow:hidden!important;
    transform:translateX(-50%)!important;
    animation:none!important;
    will-change:auto!important;
  }
  .home-page .hero-products.is-impact{animation:none!important}
  .home-page .hero-product{
    display:block!important;
    inset-block-end:0!important;
    max-inline-size:none!important;
    opacity:1!important;
    animation:none!important;
    transform:none!important;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.52))!important;
  }
  .home-page .hero-product--imac,
  .home-page .hero-product--iphone2,
  .home-page .hero-product--ipad-mini,
  .home-page .hero-product--watch2,
  .home-page .hero-product--airpods{display:none!important}
  .home-page .hero-product--macbook{
    width:auto!important;
    height:33%!important;
    left:-1%!important;
    right:auto!important;
    bottom:3%!important;
    z-index:1!important;
  }
  .home-page .hero-product--ipad{
    width:auto!important;
    height:60%!important;
    left:4%!important;
    right:auto!important;
    bottom:8%!important;
    z-index:2!important;
  }
  .home-page .hero-product--airpods-max{
    width:auto!important;
    height:48%!important;
    left:auto!important;
    right:-1%!important;
    bottom:31%!important;
    z-index:3!important;
  }
  .home-page .hero-product--iphone{
    width:auto!important;
    height:86%!important;
    left:50%!important;
    right:auto!important;
    bottom:0!important;
    z-index:5!important;
    transform:translateX(-50%)!important;
  }
  .home-page .hero-product--watch{
    width:auto!important;
    height:34%!important;
    left:auto!important;
    right:5%!important;
    bottom:2%!important;
    z-index:6!important;
  }
  .home-page .hero-products::after{
    block-size:12%!important;
    background:linear-gradient(180deg,transparent,rgba(10,10,10,.62))!important;
  }

  .home-page .site-footer{
    margin-block-start:0!important;
    padding:34px 18px max(24px,env(safe-area-inset-bottom))!important;
  }
  .home-page .footer-top{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:22px 12px!important;
    padding:0 0 20px!important;
  }
  .home-page .footer-top>:first-child{grid-column:1/-1}
  .home-page .footer-brand-name{font-size:20px!important;margin-block-end:4px!important}
  .home-page .footer-tagline{margin-block-end:14px!important}
  .home-page .footer-contact{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px 16px!important;
  }
  .home-page .footer-contact li,
  .home-page .footer-col li{margin-block-end:0!important}
  .home-page .footer-col h4{margin-block-end:10px!important}
  .home-page .footer-col ul{display:grid!important;gap:7px!important}
  .home-page .footer-col a{font-size:12.5px!important}
  .home-page .footer-bottom{
    margin-block-start:15px!important;
    flex-direction:row!important;
    justify-content:space-between!important;
    align-items:center!important;
    text-align:start!important;
    gap:14px!important;
  }
  .home-page .footer-copy{max-inline-size:235px!important;line-height:1.55!important}
  .home-page .footer-social{gap:6px!important;flex-shrink:0!important}
  .home-page .social-link{inline-size:32px!important;block-size:32px!important}
}

@media (max-width:370px){
  .home-page .hero{padding-block-end:248px!important}
  .home-page .hero-products{block-size:240px!important;inline-size:112vw!important}
  .home-page .footer-bottom{align-items:flex-start!important}
  .home-page .footer-social{display:grid!important;grid-template-columns:repeat(2,32px)!important}
}

@supports (bottom:env(safe-area-inset-bottom)){
  .social-fab{bottom:max(18px,env(safe-area-inset-bottom))!important}
}

/* Real iOS Safari keeps a persistent bottom toolbar. Compact the two floating
   launchers on catalog/product pages and pin them to the outer gutters so they
   do not cover prices or primary actions. */
@media(max-width:640px){
  .tech-page #tip-cart-fab,.product-page #tip-cart-fab{
    left:6px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:46px!important;
    height:46px!important;
  }
  .tech-page #tip-cart-fab svg,.product-page #tip-cart-fab svg{width:20px!important;height:20px!important}
  .tech-page .social-fab,.product-page .social-fab{
    right:6px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
  }
  .tech-page .social-fab-toggle,.product-page .social-fab-toggle{
    width:46px!important;
    height:46px!important;
  }
  .tech-page .social-fab-toggle svg,.product-page .social-fab-toggle svg{width:21px!important;height:21px!important}
}

/* Full-site phone audit: keep the first screen useful and make the repeated
   footer/navigation pattern compact on real iOS Safari viewports. */
@media(max-width:640px){
  .tech-page .hero-inner{padding:28px 0 38px!important;gap:20px!important}
  .tech-page .stage{min-height:286px!important}
  .tech-page .hero-card{height:274px!important;border-radius:26px!important;animation:none!important}
  .tech-page .hero-card::before{filter:none!important}
  .tech-page .hero-product{height:180px!important;margin:11px!important;border-radius:19px!important}
  .tech-page .hero-product img{max-height:100%!important}
  .tech-page .hero-mini{gap:6px!important;padding:0 13px!important}
  .tech-page .mini{padding:7px 4px!important;border-radius:15px!important}
  .tech-page .mini strong{font-size:18px!important}
  .tech-page .mini span{font-size:9.5px!important}
  .tech-page .pill{margin-bottom:15px!important}
  .tech-page .hero h1{font-size:clamp(3.4rem,16vw,5.4rem)!important;margin-bottom:13px!important}
  .tech-page .hero h2{font-size:clamp(1.55rem,7.3vw,2.15rem)!important}
  .tech-page .stage-glow{filter:none!important}

  .product-page .phero{gap:22px!important;padding-top:20px!important}
  .product-page .phero-media{
    min-height:300px!important;
    max-height:340px!important;
    padding:14px!important;
  }
  .product-page .phero-media img.product-photo{
    max-width:82%!important;
    max-height:290px!important;
  }
  .product-page .phero-info{padding-top:0!important}
  .product-page .phero-product-name{
    font-size:clamp(1.65rem,7.4vw,2.1rem)!important;
    line-height:1.12!important;
  }

  .used-page .hero-title{font-size:clamp(2.4rem,10.5vw,3.3rem)!important}
  .used-page .hero-desc{margin:14px 0 18px!important;line-height:1.75!important}
  .used-page .hero-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    margin-top:18px!important;
  }
  .used-page .metric{padding:10px 5px!important;border-radius:14px!important;text-align:center!important}
  .used-page .metric b{font-size:1.25rem!important}
  .used-page .metric span{display:block!important;font-size:9.5px!important;line-height:1.45!important}

  .services-page .site-nav .logo{display:inline-flex!important;max-width:190px!important}
  .services-page .site-nav .logo span{display:inline-block!important;font-size:17px!important}
  .services-page .repair-hero{padding:38px 16px 34px!important}
  .services-page .repair-title{font-size:clamp(2.25rem,10vw,3.1rem)!important;line-height:1.08!important}
  .services-page .repair-lead{margin-bottom:20px!important;line-height:1.78!important}
  .services-page .repair-actions{margin-bottom:18px!important}
  .services-page .repair-trust{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .services-page .repair-trust-item{padding:10px 5px!important;border-radius:14px!important;text-align:center!important}
  .services-page .repair-trust-item strong{font-size:1.05rem!important}
  .services-page .repair-trust-item span{font-size:9.5px!important;line-height:1.45!important}

  .used-page footer,.services-page footer,.product-page footer{
    margin-top:0!important;
    padding:30px 16px max(22px,env(safe-area-inset-bottom))!important;
  }
  .used-page .footer-top,.services-page .footer-top,.product-page .footer-top{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:20px 12px!important;
    padding:0 0 20px!important;
  }
  .used-page .footer-top>:first-child,.services-page .footer-top>:first-child,.product-page .footer-top>:first-child{
    grid-column:1/-1!important;
  }
  .used-page .footer-contact,.services-page .footer-contact{
    display:flex!important;flex-wrap:wrap!important;gap:7px 16px!important;
  }
  .used-page .footer-contact li,.services-page .footer-contact li,
  .used-page .footer-col li,.services-page .footer-col li,.product-page .footer-col li{margin-bottom:0!important}
  .used-page .footer-col ul,.services-page .footer-col ul,.product-page .footer-col ul{display:grid!important;gap:7px!important}
  .used-page .footer-col h4,.services-page .footer-col h4,.product-page .footer-col h4{margin-bottom:9px!important}
  .used-page .footer-col a,.services-page .footer-col a,.product-page .footer-col a{font-size:12px!important}
  .used-page .footer-bottom,.services-page .footer-bottom,.product-page .footer-bottom{
    margin-top:14px!important;gap:8px!important;text-align:start!important;
  }

  .used-page #tip-cart-fab,.services-page #tip-cart-fab{
    left:6px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:46px!important;height:46px!important;
  }
  .used-page .social-fab,.services-page .social-fab{
    right:6px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;
  }
  .used-page .social-fab-toggle,.services-page .social-fab-toggle{width:46px!important;height:46px!important}
}

@media(max-width:370px){
  .specs-section #specsTable{grid-template-columns:1fr!important}
  .specs-section #specsTable .spec-row{grid-column:auto!important}
  #conditionChoices{grid-template-columns:1fr!important}
  .condition-choice{min-block-size:84px!important}
  .portal-actions{grid-template-columns:1fr!important}
}

@media(hover:none) and (pointer:coarse){
  .home-page .cat-card:hover,.home-page .prod-card:hover,.used-page .used-card:hover,
  .device-choice:hover,.condition-choice:hover,.capacity-choice:hover,.box-choice:hover{transform:none!important}
}

/* Store discovery: the major catalog areas must be visible without opening the
   hamburger menu. This is intentionally scoped to the home page. */
.home-page .department-nav{
  display:none;
}

.home-page .mobile-menu a strong,
.home-page .mobile-menu a small{
  display:block;
  font-family:var(--font-en,Inter,sans-serif);
}
.home-page .mobile-menu a{direction:ltr;text-align:left}
.home-page .mobile-menu a strong{
  color:#fff;
  font-size:1.05rem;
  line-height:1.35;
}
.home-page .mobile-menu a small{
  color:rgba(255,255,255,.55);
  font-size:.78rem;
  font-weight:500;
  margin-top:4px;
}

.home-page .store-gateways{
  max-width:1320px;
  margin:0 auto;
  padding:72px 40px 40px;
  background:#f8f8f6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.home-page .store-gateways-head{
  direction:ltr;
  text-align:left;
  margin-bottom:24px;
}
.home-page .store-gateways-head p{
  color:#777;
  font:600 11px/1.2 var(--font-en,Inter,sans-serif);
  letter-spacing:2.3px;
  text-transform:uppercase;
  margin:0 0 8px;
}
.home-page .store-gateways-head h2{
  color:#0a0a0a;
  font-size:clamp(1.8rem,3vw,2.7rem);
  line-height:1.15;
  letter-spacing:-.8px;
  margin:0;
}
.home-page .store-gateways-head>span{
  display:block;
  color:#747474;
  font-size:15px;
  margin-top:8px;
}
.home-page .store-gateways-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(480px,1fr));
  gap:24px;
  direction:ltr;
}
.home-page .store-gateway{
  min-height:340px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  border-radius:24px;
  padding:40px;
  text-decoration:none;
  color:#111318;
  background:linear-gradient(145deg,#f4f4f2 0%,#ecece8 100%);
  isolation:isolate;
  border:1px solid #deded9;
  box-shadow:0 2px 8px rgba(17,19,24,.035),inset 0 1px 0 rgba(255,255,255,.8);
  cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.home-page .store-gateway:hover,
.home-page .store-gateway:focus-visible{
  transform:translateY(-4px);
  border-color:#c8c9c5;
  box-shadow:0 24px 48px rgba(17,19,24,.12),inset 0 1px 0 rgba(255,255,255,.9);
}
.home-page .store-gateway:focus-visible{
  outline:3px solid rgba(17,19,24,.35);
  outline-offset:4px;
}
.home-page .store-gateway-copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  max-width:55%;
  direction:ltr;
  text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.home-page .store-gateway-copy strong{
  color:#111318;
  font-size:clamp(32px,4vw,46px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-1.5px;
}
.home-page .store-gateway-copy>span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  min-height:44px;
  color:#fff;
  background:#111318;
  border:1px solid #111318;
  border-radius:999px;
  padding:9px 10px 9px 16px;
  margin-top:38px;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  box-shadow:0 8px 18px rgba(17,19,24,.12);
}
.home-page .store-gateway-copy b{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  font-size:17px;
  font-weight:500;
  line-height:1;
}
.home-page .store-gateway img{
  position:absolute;
  z-index:1;
  top:36px;
  right:36px;
  bottom:36px;
  left:auto;
  width:38%;
  height:calc(100% - 72px);
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 20px 30px rgba(17,19,24,.16));
  transition:transform .25s ease;
}
.home-page .store-gateway:hover img{transform:translateY(-4px)}
.home-page .store-gateway--gaming img{
  top:0;
  right:0;
  bottom:0;
  width:46%;
  height:100%;
  object-fit:cover;
  object-position:54% center;
  filter:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 100%);
}

html[data-theme="dark"] .home-page .store-gateways{background:#0d0e10}
html[data-theme="dark"] .home-page .store-gateways-head h2{color:#fff}
html[data-theme="dark"] .home-page .store-gateways-head p,
html[data-theme="dark"] .home-page .store-gateways-head>span{color:#b8b8bd}
html[data-theme="dark"] .home-page .store-gateway{
  color:#fff!important;
  background:linear-gradient(145deg,#1a1b1f 0%,#151619 100%)!important;
  border-color:#2d2f34!important;
  box-shadow:0 2px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-theme="dark"] .home-page .store-gateway:hover,
html[data-theme="dark"] .home-page .store-gateway:focus-visible{
  border-color:#41434a!important;
  box-shadow:0 24px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="dark"] .home-page .store-gateway:focus-visible{outline-color:rgba(255,255,255,.55)}
html[data-theme="dark"] .home-page .store-gateway-copy strong{color:#fff!important}
html[data-theme="dark"] .home-page .store-gateway-copy>span{
  color:#111318!important;
  background:#fff;
  border-color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
html[data-theme="dark"] .home-page .store-gateway-copy b{background:rgba(17,19,24,.08)}
html[data-theme="dark"] .home-page .stats-bar{
  background:#101010!important;
  border-color:#28282c!important;
}
html[data-theme="dark"] .home-page .stat-num{color:#fff!important}
html[data-theme="dark"] .home-page .stat-lbl{color:#b8b8bd!important}
html[data-theme="dark"] .home-page .skip-link,
html[data-theme="dark"] .home-page .btn-white{
  background:#fff!important;
  color:#0a0a0a!important;
}
html[data-theme="dark"] body.home-page .why-card{
  background:#181818!important;
  color:#fff!important;
  border-color:#2d2d31!important;
}
html[data-theme="dark"] body.home-page .why-card:hover{background:#202024!important}
html[data-theme="dark"] .home-page .why-title{color:#fff!important}
html[data-theme="dark"] .home-page .why-text{color:#b8b8bd!important}

@media(max-width:900px){
  .home-page .department-nav{
    height:52px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    direction:ltr;
    background:#111;
    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:0 8px;
  }
  .home-page .department-nav a{
    min-width:0;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:rgba(255,255,255,.78);
    text-decoration:none;
    font-size:11px;
    font-weight:700;
    font-family:var(--font-en,Inter,sans-serif);
    border-radius:10px;
  }
  .home-page .department-nav a:active,
  .home-page .department-nav a:focus-visible{color:#fff;background:rgba(255,255,255,.08)}
  .home-page .department-nav svg{width:16px;height:16px;flex:0 0 auto}

  .home-page .mobile-menu{top:0!important;padding-top:156px!important}
  .home-page .mobile-menu a{padding:14px 4px!important}

  .home-page .store-gateways{
    padding:52px 24px 32px!important;
  }
  .home-page .store-gateways-head{margin-bottom:24px}
}

@media(max-width:640px){
  .home-page .store-gateways-head p{font-size:9px;letter-spacing:1.8px}
  .home-page .store-gateways-head h2{font-size:1.65rem}
  .home-page .store-gateways-head>span{font-size:13px;margin-top:5px}
  .home-page .store-gateways{padding:42px 16px 28px!important}
  .home-page .store-gateways-grid{grid-template-columns:1fr;gap:16px}
  .home-page .store-gateway{
    min-height:300px;
    padding:28px;
    border-radius:22px;
  }
  .home-page .store-gateway-copy{max-width:56%}
  .home-page .store-gateway-copy strong{font-size:clamp(30px,9vw,38px)}
  .home-page .store-gateway-copy>span{margin-top:36px;font-size:15px}
  .home-page .store-gateway-copy b{font-size:18px}
  .home-page .store-gateway img{
    top:24px;
    right:16px;
    bottom:24px;
    left:auto;
    width:40%;
    height:calc(100% - 48px);
    object-position:center;
  }
  .home-page .store-gateway--gaming img{top:0;right:0;bottom:0;width:46%;height:100%}
}

@media(max-width:370px){
  .home-page .department-nav{padding:0 3px}
  .home-page .department-nav a{gap:3px;font-size:10px}
  .home-page .department-nav svg{width:14px;height:14px}
  .home-page .store-gateway{min-height:284px;padding:24px}
  .home-page .store-gateway-copy strong{font-size:28px}
  .home-page .store-gateway-copy>span{font-size:14px;margin-top:30px}
}