/*
 * AUJP V32 — MOBILE PRODUCT CARD SYSTEM
 *
 * Goals:
 * - Phone: exactly one product card per row (never 2-up).
 * - Each product card is horizontal: media left / details right.
 * - Product artwork is an independent visible layer; legacy overlays
 *   are disabled on the mobile card only.
 * - Description/features are fully visible (no mobile line-clamp or
 *   "hide after 2 items" rules).
 * - Stock status gets a clear, animated in-stock/out-of-stock treatment.
 * - Desktop/tablet layouts are intentionally untouched.
 */

@media (max-width: 680px) {
  /* ===== NORMAL + RANDOM STORE CARD GRID ===== */
  .sp-product-group--main .sp-main-grid,
  .sp-product-group--random .sp-random-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  .sp-main-grid > .sp-card,
  .sp-random-grid > .sp-card,
  .sp-main-grid > .sp-card:only-child,
  .sp-random-grid > .sp-card:only-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  /* ===== HORIZONTAL CARD ===== */
  .sp-card[data-store-product] {
    display: grid !important;
    grid-template-columns: minmax(128px, 39%) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 172px !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, #0c121b 0%, #111925 100%) !important;
    border: 1px solid rgba(92, 139, 193, .22) !important;
    box-shadow:
      0 8px 24px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .sp-card[data-store-product] > * {
    min-width: 0 !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .sp-card[data-store-product]:hover {
      transform: translateY(-2px) !important;
      border-color: rgba(91, 164, 230, .42) !important;
      box-shadow:
        0 14px 30px rgba(0,0,0,.28),
        0 0 0 1px rgba(91,164,230,.07) !important;
    }
  }

  .sp-card[data-store-product]:active {
    transform: translateY(0) !important;
  }

  /* ===== ARTWORK — NEVER GET HIDDEN BY CARD OVERLAY ===== */
  .sp-card[data-store-product] .sp-card-banner {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 172px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: #070b11 !important;
    border-right: 1px solid rgba(255,255,255,.055) !important;
  }

  .sp-card[data-store-product] .sp-card-banner::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(160deg, rgba(22,34,50,.08), rgba(0,0,0,.10)) !important;
  }

  .sp-card[data-store-product] .sp-card-banner-img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
  }

  .sp-card[data-store-product] .sp-card-banner-overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
  }

  .sp-card[data-store-product] .sp-card-banner-placeholder {
    position: relative !important;
    z-index: 1 !important;
    height: 100% !important;
  }

  /* ===== STOCK STATE — CLEAR + VISIBLE ===== */
  .sp-card[data-store-product] .sp-stock-badge {
    top: 8px !important;
    right: 8px !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 23px !important;
    max-width: calc(100% - 16px) !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    font-size: .51rem !important;
    line-height: 1 !important;
    letter-spacing: .045em !important;
    font-weight: 950 !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.28) !important;
  }

  .sp-card[data-store-product] .sp-stock-badge:not(.out) {
    color: #63e4bd !important;
    background: rgba(4, 55, 45, .72) !important;
    border: 1px solid rgba(62, 219, 176, .48) !important;
    animation: aujpStockLive32 1.9s ease-in-out infinite !important;
  }

  .sp-card[data-store-product] .sp-stock-badge:not(.out)::before {
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 6px !important;
    margin: 0 !important;
    background: #46e0af !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(70,224,175,.10), 0 0 9px rgba(70,224,175,.72) !important;
    animation: aujpStockDot32 1.2s ease-in-out infinite !important;
  }

  .sp-card[data-store-product] .sp-stock-badge.out {
    color: #ff8c96 !important;
    background: rgba(74, 12, 20, .80) !important;
    border: 1px solid rgba(255, 89, 102, .54) !important;
    animation: aujpStockOut32 1.45s ease-in-out infinite !important;
  }

  .sp-card[data-store-product] .sp-stock-badge.out::before {
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 6px !important;
    margin: 0 !important;
    background: #ff5c6c !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(255,92,108,.10), 0 0 9px rgba(255,92,108,.70) !important;
    animation: none !important;
  }

  .sp-card[data-store-product] .sp-stock-badge.manual.infinite {
    color: #63e4bd !important;
    background: rgba(4, 55, 45, .72) !important;
    border-color: rgba(62, 219, 176, .48) !important;
  }

  /* ===== DETAILS COLUMN ===== */
  .sp-card[data-store-product] .sp-card-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 172px !important;
    max-height: none !important;
    padding: 10px 11px 10px !important;
    overflow: visible !important;
    flex: none !important;
  }

  .sp-card[data-store-product] .sp-card-plat {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .sp-card[data-store-product] .sp-plat-badge,
  .sp-card[data-store-product] .sp-category-pill {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 4px 7px !important;
    border-radius: 7px !important;
    font-size: .50rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .sp-card[data-store-product] .sp-card-name {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .79rem !important;
    line-height: 1.22 !important;
    font-weight: 950 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* ===== FULL DESCRIPTION — DO NOT CLIP ===== */
  .sp-card[data-store-product] .sp-feature-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  .sp-card[data-store-product] .sp-feature-list li,
  .sp-card[data-store-product] .sp-feature-list li:nth-child(n+1),
  .sp-card[data-store-product] .sp-feature-list li:nth-child(n+3) {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(224,234,247,.72) !important;
    font-size: .57rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  .sp-card[data-store-product] .sp-feature-list li::before {
    content: '✓' !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    flex: 0 0 12px !important;
    margin: .08rem 6px 0 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg,#36a6ff,#43c6a7) !important;
    box-shadow: 0 0 7px rgba(55,170,190,.22) !important;
    color: #fff !important;
    font-size: .42rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    background-image: none !important;
    transform: none !important;
    animation: none !important;
  }

  .sp-card[data-store-product] .sp-feature-list li::after {
    display: none !important;
  }

  /* ===== STATS ===== */
  .sp-card[data-store-product] .sp-card-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 1px 0 0 !important;
    padding: 6px 4px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .sp-card[data-store-product] .sp-stat {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: .51rem !important;
  }

  .sp-card[data-store-product] .sp-stat i {
    margin: 0 !important;
    font-size: .53rem !important;
    flex: 0 0 auto !important;
    color: #67bfff !important;
    text-shadow: 0 0 7px rgba(80,170,255,.20) !important;
  }

  .sp-card[data-store-product] .sp-stat-val {
    flex: 0 0 auto !important;
    font-size: .59rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  .sp-card[data-store-product] .sp-stat-lbl {
    min-width: 0 !important;
    font-size: .43rem !important;
    line-height: 1 !important;
    color: rgba(195,210,229,.56) !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .sp-card[data-store-product] .sp-stat-div {
    display: none !important;
  }

  /* ===== PRICE + BUY ===== */
  .sp-card[data-store-product] .sp-card-footer {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(90px, 42%) !important;
    align-items: end !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: auto 0 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    flex: 0 0 auto !important;
  }

  .sp-card[data-store-product] .sp-price-block {
    min-width: 0 !important;
    margin: 0 !important;
  }

  .sp-card[data-store-product] .sp-price-from {
    margin: 0 !important;
    font-size: .46rem !important;
    line-height: 1.1 !important;
  }

  .sp-card[data-store-product] .sp-price-range,
  .sp-card[data-store-product] .sp-price-free {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: .72rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
  }

  .sp-card[data-store-product] .sp-buy-btn,
  .sp-card[data-store-product] .sp-buy-btn:link,
  .sp-card[data-store-product] .sp-buy-btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border-radius: 9px !important;
    gap: 5px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
  }

  .sp-card[data-store-product] .sp-buy-btn i {
    font-size: .60rem !important;
  }

  .sp-card[data-store-product] .sp-buy-shine {
    opacity: .45 !important;
  }

  /* ===== RANDOM PRODUCT DIRECT CARD ===== */
  .sp-product-group--random .sp-card[data-store-product] {
    min-height: 172px !important;
  }

  /* ===== FLIP-RANDOM PRODUCT CARDS ===== */
  .hfr-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
  }

  .hfr-card {
    display: grid !important;
    grid-template-columns: minmax(128px,39%) minmax(0,1fr) !important;
    grid-template-rows: minmax(0,1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 150px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .hfr-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 150px !important;
    overflow: hidden !important;
    background: #070b11 !important;
  }

  .hfr-media img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
  }

  .hfr-media::after {
    display: none !important;
  }

  .hfr-state {
    z-index: 4 !important;
    top: 8px !important;
    right: 8px !important;
    font-size: .50rem !important;
    padding: 5px 7px !important;
  }

  .hfr-body {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding: 10px 11px !important;
    overflow: visible !important;
  }

  .hfr-body h4,
  .hfr-body p,
  .hfr-body ul,
  .hfr-body li {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .hfr-body h4 {
    font-size: .80rem !important;
    line-height: 1.22 !important;
    margin: 5px 0 4px !important;
  }

  .hfr-body p {
    display: block !important;
    font-size: .57rem !important;
    line-height: 1.4 !important;
    margin: 0 0 7px !important;
  }

  .hfr-body ul {
    display: grid !important;
    gap: 3px !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
  }

  .hfr-body li {
    display: block !important;
    font-size: .53rem !important;
    line-height: 1.3 !important;
    padding-left: 11px !important;
  }

  /* ===== REDUCE PAINT COST ON PHONES ===== */
  .sp-card[data-store-product] .sp-stock-badge,
  .hfr-card {
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width: 390px) {
  .sp-card[data-store-product] {
    grid-template-columns: minmax(112px,37%) minmax(0,1fr) !important;
    min-height: 158px !important;
  }

  .sp-card[data-store-product] .sp-card-banner,
  .sp-card[data-store-product] .sp-card-body {
    min-height: 158px !important;
  }

  .sp-card[data-store-product] .sp-card-body {
    padding: 9px 9px 9px !important;
    gap: 6px !important;
  }

  .sp-card[data-store-product] .sp-card-name {
    font-size: .74rem !important;
  }

  .sp-card[data-store-product] .sp-feature-list li {
    font-size: .53rem !important;
  }

  .sp-card[data-store-product] .sp-price-range,
  .sp-card[data-store-product] .sp-price-free {
    font-size: .66rem !important;
  }

  .sp-card[data-store-product] .sp-buy-btn {
    min-height: 32px !important;
    height: 32px !important;
    font-size: .54rem !important;
  }

  .sp-card[data-store-product] .sp-stock-badge {
    top: 6px !important;
    right: 6px !important;
    font-size: .46rem !important;
    min-height: 21px !important;
    padding: 4px 7px !important;
  }
}

@keyframes aujpStockLive32 {
  0%, 100% { box-shadow: 0 5px 14px rgba(0,0,0,.28), 0 0 0 rgba(70,224,175,0); }
  50% { box-shadow: 0 5px 16px rgba(0,0,0,.30), 0 0 15px rgba(70,224,175,.12); }
}

@keyframes aujpStockDot32 {
  0%, 100% { transform: scale(.92); opacity: .82; }
  50% { transform: scale(1.18); opacity: 1; }
}

@keyframes aujpStockOut32 {
  0%, 100% { box-shadow: 0 5px 14px rgba(0,0,0,.28), 0 0 0 rgba(255,92,108,0); }
  45% { box-shadow: 0 5px 16px rgba(0,0,0,.30), 0 0 16px rgba(255,92,108,.14); }
}

@media (prefers-reduced-motion: reduce) {
  .sp-card[data-store-product] .sp-stock-badge,
  .sp-card[data-store-product] .sp-stock-badge::before {
    animation: none !important;
  }
}