/* ==========================================================
   BONGON · RESPONSIVE SYSTEM GLOBAL
   Tienda pública + área de cliente + carrito/modales.
   Capa final para tablet y móvil, manteniendo el look editorial.
   ========================================================== */

:root {
  --site-mobile-gutter: 16px;
  --site-tablet-gutter: 24px;
  --site-header-h: 80px;
}

html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
img, svg, video { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }

/* ---------- NAVBAR ---------- */
.site-navbar { min-height: 80px; }
.site-navbar__inner { min-height: 80px; }
.site-mobile-menu { border-top: 1px solid rgba(99,71,64,.08); }

@media (min-width: 768px) and (max-width: 1120px) {
  .site-navbar__inner { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .site-navbar__inner > ul { gap: 1.15rem !important; font-size: .86rem; }
  .site-navbar__inner > div.hidden.md\:flex { gap: .7rem !important; }
  .account-menu-trigger__label { display: none; }
  .account-menu-trigger { gap: 5px; }
}

@media (max-width: 767px) {
  :root { --site-header-h: 68px; --site-mobile-gutter: 14px; }

  .site-navbar { min-height: 68px; }
  .site-navbar__inner {
    min-height: 68px;
    padding: 9px var(--site-mobile-gutter) !important;
  }
  .site-navbar__brand img { height: 42px !important; }
  #mobile-menu-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8e1d7;
    border-radius: 12px;
    background: #fffdf9;
  }
  #mobile-menu-btn[aria-expanded="true"] { color: #1e3a8a; border-color: #ccd7ef; background: #f4f7ff; }

  .site-mobile-menu {
    position: fixed;
    top: 68px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    border: 1px solid #e8e1d7;
    border-radius: 15px;
    background: rgba(255,255,255,.985);
    box-shadow: 0 22px 48px -26px rgba(44,31,24,.48);
  }
  .site-mobile-menu > ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 6px !important;
    padding: 10px !important;
  }
  .site-mobile-menu li { min-width: 0; }
  .site-mobile-menu .nav-link {
    min-height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 9px !important;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    letter-spacing: .035em;
  }
  .site-mobile-menu .nav-link:hover { background: #f7f4ee; color: #1e3a8a; }
  .site-mobile-menu .border-t { grid-column: 1 / -1; width: 100%; margin: 2px 0 !important; }
  .site-mobile-menu form { width: 100%; }
  body.site-mobile-menu-open { overflow: hidden; }

  /* Modales de cuenta siempre dentro de la pantalla */
  .account-menu { width: min(300px, calc(100vw - 20px)); right: -2px; }
}

/* ---------- HOME EDITORIAL ---------- */
@media (max-width: 900px) {
  .home-hero {
    height: clamp(400px, 70vw, 520px) !important;
    min-height: 400px !important;
  }
  .home-hero__content { width: min(92vw, 520px) !important; }
  .home-hero__word { font-size: clamp(54px, 10vw, 78px) !important; }

  .home-about__inner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr) !important;
  }
  .home-about__media { min-height: 430px; padding: 2.5% 0 2.5% 1%; }
  .home-about__content { padding: 6% 5% 6% 3%; }
  .home-about__copy { font-size: clamp(15px, 1.9vw, 18px) !important; }

  .home-collection__grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .home-collection__tile { min-height: clamp(300px, 48vw, 430px) !important; }
}

@media (max-width: 640px) {
  .home-hero {
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
  }
  .home-hero__image { object-position: center 45%; }
  .home-hero__content { width: 92vw !important; padding-inline: 8px; }
  .home-hero__eyebrow { font-size: 15px !important; }
  .home-hero__word { font-size: clamp(50px, 16vw, 67px) !important; }

  .home-about__inner {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    align-items: stretch;
  }
  .home-about__media { min-height: 390px; padding: 14px 0 14px 4px !important; }
  .home-about__image { object-fit: cover !important; object-position: center; }
  .home-about__content { padding: 26px 16px 26px 14px !important; }
  .home-about__title { font-size: clamp(38px, 11vw, 52px) !important; margin-bottom: 14px !important; }
  .home-about__copy {
    font-size: 13px !important;
    line-height: 1.36 !important;
    text-align: left !important;
  }
  .home-about__copy p + p { margin-top: 10px !important; }
  .home-about__signature { margin-top: 16px !important; }
  .home-about__signature strong { font-size: 28px !important; }

  .home-collection { padding-top: 28px !important; }
  .home-collection__title { padding-inline: 18px !important; font-size: 34px !important; }
  .home-collection__grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .home-collection__tile { min-height: 270px !important; }

  .testimonials-showcase { padding: 1.8rem 0 2rem !important; }
  .testimonials-showcase__inner { width: 100%; }
  .testimonials-showcase__stage { padding: 0 2.1rem !important; }
  .testimonials-showcase__title { font-size: 2rem !important; margin-bottom: 1.1rem !important; }
}

