/*
 * AMPARO STORE APP UI V1
 * Solo se activa bajo html.amparo-store-app.
 * La web pública normal no cambia.
 */

html.amparo-store-app {
  width: 100%;
  min-width: 0;
  overflow-x: hidden !important;
  background: #f4f7fc !important;
  overscroll-behavior-y: contain;
}

html.amparo-store-app *,
html.amparo-store-app *::before,
html.amparo-store-app *::after {
  box-sizing: border-box;
}

html.amparo-store-app body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  overflow-x: hidden !important;

  padding-top:
    calc(64px + env(safe-area-inset-top)) !important;

  padding-bottom:
    calc(76px + env(safe-area-inset-bottom)) !important;

  background:
    linear-gradient(
      180deg,
      #f4f8ff 0%,
      #ffffff 42%,
      #f6f8fc 100%
    ) !important;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.amparo-store-app a,
html.amparo-store-app button,
html.amparo-store-app input,
html.amparo-store-app select,
html.amparo-store-app textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Evita zoom al enfocar campos. */
html.amparo-store-app input,
html.amparo-store-app select,
html.amparo-store-app textarea {
  font-size: 16px !important;
}

/* Ocultamos el header web dentro de la app. */
html.amparo-store-app #siteHeader {
  display: none !important;
}

/* El contenido se comporta como pantalla móvil real. */
html.amparo-store-app main {
  width: 100% !important;
  max-width: 520px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: 12px !important;
}

html.amparo-store-app main img,
html.amparo-store-app main video,
html.amparo-store-app main svg {
  max-width: 100%;
}

html.amparo-store-app main .overflow-x-auto,
html.amparo-store-app main .overflow-auto {
  max-width: 100%;
  overscroll-behavior-x: contain;
}

html.amparo-store-app .glass-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.amparo-store-app [class*="rounded-[30px]"],
html.amparo-store-app [class*="rounded-[34px]"] {
  border-radius: 20px !important;
}

/* ==========================================================
   TOP BAR NATIVA
   ========================================================== */

.amparo-store-topbar {
  position: fixed;
  z-index: 9990;
  left: 50%;
  top: 0;
  transform: translateX(-50%);

  width: min(100%, 520px);

  padding-top: env(safe-area-inset-top);

  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #e5edf8;

  box-shadow: 0 5px 22px rgba(16, 48, 91, 0.07);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.amparo-store-topbar-inner {
  height: 64px;
  padding: 8px 12px;

  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 8px;
}

.amparo-store-top-action {
  width: 42px;
  height: 42px;

  border: 0;
  border-radius: 15px;

  display: grid;
  place-items: center;

  background: #f0f6ff;
  color: #063476;

  text-decoration: none;
}

.amparo-store-top-action:active {
  transform: scale(.96);
}

.amparo-store-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  height: 48px;
}

.amparo-store-brand img {
  display: block;
  width: auto;
  max-width: 150px;
  height: 40px;
  object-fit: contain;
}

