/* MrAccountShop v5.22.3 — esperienza catalogo mobile */

.mobile-category-hub {
  display: none;
}

.catalog-upcoming-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 24px 0 4px;
  color: #aeb7c5;
}

.catalog-upcoming-divider::before,
.catalog-upcoming-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(72, 184, 255, .45));
}

.catalog-upcoming-divider::after {
  background: linear-gradient(90deg, rgba(72, 184, 255, .45), transparent);
}

.catalog-upcoming-divider__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(72, 184, 255, .32);
  border-radius: 999px;
  background: rgba(29, 77, 111, .22);
  color: #86d5ff;
  font: 750 .78rem/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 992px) {
  html,
  body:not([data-page="admin"]) {
    scroll-padding-top: 18px;
  }

  body:not([data-page="admin"]) {
    padding-top: 0 !important;
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    background:
      radial-gradient(circle at 50% -4%, rgba(255, 126, 0, .12), transparent 28rem),
      #080c13 !important;
  }

  /* La vecchia testata lasciava una grande fascia vuota su smartphone. */
  body:not([data-page="admin"]) .site-header {
    position: fixed !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 100040 !important;
  }

  body:not([data-page="admin"]) .site-header .header-content {
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not([data-page="admin"]) .header-row-1,
  body:not([data-page="admin"]) .header-row-3,
  body:not([data-page="admin"]) .categories-scroll-wrapper,
  body:not([data-page="admin"]) .header-row-2:not(.search-visible) {
    display: none !important;
  }

  body:not([data-page="admin"]) .header-row-2.search-visible {
    display: flex !important;
    position: fixed !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 151, 47, .42) !important;
    border-radius: 19px !important;
    background: rgba(10, 15, 24, .96) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 140, 0, .08) !important;
    backdrop-filter: blur(18px) !important;
    pointer-events: auto !important;
  }

  body:not([data-page="admin"]) .header-row-2.search-visible .search-bar-container {
    width: 100% !important;
    max-width: none !important;
  }

  body:not([data-page="admin"]) .header-row-2.search-visible .search-bar {
    min-height: 42px !important;
    border-radius: 13px !important;
    padding-inline: 42px 14px !important;
  }

  body:not([data-page="admin"]) .welcome-section[data-keep-welcome="true"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not([data-page="admin"]) .hero-wrapper {
    height: auto !important;
    min-height: 390px !important;
    max-height: none !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    background:
      radial-gradient(circle at 78% 20%, rgba(255, 116, 0, .19), transparent 36%),
      radial-gradient(circle at 14% 84%, rgba(14, 113, 182, .12), transparent 35%),
      linear-gradient(160deg, #080b11 0%, #0b111b 58%, #080b11 100%) !important;
    overflow: hidden !important;
  }

  body:not([data-page="admin"]) .hero-wrapper::before {
    content: '' !important;
    position: absolute !important;
    inset: 10% -28% auto auto !important;
    width: 78vw !important;
    aspect-ratio: 1 !important;
    border: 1px solid rgba(255, 140, 0, .08) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 80px rgba(255, 111, 0, .08) !important;
    pointer-events: none !important;
  }

  body:not([data-page="admin"]) .hero-overlay {
    padding: 38px 20px 34px !important;
  }

  body:not([data-page="admin"]) .hero-content {
    width: min(100%, 560px) !important;
    margin: 0 auto !important;
    text-align: left !important;
  }

  body:not([data-page="admin"]) .hero-welcome {
    display: block !important;
    margin-bottom: 12px !important;
    font-size: 1rem !important;
  }

  body:not([data-page="admin"]) .hero-eyebrow {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    padding: 9px 13px !important;
    font-size: clamp(.62rem, 2.8vw, .74rem) !important;
    line-height: 1.2 !important;
    letter-spacing: .095em !important;
    white-space: normal !important;
  }

  body:not([data-page="admin"]) .hero-title,
  body:not([data-page="admin"]) .hero-title-accent {
    font-size: clamp(2.25rem, 11.5vw, 3.5rem) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
  }

  body:not([data-page="admin"]) .hero-subtitle {
    display: block !important;
    max-width: 100% !important;
    margin: 18px 0 !important;
    overflow: visible !important;
    color: rgba(255, 255, 255, .64) !important;
    font-size: clamp(.84rem, 3.6vw, 1rem) !important;
    line-height: 1.6 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body:not([data-page="admin"]) .hero-price-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 14px !important;
    margin: 0 !important;
  }

  body:not([data-page="admin"]) .hero-price-badge,
  body:not([data-page="admin"]) .hero-delivery-badge {
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: clamp(.84rem, 3.6vw, 1rem) !important;
  }

  body:not([data-page="admin"]) .hero-cta-btn {
    display: none !important;
  }

  .mobile-category-hub {
    position: relative;
    z-index: 100050;
    display: block;
    width: min(calc(100% - clamp(16px, 5vw, 28px)), 600px);
    margin: clamp(10px, 2.8vw, 16px) auto 18px;
    /* Sovrascrive la vecchia regola mobile "section { overflow-x: hidden }",
       che su Safari e Samsung tagliava menu e bagliore luminoso. */
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    isolation: isolate;
  }

  .mobile-category-hub.is-open {
    z-index: 100060;
  }

  .mobile-category-toggle {
    position: relative;
    display: grid !important;
    grid-template-columns: clamp(42px, 12vw, 48px) minmax(0, 1fr) clamp(32px, 9vw, 36px);
    align-items: center;
    gap: clamp(8px, 2.7vw, 12px);
    width: 100%;
    min-height: clamp(66px, 19vw, 78px) !important;
    padding: clamp(10px, 3vw, 13px) clamp(10px, 3vw, 12px) !important;
    border: 2px solid #ff9428 !important;
    border-radius: clamp(18px, 5.5vw, 22px) !important;
    background:
      linear-gradient(135deg, rgba(255, 141, 0, .22), rgba(255, 83, 0, .08) 38%, rgba(19, 27, 41, .96) 76%) !important;
    color: #fff !important;
    box-shadow:
      0 0 0 1px rgba(255, 166, 64, .22),
      0 0 12px rgba(255, 128, 0, .78),
      0 0 28px rgba(255, 105, 0, .34),
      0 16px 38px rgba(0, 0, 0, .58),
      inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    text-align: left;
    cursor: pointer;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-category-hub.is-open .mobile-category-toggle {
    border-color: #ffae45 !important;
    box-shadow:
      0 0 0 1px rgba(255, 193, 112, .34),
      0 0 17px rgba(255, 132, 0, .92),
      0 0 38px rgba(255, 92, 0, .42),
      0 18px 42px rgba(0, 0, 0, .64),
      inset 0 1px 0 rgba(255, 255, 255, .14) !important;
  }

  .mobile-category-toggle:active {
    transform: scale(.985);
  }

  .mobile-category-toggle__icon,
  .mobile-category-toggle__chevron {
    display: grid;
    place-items: center;
  }

  .mobile-category-toggle__icon {
    width: clamp(42px, 12vw, 48px);
    height: clamp(42px, 12vw, 48px);
    border: 1.5px solid rgba(255, 174, 73, .9);
    border-radius: clamp(13px, 4vw, 15px);
    background: rgba(255, 132, 0, .14);
    color: #ff9c2e;
    box-shadow: 0 0 12px rgba(255, 125, 0, .35), inset 0 0 12px rgba(255, 133, 0, .09);
    font-size: clamp(1.05rem, 5vw, 1.25rem);
  }

  .mobile-category-toggle__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-category-toggle__copy strong {
    font: 800 clamp(.94rem, 4.35vw, 1.2rem)/1.14 Oxanium, Inter, sans-serif;
    text-wrap: balance;
  }

  .mobile-category-toggle__copy small {
    color: rgba(255, 255, 255, .58);
    font: 600 .75rem/1.25 Inter, sans-serif;
  }

  .mobile-category-toggle__chevron {
    width: clamp(32px, 9vw, 36px);
    height: clamp(32px, 9vw, 36px);
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: #ff9c2e;
    box-shadow: 0 0 10px rgba(255, 132, 0, .24);
    transition: transform .22s ease;
  }

  .mobile-category-toggle[aria-expanded="true"] .mobile-category-toggle__chevron {
    transform: rotate(180deg);
  }

  .mobile-category-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + clamp(9px, 2.8vw, 13px));
    left: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2.5vw, 10px);
    width: 100%;
    margin: 0;
    padding: clamp(8px, 2.6vw, 11px);
    border: 2px solid rgba(255, 154, 43, .94);
    border-radius: clamp(17px, 5vw, 21px);
    background: #0d131d;
    box-shadow:
      0 0 0 1px rgba(255, 188, 99, .2),
      0 0 16px rgba(255, 123, 0, .7),
      0 0 34px rgba(255, 91, 0, .3),
      0 24px 54px rgba(0, 0, 0, .72),
      inset 0 1px 0 rgba(255, 255, 255, .08);
    transform-origin: bottom center;
    animation: categoryMenuUp .2s ease both;
  }

  .mobile-category-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-right: 2px solid rgba(255, 154, 43, .94);
    border-bottom: 2px solid rgba(255, 154, 43, .94);
    background: #0d131d;
    transform: translate(-50%, -8px) rotate(45deg);
    box-shadow: 5px 5px 10px rgba(255, 116, 0, .2);
    pointer-events: none;
  }

  .mobile-category-menu[hidden] {
    display: none !important;
  }

  .mobile-category-choice {
    display: flex !important;
    min-width: 0;
    min-height: clamp(72px, 22vw, 86px) !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(6px, 2.5vw, 10px);
    padding: clamp(10px, 3.5vw, 14px) !important;
    border: 1.5px solid rgba(255, 163, 54, .82) !important;
    border-radius: clamp(13px, 4vw, 15px);
    background: linear-gradient(145deg, rgba(255, 145, 20, .11), rgba(255, 255, 255, .018));
    color: #f4f7fb !important;
    box-shadow: 0 0 11px rgba(255, 119, 0, .25), inset 0 0 13px rgba(255, 133, 0, .055);
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-category-choice:active {
    transform: scale(.97);
    border-color: rgba(255, 146, 28, .6) !important;
    background: rgba(255, 137, 0, .13);
  }

  .mobile-category-choice span {
    color: #ff9c2e;
    font-size: 1.15rem;
  }

  .mobile-category-choice strong {
    font: 750 clamp(.75rem, 3.55vw, .95rem)/1.18 Inter, sans-serif;
    overflow-wrap: anywhere;
  }

  .mobile-category-choice--switch2 {
    border-color: rgba(81, 218, 255, .84) !important;
    box-shadow: 0 0 12px rgba(42, 204, 255, .28), inset 0 0 13px rgba(42, 204, 255, .05);
  }

  .mobile-category-choice--ps5 {
    border-color: rgba(91, 145, 255, .9) !important;
    box-shadow: 0 0 12px rgba(65, 118, 255, .32), inset 0 0 13px rgba(65, 118, 255, .06);
  }

  .mobile-category-choice--software {
    border-color: rgba(163, 126, 255, .88) !important;
    box-shadow: 0 0 12px rgba(135, 85, 255, .3), inset 0 0 13px rgba(135, 85, 255, .06);
  }

  .mobile-category-choice--switch2 span { color: #76e6ff; }
  .mobile-category-choice--ps5 span { color: #78aaff; }
  .mobile-category-choice--software span { color: #b69dff; }

  .sales-counter {
    margin-top: 0 !important;
  }

  .catalog-upcoming-divider {
    margin-top: 20px;
    gap: 8px;
  }

  .catalog-upcoming-divider__label {
    padding: 7px 10px;
    font-size: .66rem;
    letter-spacing: .045em;
  }

  /* I tre elementi flottanti occupano zone diverse e non coprono il contenuto. */
  #mr-pwa-install {
    left: 10px !important;
    right: auto !important;
    bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    min-height: 44px !important;
    max-width: 124px !important;
    padding: 8px 11px !important;
    gap: 7px !important;
    font-size: .74rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  #mr-pwa-install:hover {
    transform: translateY(-1px) !important;
  }

  #mr-pwa-install .mr-pwa-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .contact-wa,
  .whatsapp-container {
    right: 10px !important;
    bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 99980 !important;
  }

  .contact-wa__btn,
  .whatsapp-btn {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 10px !important;
    animation: none !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .26) !important;
  }

  #cookie-banner,
  .cookie-banner {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    padding: 14px !important;
    border: 1px solid rgba(255, 150, 38, .35) !important;
    border-radius: 18px !important;
    background: rgba(13, 19, 29, .98) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .66) !important;
    z-index: 1000100 !important;
  }

  body.cookie-consent-open #mr-pwa-install,
  body.cookie-consent-open .contact-wa,
  body.cookie-consent-open .whatsapp-container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .bottom-nav-bar {
    z-index: 100000 !important;
    height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    border-top-color: rgba(255, 143, 20, .38) !important;
    background: rgba(9, 13, 20, .98) !important;
    backdrop-filter: blur(18px) !important;
  }
}

/* Telefoni molto stretti: tutto resta leggibile senza uscire dai bordi. */
@media (max-width: 360px) {
  .mobile-category-hub {
    width: calc(100% - 14px);
  }

  .mobile-category-toggle__copy small {
    font-size: .68rem;
  }

  .mobile-category-menu {
    gap: 7px;
    padding: 8px;
  }

  .mobile-category-choice {
    min-height: 70px !important;
    padding: 10px !important;
  }
}

/* In orizzontale le quattro scelte stanno su una riga e non rubano altezza. */
@media (max-width: 992px) and (orientation: landscape) and (max-height: 540px) {
  .mobile-category-hub {
    width: min(calc(100% - 24px), 780px);
  }

  .mobile-category-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mobile-category-choice {
    min-height: 68px !important;
    padding: 10px !important;
  }
}

@keyframes categoryMenuUp {
  from { opacity: 0; transform: translateY(10px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-category-menu,
  .mobile-category-toggle__chevron {
    animation: none !important;
    transition: none !important;
  }
}