@media (max-width: 430px) {
  .home-about__inner { grid-template-columns: 40% 60% !important; }
  .home-about__media { min-height: 360px; }
  .home-about__content { padding: 22px 12px !important; }
  .home-about__copy { font-size: 12px !important; }
  .home-about__signature strong { font-size: 24px !important; }
  .home-collection__tile { min-height: 235px !important; }
}

/* ---------- CONTACTO ---------- */
@media (max-width: 900px) {
  .contact-showcase { grid-template-columns: .9fr 1.1fr !important; }
  .contact-showcase__media { padding: 1rem !important; }
  .contact-showcase__panel { padding: 1.6rem 1.8rem 1.25rem !important; }
  .contact-showcase__form { gap: .7rem !important; }
  .contact-showcase__location-grid { gap: .65rem !important; }
}

@media (max-width: 640px) {
  .contact-showcase {
    display: grid !important;
    grid-template-columns: 38% 62% !important;
    min-height: 520px;
  }
  .contact-showcase__media { padding: 0 !important; min-height: 100%; }
  .contact-showcase__image { max-height: none !important; height: 100% !important; object-fit: cover; }
  .contact-showcase__panel { padding: 20px 14px 16px !important; min-width: 0; }
  .contact-showcase__panel h2 { font-size: clamp(28px, 9vw, 40px) !important; }
  .contact-showcase__intro { margin-bottom: .8rem !important; font-size: 12px; line-height: 1.35; }
  .contact-showcase__label { font-size: 11px; }
  .contact-showcase__input { min-height: 40px; padding: .58rem .7rem !important; font-size: 13px; }
  .contact-showcase__location-grid { grid-template-columns: 1fr !important; gap: .55rem !important; }
  .contact-showcase__actions { display: flex; justify-content: flex-end; }
  .contact-showcase__submit { width: auto !important; padding: .65rem 1rem !important; font-size: 11px; }
  .contact-showcase__info {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: .45rem !important;
    font-size: 10px;
  }
  .contact-showcase__info-link { overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
  .contact-showcase { grid-template-columns: 34% 66% !important; }
  .contact-showcase__panel { padding: 17px 11px 14px !important; }
  .contact-showcase__panel h2 { font-size: 28px !important; }
}

/* ---------- CATÁLOGO / TARJETAS ---------- */
@media (max-width: 767px) {
  .catalog-filter-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 7px !important;
    padding-bottom: 5px;
    scrollbar-width: none;
  }
  .catalog-filter-chips::-webkit-scrollbar { display: none; }
  .filter-active-badge { flex: 0 0 auto; }

  /* Tarjetas públicas: densas pero con imagen protagonista */
  #collections-grid { padding: 1.5rem 12px 2.5rem !important; }
  #products-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #products-list > * { min-width: 0; }
  [data-product-card] > .p-4 { padding: 10px !important; }
  [data-product-card] h4 { font-size: 11.5px !important; line-height: 1.28 !important; margin-bottom: 5px !important; }
  [data-product-card] h4 + * { font-size: 10px !important; }
  [data-product-card] .aspect-square { padding: 7px !important; margin-bottom: 7px !important; }
  [data-product-card] .aspect-square + .flex { margin-bottom: 6px !important; gap: 4px !important; }
  [data-product-card] .aspect-square + .flex svg { width: 21px !important; height: 21px !important; }
  [data-product-card] .aspect-square + .flex span { font-size: 9.5px !important; }
  [data-product-card] .text-lg.font-bold { font-size: 15px !important; margin-bottom: 5px !important; }
  [data-product-card] .flex.items-center.justify-center.gap-1 svg { width: 12px !important; height: 12px !important; }
  [data-product-card] .text-xs.text-gray-500.mb-4 { font-size: 9px !important; margin-bottom: 8px !important; }
  [data-product-card] .min-h-\[48px\] { min-height: 40px !important; padding-inline: 0 !important; }
  .quick-view-btn { min-height: 42px !important; }

  /* El filtro emergente nunca sale del viewport */
  [data-filter-dropdown],
  .catalog-filter-dropdown {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: auto !important;
  }
}

