/* ========================================================================
   MOBILE RESPONSIVE – Ozado New Theme
   Breakpoint principal: <= 767px
   Buenas prácticas SEO/UX: tipografía 14-24px, touch targets 44px min
   ======================================================================== */

/* --- Tipografía móvil (buenas prácticas SEO) --- */
@media (max-width: 767px) {
  :root {
    --font-size-h1: 24px;
    --font-size-h2: 20px;
    --font-size-h3: 18px;
    --font-size-h4: 16px;
    --font-size-p: 14px;
    --font-size-base: 14px;
  }

  body {
    font-size: 14px;
    line-height: 1.6;
  }

  .oz-main h1 { font-size: 24px; }
  .oz-main h2 { font-size: 20px; }
  .oz-main h3 { font-size: 18px; }
  .oz-main h4 { font-size: 16px; }
  .oz-main h5 { font-size: 15px; }
  .oz-main h6 { font-size: 14px; }
  .oz-main p  { font-size: 14px; line-height: 1.6; }

  /* --- Espaciado global reducido --- */
  :root {
    --space-xs: 0.35rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.25rem;
  }

  .oz-section {
    padding: 1rem 0;
  }

  /* No aplicar al inner del header (debe poder ir a ancho completo) */
  .oz-container:not(.oz-header-top__inner) {
    width: calc(100% - 24px);
  }
}

/* Animación del header fijo en móvil (sin translateX(-50%), cabecera a ancho completo) */
@keyframes oz-header-slide-down-mobile {
  from {
    transform: translateX(0) translateZ(0) translateY(calc(-100% - 8px));
  }
  to {
    transform: translateX(0) translateZ(0) translateY(0);
  }
}

