/* tradeinplus responsive styles */

    /* ───────────────────────────────────────────────
       UNIVERSAL: Apply to all viewport sizes
       ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }

    html {
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
      overscroll-behavior-x: none;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    body {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin: 0;
      /* clip, never hidden. overflow-x:hidden makes body its own scroll
         container and position:sticky then has nothing to stick to — the site
         header scrolled away wherever this rule won. Line ~960 re-declares clip
         later so this one was already overridden, but leaving `hidden` here is a
         landmine: any stylesheet reordering re-breaks the header silently. */
      overflow-x: clip;
      overscroll-behavior-x: none;
      touch-action: pan-y pinch-zoom;
    }

    /* Keep the product configurator structurally grouped for accessibility
       while preserving the existing desktop layout. Mobile turns it into
       one focused purchase card below. */
    .product-configurator,
    .product-configurator-options,
    .product-configurator-purchase {
      display: contents;
    }
    .product-configurator-head {
      display: none;
    }

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

    /* Keep the page shell inside the physical viewport instead of merely
       clipping oversized sections after they have affected layout. */
    body > *, section, main, header, footer, article, aside,
    .site-nav, .nav, .section, .section-inner, .hero, .hero-inner {
      max-width: 100%;
      min-width: 0;
    }

    @media (max-width: 760px) {.ticker,.department-nav,.home-page .hero,.home-page .section,.home-page .store-gateway{
        max-width: 100%;
        overflow-x: hidden;
      }
    }

    /* 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-inline-end: 1rem !important;
        padding-inline-start: 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: 1.4px !important; font-size: 13px !important; }
      .phero-tagline { font-size: 1.05rem !important; line-height:1.65!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: 14.5px !important; }
      .feature-desc { font-size: 13.5px !important; line-height:1.65!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, body.theme-dark .tradein-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, .tradein-title, h2.tradein-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, .tradein-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-inline-end: 1.25rem !important;
        padding-inline-start: 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-inline-end: 0.6rem !important;
        padding-inline-start: 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 {
        bottom: 0 !important;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom)) !important;
      }
      #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,.shop-grid,.used-grid,.related-grid,.rel-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }.products > *,.prod-grid > *,.shop-grid > *,.used-grid > *,.related-grid > *,.rel-grid > *{
        min-width: 0 !important;
        width: 100% !important;
      }.products .name,.prod-grid .prod-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 .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: auto;
        max-width: 100%;
        margin-inline: auto;
        margin-bottom: 1.4rem;
        align-items: center !important;
        text-align: center;
        white-space: normal;
      }
      /* On narrow screens the absolutely-positioned Plus (left:100%) hangs
         off the right edge and gets clipped by .hero{overflow:hidden}, and
         its RGB glitch ghosts freeze mid-frame — stack it under the title
         as normal flow text and switch the glitch off. */
      .home-page .hero-brand-plus{position:relative;left:auto;bottom:auto;display:inline-block;margin-inline-start:.2em;align-self:auto;animation:none}
      .home-page .hero-brand-plus::before,.home-page .hero-brand-plus::after{display:none}
      .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 .5rem !important;
        position: relative !important;
        overflow: hidden !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; position: relative; }
      /* minmax(120px,…) wants 360px of track inside a 358px column, so the
         third label ("استبدال سريع لو فيه مشكلة") was clipped mid-word. Let the
         tracks shrink and let the labels wrap onto a second line. */
      .used-page .hero-metrics {
        margin-top: 1.6rem;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: .5rem;
      }
      .used-page .hero-metrics .metric span { font-size: .72rem; line-height: 1.5; display: block; }
      .used-page .hero-metrics .metric b { font-size: 1.5rem; }
      .used-page .hero-stage {
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        min-height: 0 !important;
        height: 560px !important;
        overflow: hidden;
        /* The stage sits BEHIND the copy on phones and the CTAs + metrics land
           squarely on top of it. At .62 the devices still read as foreground
           and the buttons looked pasted over a photo — hold it to a backdrop. */
        opacity: .28;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 10%);
      }
      /* Scrim so the CTAs keep their contrast whatever art sits behind them. */
      .used-page .hero-stage::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(7,8,12,.55), rgba(7,8,12,.25) 45%, rgba(7,8,12,.75));
        pointer-events: none;
      }
      .used-page .product-stack {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 115px;
        width: 100% !important;
        height: 300px !important;
      }
      .used-page .hero-mac {
        width: 280px !important;
        height: 174px !important;
        left: 50% !important;
        bottom: 0 !important;
        top: auto !important;
        transform: translateX(-50%) rotate(-2deg) !important;
      }
      .used-page .hero-ipad {
        width: 135px !important;
        height: 184px !important;
        left: 6% !important;
        bottom: 40px !important;
        top: auto !important;
        transform: rotate(-7deg) !important;
      }
      .used-page .hero-phone {
        width: 130px !important;
        height: 166px !important;
        right: 6% !important;
        bottom: 46px !important;
        top: auto !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-spec-bg-a:#fafafc;
  --tip-spec-bg-b:#f4f4f7;
  --tip-spec-line:rgba(16,16,18,.09);
  --tip-spec-ink:#101012;
  --tip-spec-muted:#68686f;
  --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;
}
.used-page .used-img img{
  inline-size:100%!important;
  block-size:100%!important;
  max-inline-size:none!important;
  max-block-size:none!important;
}
.home-page .prod-name,
.used-page .used-name{color:var(--tip-ink)!important;text-wrap:balance}.home-page .prod-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;
}

/* الوضع الداكن بتاع مفتاح الموقع: نفس الكرت بسطح داكن. */
html[data-theme="dark"]{
  --tip-spec-bg-a:#1c1c1e;
  --tip-spec-bg-b:#161618;
  --tip-spec-line:#2c2c2e;
  --tip-spec-ink:#f5f5f7;
  --tip-spec-muted:#a1a1a6;
}