/* ---------- DETALLE DE PRODUCTO ---------- */
@media (max-width: 767px) {
  .product-detail-page { padding-top: calc(var(--site-header-h, 68px) + 14px) !important; padding-bottom: 28px !important; }
  .product-detail-shell { padding-left: 14px !important; padding-right: 14px !important; }
  .product-detail-grid {
    grid-template-columns: 72px minmax(0,1fr) !important;
    gap: 10px !important;
  }
  .product-detail-grid > :nth-child(1) { grid-column: 1; grid-row: 1; flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; max-height: 300px; padding-bottom: 0 !important; }
  .product-detail-grid > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .product-detail-grid > :nth-child(3),
  .product-detail-grid > :nth-child(4) { grid-column: 1 / -1; }
  .product-detail-grid #main-image { height: 300px !important; }
  .product-detail-grid > :nth-child(3) { padding-top: 4px; }
  .product-detail-grid > :nth-child(3) > .mt-auto.flex { gap: 8px !important; }
  .product-detail-grid > :nth-child(3) > .mt-auto.flex button { padding: .75rem .7rem !important; font-size: 10px !important; letter-spacing: .08em !important; }
  .product-detail-grid > :nth-child(4) { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px !important; }
  .product-detail-grid > :nth-child(4) > div { padding: 14px !important; }
  .thumb-btn { flex: 0 0 58px; }
}

/* ---------- CARRITO / CHECKOUT ---------- */
@media (max-width: 900px) {
  .checkout-form > .grid { grid-template-columns: minmax(0,1.35fr) minmax(270px,.65fr) !important; gap: 1rem !important; }
  .checkout-form .p-6 { padding: 1rem !important; }
}

@media (max-width: 767px) {
  .checkout-form {
    padding-top: calc(var(--site-header-h, 68px) + .85rem) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .checkout-form > .grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .checkout-form .space-y-6 { gap: 10px; }
  .checkout-form .p-6 { padding: 14px !important; }
  .checkout-form h2.text-xl { font-size: 1rem !important; }
  .checkout-form .grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 9px !important; }
  .checkout-form .fl-input { min-height: 42px; font-size: .86rem; }
  .checkout-form button,
  .checkout-form a.inline-flex { min-height: 42px; }
}

/* ---------- ÁREA DE CLIENTE ---------- */
@media (max-width: 767px) {
  .account-page { padding: calc(var(--site-header-h, 68px) + 18px) 12px 34px !important; }
  .account-card { border-radius: 16px !important; }
  .account-card__head { padding: 1.15rem 1rem .9rem !important; }
  .account-card__body { padding: 1rem !important; }
  .account-title { font-size: 1.5rem !important; }
  .account-subtitle { font-size: .8rem !important; }

  .profile-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .7rem !important; }
  .profile-section { padding: .9rem !important; border-radius: 13px !important; }
  .profile-section--wide { grid-column: 1 / -1 !important; }
  .profile-fields { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .65rem !important; }
  .profile-field--wide { grid-column: 1 / -1 !important; }
  .profile-actions { justify-content: flex-end !important; }

  .order-row {
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: .65rem !important;
    padding: .85rem !important;
    border-radius: 12px !important;
  }
  .order-row__meta { gap: .3rem .65rem !important; font-size: .72rem !important; }
  .order-row__action { align-self: center; }
}

@media (max-width: 480px) {
  .profile-grid { grid-template-columns: 1fr !important; }
  .profile-section--wide { grid-column: auto !important; }
  .profile-fields { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .order-row { grid-template-columns: 1fr auto !important; }
}

/* ---------- MODALES PÚBLICOS ---------- */
@media (max-width: 640px) {
  .auth-modal-overlay,
  .order-query-overlay { padding: 8px !important; align-items: center !important; }
  .auth-modal-card,
  .order-query-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }
  .auth-modal-card { padding: 1.15rem 1rem !important; }
  .order-query-card { padding: 15px !important; }

  #global-confirm-modal > div {
    width: calc(100vw - 24px) !important;
    margin-inline: 12px !important;
    padding: 1rem !important;
  }

  /* Quick view: contenido desplazable, imagen no domina toda la pantalla */
  #quick-view-modal > div,
  .quick-view-modal-card {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 16px !important;
  }
  #quick-view-modal .h-\[320px\] { height: 230px !important; min-height: 0 !important; }
}

