/* BonGon V10.3 REV4: exclusivamente telefono. Ninguna regla afecta escritorio. */
@media (max-width: 767px) {
  /* Ficha: primero imagen, luego tira de fotos, variantes y finalmente compra. */
  .product-detail-page { padding-bottom: 24px !important; }
  .product-detail-shell { padding-inline: 14px !important; }
  .product-detail-shell > nav { margin-bottom: 12px !important; font-size: 13px; }
  .product-detail-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-width: 0;
  }
  .product-detail-grid > .product-detail-main-image {
    order: 1; width: 100%; min-height: 0 !important;
    border-radius: 16px; border: 1px solid #eee4d8;
  }
  .product-detail-grid #main-image {
    width: 100%; height: clamp(210px, 63vw, 320px) !important;
    max-height: 320px; padding: 13px !important; object-fit: contain;
  }
  .product-detail-grid > .product-detail-thumbnails {
    order: 2; display: flex !important; flex-direction: row !important;
    width: 100%; max-height: none !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    padding: 3px 2px 7px !important; gap: 8px !important;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .product-detail-thumbnails .thumb-btn {
    width: 54px !important; height: 54px !important;
    flex: 0 0 54px !important; scroll-snap-align: start;
  }
  .product-detail-grid > .product-detail-info {
    order: 3; width: 100%; min-width: 0; padding-top: 4px;
  }
  .product-detail-info h1 {
    font-size: clamp(23px, 6vw, 27px) !important;
    line-height: 1.15; margin-bottom: 6px !important;
  }
  .product-detail-info h1 + p { font-size: 24px !important; line-height: 1.25; margin-bottom: 13px !important; }
  .product-detail-info .bongon-color-gallery { gap: 9px; }
  .product-detail-info .bongon-color-option { width: 78px; min-height: 82px; padding: 5px; }
  .product-detail-info .bongon-color-option img { width: 66px; height: 54px; }
  .product-detail-info .bongon-color-option span { font-size: 11px; }
  .product-detail-info .block.text-sm.font-semibold { font-size: 15px !important; }
  .product-detail-info #size-selection-section { margin-bottom: 8px !important; }
  .product-detail-info #size-selector { gap: 8px !important; }
  .product-detail-info #size-selector .size-btn {
    min-height: 44px; padding: 9px 12px !important;
    font-size: 14px !important; line-height: 1.25;
  }
  .product-detail-info #detail-variant-stock {
    margin: 4px 0 1px !important;
    font-size: 14px !important; line-height: 1.45;
  }
  /* La descripcion completa sigue intacta en escritorio; se muestra abajo en acordeones moviles. */
  .product-detail-info .product-detail-editorial-desktop { display: none !important; }

  .product-detail-grid > .product-detail-sidebar {
    order: 4; display: flex !important; flex-direction: column !important;
    width: 100%; gap: 10px !important; min-width: 0;
  }
  .product-detail-sidebar > .product-detail-specs { display: none !important; }
  .product-detail-sidebar > .product-detail-availability {
    padding: 15px 16px 10px !important; border-radius: 15px;
  }
  .product-detail-availability h3 {
    font-size: 18px !important; margin-bottom: 9px !important;
    padding-bottom: 9px !important;
  }
  .product-detail-availability p { font-size: 13px !important; margin-bottom: 8px !important; line-height: 1.4; }
  .product-detail-availability #detail-qty-minus,
  .product-detail-availability #detail-qty-plus {
    width: 44px !important; height: 44px !important;
  }
  .product-detail-availability #detail-qty { font-size: 17px !important; }
  .product-detail-sidebar > .bongon-detail-actions {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important; padding: 0 !important;
  }
  .bongon-detail-actions__button {
    min-height: 48px !important; font-size: 11px !important;
    letter-spacing: .015em !important; line-height: 1.25;
    padding: 10px 7px !important;
  }
  .bongon-detail-actions__button svg { height: 17px; width: 17px; }
  .bongon-detail-actions__button:disabled { cursor: not-allowed; opacity: .55; }

  /* Datos complementarios quedan al final para no bloquear el flujo de compra. */
  .mobile-product-extras { display: grid !important; gap: 9px; margin-top: 14px; }
  .mobile-product-extras__item {
    border-radius: 14px; border: 1px solid #e5d7c8;
    background: #fffdfb; box-shadow: 0 3px 12px #42312710;
    overflow: hidden;
  }
  .mobile-product-extras__item > summary {
    list-style: none; cursor: pointer;
    padding: 15px 42px 15px 16px; position: relative;
    min-height: 49px; color: #503c34;
    font: 700 16px/1.35 Georgia, serif;
  }
  .mobile-product-extras__item > summary::-webkit-details-marker { display:none; }
  .mobile-product-extras__item > summary::after {
    content: '+'; position:absolute; right:16px; top:50%;
    transform:translateY(-50%); font: 500 23px/1 Arial,sans-serif;
    color:#77574b;
  }
  .mobile-product-extras__item[open] > summary::after { content: '−'; }
  .mobile-product-extras__item > summary:focus-visible { outline: 3px solid #263d73; outline-offset: -4px; }
  .mobile-product-extras__content {
    border-top:1px solid #eee4d9; padding: 12px 16px 17px;
    color:#64554c; font: 400 15px/1.65 Arial,sans-serif;
    overflow-wrap: anywhere;
  }
  .mobile-product-extras__specs { display:grid; gap:7px; }
  .mobile-product-extras__specs strong { color:#4f4039; }
  .product-detail-shell > .mt-12 { margin-top: 22px !important; padding:18px !important; }
  .product-detail-shell > .mt-12 h2 { font-size: 23px !important; }

  /* Ventana de compra: la galeria se desplaza, mientras la botonera permanece visible. */
  #quick-view-modal.qv2-backdrop { padding: 7px !important; }
  #quick-view-modal .qv2-dialog {
    width: 100% !important; max-width: 550px !important;
    max-height: calc(100dvh - 14px) !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important; border-radius: 17px !important;
  }
  #quick-view-modal .qv2-layout,
  #quick-view-modal .qv2-layout.grid.grid-cols-1.md\:grid-cols-2 {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    overscroll-behavior: contain; flex: 1 1 auto; min-height: 0;
    align-items: start;
  }
  #quick-view-modal .qv2-layout > .qv2-media,
  #quick-view-modal .qv2-layout.grid.grid-cols-1.md\:grid-cols-2 > .qv2-media {
    width:100%; position:static !important; top:auto !important;
    padding: 12px 14px 9px !important; border-right:0;
    border-bottom:1px solid #ebe1d5;
  }
  #quick-view-modal .qv2-media-heading {
    font-size: 11px !important; letter-spacing: .08em;
    margin-bottom: 7px !important; padding-right: 36px;
  }
  #quick-view-modal .qv2-stage { height: clamp(155px, 42vw, 225px) !important; }
  #quick-view-modal #qv-imagen { height:100% !important; padding: 8px !important; }
  #quick-view-modal .qv-miniaturas {
    min-height: 49px !important; max-height: none !important;
    gap: 7px !important; margin-top:7px !important; padding-bottom:4px !important;
  }
  #quick-view-modal .qv-miniatura {
    width:45px !important; height:45px !important; flex:0 0 45px !important;
  }
  #quick-view-modal .qv2-layout > .qv2-info,
  #quick-view-modal .qv2-layout.grid.grid-cols-1.md\:grid-cols-2 > .qv2-info {
    width:100%; min-width:0; max-height:none; overflow:visible;
    padding: 13px 16px 12px !important;
  }
  #quick-view-modal #qv-modelo { font-size:11px !important; margin-bottom:2px !important; }
  #quick-view-modal #qv-nombre { font-size:23px !important; line-height:1.16; padding-right:6px; }
  #quick-view-modal #qv-precio { font-size:23px !important; margin-bottom:8px !important; }
  #quick-view-modal #qv-stock { font-size:13px !important; margin-bottom:10px !important; }
  #quick-view-modal #qv-color-section,
  #quick-view-modal #qv-talla-section { margin-bottom:10px !important; }
  #quick-view-modal #qv-color-section label,
  #quick-view-modal #qv-talla-section label,
  #quick-view-modal .qv2-info > .mb-6 > label { font-size:14px !important; margin-bottom:6px !important; }
  #quick-view-modal .bongon-color-option { width:72px; min-height:76px; padding:4px; }
  #quick-view-modal .bongon-color-option img { height:49px; width:60px; }
  #quick-view-modal .bongon-color-option span { font-size:10px; }
  #quick-view-modal #qv-tallas .qv-talla-btn {
    min-height:44px; font-size:13px !important; padding:9px 12px !important;
  }
  #quick-view-modal #qv-qty-minus, #quick-view-modal #qv-qty-plus {
    width:44px !important; height:44px !important;
  }
  #quick-view-modal #qv-qty { font-size:17px !important; }
  #quick-view-modal .qv-ver-detalles { font-size:13px !important; margin-bottom:5px !important; }
  /* El mismo grupo de botones se recoloca via JS; no hay controles duplicados. */
  #quick-view-modal .qv2-dialog > .qv2-actions {
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important; flex: 0 0 auto;
    border-top: 1px solid #e8dfd4; background:#fffdf9;
    box-shadow: 0 -5px 16px rgba(50,37,29,.08); z-index:2;
  }
  #quick-view-modal .qv2-dialog > .qv2-actions button {
    min-width:0; min-height:48px !important;
    padding: 10px 7px !important; line-height:1.25;
    font-size:11px !important; letter-spacing:0 !important;
  }
  /* Superar los tamanos muy pequenos (8/9px) de las reglas moviles antiguas. */
  #quick-view-modal #qv-add-cart,
  #quick-view-modal #qv-buy-now {
    font-size: 12px !important; letter-spacing: 0 !important;
    min-height: 48px !important; padding: 10px 6px !important;
  }
  #quick-view-modal .qv2-dialog > .qv2-actions #qv-add-cart svg {
    display:inline-block !important; flex:0 0 16px; width:16px !important;
  }
  #quick-view-modal #qv-close {
    top: 9px !important; right: 9px !important; width:42px !important; height:42px !important;
  }
}
@media (max-width: 350px) {
  .product-detail-sidebar > .bongon-detail-actions,
  #quick-view-modal .qv2-dialog > .qv2-actions { grid-template-columns: minmax(0,1fr) !important; }
  .product-detail-info .bongon-color-option { width:72px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .mobile-product-extras__item, #quick-view-modal .qv2-dialog { scroll-behavior: auto !important; }
}
/* Ocultar los acordeones de telefono en todas las pantallas de PC. */
@media (min-width: 768px) {
  .mobile-product-extras { display: none !important; }
}