.amparo-store-top-right {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.amparo-store-cart {
  position: relative;
}

.amparo-store-cart-count {
  position: absolute;
  right: -5px;
  top: -5px;

  min-width: 19px;
  height: 19px;

  padding: 0 4px;
  border-radius: 999px;

  display: none;
  align-items: center;
  justify-content: center;

  border: 2px solid #fff;

  background: #ff101c;
  color: #fff;

  font-size: 9px;
  font-weight: 800;
}

/* ==========================================================
   BUSCADOR
   ========================================================== */

.amparo-store-search-panel {
  display: none;

  padding:
    0 12px
    12px;
}

.amparo-store-search-panel.is-open {
  display: block;
}

.amparo-store-search-panel form {
  display: block !important;
  margin: 0 !important;
}

.amparo-store-search-panel label {
  display: block;
  width: 100%;
}

.amparo-store-search-panel input {
  height: 48px !important;
}

/* ==========================================================
   BOTTOM NAV
   ========================================================== */

.amparo-store-bottom-nav {
  position: fixed;
  z-index: 9990;

  left: 50%;
  bottom: 0;
  transform: translateX(-50%);

  width: min(100%, 520px);

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  padding:
    7px 5px
    max(7px, env(safe-area-inset-bottom));

  border-top: 1px solid #dfe8f4;

  background: rgba(255,255,255,.98);

  box-shadow:
    0 -8px 28px rgba(17,49,96,.09);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.amparo-store-bottom-item {
  min-width: 0;
  min-height: 58px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  border: 0;
  border-radius: 14px;

  background: transparent;
  color: #75839b;

  text-decoration: none;

  font-size: 10px;
  font-weight: 700;
}

.amparo-store-bottom-item svg {
  width: 23px;
  height: 23px;
}

.amparo-store-bottom-item.is-active {
  color: #006cff;
  background: #edf5ff;
}

/* ==========================================================
   HOME
   ========================================================== */

html.amparo-store-app .v3-hero {
  min-height: 420px !important;
  border-radius: 22px !important;
}

html.amparo-store-app .v3-hero-copy {
  width: 100% !important;
  padding:
    26px 20px
    220px !important;
}

html.amparo-store-app .v3-hero-title {
  max-width: 100%;
  font-size: clamp(2rem, 10vw, 3rem) !important;
  line-height: 1 !important;
}

html.amparo-store-app .v3-hero-visual {
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 10px !important;

  width: 100% !important;
  height: 205px !important;
}

html.amparo-store-app .v3-hero-product {
  width: 53% !important;
  max-width: 230px !important;

  padding: 6px !important;

  border-radius: 17px !important;
}

/* Productos y categorías se sienten más como cards móviles. */
html.amparo-store-app .product-card,
html.amparo-store-app .category-card {
  border-radius: 18px !important;
  box-shadow:
    0 5px 18px rgba(12, 50, 99, .07) !important;
}

/* ==========================================================
   PRODUCTO
   ========================================================== */

html.amparo-store-app #productContainer {
  margin-top: 8px !important;
  gap: 12px !important;
}

html.amparo-store-app #mainImage,
html.amparo-store-app #mainVideo {
  width: 100% !important;
  height: min(88vw, 360px) !important;
  padding: 10px !important;
  object-fit: contain !important;
}

html.amparo-store-app #thumbs {
  max-width: 100%;
}

html.amparo-store-app nav.glass-card {
  border-radius: 14px !important;

  padding:
    8px 12px !important;

  box-shadow: none !important;

  background: #fff !important;
}

/* ==========================================================
   CARRITO / CHECKOUT
   ========================================================== */

html.amparo-store-app .clean-hero {
  border-radius: 20px !important;
  box-shadow:
    0 10px 25px rgba(0,108,255,.16) !important;
}

html.amparo-store-app .clean-hero > div {
  min-height: 145px !important;

  padding:
    20px 18px !important;
}

html.amparo-store-app .clean-hero h1 {
  font-size: 29px !important;
  line-height: 1 !important;
}

html.amparo-store-app .clean-hero p {
  line-height: 1.45 !important;
}

html.amparo-store-app form {
  max-width: 100%;
}

html.amparo-store-app table {
  max-width: 100%;
}

/* Evita layouts web que intenten salirse de la pantalla. */
html.amparo-store-app main > *,
html.amparo-store-app main section,
html.amparo-store-app main article {
  min-width: 0;
  max-width: 100%;
}

/* Escritorio: si alguien abre modo app en pantalla grande,
   seguimos simulando un dispositivo móvil. */
@media (min-width: 700px) {
  html.amparo-store-app {
    background: #dfe7f2 !important;
  }

  html.amparo-store-app body {
    max-width: 520px;
    margin: 0 auto !important;
    box-shadow:
      0 0 50px rgba(14, 43, 82, .15);
  }
}