/* ---------- FOOTER ---------- */
@media (max-width: 767px) {
  footer .container { padding-left: 16px !important; padding-right: 16px !important; }
  footer .grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 1.5rem 1rem !important; }
  footer .grid > :last-child { grid-column: 1 / -1; }
  footer { padding-top: 2.2rem !important; padding-bottom: 2rem !important; }
}

@media (max-width: 430px) {
  footer .grid { grid-template-columns: 1fr 1fr !important; }
}


/* Heroes interiores: no consumen una pantalla completa en móvil */
@media (max-width: 767px) {
  .site-hero-products, .site-hero-about {
    height: 54vh !important;
    min-height: 390px;
    max-height: 500px;
    padding-top: var(--site-header-h, 68px);
  }
  .site-hero-products h1, .site-hero-about h1 { font-size: clamp(3rem, 16vw, 5rem) !important; }
  .site-hero-products p, .site-hero-about p { max-width: 84vw; font-size: 11px !important; line-height: 1.5; }
  .site-hero-products > .absolute img, .site-hero-about > .absolute img { width: 34% !important; opacity: .82; }
}

/* Detalle de pedido de cliente */
.account-order-detail-page { padding-top: calc(var(--site-header-h, 80px) + 2rem); padding-left: 1rem; padding-right: 1rem; }
@media (max-width: 767px) {
  .account-order-detail-page { padding-top: calc(var(--site-header-h, 68px) + 1rem) !important; padding-bottom: 2rem !important; }
  .account-order-detail-card { padding: 1rem !important; border-radius: 16px !important; }
  .account-order-detail-card h2 { font-size: 1.25rem !important; margin-bottom: 1rem !important; }
  .account-order-detail-card > .grid { gap: .65rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .site-mobile-menu,
  .account-menu,
  .auth-modal-card,
  .order-query-card { transition: none !important; }
}

/* ==========================================================
   CAPA DE PULIDO · PÁGINAS SECUNDARIAS Y CONTENIDO DENSO
   ========================================================== */

/* La página independiente de contacto no queda debajo del navbar fijo. */
.contact-page { padding-top: var(--site-header-h, 80px); }

/* Valores: conserva la composición editorial de dos columnas también en móvil,
   evitando tres bloques gigantes apilados. */
@media (max-width: 767px) {
  .values-section > .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
  }
  .values-section > .grid > .flex { min-width: 0; }
  .values-section .value-card {
    min-width: 0;
    padding: 18px 14px !important;
  }
  .values-section .value-card > .flex { gap: 8px !important; margin-bottom: 10px !important; }
  .values-section .value-card svg { width: 28px !important; height: 28px !important; flex: 0 0 28px; }
  .values-section .value-card h3 {
    font-size: clamp(18px, 5.3vw, 25px) !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
  }
  .values-section .value-card p {
    font-size: 9.5px !important;
    line-height: 1.48 !important;
    letter-spacing: .035em !important;
    text-align: left !important;
  }
  .values-section .value-card--vision {
    justify-content: center;
    padding-inline: 16px !important;
  }
  .values-section .value-card--vision > .flex {
    gap: 10px !important;
    align-items: center !important;
  }
  .values-section .value-card--vision > .flex > div {
    width: 52px !important;
    height: 52px !important;
    border-width: 2px !important;
  }
  .values-section .value-card--vision > .flex > div > div:first-child {
    width: 24px !important;
    height: 24px !important;
  }
  .values-section .value-card--vision > .flex > div > div.absolute {
    width: 52px !important;
    height: 26px !important;
    border-width: 2px !important;
  }
}

@media (max-width: 380px) {
  .values-section .value-card { padding: 15px 11px !important; }
  .values-section .value-card p { font-size: 8.7px !important; line-height: 1.44 !important; }
  .values-section .value-card svg { width: 24px !important; height: 24px !important; flex-basis: 24px; }
}

