/* La ficha entra y sale con el mismo fundido y escala suave de la tienda. */
#product-modal {
    z-index: 6500;
    padding: 20px;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: none;
    transition: opacity 280ms ease, visibility 280ms ease;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
#product-modal .modal-wrapper {
    width: 100%;
    max-width: 450px;
    height: auto;
    max-height: calc(100dvh - 40px);
    border: 1px solid #f1f5f9;
    border-radius: 28px;
    background: #fff;
    backdrop-filter: none;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .45);
    transform: translateY(16px) scale(.94);
    opacity: 0;
    animation: none;
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1), opacity 240ms ease;
}
#product-modal button,
#product-modal input { font-family: inherit; }
#product-modal .close-modal {
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.85);
    color: #334155;
    border: 0;
    box-shadow: none;
    transform: none;
}
#product-modal .modal-content-scroll { min-height: 0; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
#product-modal .modal-content-scroll::-webkit-scrollbar { display: block; width: 4px; }
#product-modal .modal-content-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
#product-modal .modal-img-area {
    position: relative;
    height: auto;
    min-height: 0;
    max-height: 38dvh;
    aspect-ratio: 4 / 3;
    padding: 24px;
    border: 0;
    background: #fff;
    animation: none;
}
#product-modal .modal-img-area img { width: 100%; height: 100%; object-fit: contain; transform: none; transition: none; animation: none; }
#product-modal .modal-img-area.provider-visual { padding: 0; background: var(--product-visual-color, #f8fafc); }
#product-modal .modal-img-area.provider-visual img { object-fit: contain; }
#product-modal .modal-img-area.brand-visual img { object-fit: cover; }
.product-visual-badges { position: absolute; top: 16px; left: 16px; right: 60px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.product-visual-badges span { max-width: 100%; padding: 4px 10px; border: 1px solid #ffffff40; border-radius: 999px; background: rgba(255,255,255,.88); color: #334155; font-size: 11px; font-weight: 600; line-height: 16px; overflow-wrap: anywhere; }
#product-modal .brand-visual .product-visual-badges span { background: #ffffff26; color: #fff; backdrop-filter: blur(8px); }
.product-visual-badges [hidden] { display: none; }
#product-modal .modal-info-area { flex: none; padding: 20px 24px; background: #f2f4f7; border-top: 1px solid #f1f5f9; }
#product-modal .modal-brand { margin: 0 0 4px; font-size: 12px; line-height: 18px; font-weight: 700; color: #64748b; letter-spacing: .6px; }
#product-modal .modal-name { margin: 0 0 6px; font-size: 21px; font-weight: 800; line-height: 1.25; color: #111c30; letter-spacing: -.3px; overflow-wrap: anywhere; }
.product-reference-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #e2e8f0; }
#product-modal .modal-ref { margin: 0; min-width: 0; color: #64748b; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
#modal-availability { flex-shrink: 0; border: 1px solid #bbf7d0; border-radius: 4px; padding: 2px 6px; color: #047857; background: #ecfdf5; font-size: 11px; font-weight: 600; }
#modal-availability[data-status="agotado"] { border-color: #e2e8f0; color: #64748b; background: #f8fafc; }
#product-modal .modal-desc { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: #475569; white-space: pre-line; overflow-wrap: anywhere; }
#product-modal .modal-desc:empty,
#product-modal .modal-desc[hidden] { display: none; }
#product-modal .modal-extra-info { margin: 0; padding: 0; border: 0; gap: 10px; }
#product-modal .modal-info-row { align-items: baseline; gap: 12px; font-size: 13px; line-height: 18px; }
#product-modal .modal-info-row .info-label { color: #64748b; font-weight: 400; }
#product-modal .modal-info-row .info-value { color: #1e293b; font-weight: 600; overflow-wrap: anywhere; }
#product-modal .modal-info-row--block { gap: 4px; }
#product-modal .modal-info-row--block .info-value { font-weight: 400; white-space: pre-line; }
#product-modal .modal-footer {
    position: static;
    padding: 16px 24px 24px;
    gap: 12px;
    background: #fff;
    border-top: 1px solid #f1f5f9;
    box-shadow: 0 -8px 20px rgba(0,0,0,.02);
    backdrop-filter: none;
}
#product-modal .qty-caption { margin: 0; color: #334155; font-size: 12px; line-height: 18px; font-weight: 700; }
#product-modal .qty-caption span { color: #64748b; }
#product-modal .modal-qty-stepper { width: 144px; height: 44px; margin: 0 auto 8px; padding: 4px; gap: 0; border: 0; border-radius: 999px; background: #f1f5f9; }
#product-modal .modal-qty-stepper button { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; color: #334155; background: transparent; font-size: 18px; }
#product-modal .modal-qty-stepper button:hover { background: #fff; }
#product-modal .modal-qty-stepper input { flex: 1; width: 32px; min-width: 0; font-size: 16px; font-weight: 700; color: #0f172a; }
#product-modal .modal-add-row { gap: 12px; }
#product-modal .modal-fav-btn { width: 48px; height: 48px; border: 1px solid #e2e8f0; border-radius: 16px; color: #64748b; }
#product-modal .modal-fav-btn.active { background: #eff4ff; border-color: #bfdbfe; color: #0066ff; }
#product-modal .btn-confirm-add { min-width: 0; min-height: 48px; padding: 12px; border-radius: 16px; color: #fff; background: #0066ff; font-size: 16px; font-weight: 600; box-shadow: 0 6px 18px #0066ff59; }
#product-modal .btn-confirm-add:hover:not(:disabled) { background: #0052cc; }
#product-modal .btn-confirm-add:disabled { box-shadow: none; background: #e2e8f0; color: #64748b; }
#product-modal :is(button,input):focus-visible { outline: 2px solid #0066ff; outline-offset: 3px; }
@media (max-width: 639px) {
    #product-modal { padding: 12px; }
    #product-modal .modal-wrapper { max-height: calc(100dvh - 24px); }
    #product-modal .close-modal { top: 12px; right: 12px; width: 44px; height: 44px; }
    #product-modal .modal-info-area { padding: 18px 20px; }
    #product-modal .modal-footer { padding: 16px 20px max(20px, env(safe-area-inset-bottom)); }
    #product-modal .modal-qty-stepper { width: 160px; height: 52px; }
    #product-modal .modal-qty-stepper button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
    .product-reference-row { flex-wrap: wrap; }
}

/* Teléfono en horizontal: con la imagen arriba y el pie abajo, al nombre, la
   referencia y el precio les quedaba una franja de 17 px y solo se veía el
   botón (auditoría móvil del 29/09). Aquí la imagen va a la izquierda a todo
   el alto y la información a la derecha, con su propio desplazamiento, sobre
   un pie compacto: la cantidad y «Añadir» en la misma fila. */
@media (orientation: landscape) and (max-height: 500px) {
    /* La ficha no se mete bajo la muesca (compro-shell.css). */
    #product-modal { padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
    #product-modal .modal-wrapper {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        grid-template-rows: minmax(0, 1fr) auto;
        max-width: min(760px, 100%);
        height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
    }
    #product-modal .modal-content-scroll { display: contents; }
    #product-modal .modal-img-area { grid-column: 1; grid-row: 1 / span 2; height: 100%; max-height: none; aspect-ratio: auto; padding: 16px; }
    #product-modal .modal-info-area { grid-column: 2; grid-row: 1; min-height: 0; overflow-y: auto; padding: 16px 64px 12px 20px; }
    #product-modal .modal-footer {
        grid-column: 2; grid-row: 2;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "rotulo rotulo" "cantidad anadir";
        align-items: center;
        gap: 6px 12px;
        padding: 10px 20px max(12px, env(safe-area-inset-bottom));
    }
    #product-modal .qty-caption { grid-area: rotulo; }
    #product-modal .modal-qty-stepper { grid-area: cantidad; width: 136px; height: 48px; margin: 0; }
    #product-modal .modal-add-row { grid-area: anadir; min-width: 0; }
}

#product-modal.show .modal-wrapper { transform: translateY(0) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    #product-modal, #product-modal .modal-wrapper { transition: none; }
    #product-modal .modal-wrapper { transform: none; }
}