/* 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-spec-line)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,var(--tip-spec-bg-a),var(--tip-spec-bg-b))!important;
  box-shadow:0 1px 2px rgba(16,16,18,.025)!important;
}
.specs-table .spec-label,
.specs-section .spec-label{
  color:var(--tip-spec-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-spec-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:start!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):not(.portal-beta-stamp){position:relative;z-index:1}
/* ختم "Beta version" — أصل صورة، عنصر بصري بحت داخل بوابة التقييم */
.portal-beta-stamp{
  position:absolute;
  inset-block-start:24px;
  inset-inline-start:24px;
  z-index:3;
  inline-size:clamp(126px,12vw,176px);
  block-size:auto;
  transform:rotate(-9deg);
  opacity:.92;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.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(4,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(.repair-state-choice.is-selected) .portal-dot:nth-child(2),
.portal-card:has(.condition-choice.is-selected) .portal-dot:nth-child(3),
.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(4){
  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--history,.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--history>.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--history>.portal-label::before{content:'02'}
.portal-group--condition>.portal-label::before{content:'03'}
.portal-group--photos>.portal-label::before{content:'04'}
.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--history{padding:18px!important}
.portal-group--history>.portal-label{
  inline-size:100%;
  padding:0;
}
.history-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-block-end:12px;
}
.history-section-head strong{display:block;color:#19191d;font-size:14px;line-height:1.5}
.history-section-head p{margin-block-start:4px;color:#77777f;font-size:11.5px;line-height:1.6}
.history-required{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  background:#111114;
  color:#fff;
  font-size:9.5px;
  font-weight:800;
}
.repair-state-grid,.repair-quality-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.repair-state-choice,.repair-quality-choice{
  position:relative;
  min-inline-size:0;
  min-block-size:104px;
  padding:13px 12px;
  border:1px solid #dedee3;
  border-radius:14px;
  background:#fff;
  color:#242428;
  text-align:start;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(16,16,18,.025);
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.repair-quality-choice{min-block-size:78px}
.repair-state-choice:hover,.repair-quality-choice:hover{transform:translateY(-1px);border-color:#a9a9b0;box-shadow:0 8px 18px -16px rgba(16,16,18,.5)}
.repair-state-choice.is-selected,.repair-quality-choice.is-selected{
  border-color:#111114;
  background:#f1f1f3;
  box-shadow:inset 0 0 0 1px #111114;
}
.repair-state-choice.is-selected::after,.repair-quality-choice.is-selected::after{
  content:'✓';
  position:absolute;
  inset-block-start:8px;
  inset-inline-end:8px;
  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);
}
.repair-choice-icon{
  display:grid;
  place-items:center;
  inline-size:28px;
  block-size:28px;
  margin-block-end:9px;
  border-radius:9px;
  background:#f0f0f3;
  color:#343439;
  font:800 14px/1 var(--font-en);
}
.repair-state-choice strong,.repair-quality-choice strong{display:block;padding-inline-end:18px;font-size:12px;line-height:1.45}
.repair-state-choice>span:last-child,.repair-quality-choice>span{display:block;margin-block-start:5px;color:#76767e;font-size:10.5px;line-height:1.55}
.repair-details,.history-subsection{margin-block-start:14px}
.repair-details{
  padding-block-start:2px;
  border-block-start:1px solid #e4e4e8;
}
.history-subtitle{display:block;margin-block-end:9px;color:#303035;font-size:11.5px;font-weight:800;line-height:1.5}
.history-subtitle>span{color:#888890;font-size:10px;font-weight:600}
.repair-parts{display:flex;flex-wrap:wrap;gap:7px}
.part-chip{position:relative;cursor:pointer}
.part-chip input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.part-chip span{
  display:block;
  padding:8px 11px;
  border:1px solid #dedee3;
  border-radius:999px;
  background:#fff;
  color:#48484f;
  font-size:10.5px;
  font-weight:700;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
.part-chip input:checked+span{border-color:#111114;background:#111114;color:#fff}
.part-chip input:focus-visible+span,.repair-state-choice:focus-visible,.repair-quality-choice:focus-visible{outline:3px solid rgba(25,103,210,.2);outline-offset:2px}
.history-field-error{margin-block-start:7px;color:#b42318;font-size:10.5px;font-weight:700}
.portal-textarea{
  inline-size:100%;
  min-block-size:86px;
  resize:vertical;
  padding:11px 12px;
  border:1px solid #d6d6dc;
  border-radius:12px;
  background:#fff;
  color:#17171a;
  font-family:var(--font-ar),sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1.7;
  direction:inherit;
  text-align:start;
}
.portal-textarea:focus{outline:0;border-color:var(--tip-focus);box-shadow:0 0 0 3px rgba(25,103,210,.13)}
.textarea-meta,.functional-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.textarea-meta{margin-block-start:5px;color:#888890;font-size:9.5px}
.functional-section{padding-block-start:14px;border-block-start:1px solid #e4e4e8}
.functional-heading{margin-block-end:9px}
.functional-heading .history-subtitle{margin:0}
.functional-heading>span:last-child{color:#888890;font-size:9.5px}
.functional-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.functional-grid label{display:grid;gap:6px;min-inline-size:0}
.functional-grid label>span{color:#4c4c53;font-size:10.5px;font-weight:750}
.functional-grid select{
  min-inline-size:0;
  block-size:40px;
  padding-inline:9px 26px;
  border:1px solid #dcdce1;
  border-radius:10px;
  background:#fff;
  color:#303035;
  font-family:var(--font-ar),sans-serif;
  font-size:10.5px;
  font-weight:600;
  line-height:1.2;
}
.functional-grid select:focus{outline:0;border-color:var(--tip-focus);box-shadow:0 0 0 3px rgba(25,103,210,.13)}
.portal-group--photos .photo-grid{grid-template-columns:repeat(3,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--evidence{background:#f7f7f9!important;border-style:solid!important}
.photo-slot--evidence::before{
  content:'اختياري';
  position:absolute;
  inset-block-start:7px;
  inset-inline-start:7px;
  z-index:2;
  padding:3px 6px;
  border-radius:999px;
  background:#ececf0;
  color:#686870;
  font-size:8.5px;
  font-weight:800;
}
.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:disabled{cursor:not-allowed!important;background:#cfcfd4!important;color:#fff!important;box-shadow:none!important}
.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}
.ai-history-row{margin-block-start:7px!important;padding-block-start:7px!important}
.ai-history-pill{background:rgba(255,255,255,.12)!important;color:#f4f4f5!important}
.ai-history-pill.is-good{background:rgba(74,222,128,.18)!important;color:#86efac!important}
.ai-history-pill.is-needs{background:rgba(248,113,113,.18)!important;color:#fca5a5!important}
.ai-error span{display:block}
.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;
}

/* Complete dark-mode contrast for the valuation form. */
html[data-theme="dark"] .portal-panel{background:#0f0f11!important}
html[data-theme="dark"] .portal-card{border-color:#29292e!important;background:#171719!important;color:#fff!important}
html[data-theme="dark"] .portal-card-head{border-color:#303035!important}
html[data-theme="dark"] .portal-card-title,
html[data-theme="dark"] .history-section-head strong,
html[data-theme="dark"] .history-subtitle,
html[data-theme="dark"] .functional-grid label>span{color:#f4f4f5!important}
html[data-theme="dark"] .portal-card-desc,
html[data-theme="dark"] .history-section-head p,
html[data-theme="dark"] .functional-heading>span:last-child,
html[data-theme="dark"] .textarea-meta{color:#a7a7af!important}
html[data-theme="dark"] .portal-group{border-color:#303035!important;background:#202023!important}
html[data-theme="dark"] .portal-select,
html[data-theme="dark"] .portal-input,
html[data-theme="dark"] .portal-textarea,
html[data-theme="dark"] .functional-grid select,
html[data-theme="dark"] .device-choice,
html[data-theme="dark"] .condition-choice,
html[data-theme="dark"] .capacity-choice,
html[data-theme="dark"] .box-choice,
html[data-theme="dark"] .repair-state-choice,
html[data-theme="dark"] .repair-quality-choice,
html[data-theme="dark"] .part-chip span,
html[data-theme="dark"] .photo-slot{
  border-color:#3c3c42!important;
  background:#27272a!important;
  color:#f4f4f5!important;
}
html[data-theme="dark"] .device-choice.is-selected,
html[data-theme="dark"] .condition-choice.is-selected,
html[data-theme="dark"] .capacity-choice.is-selected,
html[data-theme="dark"] .box-choice.is-selected,
html[data-theme="dark"] .repair-state-choice.is-selected,
html[data-theme="dark"] .repair-quality-choice.is-selected{
  border-color:#f4f4f5!important;
  background:#343438!important;
  box-shadow:inset 0 0 0 1px #f4f4f5!important;
}
html[data-theme="dark"] .device-choice.is-selected::after,
html[data-theme="dark"] .condition-choice.is-selected::after,
html[data-theme="dark"] .capacity-choice.is-selected::after,
html[data-theme="dark"] .box-choice.is-selected::after,
html[data-theme="dark"] .repair-state-choice.is-selected::after,
html[data-theme="dark"] .repair-quality-choice.is-selected::after{background:#fff;color:#111114}
html[data-theme="dark"] .repair-choice-icon,
html[data-theme="dark"] .photo-slot--evidence::before{background:#343438!important;color:#d3d3d8!important}
html[data-theme="dark"] .repair-state-choice>span:last-child,
html[data-theme="dark"] .repair-quality-choice>span,
html[data-theme="dark"] .portal-hint{color:#aaaab2!important}
html[data-theme="dark"] .repair-details,
html[data-theme="dark"] .functional-section{border-color:#38383d!important}
html[data-theme="dark"] .part-chip input:checked+span{border-color:#fff!important;background:#fff!important;color:#111114!important}
html[data-theme="dark"] .photo-slot--evidence{background:#232326!important}
html[data-theme="dark"] .portal-fineprint{border-color:#303035;background:#202023;color:#b9b9c0!important}
html[data-theme="dark"] .ai-notes,
html[data-theme="dark"] .ai-loading{background:#202023!important;color:#e7e7ea!important}
html[data-theme="dark"] .ai-notes h4{color:#fff!important}
html[data-theme="dark"] .ai-error{border-color:#7f1d1d!important;background:#3f171a!important;color:#fecaca!important}
html[data-theme="dark"] .portal-dot{border-color:#414147;background:#202023!important;color:#aaaab2}
html[data-theme="dark"] .portal-progress::before{background:#414147}
html[data-theme="dark"] .portal-dot.is-active,
html[data-theme="dark"] .portal-card:has(.repair-state-choice.is-selected) .portal-dot:nth-child(2),
html[data-theme="dark"] .portal-card:has(.condition-choice.is-selected) .portal-dot:nth-child(3),
html[data-theme="dark"] .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(4){border-color:#fff;background:#fff!important;color:#111114}

@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:start!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-beta-stamp{inset-block-start:16px;inset-inline-start:14px;inline-size:118px}
  .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:9.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--history,.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}
  .repair-state-grid,.repair-quality-grid{grid-template-columns:1fr}
  .repair-state-choice{min-block-size:82px;padding:11px 12px;padding-inline-start:52px}
  .repair-state-choice .repair-choice-icon{position:absolute;inset-block-start:50%;inset-inline-start:12px;margin:0;transform:translateY(-50%)}
  .functional-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .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}
}

/* On a phone the launchers sit on top of whatever scrolls under them — a price,
   a card's CTA. fab-scroll-reveal.js marks them while the page is scrolling
   down and clears it on an upward scroll or the moment scrolling stops, so
   reading is never obstructed and the cart is always one flick away.
   640px, not 720px: above it .social-fab is deliberately always-on (see the
   @media(min-width:641px) rule each page inlines), so hiding it on scroll in
   the 641-720px band would contradict that. */
@media(max-width:640px){
  /* cart.js declares transition:transform only, so opacity would snap 0 -> 1 on
     the way back. A transition written solely inside the "away" rule stops
     applying the instant the class is dropped, so the return has to be
     described on the base state. .social-fab's own inline base already
     transitions opacity and transform, and neither base names visibility, so
     the buttons reappear immediately. */
  #tip-cart-fab{
    transition:opacity .18s ease,transform .3s cubic-bezier(.34,1.56,.64,1)!important;
  }
  /* !important because .social-fab.fab-visible ties on specificity (0,2,0) and
     is declared in every page's inline <style> *after* this file, so it wins the
     tie and would leave the launcher fully opaque and tappable.
     visibility:hidden matches the .fab-occluded rule below and is what actually
     pulls a faded-out button out of the focus order and the accessibility tree;
     it is delayed to the end of the fade going out so the fade stays visible. */
  #tip-cart-fab.fab-scrolled-away,
  .social-fab.fab-scrolled-away{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(14px) scale(.92)!important;
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s!important;
  }
}

/* Floating launchers must never cover a product's primary purchase actions. */
.product-page #tip-cart-fab.fab-occluded,
.product-page .social-fab.fab-occluded,
body.mobile-menu-open #tip-cart-fab,
body.mobile-menu-open .social-fab{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(12px)!important;
}

body.mobile-menu-open{overflow:hidden!important}
body.mobile-menu-open .mobile-menu{z-index:999!important}

/* Short touch landscapes use a deliberate split composition: the message and
   actions stay readable on the right while a restrained product stage remains
   decorative on the left. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1000px) and (pointer:coarse){
  .home-page .hero{
    min-height:calc(100svh - 156px)!important;
    padding:20px 24px!important;
    align-items:center!important;
    justify-content:flex-end!important;
    text-align:right!important;
    direction:ltr!important;
  }
  .home-page .hero-content{
    width:54%!important;
    max-width:520px!important;
    margin:0!important;
    align-items:flex-start!important;
    direction:inherit!important;
  }
  .home-page .hero-badge{font-size:9px!important;margin-bottom:8px!important;padding:5px 11px!important}
  .home-page .hero-brand{
    width:auto!important;
    margin:0 0 3px!important;
    font-size:clamp(2.25rem,7.8vw,4rem)!important;
    line-height:.88!important;
    text-align:end!important;
    white-space:nowrap!important;
    align-items:flex-start!important;
  }
  .home-page .hero-brand-plus{margin-inline:0!important}
  .home-page .hero-tagline{font-size:8px!important;letter-spacing:2px!important;margin-bottom:8px!important}
  .home-page .hero-desc{font-size:12px!important;line-height:1.55!important;margin:0 0 10px!important;text-align:start!important}
  .home-page .hero-desc br{display:none}
  .home-page .hero-btns{display:flex!important;grid-template-columns:none!important;gap:7px!important;justify-content:flex-start!important}
  .home-page .hero-btns .btn{width:auto!important;min-height:38px!important;padding:8px 16px!important;font-size:12px!important}
  .home-page .hero-products{
    display:block!important;
    left:0!important;
    right:auto!important;
    bottom:0!important;
    width:44%!important;
    height:100%!important;
    overflow:hidden!important;
    transform:none!important;
    animation:none!important;
    will-change:auto!important;
  }
  .home-page .hero-product{animation:none!important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.48))!important}
  .home-page .hero-product--imac,
  .home-page .hero-product--macbook,
  .home-page .hero-product--iphone2,
  .home-page .hero-product--airpods-max,
  .home-page .hero-product--watch,
  .home-page .hero-product--ipad-mini,
  .home-page .hero-product--watch2,
  .home-page .hero-product--airpods{display:none!important}
  .home-page .hero-product--ipad{display:block!important;height:68%!important;left:4%!important;bottom:5%!important;opacity:.72!important}
  .home-page .hero-product--iphone{display:block!important;height:92%!important;left:52%!important;bottom:-3%!important;transform:translateX(-50%)!important;opacity:1!important}
  .home-page .hero-products::after{height:22%!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){
  /* The tech hero is a frameless stage (no card box, no mini stats), so these
     sizes shape the device itself instead of the retired card. */
  .tech-page .hero{min-height:0!important;padding:0!important}
  .tech-page .hero-inner{padding:28px 6px 40px!important;gap:6px!important}
  .tech-page .stage{min-height:0!important}
  .tech-page .hero-card{width:100%!important;max-width:min(248px,34vh)!important;height:auto!important;border-radius:0!important;animation:none!important}
  .tech-page .hero-product{height:auto!important;margin:0!important;border-radius:0!important}
  .tech-page .hero-product img{max-height:100%!important}
  .tech-page .pill{margin-bottom:15px!important}
  .tech-page .hero h1{font-size:clamp(2.2rem,10vw,2.9rem)!important;margin-bottom:13px!important}
  .tech-page .hero h2{font-size:clamp(1.4rem,6.4vw,1.9rem)!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}
}

/* Short phones (older 640-720px viewports): tighten the tech hero so the
   primary CTA still lands above the fold. */
@media(max-width:760px) and (max-height:720px){
  .tech-page .hero-inner{padding-top:16px!important;padding-bottom:26px!important}
  .tech-page .pill{margin-bottom:10px!important}
  .tech-page .hero h1{margin-bottom:10px!important}
  .tech-page .hero-actions{margin-top:16px!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{
  /* 4.21:1 against this panel — just under the 4.5 minimum, at 11px uppercase.
     Two shades darker clears it and is indistinguishable side by side. */
  color:#727272;
  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;
  /* Was #747474 — 4.40:1, a hair under the 4.5 minimum. */
  color:#727272;
  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{
  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:none;
  transition:transform .25s ease;
}
.home-page .store-gateway:hover img{transform:translateY(-4px)}
.home-page .store-gateway--laptops img{top:14px;right:14px;bottom:14px;width:54%;height:calc(100% - 28px)}
/* The only opaque artwork in the grid: every other department is a transparent
   PNG, so its padding lets the title show through even where the boxes overlap.
   scale(1.35) about the centre pushed this photo 64px past its own box and
   straight over the "Gaming" title — and dark text on a dark photo is not a
   title at all. The scale was there to hide contain's letterboxing, so
   object-fit:cover replaces it: the box fills edge to edge on its own, which
   lets the box shrink to clear the title instead of growing over it. */
.home-page .store-gateway--gaming img{
  top:10px;
  right:8px;
  bottom:10px;
  width:52%;
  height:calc(100% - 20px);
  object-fit:cover;
  object-position:center;
}
.home-page .store-gateway--gaming:hover img{transform:translateY(-4px)}
.home-page .store-gateway--phone img{
  top:20px;
  right:16px;
  bottom:16px;
  width:52%;
  height:calc(100% - 36px);
  transform-origin:100% 100%;
}
/* Apple/Tech/Used share the exact ".store-gateway--phone img" box above, but
   each source PNG has a different amount of transparent padding baked in
   (pixel-measured: Apple's device fills ~94% of its frame, Tech's ~88%,
   Used's only ~62-77%), so object-fit:contain alone renders visibly different
   device sizes. Scaling the whole box (old approach) grew it past the card's
   fixed height and got clipped by overflow:hidden, so instead we crop into
   each image's own padding with object-fit:cover to normalize apparent size
   without ever exceeding the box; Apple is the baseline (already fills its
   box) so it needs none. */
.home-page .store-gateway--tech img{object-fit:cover;object-position:center 30%}
.home-page .store-gateway--used img{object-fit:cover;object-position:center 20%}
.home-page .store-gateway--accessories img{
  top:10px;
  right:8px;
  bottom:10px;
  width:60%;
  height:calc(100% - 20px);
  object-position:center;
  transform:scale(1.2);
  transform-origin:center;
}
.home-page .store-gateway--accessories:hover img{transform:translateY(-4px) scale(1.2)}
.home-page .store-gateway--tech:hover img{transform:translateY(-3px)}
.home-page .store-gateway--used:hover img{transform:translateY(-3px)}

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;
    /* Stacked, not side by side: at 4 columns on a 375px screen a row layout
       leaves ~70px for the label, so "Electronics & Accessories" wrapped to
       three lines and spilled out of the 52px bar. */
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:0 2px;
    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 span{
    display:block;
    font-size:10px;
    line-height:1.16;
    text-align:center;
    /* Reserve both lines so one- and two-line labels keep their icons on the
       same baseline across the row. */
    min-height:2.32em;
  }
  .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:repeat(2,1fr);gap:12px}
  .home-page .store-gateway{
    height:236px!important;
    padding:14px;
    border-radius:18px;
  }
  .home-page .store-gateway-copy{max-width:100%;position:static}
  /* Stacked mobile card: product image on top, department name beneath it,
     CTA pinned to the bottom — keeps the name clear of the artwork. */
  .home-page .store-gateway-copy strong{
    position:absolute;
    z-index:2;
    top:auto;
    left:14px;
    right:14px;
    bottom:64px;
    max-width:none;
    font-size:clamp(16px,5.4vw,21px);
    line-height:1.12;
  }
  .home-page .store-gateway-copy>span{
    position:absolute;
    z-index:2;
    left:14px;
    bottom:14px;
    margin:0;
    font-size:11px;
  }
  .home-page .store-gateway-copy b{font-size:13px}
  .home-page .store-gateway img{
    top:12px;
    left:0;
    right:0;
    bottom:auto;
    width:100%;
    height:116px;
    object-fit:contain;
    object-position:center;
    filter:none;
    border-radius:0;
    box-shadow:none;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .home-page .store-gateway--accessories img,
  .home-page .store-gateway--accessories:hover img{
    top:2px;
    height:132px;
    transform:scale(1.25);
    transform-origin:center;
  }
  /* Same photo, same reason as the desktop rule above: scale(1.5) reached 33px
     below its box, and on this layout the title sits directly beneath the
     image. cover fills the box without it. */
  .home-page .store-gateway--gaming img,
  .home-page .store-gateway--gaming:hover img{
    top:12px;
    height:132px;
    object-fit:cover;
  }
  .home-page .store-gateway--laptops img{
    top:26px;
    height:96px;
    object-fit:cover;
    object-position:center;
    filter:none;
  }
}

/* زرار القسم بنسختين: الطويلة للشاشات الواسعة والقصيرة للضيقة.

   الزرار `position:absolute` عند left:14px وعرضه max-content بلا سقف، والكارت
   `overflow:hidden` — يعني أي زيادة في عرض النص بتتقص عند حافة الكارت من غير
   ما تعمل تمرير أفقي يفضحها. المقاس: الكارت عرضه (عرض الشاشة − 44) ÷ 2،
   والزرار الأطول («Explore Accessories») بياخد 181px عند 12px، فمحتاج كارت
   195px على الأقل يعني شاشة 435px فأكتر. تحت كده كان بيتقص فعليًا: 30px على
   الإكسسوارات و18px على المستعمل، والطرف المدوّر بتاع الزرار بيتشال خالص على
   آيفون SE و13 mini وأي جهاز مفعّل عليه تكبير العرض.

   الميديا كويري القديمة (640px و370px) كانت بتصغّر الخط لـ11px و10px عشان
   يدخل، بس القاعدة العامة `body[class] …{font-size:12px!important}` تحت في
   الملف ده بتغلبها بالـ!important فالخط بيفضل 12px. وحتى لو رجّعناه 11px،
   «Explore Accessories» محتاج 118px من مساحة نص متاحها 77px — فالنص نفسه
   أطول من الكارت مهما صغّرنا الخط بشكل مقروء. الحل إن الشاشة الضيقة تشوف
   الاسم من غير الفعل («Accessories» بدل «Explore Accessories») زي
   «Shop Apple» اللي كان داخل أصلاً. */
.home-page .store-gateway-copy .gw-short{display:none}
@media(max-width:434px){
  .home-page .store-gateway-copy .gw-long{display:none}
  .home-page .store-gateway-copy .gw-short{display:inline}
}
@media(max-width:370px){
  .home-page .department-nav{padding:0 3px}
  .home-page .department-nav a{gap:2px}
  .home-page .department-nav a span{font-size:9.5px}
  .home-page .department-nav svg{width:14px;height:14px}
  .home-page .store-gateway{height:212px!important;padding:12px}
  .home-page .store-gateway-copy strong{font-size:17px;left:12px;right:12px;bottom:58px}
  .home-page .store-gateway-copy>span{font-size:10px;left:12px;bottom:12px;margin:0}
  .home-page .store-gateway img{height:100px}
  .home-page .store-gateway--laptops img{height:84px;top:24px}
}

/* Primary brand artwork — keeps the PDF-sourced logo consistent everywhere. */
a.logo > img.logo-mark{
  display:block!important;
  width:46px!important;
  height:46px!important;
  max-width:46px!important;
  object-fit:contain!important;
  opacity:1!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  background:transparent!important;
  flex:0 0 46px!important;
}

@media(max-width:760px){
  a.logo > img.logo-mark{
    width:40px!important;
    height:40px!important;
    max-width:40px!important;
    flex-basis:40px!important;
  }
}

@media(max-width:430px){
  a.logo > img.logo-mark{
    width:36px!important;
    height:36px!important;
    max-width:36px!important;
    flex-basis:36px!important;
  }
}

/* Shared footer artwork across every storefront page. */
footer{
  background-color:#050505!important;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.76),rgba(0,0,0,.84)),
    url("../images/footer-pattern.webp")!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* Footer typography system: readable Arabic, crisp Latin, one hierarchy. */
footer,
footer a,
footer button,
footer p,
footer span,
footer small,
footer li,
footer h3,
footer h4{
  font-family:'IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

footer [lang="en"],
footer [lang="en"] *,
footer bdi[lang="en"],
footer .footer-tagline,
footer .footer-copy,
footer .footer-brand{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
}

footer .footer-brand-name,
footer .footer-brand{
  color:#fff!important;
  font-size:clamp(23px,2vw,28px)!important;
  font-weight:800!important;
  line-height:1.18!important;
  letter-spacing:-.045em!important;
  text-shadow:0 2px 14px rgba(0,0,0,.9)!important;
}

footer .footer-brand-name small{
  color:#bdbdc6!important;
  margin-top:5px!important;
  font-size:12.5px!important;
  font-weight:600!important;
  line-height:1.65!important;
  letter-spacing:0!important;
}

footer .footer-tagline{
  color:#b8b8c1!important;
  font-size:12.5px!important;
  font-weight:600!important;
  line-height:1.5!important;
  letter-spacing:.08em!important;
}

footer .footer-col h3,
footer .footer-col h4{
  color:#fff!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.5!important;
  letter-spacing:-.01em!important;
  text-shadow:0 2px 12px rgba(0,0,0,.9)!important;
}

footer .footer-col a,
footer .footer-contact a,
footer .footer-about,
footer .footer-links a,
footer .footer-row{
  color:#dedee4!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.75!important;
  letter-spacing:0!important;
  text-shadow:0 1px 8px rgba(0,0,0,.85)!important;
}

footer .footer-col a:hover,
footer .footer-col a:focus-visible,
footer .footer-contact a:hover,
footer .footer-contact a:focus-visible,
footer .footer-links a:hover,
footer .footer-links a:focus-visible{
  color:#fff!important;
}

footer .footer-copy{
  color:#a9a9b2!important;
  font-size:12.5px!important;
  font-weight:500!important;
  line-height:1.65!important;
  letter-spacing:0!important;
}

@media(max-width:640px){
  footer .footer-top .footer-col h3,
  footer .footer-top .footer-col h4{font-size:14px!important}
  footer .footer-top .footer-col a,
  footer .footer-top .footer-contact a,
  footer .footer-links a{font-size:13px!important;line-height:1.65!important}
}

/* Mobile product flow: compact premium hierarchy, full product media, and
   configuration controls that read as choices instead of oversized cards. */
@media(max-width:640px){
  .product-page .phero{
    gap:18px!important;
    padding:14px 16px 32px!important;
  }

  .product-page .phero-image,
  .product-page .phero-media{
    order:1!important;
    display:grid!important;
    place-items:center!important;
    inline-size:100%!important;
    block-size:clamp(280px,82vw,326px)!important;
    min-block-size:0!important;
    max-block-size:326px!important;
    padding:14px!important;
    overflow:hidden!important;
    border:1px solid rgba(10,10,12,.045)!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,#fafafd 0%,#f1f1f4 100%)!important;
  }
  .product-page .phero-image::before,
  .product-page .phero-media::before{
    inset:12%!important;
    pointer-events:none;
  }
  .product-page .phero-image .product-photo,
  .product-page .phero-media img.product-photo{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    inline-size:100%!important;
    block-size:100%!important;
    min-inline-size:0!important;
    min-block-size:0!important;
    max-inline-size:100%!important;
    max-block-size:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    filter:drop-shadow(0 18px 24px rgba(16,16,18,.14))!important;
  }
  .product-page .phero-image.has-catalog-gallery{
    block-size:clamp(378px,112vw,440px)!important;
    max-block-size:440px!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:10px!important;
  }
  .product-page .phero-image.has-catalog-gallery .catalog-gallery{
    align-self:end!important;
    margin:0!important;
  }

  .product-page .phero-info{
    order:2!important;
    display:grid!important;
    gap:10px!important;
    inline-size:100%!important;
    padding-top:0!important;
  }
  .product-page .phero-eyebrow,
  .product-page .phero-title,
  .product-page .phero-product-name,
  .product-page .phero-tagline,
  .product-page .phero-rating,
  .product-page .phero-price-block,
  .product-page .product-configurator,
  .product-page .config,
  .product-page .actions,
  .product-page .quick-facts{
    inline-size:100%!important;
    margin:0!important;
  }
  .product-page .phero-title,
  .product-page .phero-product-name{
    font-size:clamp(1.8rem,8.4vw,2.35rem)!important;
    line-height:1.08!important;
    letter-spacing:-.045em!important;
  }
  .product-page .phero-tagline{
    color:#6f6f76!important;
    font-size:13.5px!important;
    line-height:1.65!important;
  }
  .product-page .phero-rating{
    gap:7px!important;
    padding-bottom:2px!important;
  }

  .product-page .phero-price-block{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-block-size:70px!important;
    padding:14px 2px!important;
    border-block:1px solid #e6e6ea!important;
    border-inline:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  .product-page .phero-price{
    margin:0!important;
    font-size:clamp(2.15rem,10vw,2.65rem)!important;
    letter-spacing:-.045em!important;
  }

  .product-page .product-configurator{
    display:block!important;
    padding:10px!important;
    overflow:hidden!important;
    border:1px solid #e4e4e8!important;
    border-radius:24px!important;
    background:#f5f5f7!important;
    box-shadow:0 16px 34px rgba(18,18,22,.07)!important;
  }
  .product-page .product-configurator-head{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:12px!important;
    min-block-size:48px!important;
    padding:3px 5px 11px!important;
  }
  .product-page .product-configurator-heading{
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
  }
  .product-page .product-configurator-heading span{
    color:#77777f!important;
    font-size:9px!important;
    font-weight:800!important;
    line-height:1.2!important;
    /* live-product.js fills this span with Arabic ("اختيارات الجهاز"). Tracking
       prises apart Arabic's joined letterforms and reads as a rendering fault,
       so it is reset here at the source: the global reset lower in this file
       cannot reach it, being (0,2,0) against this rule's (0,3,0). */
    letter-spacing:normal!important;
  }
  .product-page .product-configurator-heading strong{
    color:#111114!important;
    font-size:17px!important;
    font-weight:850!important;
    line-height:1.25!important;
    letter-spacing:-.025em!important;
  }
  .product-page .product-configurator-head>small{
    color:#818188!important;
    font-size:10.5px!important;
    font-weight:650!important;
    line-height:1.4!important;
  }
  .product-page .product-configurator-options{
    display:block!important;
    overflow:hidden!important;
    counter-reset:tip-option-step!important;
    border:1px solid #e4e4e8!important;
    border-radius:18px!important;
    background:#fff!important;
  }
  .product-page .config{
    min-inline-size:0!important;
    position:relative!important;
    display:block!important;
    min-block-size:70px!important;
    /* logical, to stay on the same side as the legend's `inset-inline-start`
       below — everything else in this rule is already logical */
    padding:8px!important;
    padding-inline-start:98px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    counter-increment:tip-option-step!important;
  }
  .product-page .product-configurator-options>.config:not(:last-child){
    border-bottom:1px solid #ececef!important;
  }
  .product-page .config legend{
    position:absolute!important;
    inset-inline-start:0!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    float:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    inline-size:88px!important;
    margin:0!important;
    padding:0 2px!important;
    font-size:12.5px!important;
    font-weight:800!important;
    line-height:1.35!important;
    color:#1d1d1f!important;
    white-space:normal!important;
  }
  .product-page .config legend::before{
    content:"0" counter(tip-option-step)!important;
    display:block!important;
    margin-bottom:1px!important;
    color:#a0a0a7!important;
    font-family:Inter,Arial,sans-serif!important;
    font-size:8.5px!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:.08em!important;
  }
  .product-page .config legend .selected{
    display:block!important;
    max-inline-size:88px!important;
    margin-top:2px!important;
    color:#77777f!important;
    font-size:9.5px!important;
    font-weight:600!important;
    line-height:1.3!important;
    letter-spacing:-.01em!important;
    overflow-wrap:anywhere!important;
  }
  .product-page .config:has(>.colors){
    min-block-size:0!important;
    padding:42px 8px 8px!important;
  }
  .product-page .config:has(>.colors) legend{
    top:9px!important;
    transform:none!important;
  }
  .product-page .colors{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-block-size:44px!important;
    gap:4px!important;
    inline-size:100%!important;
    max-inline-size:100%!important;
    padding:4px!important;
    border:1px solid #e5e5e9!important;
    border-radius:16px!important;
    background:#f5f5f7!important;
    overflow:visible!important;
    flex-wrap:wrap!important;
    scrollbar-width:none!important;
  }
  .product-page .colors::-webkit-scrollbar{
    display:none!important;
  }
  .product-page .color-swatch{
    inline-size:44px!important;
    block-size:44px!important;
    min-inline-size:44px!important;
    min-block-size:44px!important;
    padding:0!important;
    border:2px solid transparent!important;
    border-radius:50%!important;
    background:transparent!important;
    font-size:0!important;
    transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease!important;
  }
  .product-page .color-swatch::before{
    inset:5px!important;
    transform:none!important;
    inline-size:auto!important;
    block-size:auto!important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)!important;
  }
  .product-page .color-swatch::after{
    content:none!important;
  }
  .product-page .color-swatch[aria-checked="true"]{
    border-color:#0a0a0a!important;
    background:#fff!important;
    box-shadow:0 4px 12px rgba(10,10,12,.12)!important;
  }

  .product-page .storages{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(44px,1fr))!important;
    gap:2px!important;
    inline-size:100%!important;
    min-inline-size:0!important;
    padding:2px!important;
    border:1px solid #e5e5e9!important;
    border-radius:14px!important;
    background:#f5f5f7!important;
  }
  .product-page .storage-opt{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    inline-size:100%!important;
    min-inline-size:0!important;
    min-block-size:44px!important;
    padding:8px 5px!important;
    border:0!important;
    border-radius:10px!important;
    background:transparent!important;
    font-size:12.5px!important;
    line-height:1.25!important;
    text-align:center!important;
    white-space:normal!important;
    box-shadow:none!important;
    transition:background-color .2s ease,color .2s ease,box-shadow .2s ease!important;
  }
  .product-page .storage-opt:hover,
  .product-page .storage-opt:focus-visible{
    background:#fff!important;
  }
  .product-page .storage-opt[aria-checked="true"]{
    background:#0a0a0a!important;
    color:#fff!important;
    box-shadow:0 5px 14px rgba(10,10,12,.18)!important;
  }
  .product-page .storage-opt .price-diff{
    display:none!important;
  }
  .product-page .tax-status{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .product-page .product-configurator-purchase{
    display:block!important;
    padding-top:9px!important;
  }
  .product-page .actions{
    direction:inherit!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:stretch!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    padding:0!important;
  }
  .product-page .actions .btn{
    min-inline-size:0!important;
    min-block-size:52px!important;
    margin:0!important;
    padding:12px 14px!important;
    border-radius:16px!important;
    font-size:14px!important;
    font-weight:800!important;
    transform:none!important;
    box-shadow:none!important;
  }
  .product-page .actions .btn-secondary{
    order:-1!important;
    flex:1 1 auto!important;
    inline-size:auto!important;
    background:#0a0a0a!important;
    color:#fff!important;
    border-color:#0a0a0a!important;
    box-shadow:0 8px 18px rgba(10,10,12,.17)!important;
  }
  .product-page .actions .btn-primary{
    flex:0 0 52px!important;
    inline-size:52px!important;
    background:#fff!important;
    color:#0a0a0a!important;
    border:1.5px solid #dedee3!important;
    font-size:0!important;
  }
  .product-page .actions .btn-primary svg{
    inline-size:20px!important;
    block-size:20px!important;
    margin:0!important;
  }

  /* Feature highlights: dense, easy to scan, still large enough to tap/read. */
  .product-page .features{
    padding:42px 16px!important;
  }
  .product-page .features-head{
    margin-bottom:22px!important;
  }
  .product-page .features-eyebrow{
    margin-bottom:7px!important;
    font-size:9px!important;
    letter-spacing:2.2px!important;
  }
  .product-page .features-title{
    font-size:1.75rem!important;
  }
  .product-page .features-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .product-page .feature-card{
    min-block-size:142px!important;
    padding:15px!important;
    border-radius:16px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    transform:none!important;
  }
  .product-page .feature-icon{
    inline-size:38px!important;
    block-size:38px!important;
    margin-bottom:12px!important;
    border-radius:11px!important;
  }
  .product-page .feature-icon svg{
    inline-size:19px!important;
    block-size:19px!important;
  }
  .product-page .feature-name{
    margin-bottom:5px!important;
    font-size:13.5px!important;
    line-height:1.45!important;
  }
  .product-page .feature-desc{
    font-size:11.5px!important;
    line-height:1.6!important;
  }

  /* Technical specifications: a compact data list, not a wall of cards. */
  .product-page .specs,
  .product-page .specs-section{
    padding:44px 16px!important;
  }
  .product-page .specs-head{
    margin-bottom:20px!important;
    text-align:start!important;
  }
  .product-page .specs-eyebrow{
    margin-bottom:6px!important;
    font-size:9px!important;
    letter-spacing:2.2px!important;
  }
  .product-page .specs-title{
    font-size:1.75rem!important;
  }
  .product-page .specs-table,
  .product-page .specs-section .specs-table,
  .product-page .specs-section #specsTable{
    display:block!important;
    inline-size:100%!important;
    padding:0!important;
    border-block:1px solid #e6e6ea!important;
    border-radius:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  .product-page .specs-table .spec-row,
  .product-page .specs-section .spec-row,
  .product-page .specs-section #specsTable .spec-row{
    display:grid!important;
    grid-template-columns:minmax(78px,28%) minmax(0,1fr)!important;
    gap:12px!important;
    inline-size:100%!important;
    min-block-size:0!important;
    padding:12px 0!important;
    border:0!important;
    border-bottom:1px solid #ececef!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .product-page .specs-table .spec-row:last-child,
  .product-page .specs-section .spec-row:last-child{
    border-bottom:0!important;
  }
  .product-page .spec-label{
    font-size:12.5px!important;
    line-height:1.55!important;
  }
  .product-page .spec-value{
    min-inline-size:0!important;
    font-size:12.5px!important;
    line-height:1.55!important;
    color:#56565d!important;
    overflow-wrap:anywhere!important;
  }
}

@media(max-width:360px){
  .product-page .config{
    padding-inline-start:74px!important;
  }
  .product-page .config legend{
    inline-size:68px!important;
  }
  .product-page .config legend .selected{
    max-inline-size:68px!important;
  }
  .product-page .storage-opt,
  .product-page .actions .btn-secondary{font-size:12px!important}
  .product-page .actions .btn-primary{
    font-size:0!important;
    line-height:0!important;
  }
}

/* Performance: skip rendering below-the-fold homepage sections until the user
   scrolls near them. Nothing is removed — every section renders on demand and
   `contain-intrinsic-size:auto` lets the browser remember each real height after
   first paint, so scrolling stays smooth with no layout jump. */
.home-page .home-products,
.home-page #tradein,
.home-page #about,
.home-page #stores,
.site-footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}

footer .footer-credit{
  display:block;
  margin-block-start:4px;
  line-height:1.5;
  white-space:nowrap;
}
footer .footer-credit b{
  font-weight:700;
  color:rgba(255,255,255,.82);
}

/* Mobile footer: a deliberate reading order instead of three cramped columns.
   Brand/contact → shop links → services/support → legal/social. */
@media(max-width:640px){
  footer .footer-top,
  body[class] footer .footer-top{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:20px!important;
    row-gap:0!important;
    inline-size:100%!important;
    padding:0 0 22px!important;
    text-align:start!important;
  }

  footer .footer-top>:first-child,
  body[class] footer .footer-top>:first-child{
    grid-column:1/-1!important;
    padding:0 0 16px!important;
    border-bottom:1px solid rgba(255,255,255,.1)!important;
    text-align:center!important;
  }
  footer .footer-brand-name,
  body[class] footer .footer-brand-name{
    margin:0 0 8px!important;
    text-align:center!important;
  }
  footer .footer-contact,
  body[class] footer .footer-contact{
    display:inline-flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    margin:0!important;
    max-inline-size:100%!important;
    padding:0 6px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.035)!important;
  }
  footer .footer-contact li,
  body[class] footer .footer-contact li{
    min-inline-size:0!important;
    margin:0!important;
  }
  footer .footer-contact li+li,
  body[class] footer .footer-contact li+li{
    border-inline-start:1px solid rgba(255,255,255,.12)!important;
  }
  footer .footer-contact a,
  body[class] footer .footer-contact a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-block-size:44px!important;
    padding:0 9px!important;
    gap:6px!important;
    font-size:12px!important;
    line-height:1.2!important;
    direction:ltr!important;
    white-space:nowrap!important;
  }
  footer .footer-contact a svg,
  body[class] footer .footer-contact a svg{
    inline-size:15px!important;
    block-size:15px!important;
    flex:0 0 auto!important;
  }

  footer .footer-top>.footer-col,
  body[class] footer .footer-top>.footer-col{
    min-inline-size:0!important;
    padding-block-start:20px!important;
  }
  footer .footer-top>.footer-col:nth-child(2),
  body[class] footer .footer-top>.footer-col:nth-child(2){
    grid-column:1/-1!important;
    padding-block-end:16px!important;
    border-bottom:1px solid rgba(255,255,255,.1)!important;
  }
  footer .footer-top>.footer-col:nth-child(3),
  body[class] footer .footer-top>.footer-col:nth-child(3){
    grid-column:1!important;
  }
  footer .footer-top>.footer-col:nth-child(4),
  body[class] footer .footer-top>.footer-col:nth-child(4){
    grid-column:2!important;
  }
  footer .footer-col h3,
  footer .footer-col h4,
  body[class] footer .footer-col h3,
  body[class] footer .footer-col h4{
    margin:0 0 8px!important;
    font-size:15px!important;
    text-align:start!important;
  }
  footer .footer-col ul,
  body[class] footer .footer-col ul{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    margin:0!important;
  }
  footer .footer-top>.footer-col:nth-child(2) ul,
  body[class] footer .footer-top>.footer-col:nth-child(2) ul{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:18px!important;
  }
  footer .footer-col li,
  body[class] footer .footer-col li{margin:0!important;min-inline-size:0!important}
  footer .footer-col a,
  body[class] footer .footer-col a{
    display:flex!important;
    align-items:center!important;
    /* 40px was 4px short of the 44px minimum in WCAG 2.5.8 and Apple's HIG;
       the link box already reserved the space, so raising it moves no text. */
    min-block-size:44px!important;
    padding:5px 0!important;
    font-size:13px!important;
    line-height:1.5!important;
    overflow-wrap:anywhere!important;
  }

  footer .footer-bottom,
  body[class] footer .footer-bottom{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:14px!important;
    margin:18px 0 0!important;
    text-align:center!important;
  }
  footer .footer-copy,
  body[class] footer .footer-copy{
    max-inline-size:100%!important;
    font-size:11.5px!important;
    line-height:1.6!important;
    text-align:center!important;
  }
  footer .footer-social,
  body[class] footer .footer-social{
    display:flex!important;
    grid-template-columns:none!important;
    justify-content:center!important;
    gap:10px!important;
  }
  footer .footer-social a,
  body[class] footer .footer-social a{
    inline-size:40px!important;
    block-size:40px!important;
  }
}

/* Services page mobile sizing audit: compact without shrinking tap targets. */
@media(max-width:640px){
  .services-page .repair-hero{
    padding:28px 16px 26px!important;
    background-color:#050505!important;
    background-image:
      linear-gradient(90deg,rgba(5,5,5,.34) 0%,rgba(5,5,5,.48) 40%,rgba(5,5,5,.88) 100%),
      linear-gradient(180deg,rgba(5,5,5,.08) 0%,rgba(5,5,5,.2) 54%,#050505 100%),
      url('../images/iphone-exploded-repair.webp?v=2')!important;
    background-position:center,center,34% center!important;
    background-size:cover,cover,auto 118%!important;
  }
  .services-page .repair-hero::before{
    opacity:.32!important;
  }
  .services-page .repair-kicker{
    margin-bottom:7px!important;
    font-size:9px!important;
    letter-spacing:2.2px!important;
  }
  .services-page .repair-title{
    max-inline-size:360px!important;
    margin-bottom:12px!important;
    font-size:clamp(2rem,8.2vw,2.45rem)!important;
    line-height:1.08!important;
    letter-spacing:-.7px!important;
  }
  .services-page .repair-lead{
    max-inline-size:520px!important;
    margin-bottom:16px!important;
    font-size:14px!important;
    line-height:1.72!important;
  }
  .services-page .repair-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-bottom:16px!important;
  }
  .services-page .repair-actions .btn{
    inline-size:100%!important;
    min-block-size:44px!important;
    padding:9px 10px!important;
    font-size:12.5px!important;
    line-height:1.35!important;
  }
  .services-page .repair-trust{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    max-inline-size:100%!important;
  }
  .services-page .repair-trust-item{
    flex-direction:column!important;
    justify-content:center!important;
    min-block-size:92px!important;
    gap:5px!important;
    padding:8px 4px!important;
    border-radius:14px!important;
    text-align:center!important;
  }
  .services-page .repair-trust-icon{
    inline-size:32px!important;
    block-size:32px!important;
  }
  .services-page .repair-trust-icon svg{
    inline-size:16px!important;
    block-size:16px!important;
  }
  .services-page .repair-trust-text strong,
  .services-page .repair-trust-item strong{
    margin:0!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
  .services-page .repair-trust-text span,
  .services-page .repair-trust-item span{
    font-size:9px!important;
    line-height:1.35!important;
  }

  .services-page .repair-shell{
    padding:32px 16px!important;
  }
  .services-page .repair-wrap{
    gap:12px!important;
  }
  .services-page .repair-sidebar{
    gap:10px!important;
  }
  .services-page .repair-info{
    padding:14px!important;
    border-radius:16px!important;
  }
  .services-page .repair-info h2,
  .services-page .repair-info h3{
    margin-bottom:6px!important;
    font-size:16px!important;
    line-height:1.4!important;
  }
  .services-page .repair-info p{
    font-size:12.5px!important;
    line-height:1.7!important;
  }
  .services-page .repair-info ul{
    gap:6px!important;
    margin-top:10px!important;
  }
  .services-page .repair-info li{
    gap:7px!important;
    font-size:12.5px!important;
    line-height:1.55!important;
  }
  .services-page .repair-info svg{
    inline-size:16px!important;
    block-size:16px!important;
  }

  .services-page .repair-form-card{
    padding:16px!important;
    border-radius:18px!important;
  }
  .services-page .repair-form-head{
    margin-bottom:14px!important;
  }
  .services-page .repair-form-head h2{
    font-size:26px!important;
    line-height:1.2!important;
  }
  .services-page .repair-form-head p{
    margin-top:5px!important;
    font-size:12.5px!important;
    line-height:1.65!important;
  }
  .services-page .repair-badge{
    margin-top:8px!important;
    padding:5px 9px!important;
    font-size:9px!important;
    letter-spacing:1.1px!important;
  }
  .services-page .repair-form{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px 10px!important;
  }
  .services-page .repair-field{
    gap:5px!important;
    min-inline-size:0!important;
  }
  .services-page .repair-field label{
    font-size:12px!important;
    line-height:1.45!important;
  }
  .services-page .repair-field input,
  .services-page .repair-field select,
  .services-page .repair-field textarea{
    min-block-size:46px!important;
    padding:9px 10px!important;
    border-radius:12px!important;
  }
  .services-page .repair-field textarea{
    min-block-size:90px!important;
  }
  .services-page .repair-choice-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .services-page .repair-choice span{
    min-block-size:44px!important;
    padding:6px!important;
    border-radius:11px!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
  .services-page .repair-helper{
    font-size:11px!important;
    line-height:1.55!important;
  }
  .services-page .repair-submit-row{
    gap:10px!important;
    margin-top:0!important;
  }
  .services-page .repair-note{
    max-inline-size:none!important;
    font-size:11.5px!important;
    line-height:1.6!important;
  }
  .services-page .repair-submit-row .btn{
    min-block-size:44px!important;
    padding:9px 18px!important;
    font-size:13px!important;
  }

  .services-page .repair-steps{
    padding:38px 16px!important;
  }
  .services-page .repair-section-head{
    margin-bottom:18px!important;
  }
  .services-page .repair-section-head .sec-eyebrow{
    margin-bottom:5px!important;
    font-size:9px!important;
    letter-spacing:2px!important;
  }
.services-page .repair-section-head .sec-title, .services-page .repair-section-head .tradein-title{
    font-size:26px!important;
    line-height:1.28!important;
  }
  .services-page .repair-section-head .sec-desc{
    margin-top:7px!important;
    font-size:12.5px!important;
    line-height:1.65!important;
  }
  .services-page .repair-step-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .services-page .repair-step{
    min-block-size:152px!important;
    padding:13px!important;
    border-radius:16px!important;
  }
  .services-page .repair-step b{
    inline-size:30px!important;
    block-size:30px!important;
    margin-bottom:10px!important;
    font-size:12px!important;
  }
  .services-page .repair-step h3{
    margin-bottom:5px!important;
    font-size:14px!important;
    line-height:1.45!important;
  }
  .services-page .repair-step p{
    font-size:11.5px!important;
    line-height:1.6!important;
  }

  .services-page .repair-faq{
    padding:0 16px 32px!important;
  }
  .services-page .repair-faq-inner{
    gap:8px!important;
  }
  .services-page .repair-faq details{
    border-radius:14px!important;
  }
  .services-page .repair-faq summary{
    display:flex!important;
    align-items:center!important;
    min-block-size:48px!important;
    padding:11px 14px!important;
    font-size:14px!important;
    line-height:1.5!important;
  }
  .services-page .repair-faq details p{
    padding:0 14px 13px!important;
    font-size:12.5px!important;
    line-height:1.7!important;
  }

  .services-page .cta-wrap{
    margin:28px auto 34px!important;
    padding:0 16px!important;
  }
  .services-page .cta{
    display:grid!important;
    justify-items:center!important;
    gap:15px!important;
    padding:24px 18px!important;
    border-radius:18px!important;
    text-align:center!important;
  }
  .services-page .cta-tag{
    margin-bottom:9px!important;
    padding:5px 11px!important;
    font-size:9px!important;
    letter-spacing:1.6px!important;
  }
  .services-page .cta-text h3{
    margin-bottom:6px!important;
    font-size:26px!important;
    line-height:1.3!important;
  }
  .services-page .cta-text p{
    max-inline-size:340px!important;
    font-size:12.5px!important;
    line-height:1.7!important;
  }
  .services-page .cta>.btn{
    min-block-size:44px!important;
    padding:9px 22px!important;
    font-size:13px!important;
  }
}

@media(max-width:360px){
  .services-page .repair-form,
  .services-page .repair-choice-grid,
  .services-page .repair-step-grid{
    grid-template-columns:1fr!important;
  }
  .services-page .repair-actions{
    grid-template-columns:1fr!important;
  }
}

/* ─── Unified static product experience V3 ───
   Apple product pages use old per-product HTML, while Tech/Gaming use the
   shared dynamic template. live-product.js marks only the static pages with
   .static-product-page so this layer can give all of them the same compact,
   premium hierarchy without leaking into category or dashboard screens. */
.static-product-page .phero{
  /* The hero used to be forced LTR so the info block landed left of the image.
     Both children now pin their own grid track explicitly (below), so the
     override bought nothing for layout while it re-ordered every Arabic
     sentence in the hero: runs like "4K120fps" split into "4" + "K120fps" and
     the copy sat left-aligned against a fully RTL page. Matches the
     max-width:960px block, which already restores rtl. */
  direction:rtl!important;
  grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr)!important;
  gap:clamp(32px,4vw,64px)!important;
  align-items:start!important;
  max-width:1440px!important;
  padding:28px 48px 46px!important;
}
.static-product-page .phero-info{
  direction:inherit!important;
  min-width:0!important;
  padding-top:8px!important;
  /* Pin both hero children to their own track. With auto-placement the info
     block lands in column 1 while it is still the grid's only parsed child and
     jumps once the image element arrives — one reflow of the entire hero, which
     is the single largest layout shift on these pages (CLS 0.43-0.55 against a
     0.10 budget). Explicit placement makes the first layout the final one. */
  grid-column:1!important;
  grid-row:1!important;
}
.static-product-page .phero-image{
  grid-column:2!important;
  grid-row:1!important;
  position:sticky!important;
  top:86px!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  place-items:center!important;
  gap:12px!important;
  min-width:0!important;
  width:100%!important;
  height:540px!important;
  min-height:540px!important;
  max-height:540px!important;
  padding:24px!important;
  overflow:hidden!important;
  border:1px solid #ececef!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,#fafafa 0%,#f2f2f5 100%)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.055)!important;
}
.static-product-page .phero-image::before{inset:12%!important;pointer-events:none!important}
.static-product-page .phero-image .product-photo{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:430px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 22px 36px rgba(12,12,14,.14))!important;
}
.static-product-page .phero-image.has-catalog-gallery .product-photo{max-height:390px!important}
.static-product-page .catalog-gallery{
  z-index:4!important;
  flex-wrap:nowrap!important;
  max-width:100%!important;
  margin:0!important;
  padding:3px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.static-product-page .catalog-gallery::-webkit-scrollbar{display:none!important}
.static-product-page .catalog-gallery-thumb{
  width:58px!important;
  height:58px!important;
  flex:0 0 58px!important;
  border:1.5px solid #dedee3!important;
  border-radius:15px!important;
  box-shadow:none!important;
}
.static-product-page .catalog-gallery-thumb.active{
  border-color:#1d1d1f!important;
  box-shadow:0 0 0 2px #fff,0 0 0 3px #1d1d1f!important;
}
.static-product-page .phero-eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  margin:0 0 12px!important;
  padding:0 11px!important;
  border-radius:999px!important;
  background:#f2f2f4!important;
  color:#5c5c62!important;
  font-size:10px!important;
  letter-spacing:2.2px!important;
}
.static-product-page .phero-title{
  margin:0 0 10px!important;
  color:#1d1d1f!important;
  font-size:clamp(2.65rem,4.5vw,4.25rem)!important;
  line-height:1.02!important;
  letter-spacing:-.055em!important;
}
.static-product-page .phero-tagline{
  max-width:620px!important;
  margin:0 0 16px!important;
  color:#6e6e73!important;
  font-size:14px!important;
  line-height:1.7!important;
}
.static-product-page .phero-rating{display:none!important}
.static-product-page .phero-price-block{
  display:flex!important;
  align-items:center!important;
  min-height:104px!important;
  margin:0 0 12px!important;
  padding:18px 22px!important;
  border:1px solid #e8e8eb!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,#f7f7f9,#efeff2)!important;
}
/* Product pages ship a blanket `html[data-theme="dark"] a{color:#fff!important}`
   in their inline <style>. It also caught the two links that carry their own
   white pill background, painting white text on white: the Trade-In CTA and
   the keyboard skip link both went blank. Re-assert their own colour at a
   higher specificity instead of touching 42 page files. */
html[data-theme="dark"] body .tcta-btn,
html[data-theme="dark"] body .skip-link{
  color:#000!important;
}

/* The currency <small> comes before the amount in the markup, so its gap
   belongs on the inline-end. Every product page ships margin-inline-start,
   which parked the space on the far side of "EGP" and glued it to the digits
   (invisible while the hero was force-LTR, obvious once it went back to rtl). */
.static-product-page .phero-price small{
  margin-inline-start:0!important;
  margin-inline-end:6px!important;
}
.static-product-page .phero-price{
  margin:0!important;
  color:#1d1d1f!important;
  font-size:clamp(2.45rem,4vw,3rem)!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
}
.static-product-page .product-configurator{
  display:block!important;
  margin:0!important;
  padding:12px!important;
  border:1px solid #e7e7ea!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 18px 55px rgba(0,0,0,.055)!important;
}
.static-product-page .product-configurator-head{display:none!important}
.static-product-page .product-configurator-options{
  display:grid!important;
  gap:9px!important;
  margin:0 0 10px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.static-product-page .product-configurator-options>.config{
  position:relative!important;
  display:block!important;
  min-height:68px!important;
  margin:0!important;
  /* The 92px is the gutter the absolutely-positioned legend below sits in, and
     that legend is placed with `inset-inline-start`. So this has to be logical
     too: as a physical `padding-right` the two part company the moment the box
     runs ltr — which the hero does, `.phero` being forced ltr to order its grid
     columns — leaving the gutter on the right while the label is painted on the
     left, printing "اللون" across the first swatch. Identical under rtl. */
  padding:12px!important;
  padding-inline-start:92px!important;
  border:1px solid #e9e9ed!important;
  border-radius:16px!important;
  background:#fff!important;
}
.static-product-page .product-configurator-options>.config:not(:last-child){border-bottom:1px solid #e9e9ed!important}
.static-product-page .config legend{
  position:absolute!important;
  inset-inline-start:12px!important;
  /* Aligned to the swatch circles, not to the box: the box also contains the
     colour names under the circles, so centring on it drops the label into the
     gap between the two rows. 12px block padding + half of the 42px swatch puts
     the label's centre on the circles' centre — and keeps it on the FIRST row
     if the swatches ever wrap, which 50% would not. */
  top:33px!important;
  transform:translateY(-50%)!important;
  display:block!important;
  width:70px!important;
  margin:0!important;
  padding:0!important;
  color:#1d1d1f!important;
  /* The label reads "Color", so it takes the Latin face and the same small
     uppercase treatment the page already uses for its section eyebrows
     ("TECH SPECS", "BUILT TO IMPRESS") — a form label that matches the design
     language instead of shouting at 13px/800. Colour is left alone: #1d1d1f on
     #fff and #f5f5f7 on #09090b both clear 4.5:1 comfortably. */
  font-family:var(--font-en,'Inter',-apple-system,BlinkMacSystemFont,sans-serif)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  line-height:1.4!important;
}
.static-product-page .config legend::before{content:none!important}
/* The block above — and the two later rules that retune its tracking to .07em
   and .6px — all assume the legend reads "Color". It does not always: the
   storage and accessory fieldsets carry Arabic ("السعة", "الخيار") through the
   same selector, and there Inter has no Arabic glyphs at all while the tracking
   prises apart joined letterforms. Those legends are invisible today only
   because :has(.storages) hides them further down, which means the mistake is
   masked rather than absent — un-hide one, or generate a legend whose fieldset
   has no .storages, and it renders as broken Latin.
   Keyed off the lang="en" swatch-name span, which only the colour legend owns,
   so the Latin treatment stays where the Latin label is. */
.static-product-page .config legend:not(:has([lang="en"])){
  font-family:var(--font-ar,'IBM Plex Sans Arabic',sans-serif)!important;
  letter-spacing:normal!important;
  text-transform:none!important;
}
/* The uppercase/tracking above dresses the word "Color". This span is the
   SELECTED COLOUR NAME, which narrow layouts un-hide inside the same legend —
   inheriting that treatment turned "Space Gray" into "SPACE GRAY". Reset it so
   the label's styling can never reach a proper noun. */
.static-product-page .config legend .selected{
  display:none!important;
  text-transform:none!important;
  letter-spacing:normal!important;
}
.static-product-page .config:has(.storages){padding:10px 12px!important}
.static-product-page .config:has(.storages) legend{display:none!important}
.static-product-page .colors{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:8px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
/* الخيارات بتتقاسم الصف بالتساوي بدل ما عرض كل واحد يتحدّد بطول اسمه.
   قبل كده كان `Natural Titanium` وإخواته بيوصلوا الأربعة لعرض أكبر من
   الحاوية، فاللون الرابع ينزل سطر لوحده يتيمًا — والحساب كان بيختلف مع
   عرض الحاوية نفسه، فتظبيطه بالبكسل كان هيفضل هشّ. مع flex:1 1 0 الصف
   بيفضل واحد مهما كان عدد الألوان أو طول أسماءها، و min-width بيحمي
   مساحة اللمس (الدائرة نفسها 42px). */
.static-product-page .catalog-color-option{flex:1 1 0!important;min-width:44px!important;gap:4px!important;grid-template-columns:minmax(0,1fr)!important}
.static-product-page .color-swatch{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
}
.static-product-page .catalog-color-name{font-size:10px!important}
/* نفس منطق .catalog-color-option فوق، بس لخيارات السعة. الأساس بيدي
   .storage-opt عرض `auto` وحد أدنى 92px، فمنتج الكتالوج مسجّل له سعة واحدة
   بيرسم شريحة 92px لوحدها في صف 540px — الكارت بيبان فاضي وكأنه مكسور،
   والشريحة بتتلزق في طرف واحد. flex:1 1 0 بيخلي الصف متقسّم بالتساوي مهما
   كان عدد السعات: واحدة تملا الصف، اتنين نص نص، تلاتة تلت لكل واحدة.
   مقصورة على .catalog-storage-config عشان مبدّل الضريبة (.tax-status)
   يفضل بشبكته الخاصة جوّه كارت السعر. */
.static-product-page .catalog-storage-config .storages>.storage-opt{flex:1 1 0!important;text-align:center!important}
.static-product-page .storages{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.static-product-page .storage-opt{
  width:auto!important;
  min-width:92px!important;
  min-height:44px!important;
  padding:9px 15px!important;
  border:1.5px solid #d8d8dd!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#1d1d1f!important;
  font-size:13px!important;
  box-shadow:none!important;
}
.static-product-page .storage-opt[aria-checked="true"]{
  border-color:#0a0a0a!important;
  background:#0a0a0a!important;
  color:#fff!important;
  box-shadow:0 6px 14px rgba(10,10,12,.15)!important;
}
.static-product-page .storage-opt .price-diff{display:none!important}
.static-product-page .product-configurator-purchase{display:block!important;padding:0!important}
.static-product-page .actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
}
.static-product-page .actions .btn{
  width:100%!important;
  min-width:0!important;
  min-height:52px!important;
  margin:0!important;
  padding:11px 14px!important;
  border-radius:14px!important;
  font-size:14px!important;
  line-height:1.35!important;
  box-shadow:none!important;
  transform:none!important;
}
.static-product-page .actions .btn svg{
  width:19px!important;
  height:19px!important;
  max-width:19px!important;
  max-height:19px!important;
  flex:0 0 19px!important;
}
.static-product-page .actions .btn-primary{
  background:#1d1d1f!important;
  color:#fff!important;
  border:1px solid #1d1d1f!important;
}
.static-product-page .actions .btn-secondary{
  order:0!important;
  background:#fff!important;
  color:#1d1d1f!important;
  border:1.5px solid #dedee3!important;
}
.static-product-page .actions .btn[data-oos-contact]{background:#fff!important;color:#1d1d1f!important}
.static-product-page .actions.has-three-actions{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.static-product-page .actions.has-three-actions .btn-buy-now{
  background:#1d1d1f!important;
  color:#fff!important;
  border-color:#1d1d1f!important;
}
.static-product-page .actions.has-three-actions .btn-primary,
.static-product-page .actions.has-three-actions .btn-product-inquiry{
  background:#fff!important;
  color:#1d1d1f!important;
  border:1.5px solid #dedee3!important;
}
.static-product-page #oos-banner{
  justify-content:flex-start!important;
  margin:0!important;
  padding:0 4px 10px!important;
}
.static-product-page #soldOutStamp{
  width:min(230px,66%)!important;
  filter:drop-shadow(0 6px 12px rgba(230,30,30,.14))!important;
}
.static-product-page .quick-facts{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  margin:10px 0 0!important;
}
.static-product-page .quick-facts li{
  min-width:0!important;
  min-height:64px!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:5px!important;
  padding:8px 5px!important;
  border:1px solid #eeeeF1!important;
  border-radius:14px!important;
  background:#fafafa!important;
  color:#5c5c62!important;
  font-size:10.5px!important;
  line-height:1.4!important;
  text-align:center!important;
}
.static-product-page .quick-facts svg{width:19px!important;height:19px!important;color:#1d1d1f!important}
.static-product-page .product-specs-disclosure>summary{list-style:none!important;cursor:pointer!important}
.static-product-page .product-specs-disclosure>summary::-webkit-details-marker{display:none!important}
.static-product-page .product-specs-summary{
  display:flex!important;
  align-items:end!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin:0 0 16px!important;
  padding:0 0 14px!important;
  border-bottom:1px solid #e8e8eb!important;
  text-align:start!important;
}
.static-product-page .product-specs-summary-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
  border:1px solid #e3e3e7!important;
  border-radius:50%!important;
  background:#fff!important;
  color:#5f5f65!important;
  font:400 22px/1 Inter,Arial,sans-serif!important;
  transition:transform .2s ease!important;
}
.static-product-page .product-specs-disclosure[open] .product-specs-summary-icon{transform:rotate(45deg)!important}
.static-product-page .specs{padding:34px 48px 52px!important}
.static-product-page .specs-head{text-align:start!important}
.static-product-page .specs-table{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.static-product-page .specs-table .spec-row{
  display:block!important;
  min-height:84px!important;
  padding:14px 16px!important;
  border:1px solid #e8e8eb!important;
  border-radius:15px!important;
  background:#fafafa!important;
}
.static-product-page .spec-label{margin-bottom:5px!important;color:#6e6e73!important;font-size:12px!important}
.static-product-page .spec-value{color:#1d1d1f!important;font-size:14px!important;font-weight:650!important;line-height:1.65!important}
.static-product-page .features{padding:64px 32px!important}
.static-product-page .features-head{margin-bottom:30px!important}
.static-product-page .feature-card{padding:28px 24px!important}
.static-product-page .tcta-wrap{margin:42px auto!important}
.static-product-page .related{padding-top:48px!important;padding-bottom:56px!important}

@media(max-width:960px){
  .static-product-page .phero{
    direction:rtl!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:16px 20px 34px!important;
  }
  .static-product-page .phero-info,
  .static-product-page .phero-image{
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .static-product-page .phero-image{position:static!important;order:1!important}
  .static-product-page .phero-info{order:2!important;direction:rtl!important}
}

/* Product pages reuse the site header: force the same LTR bar as the
   homepage (home.css sets direction:ltr on .site-nav) so the logo stays
   on the left everywhere instead of flipping to the right on RTL pages. */
.static-product-page .site-nav{direction:ltr}

@media(max-width:640px){
  .static-product-page{padding-bottom:0!important;background:#fff!important}
  .static-product-page #tip-cart-fab{display:none!important}
  .static-product-page .site-nav{height:60px!important;padding:0 1rem!important;direction:ltr!important}
  /* Keep English model names intact inside Arabic taglines: isolate them as
     one LTR run so "A19 Pro" never splits across lines on narrow screens. */
  .static-product-page .phero-tagline [lang="en"]{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
  .static-product-page .logo{font-size:19px!important;gap:.55rem!important}
  .static-product-page .logo img{width:34px!important;height:34px!important}
  .static-product-page .nav-actions{gap:.35rem!important}
  .static-product-page .nav-icon,
  .static-product-page .theme-toggle,
  .static-product-page .hamburger{min-width:44px!important;min-height:44px!important;padding:9px!important}
  .static-product-page .announcement-ticker,
  .static-product-page .breadcrumb-bar{display:none!important}

  .static-product-page .phero{gap:12px!important;padding:12px 16px 18px!important}
  /* One height with or without the thumbnail strip, as the MacBook block
     below already does. live-product.js adds .has-catalog-gallery only after
     the catalog arrives; the box used to grow 248 -> 304px at that moment and
     push the whole purchase section down (CLS 0.09 on a cold mobile load). */
  .static-product-page .phero-image{
    order:1!important;
    width:100%!important;
    height:304px!important;
    min-height:304px!important;
    max-height:304px!important;
    padding:12px!important;
    border:0!important;
    border-radius:24px!important;
    background:linear-gradient(145deg,#f8f8fa 0%,#f1f1f4 100%)!important;
    box-shadow:none!important;
  }
  /* The 304px repeated here is not redundant: `.product-page .phero-image
     .has-catalog-gallery` earlier in this file sets block-size up to 440px
     at this same specificity, and only this later rule keeps it out. Without
     it the box jumped 304 -> 440px once the gallery mounted (CLS 0.13). */
  .static-product-page .phero-image.has-catalog-gallery{
    height:304px!important;
    min-height:304px!important;
    max-height:304px!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:8px!important;
  }
  .static-product-page .phero-image .product-photo{max-height:268px!important}
  .static-product-page .phero-image.has-catalog-gallery .product-photo{max-height:226px!important}
  .static-product-page .catalog-gallery{gap:7px!important;padding:2px!important}
  .static-product-page .catalog-gallery-thumb{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
    border-radius:11px!important;
  }
  .static-product-page .phero-info{order:2!important;display:block!important;padding:0!important}
  .static-product-page .phero-eyebrow{display:none!important}
  .static-product-page .phero-title{
    margin:2px 2px 0!important;
    font-size:clamp(2.1rem,10.5vw,2.65rem)!important;
    line-height:1!important;
    letter-spacing:-.05em!important;
  }
  .static-product-page .phero-tagline{
    margin:8px 2px 12px!important;
    font-size:14px!important;
    line-height:1.7!important;
  }
  .static-product-page .phero-price-block{
    min-height:76px!important;
    margin:0 0 9px!important;
    padding:14px 16px!important;
    border:0!important;
    border-radius:17px!important;
    background:#f5f5f7!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px 14px!important;
    grid-template-columns:none!important;
    grid-template-areas:none!important;
  }
  .static-product-page .phero-price-block.has-tax-summary{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    grid-template-columns:none!important;
    grid-template-areas:none!important;
  }
  .static-product-page .phero-price-block.has-tax-summary .phero-price{grid-area:auto!important}
  .static-product-page .phero-price-block > .tax-status-config{
    grid-area:auto!important;
    min-width:0!important;
    width:100%!important;
  }
  .static-product-page .phero-price{font-size:2.25rem!important;letter-spacing:-.04em!important}
  .static-product-page .phero-price small{font-size:.82rem!important}
  .static-product-page .product-configurator{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .static-product-page .product-configurator-options{gap:8px!important;margin-bottom:8px!important}
  .static-product-page .product-configurator-options>.config{
    min-height:68px!important;
    /* logical for the same reason as the desktop rule above */
    padding:10px!important;
    padding-inline-start:78px!important;
    border:1px solid #e8e8ec!important;
    border-radius:16px!important;
  }
  .static-product-page .config legend{
    inset-inline-start:12px!important;
    /* 10px block padding + half of the 38px mobile swatch — same reasoning as
       the desktop rule. */
    top:29px!important;
    width:58px!important;
    font-size:10px!important;
    letter-spacing:.07em!important;
  }
  .static-product-page .config:has(.storages){padding:10px!important}
  .static-product-page .colors{gap:5px!important}
  .static-product-page .color-swatch{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
  .static-product-page .storages{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .static-product-page .storage-opt{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:8px 10px!important;
  }
  .static-product-page #oos-banner{padding:0 2px 7px!important}
  .static-product-page #soldOutStamp{width:128px!important;max-width:42%!important}
  .static-product-page .actions{
    position:sticky!important;
    bottom:max(10px,env(safe-area-inset-bottom,10px))!important;
    z-index:40!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)!important;
    gap:7px!important;
    margin:0 0 8px!important;
    padding:7px!important;
    border:1px solid rgba(0,0,0,.08)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 14px 38px rgba(0,0,0,.14)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  .static-product-page .actions .btn,
  .static-product-page .actions .btn-primary,
  .static-product-page .actions .btn-secondary{
    display:inline-flex!important;
    flex:initial!important;
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    padding:9px 8px!important;
    border-radius:13px!important;
    font-size:12.5px!important;
    line-height:1.3!important;
    white-space:nowrap!important;
  }
  .static-product-page .actions .btn svg{width:18px!important;height:18px!important}
  .static-product-page .actions.has-three-actions,
  .static-product-page .product-purchase-shell .actions.has-three-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .static-product-page .actions.has-three-actions .btn-buy-now,
  .static-product-page .product-purchase-shell .actions.has-three-actions .btn-buy-now{
    grid-column:1/-1!important;
    grid-row:1!important;
    order:-1!important;
  }
  .static-product-page .quick-facts{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:0!important;
  }
  .static-product-page .quick-facts li{
    min-height:62px!important;
    padding:6px 4px!important;
    border:0!important;
    background:#f7f7f8!important;
    font-size:9.6px!important;
  }

  .static-product-page .features{padding:38px 16px!important}
  .static-product-page .features-head{margin-bottom:18px!important}
  .static-product-page .features-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .static-product-page .feature-card{min-height:132px!important;padding:14px!important;border-radius:16px!important}
  .static-product-page .feature-icon{width:36px!important;height:36px!important;margin-bottom:10px!important}
  .static-product-page .feature-name{font-size:13px!important}
  .static-product-page .feature-desc{font-size:11px!important;line-height:1.55!important}

  .static-product-page .specs{padding:18px 16px 34px!important}
  .static-product-page .product-specs-summary{
    align-items:center!important;
    margin:0!important;
    padding:10px 0!important;
    border:0!important;
  }
  .static-product-page .product-specs-summary .specs-eyebrow{display:none!important}
  .static-product-page .product-specs-summary .specs-title{font-size:1.45rem!important}
  .static-product-page .specs-table{
    display:block!important;
    margin-top:8px!important;
    border-block:1px solid #e6e6ea!important;
  }
  .static-product-page .specs-table .spec-row{
    display:grid!important;
    grid-template-columns:minmax(78px,28%) minmax(0,1fr)!important;
    gap:12px!important;
    min-height:0!important;
    padding:12px 0!important;
    border:0!important;
    border-bottom:1px solid #ececef!important;
    border-radius:0!important;
    background:transparent!important;
  }
  .static-product-page .specs-table .spec-row:last-child{border-bottom:0!important}
  .static-product-page .spec-label,
  .static-product-page .spec-value{font-size:12.5px!important;line-height:1.55!important}
  .static-product-page .tcta-wrap{margin:26px auto!important;padding:0 16px!important}
  .static-product-page .tcta{padding:24px 18px!important;border-radius:18px!important}
  .static-product-page .related{padding:34px 16px 42px!important}
  .static-product-page footer{margin-top:0!important;padding-bottom:6rem!important}
}

html[data-theme="dark"] .static-product-page .phero-title,
html[data-theme="dark"] .static-product-page .phero-price,
html[data-theme="dark"] .static-product-page .config legend,
html[data-theme="dark"] .static-product-page .spec-value{color:#f5f5f7!important}
html[data-theme="dark"] .static-product-page .phero-image,
html[data-theme="dark"] .static-product-page .phero-price-block,
html[data-theme="dark"] .static-product-page .quick-facts li{background:#111114!important;border-color:#29292e!important}
html[data-theme="dark"] .static-product-page .product-configurator,
html[data-theme="dark"] .static-product-page .product-configurator-options>.config{background:#09090b!important;border-color:#29292e!important}
html[data-theme="dark"] .static-product-page .actions{background:rgba(12,12,14,.9)!important;border-color:#2a2a2e!important}
/* The light layer paints an option pill white and the checked one #0a0a0a.
   On a black page that reads backwards: the unchecked pills are the bright
   ones and the checked one all but vanishes, so a customer buying 256GB خالص
   الضريبة saw 512GB and عليه ضريبة highlighted. Six dark pages carried their
   own copy of these rules and six did not (iphone-17 and iphone-15-plus read
   inverted, iphone-17-air and iphone-16-plus showed no selection at all), so
   the dark state lives here once for every dark page. */
html[data-theme="dark"] .static-product-page .storage-opt{background:#111114!important;color:#f5f5f7!important;border-color:#34343a!important}
html[data-theme="dark"] .static-product-page .storage-opt:hover{border-color:#74747d!important}
html[data-theme="dark"] .static-product-page .storage-opt[aria-checked="true"]{background:#f5f5f7!important;color:#08080a!important;border-color:#f5f5f7!important}
html[data-theme="dark"] .static-product-page .storage-opt .price-diff{color:#a1a1a6!important}
html[data-theme="dark"] .static-product-page .storage-opt[aria-checked="true"] .price-diff{color:#5c5c62!important}
html[data-theme="dark"] .static-product-page .product-specs-summary-icon{background:#111114!important;border-color:#33333a!important;color:#eee!important}
/* The light layer above paints the trust facts #5c5c62 on #fafafa and their
   icons the near-black ink #1d1d1f. Only the card background had a dark
   counterpart, so in dark mode the label landed at 2.84:1 and the icon at
   1.05:1 — invisible. The ink has to flip alongside the surface. */
html[data-theme="dark"] .static-product-page .quick-facts li{color:#c7c7cc!important}
html[data-theme="dark"] .static-product-page .quick-facts svg{color:#f5f5f7!important}
/* Same omission on the spec sheet, in both of its treatments: the desktop rows
   are #fafafa cards on #e8e8eb and the mobile rows are #e6e6ea / #ececef
   hairlines. Neither had a dark counterpart, so the sheet kept painting a white
   card under white values (1.04:1). The dark side mirrors the same two shapes —
   a card above 640, borderless rows below — so only the colours change. */
html[data-theme="dark"] .static-product-page .specs-table{border-block-color:#29292e!important}
html[data-theme="dark"] .static-product-page .specs-table .spec-row{border-color:#29292e!important}
@media(min-width:641px){
  html[data-theme="dark"] .static-product-page .specs-table .spec-row{background:#111114!important}
}

/* A page that declares `data-theme-locked` is drawn for one theme only (see
   js/theme-toggle.js). Its theme button has nothing left to switch, so hide it
   here rather than from script — a stylesheet rule is in effect on the first
   paint, while hiding it after load would pop the nav sideways. The language
   button borrows .theme-toggle for its styling, so it is excluded. */
html[data-theme-locked] #themeToggle,
html[data-theme-locked] .theme-toggle:not(.lang-toggle){display:none!important}

/* The .features band is #0a0a0a on every product page, and its eyebrow ships as
   rgba(255,255,255,.4) — 3.77:1, under AA for 13px text, on 43 pages. Same value
   iphone-17-pro already used locally, applied once here instead. */
.features-eyebrow{color:#c7c7cc!important}

@media(prefers-reduced-motion:reduce){
  .static-product-page .product-specs-summary-icon{transition:none!important}
}

/* Match every MacBook to the same large mobile product framing. Wide source
   images fill the gallery naturally; square transparent canvases are scaled
   just enough to give the visible laptop the same footprint. */
@media(max-width:640px){
  .static-product-page.product-is-macbook .phero-image,
  .static-product-page.product-is-macbook .phero-image.has-catalog-gallery{
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
  }
  .static-product-page.product-is-macbook .phero-image .product-photo,
  .static-product-page.product-is-macbook .phero-image.has-catalog-gallery .product-photo{
    width:100%!important;
    max-height:260px!important;
  }
  .static-product-page.product-is-macbook .phero-image .product-photo.macbook-square-canvas{
    transform:scale(1.58)!important;
    transform-origin:center 46%!important;
  }
}

/* ─── Product purchase card V5 ───
   On mobile, price, tax, warranty, options and trust facts read as one card.
   The wrapper is layout-neutral on wider screens. */
.static-product-page .product-purchase-shell{display:contents!important}
.static-product-page .phero-price-block.has-tax-summary{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(220px,.72fr)!important;
  grid-template-areas:"label label" "price tax" "warranty warranty"!important;
  align-items:center!important;
  gap:8px 18px!important;
}
.static-product-page .tax-price-label{
  grid-area:label!important;
  display:block!important;
  color:#6e6e73!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.45!important;
}
.static-product-page .phero-price-block.has-tax-summary .phero-price{grid-area:price!important}
.static-product-page .phero-price-block>.tax-status-config{
  grid-area:tax!important;
  min-width:220px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.static-product-page .phero-price-block>.tax-status-config legend{display:none!important}
.static-product-page .tax-status{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
.static-product-page .tax-status .storage-opt{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  padding:8px 10px!important;
  border-radius:999px!important;
  font-family:var(--font-ar,'IBM Plex Sans Arabic',sans-serif)!important;
  font-size:12.5px!important;
}
.static-product-page .tax-paid-warranty{
  grid-area:warranty!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-width:0!important;
  width:100%!important;
  margin:4px 0 0!important;
  padding:13px 15px!important;
  border:2px solid #16803f!important;
  border-radius:14px!important;
  background:#effaf3!important;
  color:#166534!important;
  box-shadow:none!important;
}
.static-product-page .tax-paid-warranty[hidden]{display:none!important}
.static-product-page .tax-paid-warranty-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  color:#15803d!important;
}
.static-product-page .tax-paid-warranty-icon svg{width:23px!important;height:23px!important}
.static-product-page .tax-paid-warranty-copy{
  display:grid!important;
  min-width:0!important;
  flex:1 1 auto!important;
  gap:0!important;
  color:#111!important;
  text-align:end!important;
}
.static-product-page .tax-paid-warranty-copy strong{
  color:#111!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.35!important;
}
.static-product-page .tax-paid-warranty-copy small{
  color:#2f5e40!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.4!important;
}

html[data-theme="dark"] .static-product-page .tax-price-label{color:#a1a1a6!important}
html[data-theme="dark"] .static-product-page .tax-paid-warranty{
  border-color:#2aa65a!important;
  background:#0d2a19!important;
  color:#86efac!important;
}
html[data-theme="dark"] .static-product-page .tax-paid-warranty-icon{color:#4ade80!important}
html[data-theme="dark"] .static-product-page .tax-paid-warranty-copy strong{color:#ecfdf3!important}
html[data-theme="dark"] .static-product-page .tax-paid-warranty-copy small{color:#9bd9ae!important}

@media(max-width:640px){
  .static-product-page .product-purchase-shell{
    display:block!important;
    width:100%!important;
    margin:12px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .static-product-page .product-purchase-shell>.phero-price-block{
    margin:0 0 9px!important;
    padding:14px!important;
    border:0!important;
    border-radius:20px!important;
    background:#f4f4f6!important;
  }
  .static-product-page .product-purchase-shell>.phero-price-block.has-tax-summary{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
    grid-template-areas:"price tax" "warranty warranty"!important;
    align-items:center!important;
    min-height:0!important;
    column-gap:10px!important;
    row-gap:9px!important;
  }
  .static-product-page .product-purchase-shell .tax-price-label{display:none!important}
  .static-product-page .product-purchase-shell .phero-price{
    justify-self:start!important;
    width:100%!important;
    margin:0!important;
    direction:ltr!important;
    text-align:left!important;
    font-size:clamp(1.85rem,8.7vw,2.2rem)!important;
    white-space:nowrap!important;
  }
  .static-product-page .product-purchase-shell .phero-price small{font-size:.72rem!important}
  .static-product-page .phero-price-block>.tax-status-config{
    justify-self:stretch!important;
    align-self:center!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  .static-product-page .phero-price-block>.tax-status-config legend{display:none!important}
  .static-product-page .phero-price-block>.tax-status-config .tax-status{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .static-product-page .phero-price-block>.tax-status-config .storage-opt{
    min-width:0!important;
    min-height:44px!important;
    padding:6px!important;
    border-width:1.5px!important;
    border-radius:12px!important;
    font-size:11px!important;
    line-height:1.35!important;
    white-space:normal!important;
  }
  .static-product-page .tax-paid-warranty{
    min-height:48px!important;
    margin:0!important;
    padding:7px 10px!important;
    border-width:1.5px!important;
    border-radius:12px!important;
  }
  .static-product-page .tax-paid-warranty-icon{
    flex-basis:28px!important;
    width:28px!important;
    height:28px!important;
  }
  .static-product-page .tax-paid-warranty-icon svg{width:20px!important;height:20px!important}
  .static-product-page .tax-paid-warranty-copy strong{font-size:12.5px!important;line-height:1.25!important}
  .static-product-page .tax-paid-warranty-copy small{font-size:10px!important;line-height:1.3!important}

  .static-product-page .product-purchase-shell .product-configurator{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .static-product-page .product-purchase-shell .product-configurator-options{
    gap:0!important;
    margin-bottom:8px!important;
    border:1px solid #e5e5e9!important;
    border-radius:18px!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  .static-product-page .product-purchase-shell .product-configurator-options>.config{
    min-height:0!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
  }
  .static-product-page .product-purchase-shell .product-configurator-options>.config:not(:last-child){
    border-bottom:1px solid #ececef!important;
  }
  .static-product-page .product-purchase-shell .catalog-color-config{
    padding:12px!important;
  }
  .static-product-page .product-purchase-shell .catalog-color-config legend{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    display:block!important;
    width:100%!important;
    min-height:20px!important;
    margin:0 0 8px!important;
    padding:0!important;
    text-align:start!important;
  }
  .static-product-page .product-purchase-shell .catalog-color-config legend .selected{
    position:absolute!important;
    top:0!important;
    left:0!important;
    display:block!important;
    width:auto!important;
    max-width:none!important;
    color:#6e6e73!important;
    direction:ltr!important;
    white-space:nowrap!important;
    text-align:left!important;
    font-family:var(--font-en,Inter,sans-serif)!important;
    font-size:12px!important;
    font-weight:700!important;
  }
  .static-product-page .product-purchase-shell .catalog-color-config .colors{
    direction:ltr!important;
    justify-content:flex-start!important;
    gap:8px!important;
  }
  .static-product-page .product-purchase-shell .catalog-storage-config{
    padding:10px!important;
  }
  .static-product-page .product-purchase-shell .catalog-storage-config .storages{
    gap:6px!important;
  }
  .static-product-page .product-purchase-shell .catalog-storage-config .storage-opt{
    min-height:46px!important;
    border-radius:12px!important;
    font-size:12.5px!important;
  }
  /* سعة واحدة: الشبكة الأساسية عمودين، فالشريحة بتقعد في نص الصف والنص
     التاني يفضل فاضي. عمود واحد بيخلي الخيار الوحيد ياخد الصف كله. */
  .static-product-page .catalog-storage-config .storages:has(>.storage-opt:only-child){
    grid-template-columns:minmax(0,1fr)!important;
  }
  .static-product-page .catalog-storage-config .storages:has(>.storage-opt:nth-child(3):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .static-product-page .catalog-storage-config .storages:has(>.storage-opt:nth-child(4):last-child){
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .static-product-page .catalog-storage-config .storages:has(>.storage-opt:nth-child(3):last-child) .storage-opt{
    padding-inline:5px!important;
    font-size:12px!important;
  }
  .static-product-page .catalog-storage-config .storages:has(>.storage-opt:nth-child(4):last-child) .storage-opt{
    padding-inline:3px!important;
    font-size:11.5px!important;
  }
  .static-product-page .product-purchase-shell .actions{
    position:sticky!important;
    bottom:max(10px,env(safe-area-inset-bottom,10px))!important;
    z-index:45!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)!important;
    gap:7px!important;
    direction:ltr!important;
    margin:0 0 8px!important;
    padding:7px!important;
    border:1px solid rgba(0,0,0,.08)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 12px 32px rgba(0,0,0,.13)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  .static-product-page .product-purchase-shell .actions .btn{
    min-height:50px!important;
    direction:inherit!important;
    border-radius:13px!important;
  }
  .static-product-page .product-purchase-shell .quick-facts{
    gap:6px!important;
    margin-top:0!important;
    padding-top:0!important;
    border-top:0!important;
  }
  .static-product-page .product-purchase-shell .quick-facts li{
    min-height:56px!important;
    padding:6px 4px!important;
    border:0!important;
    border-radius:13px!important;
    background:#f7f7f8!important;
  }
  .static-product-page .product-purchase-shell .quick-facts svg{
    width:17px!important;
    height:17px!important;
  }
  html[data-theme="dark"] .static-product-page .product-purchase-shell{
    border-color:transparent!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html[data-theme="dark"] .static-product-page .product-purchase-shell>.phero-price-block{
    border-color:transparent!important;
    background:#151518!important;
  }
  html[data-theme="dark"] .static-product-page .product-purchase-shell .product-configurator-options,
  html[data-theme="dark"] .static-product-page .product-purchase-shell .product-configurator-options>.config{
    border-color:#29292e!important;
    background:#09090b!important;
  }
  html[data-theme="dark"] .static-product-page .product-purchase-shell .actions{
    border-color:#2a2a2e!important;
    background:rgba(12,12,14,.94)!important;
  }
  html[data-theme="dark"] .static-product-page .product-purchase-shell .catalog-color-config legend .selected{
    color:#a1a1a6!important;
  }
}

/* ─── Touch targets on phones ─────────────────────────────────────────────
   WHY: these controls were 28–40px tall on a 375px viewport, under the 44px
   both Apple's HIG and WCAG 2.2 (2.5.8) ask for — a fingertip lands on the
   wrong footer link or misses the section link entirely.

   The same fix already existed as `.static-product-page .nav-icon…{min-width:44px}`
   for product pages only, so every other page shipped without it. These rules
   extend the identical rule to the controls that measured short site-wide.

   Height comes from min-height + centring rather than padding so the visual
   text position does not shift: the tappable box grows around the label
   instead of pushing the layout. Widths already exceeded 44px everywhere. */
@media (max-width: 640px) {
  .sec-head a.home-section-link,
  .store-featured-bottom a.store-directions,
  .social-fab-options .social-fab-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* The FAB options are icon buttons in a column — centre both axes. */
  .social-fab-options .social-fab-link {
    min-width: 44px;
    justify-content: center;
  }
}

/* ===== لقطات الخلفية الداكنة =====
   بيضبطها js/photo-backdrop.js بعد ما يقيس خلفية الصورة فعليًا.
   العرض الافتراضي (object-fit:contain داخل إطار فاتح) مبني على صورة كتالوج
   مقصوصة خلفيتها بيضا، فبيسيب اللقطة التحريرية عايمة صغيرة في نص الإطار.
   هنا الإطار بيتحوّل لخلية واحدة بتتكدّس فيها الصورة والمصغّرات: الصورة تملا
   الخلية والمصغّرات فوقها من تحت. الصورة بتفضل داخل الـflow — استخدام
   position:absolute كان بيكسر تخطيط الموبايل، لأن الإطار هناك بيترجّع
   position:static فالصورة كانت بتتمدّد بره الإطار وتغطي عنوان المنتج. */
.phero-image.has-editorial,
.phero-media.has-editorial,
.pgallery-main.has-editorial,
.static-product-page .phero-image.has-editorial {
  display: grid !important;
  grid-template: 1fr / 1fr !important;
  place-items: stretch !important;
  background: #000 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.phero-image.has-editorial > *,
.phero-media.has-editorial > *,
.pgallery-main.has-editorial > * {
  grid-area: 1 / 1;
}

.product-page .phero-media img.product-photo.is-editorial,
.product-page .pgallery-main img.product-photo.is-editorial,
.pgallery-main img.product-photo.is-editorial,
.phero-image .product-photo.is-editorial,
.static-product-page .phero-image .product-photo.is-editorial {
  inline-size: 100% !important;
  block-size: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-inline-size: none !important;
  max-block-size: none !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  transform: none !important;
}

/* المصغّرات بتتكدّس فوق الصورة، فبتتثبّت على الحافة السفلية بدل ما تتوسّط. */
.has-editorial > .catalog-gallery {
  align-self: end !important;
  justify-self: center !important;
  z-index: 4;
  margin: 0 0 14px !important;
  width: auto !important;
  max-width: 100% !important;
}

/* عدّاد الصور فوق خلفية سودا محتاج يقلب لونه عشان يفضل مقروء. */
.pgallery-main.has-editorial .pgallery-count {
  background: rgba(0, 0, 0, .55);
  border-color: rgba(255, 255, 255, .18);
  color: #f5f5f7;
}

/* ───────────────────────────────────────────────
   COMPACT MOBILE HEADER (<=480px)
   js/nav-compact.js moves #langToggle and #themeToggle out of .nav-actions
   and into the mobile menu below 480px, because the bar needs 433px to hold
   the logo plus five 44x44 targets and was pushing the hamburger off-screen.
   The 44px floor above (WCAG 2.5.8) stays intact — the controls are relocated,
   not shrunk. These rules only dress the relocated pair; the buttons keep
   their own ids, listeners and sizes.
   ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .mobile-menu-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 1rem;
    margin-top: .5rem;
  }
  /* .mobile-menu li rules add a divider between rows; this row is the last one
     and reads as a footer to the menu, so it takes a top rule instead. */
  .mobile-menu .mobile-menu-tools {
    border-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mobile-menu-tools .theme-toggle,
  .mobile-menu-tools .lang-toggle {
    flex: 0 0 auto;
  }
}

/* ───────────────────────────────────────────────
   RENDER SKIPPING — الأقسام البعيدة عن الشاشة ماتترسمش أصلًا.
   content-visibility:auto بيخلي المتصفح يتخطى layout/paint لأي قسم
   لسه بعيد عن الفيوبورت، وبيحط مسار ارتفاع تقديري عشان السكرول بار
   ميقفزش. أول ما القسم يقرّب، المتصفح يرسمه طبيعي — صفر فرق بصري.
   ─────────────────────────────────────────────── */
.section, .home-products, .tradein-section, .stats-bar,
.store-gateways, .specs-section, .rv-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ============================================================
   READABILITY FLOOR — طبقة صفحات المنتج الثابتة
   ------------------------------------------------------------
   طبقة "compact" فوق دي بتنزّل أحجام خط لحد 9.6px بـ !important،
   وده تحت حد القراءة (خصوصًا العربي). الطبقة دي بترفع الأرضية
   من غير ما تلغي الطابع المضغوط:
     • لاتيني  ≥ 12px      • عربي ≥ 13px
     • تباعد الحروف أقصاه 1.4px (التباعد العالي على خط صغير بيكسر الكلمة)
   القيم هنا هي الحد الأدنى — أي قاعدة أكبر فوق بتفضل شغالة.
   ============================================================ */
.static-product-page .phero-eyebrow{font-size:13px!important;letter-spacing:1.2px!important}
.static-product-page .phero-tagline{font-size:15px!important;line-height:1.7!important}
.static-product-page .config legend{font-size:13px!important;letter-spacing:.6px!important}
.static-product-page .product-purchase-shell .catalog-color-config legend .selected{font-size:14px!important}
/* min-width:0 لازمة عشان flex:1 1 0 فوق تقدر تقلّص الخيار فعلاً — من غيرها
   العرض الأدنى للنص بيمنع التقلّص.
   كان هنا overflow-wrap:anywhere: بيمنع الفيضان بس بيكسر جوّه الكلمة —
   بستة ألوان العمود بيبقى 70px و«Ultramarine» بيتشقّ «Ultramarin / e»،
   سطرين وكلمة مقطوعة في نص الحروف. والبديل الطبيعي (wrap:normal) أسوأ:
   بيرفع العرض الأدنى للاسم لعرض الكلمة كاملة، فعلى 390px الأسماء بتفيض
   برّه أعمدتها وتتلزق في بعض («WhiteUltramarine») والسادس ينزل يتيم.
   الحل: الالتفاف مسموح عند المسافات بس (فـ«Natural Titanium» بيبقى سطرين
   نضاف زي ما كان)، والاسم محبوس في عرض عموده — max-width:100% مع
   grid-template-columns:minmax(0,1fr) على الخيار فوق، وده اللي بيمنع تراك
   الجريد من إنه ياخد max-content ويفيض. والكلمة الواحدة اللي أعرض من
   العمود بتتقصّ بنقاط بدل ما تتشقّ. الاسم الكامل موجود أصلاً في aria-label
   وtitle الزرار، وبيتكتب كامل في عنوان الكارت أول ما يتختار. */
.static-product-page .catalog-color-name{
  font-size:13px!important;
  min-width:0!important;
  /* الاسم بياخد عرض عموده بالظبط ويلتف جوّه، من غير ما يفيض على جاره.

     قبل كده كانت القاعدة width:max-content مع max-width:calc(100% + 8px)
     وmargin-inline:-4px — الفكرة كانت إن الاسم اللي أعرض من عموده ببكسل
     أو اتنين يفيض شوية بدل ما يتقصّ بنقاط. الفكرة دي بتشتغل في Chrome
     لأنه بيعيد لفّ النص بعد ما max-width تحبس الصندوق، لكن WebKit
     (سفاري على iOS، يعني نص زوار الموقع) مابيعيدش اللفّ: بيحسب السطر
     على عرض max-content الكامل، وmax-width بتحبس الصندوق بس والنص
     بيفضل سطر واحد طالع بره حدوده.

     النتيجة على 375px في سفاري: العمود 73px والاسم محتاج 106px، فـ
     «Natural Titanium» و«Black Titanium» و«White Titanium» و«Desert
     Titanium» كانوا بيتراكبوا فوق بعض فعليًا — المسافة بينهم اتقاست
     بالسالب (−25px و−13px و−15px) والأسماء بتتقري سطر واحد ملخبط.
     الفحص في Chrome كان بيقول إنهم سطرين ومسافتهم كويسة، فالمشكلة
     ماكانتش بتبان غير على WebKit نفسه.

     width:auto بيخلي الصندوق ياخد عرض عموده (fit-content) فالنص بيلتف
     عند المسافات في المحركين الاتنين: «Black» فوق «Titanium» جوّه العمود،
     بمسافة كاملة بين كل اسم وجاره. الكلمة الواحدة اللي أعرض من عمودها
     بفرق حقيقي (زي «Ultramarine» في صف ست ألوان) بتتقصّ بنقاط زي ما
     كانت — وده مقصود: القص أأمن من الفيض، والاسم الكامل موجود في
     aria-label وtitle الزرار وبيتكتب كامل في عنوان الكارت أول ما يتختار. */
  width:auto!important;
  max-width:100%!important;
  margin-inline:0!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.static-product-page .storage-opt,
.static-product-page .tax-status .storage-opt,
.static-product-page .phero-price-block>.tax-status-config .storage-opt,
.static-product-page .product-purchase-shell .catalog-storage-config .storage-opt,
.static-product-page .catalog-storage-config .storages:has(>.storage-opt:nth-child(n)) .storage-opt{font-size:13.5px!important}
.static-product-page .tax-price-label{font-size:13.5px!important}
.static-product-page .tax-paid-warranty-copy small{font-size:13px!important;line-height:1.6!important}
.static-product-page .tax-paid-warranty-copy strong{font-size:14px!important}
.static-product-page .quick-facts li,
.static-product-page .quick-facts li span{font-size:14px!important;line-height:1.65!important}
.static-product-page .actions .btn,
.static-product-page .actions .btn-primary{font-size:15px!important}
.static-product-page .feature-name{font-size:15px!important}
.static-product-page .feature-desc{font-size:14px!important;line-height:1.7!important}
.static-product-page .spec-label,
.static-product-page .spec-value,
.specs-table .spec-label,
.specs-section .spec-label{font-size:14.5px!important;line-height:1.65!important}

/* نفس الأرضية للعناصر المشتركة في باقي الصفحات */
.features-eyebrow,.features-eyebrow span,
.specs-eyebrow,.specs-eyebrow span,
.related-eyebrow,.related-eyebrow span,
.tcta-eyebrow,.tcta-eyebrow span,
[class$="-eyebrow"],[class$="-eyebrow"] span{font-size:13px!important;letter-spacing:1.2px!important}
.related-cat,.related-cat span{font-size:13px!important;letter-spacing:1px!important}
.tcta-tag{font-size:13px!important;letter-spacing:1px!important}
.sboxes-eyebrow{font-size:14px!important}

/* Arabic is a cursive script: positive tracking prises joined letters apart and
   reads as a rendering fault, not as style. The blanket [class$="-eyebrow"]
   rule above (and the configurator's uppercase labels) were applying Latin
   letter-spacing to Arabic strings — reset it wherever the label is Arabic.
   Latin eyebrows keep their tracking. */
.sboxes-eyebrow,
.product-configurator-heading span{letter-spacing:normal!important}
.breadcrumb-bar a,.breadcrumb-bar span{font-size:14px!important}
.tip-sticky-buy small{font-size:13px}
.footer-copy,.footer-credit,.footer-credit b{font-size:13px}
.theme-toggle.lang-toggle{font-size:12.5px}

/* الأرضية على الشاشات الصغيرة كمان — استعلامات الموبايل فوق بتنزّل الأحجام تاني */
@media (max-width:640px){
  /* التخصيص هنا لازم يعادل قواعد الطبقات الأقدم (3 كلاسات أو body[class]) */
  body[class] .announcement-ticker span,
  body[class] .announcement-ticker .ticker-track span{font-size:13px!important}
  .static-product-page .product-purchase-shell .phero-price small,
  .static-product-page .phero-price small{font-size:12.5px!important}
  body[class] footer .footer-copy,
  body[class] footer .footer-credit,
  body[class] footer .footer-credit b{font-size:13px!important}
  .product-page .product-configurator-heading span{font-size:13px!important}
  .product-page .product-configurator-head>small{font-size:13px!important}
  .static-product-page .quick-facts li,
  .static-product-page .quick-facts li span{font-size:13px!important}
  .static-product-page .spec-label,
  .static-product-page .spec-value{font-size:13.5px!important}
}

/* ============================================================
   READABILITY FLOOR — الموقع كله
   ------------------------------------------------------------
   مسح على الصفحات الرئيسية لقى نصوص من 8px لـ 12.5px (منها عربي 9px).
   الأرضية: لاتيني ≥ 12px · عربي ≥ 13px. القيم دي حد أدنى —
   أي عنصر أكبر من كده مابيتأثرش.
   المصدر: فحص مباشر على index / used-phones / tech / services / products
   ============================================================ */
body[class] .count,
body[class] .cta-tag,
body[class] .drop-group,
body[class] .drop-label>span,
body[class] .eyebrow>span,
body[class] .grade,
body[class] .mini>span,
body[class] .pill>span,
body[class] .portal-hint>strong,
body[class] .portal-safe-note,
body[class] .portal-step>strong,
body[class] .prod-cat,
body[class] .prod-storage,
body[class] .repair-kicker>span,
body[class] .section-kicker>span,
body[class] .store-gateway-copy>span,
body[class] .uspec>dd{font-size:12px!important}
body[class] .ai-badge,
body[class] .ai-notes>h4,
body[class] .box-choice>span,
body[class] .btn,
body[class] .capacity-choice>span,
body[class] .cat-count,
body[class] .cat-lbl,
body[class] .condition-choice>span,
body[class] .cta-text>p,
body[class] .footer-brand-name>small,
body[class] .functional-heading>span,
body[class] .history-required,
body[class] .history-subtitle,
body[class] .history-subtitle>span,
body[class] .metric>span,
body[class] .part-chip>span,
body[class] .photo-placeholder>span,
body[class] .photo-tag,
body[class] .pill,
body[class] .portal-card-desc,
body[class] .portal-card-kicker,
body[class] .portal-confidence-card>p,
body[class] .portal-fineprint,
body[class] .portal-hint,
body[class] .portal-label,
body[class] .portal-live,
body[class] .portal-step>span,
body[class] .price,
body[class] .prod-badge,
body[class] .repair-badge,
body[class] .repair-choice>span,
body[class] .repair-field>label,
body[class] .repair-helper,
body[class] .repair-info>p,
body[class] .repair-note,
body[class] .repair-note>a,
body[class] .repair-quality-choice>span,
body[class] .repair-quality-choice>strong,
body[class] .repair-state-choice>span,
body[class] .repair-state-choice>strong,
body[class] .repair-step>p,
body[class] .repair-trust-text>span,
body[class] .repair-trust-text>strong,
body[class] .stat-lbl,
body[class] .store-badge,
body[class] .store-directions,
body[class] .textarea-meta>span{font-size:13px!important}

/* ============================================================
   iPhone 17 / APLUS — رفع أرضية النصوص الصغيرة المكسرة
   كانت kickers/badge عند 10-11px وبتباعد 2-3px فبتتكسر وتتقري بصعوبة.
   نفس القاعدة: لاتيني ≥12.5px وعربي ≥13.5px وتباعد أهدأ.
   ============================================================ */
.aplus .aplus-hcard-kicker,
.aplus .aplus-cam-kicker{font-size:13px!important;letter-spacing:1px!important;line-height:1.5!important}
.aplus .aplus-eyebrow{font-size:13px!important;letter-spacing:1.2px!important;line-height:1.6!important}
.aplus .aplus-hcard-badge,
.aplus .aplus-badge{font-size:12.5px!important;letter-spacing:.6px!important;padding:7px 14px!important}
.aplus .aplus-chip em{font-size:12.5px!important;letter-spacing:1px!important}
.aplus .aplus-hero-meta{font-size:14px!important;letter-spacing:.5px!important;line-height:1.65!important}
.aplus .aplus-hero-meta b{font-size:15px!important;letter-spacing:0!important}
.aplus .aplus-cam-feat span{font-size:14px!important;line-height:1.65!important}
.aplus .aplus-cam-feat b{font-size:14.5px!important}
.aplus .ap-credit{font-size:13.5px!important;line-height:1.8!important}
.aplus .aplus-stat span{font-size:13.5px!important}
.aplus .aplus-ditem p,
.aplus .aplus-why-card p,
.aplus .aplus-eco-list li{font-size:14px!important;line-height:1.7!important}
.aplus .aplus-hcard-desc,
.aplus .aplus-cam-body p{font-size:14.5px!important;line-height:1.75!important}