/* Términos y privacidad: mejor densidad, sin perder legibilidad. */
.legal-page,
.public-flow-page {
  padding-top: calc(var(--site-header-h, 80px) + 28px) !important;
}

@media (max-width: 767px) {
  .legal-page,
  .public-flow-page {
    padding-top: calc(var(--site-header-h, 68px) + 16px) !important;
    padding-bottom: 28px !important;
  }
  .legal-page > .container,
  .public-flow-page > .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .legal-card,
  .public-flow-card {
    border-radius: 16px !important;
    padding: 18px 15px !important;
    box-shadow: 0 12px 32px -24px rgba(50, 36, 28, .42) !important;
  }
  .legal-card > h2:first-child {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.04 !important;
  }
  .legal-card h2:not(:first-child) {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
    padding-bottom: 7px !important;
  }
  .legal-card h3 { font-size: 14px !important; margin-bottom: 8px !important; }
  .legal-card p,
  .legal-card li { font-size: 12px !important; line-height: 1.55 !important; }
  .legal-card ul { margin-left: 8px !important; }
  .legal-card .mb-8 { margin-bottom: 22px !important; }
}

/* Flujo de pedidos / confirmación: tarjetas más compactas y jerarquía consistente. */
@media (max-width: 767px) {
  .checkout-success-card > .w-16.h-16 { width: 48px !important; height: 48px !important; margin-bottom: 14px !important; }
  .checkout-success-card > .w-16.h-16 svg { width: 24px !important; height: 24px !important; }
  .checkout-success-card h1 { font-size: clamp(28px, 8vw, 38px) !important; margin-bottom: 10px !important; }
  .checkout-success-card > p.text-lg { font-size: 13px !important; margin-bottom: 14px !important; }
  .checkout-success-card .bg-gray-50 { padding: 13px !important; margin-bottom: 14px !important; }
  .checkout-success-card > a { min-height: 42px; padding: 10px 18px !important; border-radius: 999px !important; font-size: 12px !important; }

  .order-query-page h1 { font-size: 27px !important; }
  .order-query-page > .container > p { font-size: 12px; margin-bottom: 18px !important; }
  .order-query-page .bg-white { border-radius: 15px !important; }
  .order-query-page .p-6,
  .order-query-page .md\:p-8 { padding: 15px !important; }
  .order-query-page form.space-y-5 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .order-query-page form.space-y-5 > * { margin: 0 !important; min-width: 0; }
  .order-query-page form.space-y-5 > button { grid-column: 1 / -1; min-height: 42px; padding-block: 9px !important; }

  .order-detail-public-card > .flex.justify-between {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .order-detail-public-card > .flex.justify-between h1 { font-size: 22px !important; line-height: 1.12; }
  .order-detail-public-card > .flex.justify-between span { padding: 6px 9px !important; font-size: 10px !important; }
  .order-detail-public-card > .grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  .order-detail-public-card > .grid h2 { font-size: 14px !important; margin-bottom: 7px !important; }
  .order-detail-public-card > .grid p { font-size: 11.5px; overflow-wrap: anywhere; }
}

/* Tablas públicas densas: en móvil cada registro se vuelve tarjeta de dos columnas. */
@media (max-width: 680px) {
  .public-responsive-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }
  .public-responsive-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .public-responsive-table tbody {
    display: grid;
    gap: 9px;
  }
  .public-responsive-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
    padding: 10px 11px;
    border: 1px solid #e8e0d8 !important;
    border-radius: 12px;
    background: #fff;
  }
  .public-responsive-table tbody td {
    display: flex;
    min-width: 0;
    min-height: 39px;
    flex-direction: column;
    justify-content: center;
    padding: 5px 2px !important;
    border: 0 !important;
    text-align: left !important;
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  .public-responsive-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: #91867e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .public-responsive-table tbody td[colspan] { grid-column: 1 / -1; align-items: center; text-align: center !important; }
  .public-responsive-table tfoot { display: block; margin-top: 10px; }
  .public-responsive-table tfoot tr {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    padding: 4px 10px;
  }
  .public-responsive-table tfoot td { padding: 4px 0 !important; font-size: 11.5px; }
  .public-responsive-table tfoot td[colspan] { grid-column: 1; text-align: left !important; }

  .assembly-list-page > .container > .flex {
    align-items: center !important;
    gap: 10px;
    margin-bottom: 14px !important;
  }
  .assembly-list-page > .container > .flex h1 { font-size: 22px !important; }
  .assembly-list-card { padding: 10px !important; background: rgba(255,255,255,.72) !important; }
  .assembly-list-card .public-responsive-table tbody tr { box-shadow: 0 7px 18px -16px rgba(53,37,29,.5); }

  .assembly-detail-page > .container > .flex { margin-bottom: 14px !important; }
  .assembly-detail-page > .container > .flex h1 { font-size: 20px !important; }
  .assembly-detail-page .lg\:grid-cols-3 { gap: 10px !important; }
  .assembly-detail-page .space-y-6 { gap: 10px; }
  .assembly-detail-page .bg-white.rounded-lg.shadow-md { padding: 14px !important; border-radius: 15px !important; }
  .assembly-detail-page .bg-white.rounded-lg.shadow-md h2 { font-size: 15px !important; margin-bottom: 10px !important; }
  .assembly-detail-page .flex.items-center.gap-4 { gap: 10px !important; }
  .assembly-detail-page .w-20.h-20 { width: 62px !important; height: 62px !important; }
}

