/* ==========================================================================
   ShapeTotal — Mobile Perfection enhancement layer
   Scope: < 992px ONLY (xs <576, sm 576-767, md 768-991). Desktop >=992 untouched.
   ========================================================================== */

/* Injected widgets live outside the media query but stay hidden on desktop */
.mp-search-btn,
.mp-searchbar,
.mp-searchbar-backdrop { display: none; }

@media (max-width: 991.98px) {

  :root {
    --mp-bg: #16283f;              /* lighter slate-navy page base */
    --mp-bg-deep: #12233c;         /* slightly deeper for layering */
    --mp-surface: rgba(31, 54, 88, 0.72);
    --mp-surface-solid: #1e3658;
    --mp-border: rgba(122, 192, 255, 0.20);
    --mp-text: #eaf4fd;
    --mp-muted: #a9c6e4;
    --mp-accent: #00d4ff;
    --mp-header-h: 60px;
    --mp-radius: 18px;
    --mp-ease: cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* ------------------------------------------------------------------
     1) ZERO horizontal overflow
     ------------------------------------------------------------------ */
  html, body {
    overflow-x: clip !important;
    max-width: 100vw;
  }
  /* decorative glow blobs: keep the mood, clip the spill */
  div.absolute.rounded-full {
    max-width: 100vw !important;
  }
  main, .product-grid, .auto-grid-2, .auto-grid-3, .auto-grid-4, .community-grid {
    max-width: 100%;
  }
  .product-grid > .group,
  .auto-grid-2 > *, .auto-grid-3 > *, .auto-grid-4 > * {
    min-width: 0;
    max-width: 100%;
  }

  /* ------------------------------------------------------------------
     2) Lighter premium palette (mobile only)
     ------------------------------------------------------------------ */
  body {
    background: var(--mp-bg) !important;
    color: var(--mp-text);
  }
  .bg-bg-void { background-color: var(--mp-bg) !important; }
  .bg-bg-void\/90 { background-color: rgba(22, 40, 63, 0.9) !important; }
  .bg-bg-void\/95 { background-color: rgba(22, 40, 63, 0.95) !important; }
  /* ambient canvases: lift brightness a notch so the page reads brighter */
  canvas.fixed.inset-0 { filter: brightness(1.16) saturate(1.06); }
  /* glass cards & surfaces */
  .card-sacred,
  .product-grid .group > div,
  .product-grid .group > a {
    background-color: var(--mp-surface) !important;
  }
  .card-sacred {
    border: 1px solid var(--mp-border) !important;
    box-shadow: 0 10px 30px rgba(3, 12, 28, 0.45), 0 1px 0 rgba(140, 200, 255, 0.10) inset !important;
  }
  .product-grid .group a[style*="aspect-ratio"] {
    background: #1b3153 !important; /* image well */
  }
  .text-text-muted { color: var(--mp-muted) !important; }
  .text-h1 { font-size: clamp(2rem, 8.4vw, 2.75rem) !important; }
  .text-h2 { font-size: clamp(1.7rem, 6.4vw, 2.25rem) !important; }

  /* ------------------------------------------------------------------
     3) Native-app style sticky header
     ------------------------------------------------------------------ */
  nav.fixed.top-0 {
    background: rgba(18, 35, 60, 0.82) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border-bottom: 1px solid rgba(122, 192, 255, 0.14) !important;
    padding-top: env(safe-area-inset-top, 0px);
  }
  nav.fixed.top-0 .max-w-7xl > .flex {
    min-height: var(--mp-header-h) !important;
    height: var(--mp-header-h) !important;
  }
  nav.fixed.top-0 button[aria-label],
  nav.fixed.top-0 > div a[href="/login"] {
    min-width: 48px !important;
    min-height: 48px !important;
  }
  nav.fixed.top-0 button[aria-label]:not([aria-label="Menu"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
  }
  @media (min-width: 768px) {
    nav.fixed.top-0 button[aria-label="Menu"] { display: none !important; }
  }

  /* Injected search icon (visible only <992px) */
  .mp-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #c9dcee;
    cursor: pointer;
    transition: background 0.25s var(--mp-ease), color 0.25s var(--mp-ease);
    -webkit-tap-highlight-color: transparent;
  }
  .mp-search-btn:active { background: rgba(122, 192, 255, 0.12); }
  .mp-search-btn svg { width: 20px; height: 20px; }

  /* Slide-down search bar (safe-area aware) */
  .mp-searchbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding: calc(env(safe-area-inset-top, 0px) + var(--mp-header-h) + 10px) 16px 14px;
    background: rgba(18, 35, 60, 0.96);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    border-bottom: 1px solid var(--mp-border);
    transform: translateY(-105%);
    opacity: 0;
    transition: transform 0.34s var(--mp-ease), opacity 0.3s var(--mp-ease);
    will-change: transform;
  }
  .mp-searchbar.mp-open { transform: translateY(0); opacity: 1; }
  .mp-searchbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mp-searchbar-field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
  }
  .mp-searchbar-field svg {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--mp-muted);
    pointer-events: none;
  }
  .mp-searchbar input {
    width: 100%;
    min-height: 48px;
    padding: 0 40px 0 42px;
    font-size: 16px; /* prevents iOS zoom */
    font-family: inherit;
    color: var(--mp-text);
    background: rgba(9, 20, 38, 0.65);
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s;
  }
  .mp-searchbar input:focus {
    border-color: var(--mp-accent);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
  }
  .mp-searchbar input::placeholder { color: #7ea0c4; }
  .mp-searchbar-clear {
    position: absolute;
    right: 6px;
    min-width: 36px;
    min-height: 36px;
    border: 0;
    background: transparent;
    color: var(--mp-muted);
    font-size: 18px;
    cursor: pointer;
  }
  .mp-searchbar-close {
    min-width: 48px;
    min-height: 48px;
    border: 1px solid var(--mp-border);
    border-radius: 14px;
    background: rgba(9, 20, 38, 0.5);
    color: var(--mp-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  .mp-searchbar-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--mp-muted);
    min-height: 16px;
  }
  .mp-searchbar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(5, 12, 26, 0.45);
    opacity: 0;
    transition: opacity 0.3s var(--mp-ease);
  }
  .mp-searchbar-backdrop.mp-open { display: block; opacity: 1; }
  .mp-searchbar.mp-open + .mp-searchbar-backdrop { display: block; }

  /* ------------------------------------------------------------------
     4) Product grid — jQuery-Mobile listview DNA
     ------------------------------------------------------------------ */
  .product-grid {
    grid-template-columns: minmax(0, 1fr) !important; /* 1 per row on xs/sm */
    gap: 1rem !important;
    scroll-snap-align: start;
  }
  .product-grid > .group { scroll-snap-align: start; }
  .product-grid .group > div {
    border-radius: var(--mp-radius) !important;
  }
  .product-grid .group a[style*="aspect-ratio"] {
    aspect-ratio: 16 / 10 !important; /* tall-ish but scannable list rows */
  }
  /* kill hover-only quick add on touch, keep one clear CTA row */
  .product-grid .group .translate-y-full {
    display: none !important;
  }
  .product-grid .group .p-3 .flex.gap-2 button,
  .product-grid .group button {
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
  .product-grid .group .p-3,
  .product-grid .group .p-3.sm\:p-4 {
    padding: 14px 16px 16px !important;
  }
  .product-grid .group h3 {
    font-size: 1.05rem !important;
    white-space: normal !important;
  }

  /* vertical scroll-snap for the product list (toggled by JS on /tienda) */
  html.mp-snap-y { scroll-snap-type: y proximity; }
  html.mp-snap-y .product-grid > .group { scroll-snap-align: start; }

  /* ------------------------------------------------------------------
     5) Filters: full-width 48px touch dropdowns
     ------------------------------------------------------------------ */
  .flex.flex-wrap.gap-3 > .relative {
    width: 100%;
  }
  .flex.flex-wrap.gap-3 > .relative > button {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: flex-start;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: var(--mp-surface) !important;
    border-color: var(--mp-border) !important;
  }
  .flex.flex-wrap.gap-3 > .relative > button > svg:last-child {
    margin-left: auto;
  }
  .flex.flex-wrap.gap-3 > .relative > button span:first-of-type {
    color: var(--mp-muted) !important;
  }
  /* dropdown panels */
  .flex.flex-wrap.gap-3 > .relative > div {
    min-width: 100% !important;
    border-radius: 14px !important;
    background: rgba(18, 35, 60, 0.98) !important;
    border-color: var(--mp-border) !important;
    box-shadow: 0 18px 44px rgba(3, 12, 28, 0.55) !important;
  }
  .flex.flex-wrap.gap-3 > .relative > div button {
    min-height: 48px !important;
    width: 100%;
    text-align: left;
    padding: 12px 16px !important;
  }

  /* inputs & textareas */
  main input:not([type="checkbox"]):not([type="radio"]),
  main select,
  main textarea {
    min-height: 48px;
    font-size: 16px;
  }

  /* ------------------------------------------------------------------
     6) Touch targets: jQuery-Mobile 48px rhythm on primary actions
     ------------------------------------------------------------------ */
  main button,
  main [role="button"] {
    min-height: 44px;
  }
  main a[href^="/producto"],
  main a[href^="/tienda"],
  section a[href="/tienda"] {
    touch-action: manipulation;
  }
  /* hero primary CTAs full-width */
  section .flex.flex-col a,
  section .flex.flex-col button {
    min-height: 52px;
  }

  /* ------------------------------------------------------------------
     7) Hero carousel: arrows off the text, snap on real scrollers
     ------------------------------------------------------------------ */
  button[aria-label="Prev"],
  button[aria-label="Next"] {
    width: 44px !important;
    height: 44px !important;
    background: rgba(18, 35, 60, 0.55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(122, 192, 255, 0.25) !important;
  }
  /* xs: lift arrows out of the headline/subtitle band, sit them above the dots row */
  @media (max-width: 575.98px) {
    button[aria-label="Prev"],
    button[aria-label="Next"] {
      top: auto !important;
      bottom: 148px;
      transform: none !important;
    }
    button[aria-label="Prev"] { left: 12px !important; }
    button[aria-label="Next"] { right: 12px !important; }
  }
  [class*="overflow-x-auto"],
  [class*="overflow-x-scroll"] {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  [class*="overflow-x-auto"] > *,
  [class*="overflow-x-scroll"] > * {
    scroll-snap-align: start;
  }

  /* ------------------------------------------------------------------
     8) Hamburger / drawer panels: slide-in + big touch rows + safe-area
     ------------------------------------------------------------------ */
  .fixed.inset-0.z-40.md\:hidden {
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--mp-header-h));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(14, 28, 50, 0.97) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    backdrop-filter: blur(24px) saturate(1.2);
    animation: mp-panel-in 0.34s var(--mp-ease);
  }
  @keyframes mp-panel-in {
    from { transform: translateX(6%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  .fixed.inset-0.z-40 a,
  .fixed.inset-0.z-40 button {
    min-height: 52px;
  }
  .fixed.inset-0.z-40 nav a,
  .fixed.inset-0.z-40 .flex.flex-col > a {
    display: flex;
    align-items: center;
    font-size: 1.08rem;
    border-radius: 12px;
  }

  /* cart drawer: match lighter palette + safe-area */
  .fixed.top-0.right-0.bottom-0.z-\[60\] {
    background: rgba(18, 35, 60, 0.97) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
    border-left-color: var(--mp-border) !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .fixed.top-0.right-0.bottom-0.z-\[60\] button {
    min-height: 44px;
  }

  /* generic smooth transitions for interactive bits */
  main a, main button {
    transition-duration: 0.28s;
    transition-timing-function: var(--mp-ease);
  }

  /* ------------------------------------------------------------------
     9) Adaptive perf-tier hooks (JS sets data-perf-tier on <html>)
     ------------------------------------------------------------------ */
  html[data-perf-tier="low"] canvas.fixed.inset-0,
  html[data-perf-tier="low"] .noise-overlay {
    display: none !important;
  }
  html[data-perf-tier="low"] nav.fixed.top-0,
  html[data-perf-tier="low"] .mp-searchbar,
  html[data-perf-tier="low"] .card-sacred,
  html[data-perf-tier="low"] .product-grid .group > div,
  html[data-perf-tier="low"] .fixed.inset-0.z-40.md\:hidden {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-perf-tier="low"] *,
  html[data-perf-tier="low"] *::before,
  html[data-perf-tier="low"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
  }
  html[data-perf-tier="medium"] canvas.fixed.inset-0 { filter: brightness(1.12); }
  html[data-perf-tier="medium"] .card-sacred {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /* ------------------------------------------------------------------
     10) Reduced motion
     ------------------------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    html.mp-snap-y { scroll-snap-type: none !important; }
    .mp-searchbar, .fixed.inset-0.z-40.md\:hidden { animation: none !important; transition: none !important; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ------------------------------------------------------------------
   576–991: two-up product cards (tablet)
   ------------------------------------------------------------------ */
@media (min-width: 576px) and (max-width: 991.98px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.1rem !important;
  }
  .flex.flex-wrap.gap-3 > .relative { width: calc(50% - 6px); }
}

/* Desktop safety: injected widgets never show >=992px */
@media (min-width: 992px) {
  .mp-search-btn, .mp-searchbar, .mp-searchbar-backdrop { display: none !important; }
}