/* --- Header móvil compacto --- */
@media (max-width: 767px) {
  /* Cabecera a ancho viewport (evita bloque centrado estrecho) */
  .oz-header,
  .oz-header--overlay {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    background: #ffffff;
  }

  /* Inicio: sin overlay absoluto — el main no queda bajo la cabecera (nada visible detrás) */
  .oz-header--overlay {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }

  body.admin-bar .oz-header--overlay {
    top: auto !important;
  }

  .oz-header.is-fixed {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: translateX(0) translateZ(0) translateY(0);
  }

  .oz-header.is-fixed.is-hidden {
    transform: translateX(0) translateZ(0) translateY(-100%);
  }

  .oz-header.is-fixed.is-entering:not(.is-hidden) {
    animation-name: oz-header-slide-down-mobile;
  }

  /* Franja blanca del header a todo el ancho del viewport */
  header.oz-header .oz-header-top {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
    padding-top: 10px !important;
  }

  header.oz-header .oz-header-top > .oz-container.oz-header-top__inner,
  header.oz-header .oz-header-top__inner.oz-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }

  .oz-header-top__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .oz-header__brand {
    justify-content: center;
    justify-self: center;
    align-items: center;
    height: auto;
  }

  .oz-site-logo--header {
    height: auto;
  }

  .oz-site-logo--header img {
    height: auto;
    max-height: 44px;
  }

  .oz-icon-btn {
    width: 32px;
    height: 32px;
  }

  .oz-icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .oz-header__search {
    min-width: 0;
  }

  .oz-header__right {
    padding: 0.55rem 0 0.85rem;
    row-gap: 0.55rem;
  }

  .oz-header__contact {
    display: none;
  }

  .oz-header__controls {
    grid-template-columns: 1fr;
    row-gap: 0.55rem;
  }

  .oz-header__search-area {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    width: 100%;
  }

  .oz-header__bar-leading {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .oz-header__cats-slot {
    flex: 1;
    min-width: 0;
    width: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .oz-header-menu-btn {
    min-height: 48px;
    padding: 0.4rem 0.65rem;
    font-size: 0.68rem;
    width: 100%;
    box-sizing: border-box;
  }

  .oz-header-menu-btn.oz-header-mobile-nav-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    flex: 0 0 auto;
    min-height: 48px;
    height: auto !important;
    max-height: none !important;
    padding: 0;
    align-self: stretch;
  }

  .oz-header__bar-leading .oz-header-menu-btn.oz-header-cats-btn {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 48px;
    height: auto;
    align-self: stretch;
  }

  .oz-header-cats {
    position: static;
    width: 100%;
    margin-top: 0;
  }

  /*
   * Cotizar / Cotizador / carrito en cabecera (icono + texto + shortcode):
   * colapsar la fila por si otro CSS fuerza flex/grid.
   */
  header.oz-header .oz-header__controls > .oz-header__actions,
  header.oz-header .oz-header-top .oz-header__actions,
  header.oz-header .oz-header-cart,
  header.oz-header .oz-header-cart__content,
  header.oz-header .oz-header-cart__link {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 991px) {
  /* Ocultar sidebar de filtros en móvil/tablet */
  .oz-shop-sidebar {
    display: none !important;
  }
  .oz-shop-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Evitar icono de cuenta si aparece por caché/widgets */
.oz-icon-btn[href*="myaccount"] {
  display: none !important;
}

/* --- Menú móvil --- */
@media (max-width: 991px) {
  body.oz-mobile-open {
    overflow: hidden;
  }

  .oz-mobile-menu {
    width: min(300px, 85vw);
  }

  .oz-mobile-menu__head {
    padding: 0.65rem 0.75rem;
  }

  .oz-mobile-nav {
    padding: 0.5rem 0.75rem;
  }

  .oz-mobile-nav__list > li {
    padding: 0.4rem 0;
    font-size: 14px;
  }

  .oz-mobile-nav__list a {
    padding: 0.35rem 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* --- Sidebar tienda: ocultar en móvil --- */
@media (max-width: 767px) {
  .oz-shop-sidebar {
    display: none !important;
  }

  .oz-shop-layout {
    grid-template-columns: 1fr !important;
  }
}

/* --- Toolbar tienda compacto --- */
@media (max-width: 767px) {
  .oz-shop-toolbar {
    padding: 0.35rem 0.5rem;
    gap: 0.35rem;
    font-size: 13px;
    margin-bottom: 0.5rem;
  }

  .oz-shop-view__btn {
    width: 28px;
    height: 26px;
  }

  .oz-shop-view__btn svg {
    width: 14px;
    height: 14px;
  }

  .oz-shop-toolbar .woocommerce-ordering select {
    font-size: 13px;
    padding: 0.3rem 0.5rem;
  }

  .oz-shop-toolbar .woocommerce-result-count {
    font-size: 12px;
  }
}

/* --- Tarjetas de producto móvil --- */
@media (max-width: 767px) {
  .oz-product-card {
    padding: 0.5rem;
    gap: 0.4rem;
    border-radius: 12px;
  }

  .oz-product-link {
    border-radius: 10px;
  }

  .oz-product-info .woocommerce-loop-product__title {
    font-size: 0.85rem;
    min-height: 0;
    line-height: 1.3;
  }

  .oz-product-info .price {
    font-size: 0.85rem;
  }

  .oz-product-cta .button {
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
    min-height: 36px;
  }

  .oz-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.35rem;
  }

  .oz-product-brand {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  .oz-product-actions {
    top: 36px;
    right: 6px;
  }

  .oz-product-action {
    width: 24px;
    height: 24px;
  }
}

/* --- Tienda / páginas: en móvil sin solapamiento bajo el header (nada detrás de la cabecera) --- */
@media (max-width: 767px) {
  body.post-type-archive-product .oz-shop-hero,
  body.tax-product_cat .oz-shop-hero,
  body.tax-product_tag .oz-shop-hero,
  body.term-brand .oz-shop-hero,
  body.archive.woocommerce .oz-shop-hero {
    --oz-shop-hero-overlap: 0 !important;
    margin-top: 0 !important;
    padding-top: clamp(0.75rem, 2vw, 1.25rem) !important;
    padding-bottom: 0.85rem !important;
    margin-bottom: 0.5rem;
  }

  body.admin-bar.post-type-archive-product .oz-shop-hero,
  body.admin-bar.tax-product_cat .oz-shop-hero,
  body.admin-bar.tax-product_tag .oz-shop-hero,
  body.admin-bar.term-brand .oz-shop-hero,
  body.admin-bar.archive.woocommerce .oz-shop-hero {
    --oz-shop-hero-overlap: 0 !important;
  }

  .oz-page-hero-band {
    --oz-page-hero-overlap: 0 !important;
    margin-top: 0 !important;
    padding-top: clamp(0.75rem, 2vw, 1.25rem) !important;
    padding-bottom: 0.85rem !important;
    margin-bottom: 0.5rem;
  }

  body.admin-bar .oz-page-hero-band {
    --oz-page-hero-overlap: 0 !important;
  }

  .oz-shop-hero .oz-shop-title {
    font-size: 20px;
  }

  .woocommerce-breadcrumb,
  .oz-breadcrumb {
    font-size: 0.8rem;
  }
}

/* --- Single product móvil --- */
@media (max-width: 767px) {
  .single-product div.product {
    gap: 0.75rem;
  }

  .single-product div.product .product_title {
    font-size: 20px;
    line-height: 1.25;
  }

  .single-product .product_meta {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  .oz-thumbgallery__item {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
  }

  .oz-thumbgallery__list {
    gap: 0.4rem;
  }

  .single-product .woocommerce-product-details__short-description p,
  .single-product .woocommerce-Tabs-panel p {
    font-size: 14px;
  }

  .single-product .woocommerce-product-details__short-description li,
  .single-product .woocommerce-Tabs-panel li {
    font-size: 14px;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs {
    font-size: 13px;
  }

  .single-product div.product > .woocommerce-tabs,
  .single-product div.product > .related,
  .single-product div.product > .upsells {
    margin-top: 0.75rem;
  }

  .single-product div.product > .related > h2,
  .single-product div.product > .upsells > h2 {
    font-size: 18px;
    margin-bottom: 0.5rem;
  }

  .woocommerce .quantity {
    max-width: 130px !important;
  }

  .woocommerce .quantity .oz-qty-btn {
    width: 36px;
    height: 36px;
  }

  .oz-techsheet-wrap {
    margin-top: 0.5rem;
  }

  .oz-techsheet-btn {
    font-size: 13px;
    padding: 0.55rem 0.8rem;
  }

  /* Prevent any element from overflowing the viewport */
  .single-product div.product,
  .single-product div.product > *,
  .single-product .summary,
  .single-product .summary > * {
    max-width: 100% !important;
    overflow-x: hidden;
  }
}

/* --- Variaciones de producto móvil --- */
@media (max-width: 767px) {
  .single-product .variations td,
  .single-product .variations th {
    display: block;
    width: 100%;
  }

  .single-product .variations select {
    max-width: 100%;
  }

  .single-product .variations .variable-item {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }
}

/* --- Cart / Checkout compacto --- */
@media (max-width: 767px) {
  .woocommerce-cart table.cart {
    font-size: 13px;
  }

  .woocommerce-cart table.cart img {
    max-width: 50px;
  }

  .woocommerce-cart .cart-collaterals {
    margin-top: 0.75rem;
  }

  .woocommerce table.shop_table {
    font-size: 13px;
  }

  .woocommerce table.shop_table td,
  .woocommerce table.shop_table th {
    padding: 0.4rem 0.5rem;
  }

  .woocommerce .wc-proceed-to-checkout .checkout-button,
  .woocommerce button.button,
  .woocommerce a.button {
    font-size: 14px;
    padding: 0.6rem 1rem;
  }
}

/* --- Blog móvil --- */
@media (max-width: 767px) {
  .oz-blog-grid {
    gap: 0.75rem;
  }

  .oz-blog-sidebar {
    display: none;
  }

  .oz-posts {
    gap: 0.75rem;
  }

  .oz-post {
    padding: 0.75rem;
    border-radius: 10px;
  }

  .oz-post__title {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 0.35rem;
  }

  .oz-post__meta {
    font-size: 12px;
    gap: 0.35rem;
  }

  .oz-post__excerpt {
    font-size: 14px;
    margin-bottom: 0.5rem;
  }

  .oz-archive-header {
    margin-bottom: 0.5rem;
  }

  .oz-archive-title {
    font-size: 20px;
  }

  .oz-archive-description {
    font-size: 13px;
  }

  .oz-pagination {
    margin-top: 0.75rem;
    font-size: 13px;
  }
}

/* --- Footer: espacio para botón flotante --- */
@media (max-width: 767px) {
  .oz-footer--fainza {
    padding-bottom: 5.5rem;
  }
}

/* --- Ocultar elementos innecesarios en móvil --- */
@media (max-width: 767px) {
  .oz-shop-view {
    display: none !important;
  }

  .oz-shop-toolbar .woocommerce-result-count {
    display: none !important;
  }

  .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
}

/* --- Páginas genéricas: spacing compacto --- */
@media (max-width: 767px) {
  .page .oz-main .oz-section {
    padding: 0.75rem 0;
  }

  .oz-main ul,
  .oz-main ol {
    padding-left: 1.2rem;
    margin-bottom: 0.75rem;
  }

  .oz-main blockquote {
    padding-left: 0.75rem;
    font-size: 14px;
  }

  .oz-main table {
    font-size: 13px;
  }

  .oz-main th,
  .oz-main td {
    padding: 0.35rem 0.5rem;
  }
}

/* --- Breakpoint intermedio (tablet 768-991px) --- */
@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --font-size-h1: 28px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --font-size-p: 15px;
    --font-size-base: 15px;
  }

  .oz-section {
    padding: 1.5rem 0;
  }

  .oz-header__inner {
    padding: 0.65rem 0;
  }
}