/* Perfil: los controles importantes no se convierten en largas barras verticales. */
@media (max-width: 640px) {
  .password-modal { padding: 8px !important; }
  .password-modal__card { max-height: calc(100dvh - 16px) !important; padding: 15px 14px !important; border-radius: 17px !important; }
  .password-modal__actions {
    display: grid !important;
    grid-template-columns: .8fr 1.2fr;
    gap: 8px !important;
  }
  .password-modal__cancel,
  .password-modal__save { width: 100% !important; min-width: 0; padding: 10px 8px !important; font-size: 10px !important; }
}

/* Cookies: flotante compacto y acciones horizontales cuando hay espacio. */
@media (max-width: 640px) {
  #cookie-banner {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: none !important;
    padding: 14px !important;
    border-radius: 15px !important;
  }
  #cookie-banner h3 { font-size: 13px !important; margin-bottom: 7px !important; }
  #cookie-banner p { font-size: 10.5px !important; margin-bottom: 10px !important; }
  #cookie-banner > div > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px !important;
  }
  #cookie-banner > div > div:last-child button { padding: 9px 7px !important; font-size: 9.5px !important; }
  #cookie-banner > div > div:last-child button:last-child { grid-column: 1 / -1; }

  #preferences-modal { padding: 8px !important; }
  #preferences-modal > div {
    max-height: calc(100dvh - 16px) !important;
    border-radius: 16px !important;
  }
  #preferences-modal > div > div:first-child { padding: 13px 14px !important; }
  #preferences-modal > div > div:nth-child(2) { padding: 14px !important; }
  #preferences-modal > div > div:last-child {
    position: sticky;
    bottom: 0;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px !important;
    padding: 10px 12px !important;
    background: rgba(255,255,255,.98);
  }
  #preferences-modal > div > div:last-child > div { display: contents !important; }
  #preferences-modal > div > div:last-child button { width: 100%; padding: 9px 6px !important; font-size: 9.5px !important; }
  #preferences-modal > div > div:last-child > button:last-child { grid-column: 1 / -1; }
}

/* Última defensa para teléfonos estrechos sin sacrificar densidad. */
@media (max-width: 360px) {
  .site-mobile-menu > ul { grid-template-columns: 1fr 1fr !important; }
  #products-list { gap: 7px !important; }
  [data-product-card] > .p-4 { padding: 8px !important; }
  [data-product-card] h4 { font-size: 10.5px !important; }
  .contact-showcase { grid-template-columns: 31% 69% !important; }
  .contact-showcase__panel { padding-inline: 9px !important; }
  .public-responsive-table tbody tr { gap: 0 7px; padding: 8px 9px; }
}

/* Catálogo móvil: filtro como hoja flotante dentro del viewport. */
@media (max-width: 767px) {
  body.catalog-filter-open { overflow: hidden; }
  #collections-grid { padding-top: 22px !important; }
  #filter-toggle-btn {
    min-height: 40px;
    padding: 9px 16px !important;
    gap: 8px !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
  }
  #filter-toggle-btn svg { width: 16px !important; height: 16px !important; }
  #filter-dropdown {
    position: fixed !important;
    top: calc(var(--site-header-h, 68px) + 10px) !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    z-index: 120 !important;
  }
  #filter-dropdown > .p-6 { padding: 15px !important; }
  #filter-dropdown h3 { font-size: 16px !important; }
  #filter-dropdown h4 { font-size: 10px !important; margin-bottom: 7px !important; }
  #filter-dropdown .mb-5 { margin-bottom: 12px !important; }
  #filter-dropdown .my-4 { margin-top: 9px !important; margin-bottom: 9px !important; }
  #filter-dropdown label { padding: 6px !important; gap: 8px !important; }
  #filter-dropdown label span { font-size: 11px !important; }
  #filter-dropdown .pt-4 { position: sticky; bottom: -15px; background: #fff; padding-top: 10px !important; padding-bottom: 2px; }
  #filter-dropdown .pt-4 button { min-height: 40px; padding: 8px 10px !important; font-size: 9.5px !important; }

  /* Cabecera del catálogo más editorial y menos alta. */
  #filter-toggle-btn.closest-filter-placeholder { display: none; }
  #collections-grid + * { min-width: 0; }
}

@media (max-width: 767px) {
  .catalog-controls { padding: 22px 12px 12px !important; }
  .catalog-controls br { display: none; }
  .catalog-controls h2 { font-size: clamp(32px, 9vw, 42px) !important; margin-bottom: 5px !important; }
  .catalog-controls h2 + p { font-size: 12px !important; line-height: 1.35 !important; }
  .catalog-controls .mt-8 { margin-top: 15px !important; }
}

/* Accesos directos de cliente: compensan el navbar fijo y no quedan como cajas estrechas. */
.client-auth-page {
  padding-top: calc(var(--site-header-h, 80px) + 28px) !important;
  padding-left: 14px;
  padding-right: 14px;
  width: min(460px, 100%);
}
.client-auth-card { max-width: none !important; width: 100%; }
@media (max-width: 640px) {
  .client-auth-page { padding-top: calc(var(--site-header-h, 68px) + 16px) !important; padding-bottom: 28px !important; }
  .client-auth-card { padding: 18px 16px !important; border-radius: 16px !important; }
  .client-auth-card h2 { font-size: 22px !important; margin-bottom: 14px !important; }
  .client-auth-card form { display: grid; gap: 10px !important; }
  .client-auth-card form > .mb-4 { margin: 0 !important; }
  .client-auth-card input { min-height: 42px; }
  .client-auth-card button[type="submit"],
  .client-auth-card > a { min-height: 42px; display: flex; align-items: center; justify-content: center; }
}

/* Quick view móvil: imagen lateral compacta + controles visibles, no una torre larga. */
@media (max-width: 640px) {
  #quick-view-modal { padding: 7px !important; }
  #quick-view-modal > div.relative.bg-white {
    width: 100% !important;
    max-height: calc(100dvh - 14px) !important;
    overflow-y: auto !important;
  }
  #quick-view-modal .grid.grid-cols-1.md\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: minmax(108px, 36%) minmax(0, 64%) !important;
    align-items: stretch;
  }
  #quick-view-modal .grid.grid-cols-1.md\:grid-cols-2 > div:first-child {
    min-height: 100% !important;
    padding: 10px !important;
    position: sticky;
    top: 0;
    align-self: start;
  }
  #quick-view-modal #qv-imagen { height: min(48dvh, 280px) !important; }
  #quick-view-modal .grid.grid-cols-1.md\:grid-cols-2 > div:nth-child(2) { padding: 14px 12px !important; min-width: 0; }
  #quick-view-modal #qv-close { top: 8px !important; right: 8px !important; width: 32px !important; height: 32px !important; }
  #quick-view-modal #qv-nombre { font-size: 17px !important; line-height: 1.15; padding-right: 24px; }
  #quick-view-modal #qv-precio { font-size: 17px !important; margin-bottom: 10px !important; }
  #quick-view-modal #qv-stock { font-size: 10px !important; margin-bottom: 9px !important; }
  #quick-view-modal #qv-color-section,
  #quick-view-modal #qv-talla-section { margin-bottom: 9px !important; }
  #quick-view-modal #qv-color-section label,
  #quick-view-modal #qv-talla-section label,
  #quick-view-modal .mb-6 > label { font-size: 10px !important; margin-bottom: 5px !important; }
  #quick-view-modal .mb-6 { margin-bottom: 10px !important; }
  #quick-view-modal #qv-colores,
  #quick-view-modal #qv-tallas { gap: 5px !important; }
  #quick-view-modal #qv-qty-minus,
  #quick-view-modal #qv-qty-plus { width: 31px !important; height: 31px !important; }
  #quick-view-modal #qv-qty { width: 30px !important; font-size: 14px !important; }
  #quick-view-modal .mt-auto.flex.gap-3 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
  #quick-view-modal #qv-add-cart,
  #quick-view-modal #qv-buy-now {
    min-width: 0;
    min-height: 40px;
    padding: 7px 5px !important;
    font-size: 8px !important;
    line-height: 1.2;
    letter-spacing: .04em !important;
  }
  #quick-view-modal #qv-add-cart svg { display: none; }
}

@media (max-width: 360px) {
  #quick-view-modal .grid.grid-cols-1.md\:grid-cols-2 { grid-template-columns: 104px minmax(0,1fr) !important; }
  #quick-view-modal .grid.grid-cols-1.md\:grid-cols-2 > div:nth-child(2) { padding: 12px 9px !important; }
}

/* Accesos rápidos en el navbar móvil: carrito y perfil visibles sin abrir el menú. */
.site-mobile-quick { display: none; }
@media (max-width: 767px) {
  .site-navbar__inner { gap: 8px; }
  .site-navbar__brand { flex: 0 1 auto; min-width: 0; }
  .site-mobile-quick {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-left: auto;
  }
  .site-mobile-quick__icon,
  .site-mobile-quick__avatar {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ece5dc;
    border-radius: 50%;
    background: #fffdf9;
    color: #332824;
    text-decoration: none;
  }
  .site-mobile-quick__avatar {
    background: #f0f4ff;
    color: #24449a;
    border-color: #edf1fb;
    font-size: 11px;
    font-weight: 800;
  }
  .site-mobile-quick__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #c8894d;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    box-shadow: 0 0 0 2px #fff;
  }
}
@media (max-width: 360px) {
  .site-navbar__brand img { height: 38px !important; }
  .site-mobile-quick__icon,
  .site-mobile-quick__avatar { width: 35px; height: 35px; }
  #mobile-menu-btn { width: 39px; height: 39px; }
}

@media (max-width: 640px) {
  /* En la consulta de pedido, los datos cortos se mantienen en una fila de tres. */
  .order-query-page .grid.grid-cols-1.sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .order-query-page .grid.grid-cols-1.sm\:grid-cols-3 > div {
    min-width: 0;
    padding: 9px;
    border-radius: 10px;
    background: #faf8f5;
  }
  .order-query-page .grid.grid-cols-1.sm\:grid-cols-3 p { overflow-wrap: anywhere; }
  .order-query-page .grid.grid-cols-1.sm\:grid-cols-3 .text-xs { font-size: 8px !important; }
  .order-query-page .grid.grid-cols-1.sm\:grid-cols-3 .font-semibold { font-size: 10px !important; line-height: 1.3; }
}

/* BonGon V9 - galería interactiva de vista rápida */
#quick-view-modal .qv-galeria-nav { position:absolute; top:50%; transform:translateY(-50%); border-radius:999px; background:rgba(255,255,255,.94); box-shadow:0 2px 8px #0002; height:36px; width:36px; font-size:27px; line-height:1; color:#2b438b; z-index:2; }
#quick-view-modal .qv-galeria-nav[hidden] { display:none!important; }
#quick-view-modal .qv-galeria-prev { left:2px; }
#quick-view-modal .qv-galeria-next { right:2px; }
#quick-view-modal .qv-miniaturas { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:8px; max-height:64px; overflow-y:auto; }
#quick-view-modal .qv-miniatura { width:42px; height:42px; background:#fff; border:2px solid #dfd7cd; border-radius:8px; padding:2px; }
#quick-view-modal .qv-miniatura[aria-pressed="true"] { border-color:#203a86; }
#quick-view-modal .qv-miniatura img { width:100%; height:100%; object-fit:contain; }
#quick-view-modal .qv-ver-detalles { display:block; font-size:12px; font-weight:700; color:#203a86; text-decoration:underline; text-underline-offset:3px; margin:0 0 14px; }