/* Qamarero-like header, product rows, category sheet and options sheet adjustments.
   Extraído de site.css para poder mantener la web por bloques. */

/* =========================================================
   V8.2 - PEDIDOS CLON MOVIL QAMARERO: PROPORCIONES REALES
   Sobrescribe V8/V8.1. Enfocado primero a movil; escritorio centrado.
   ========================================================= */

.pedido-phone-layout {
    background: #f2f2f2 !important;
}

.pedido-phone-layout .pedido-menu-shell {
    width: min(980px, 100%) !important;
    background: #fff;
}

/* Cabecera tienda: mas fina, no efecto zoom */
.pedido-store-head {
    padding-left: clamp(16px, 4vw, 22px) !important;
    padding-right: clamp(16px, 4vw, 22px) !important;
}

.pedido-store-topbar {
    min-height: clamp(132px, 35vw, 170px) !important;
}

.pedido-logo-box {
    width: clamp(150px, 43vw, 190px) !important;
    height: clamp(58px, 16vw, 72px) !important;
    border-radius: 0 0 8px 8px !important;
}

.pedido-store-info h1 {
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.06 !important;
    font-weight: 520 !important;
    letter-spacing: -.7px !important;
}

.pedido-store-info p {
    margin-top: 12px !important;
    font-size: clamp(15px, 4.1vw, 18px) !important;
    line-height: 1.28 !important;
    font-weight: 600 !important;
    color: #777 !important;
}

.pedido-store-info p span {
    height: 19px !important;
    margin: 0 12px !important;
}

.pedido-phone-layout .carta-lang {
    padding: 8px 15px !important;
    gap: 9px !important;
    border-radius: 999px !important;
    font-size: 18px !important;
}

.pedido-phone-layout .carta-lang .flag-es,
.pedido-phone-layout .flag-es {
    width: 31px !important;
    height: 31px !important;
}

/* Selector domicilio/recoger como referencia, compacto */
.pedido-phone-layout .pedido-mode-tabs {
    margin-top: 20px !important;
    padding: 6px !important;
    border-radius: 18px !important;
    background: #eeeeee !important;
}

.pedido-phone-layout .pedido-mode-tabs button {
    min-height: 54px !important;
    border-radius: 14px !important;
}

.pedido-phone-layout .pedido-mode-tabs button:first-child::before { font-size: 25px !important; }
.pedido-phone-layout .pedido-mode-tabs button:last-child::before { font-size: 27px !important; }

.pedido-open-row {
    min-height: 70px !important;
}

.pedido-open-row > strong {
    font-size: clamp(21px, 5.5vw, 26px) !important;
    font-weight: 560 !important;
    letter-spacing: -.2px !important;
}

.pedido-phone-layout .pedido-open-state {
    font-size: clamp(17px, 4.8vw, 23px) !important;
    font-weight: 560 !important;
    gap: 10px !important;
}

.pedido-phone-layout .pedido-open-state i {
    width: 12px !important;
    height: 12px !important;
    border-width: 4px !important;
}

/* Barra sticky categoria */
.pedido-category-stick {
    min-height: 72px !important;
    padding: 10px clamp(16px, 4vw, 22px) !important;
    gap: 15px !important;
    background: rgba(255,255,255,.98) !important;
}

.pedido-menu-button {
    width: 58px !important;
    height: 58px !important;
    border-radius: 8px !important;
    gap: 5px !important;
    box-shadow: none !important;
}

.pedido-menu-button span {
    width: 23px !important;
    height: 2px !important;
}

.pedido-category-stick > strong {
    font-size: clamp(20px, 5.8vw, 27px) !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: .8px !important;
}

.pedido-section {
    scroll-margin-top: 82px !important;
}

.pedido-section > h2 {
    padding: 22px clamp(16px, 4vw, 22px) !important;
    font-size: clamp(21px, 5.6vw, 25px) !important;
    line-height: 1.16 !important;
    font-weight: 850 !important;
    letter-spacing: .3px !important;
    background: #f3f3f3 !important;
}

/* Articulos: una fila movil real, sin zoom */
.pedido-phone-layout .pedido-one-list {
    padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
}

.pedido-phone-layout .pedido-product {
    min-height: 128px !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    gap: 10px !important;
    padding: 14px clamp(16px, 4vw, 22px) !important;
    border-bottom: 1px solid #eeeeee !important;
}

.pedido-phone-layout .pedido-product-main-button {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 17px !important;
}

.pedido-phone-layout .pedido-product-img {
    width: 84px !important;
    height: 84px !important;
    border-radius: 8px !important;
    background: #f3f3f3 !important;
}

.pedido-phone-layout .pedido-product h3 {
    font-size: clamp(19px, 5.1vw, 23px) !important;
    line-height: 1.16 !important;
    font-weight: 500 !important;
    letter-spacing: .6px !important;
}

.pedido-phone-layout .pedido-product p {
    margin: 8px 0 11px !important;
    -webkit-line-clamp: 1 !important;
    font-size: clamp(15px, 4.15vw, 18px) !important;
    line-height: 1.25 !important;
    font-weight: 480 !important;
    letter-spacing: .45px !important;
    color: #777 !important;
}

.pedido-phone-layout .pedido-product strong {
    font-size: clamp(19px, 5vw, 23px) !important;
    line-height: 1 !important;
    font-weight: 480 !important;
    letter-spacing: 1.7px !important;
    font-family: Consolas, ui-monospace, monospace !important;
}

.pedido-phone-layout .pedido-add {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    font-size: 31px !important;
    font-weight: 280 !important;
    line-height: 1 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}

/* Botones flotantes: menos invasivos */
.pedido-search-fab {
    width: 66px !important;
    height: 66px !important;
    left: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
    font-size: 39px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.11) !important;
}

.pedido-phone-layout .pedido-mobile-cart {
    left: 96px !important;
    right: 16px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    min-height: 62px !important;
    border-radius: 22px !important;
    padding: 0 18px !important;
    gap: 12px !important;
    background: #009b52 !important;
}

.pedido-mobile-cart span { font-size: 20px !important; }
.pedido-mobile-cart strong { font-size: 16px !important; line-height: 1.15 !important; }
.pedido-mobile-cart em { font-size: 20px !important; letter-spacing: .3px !important; }

/* Menu categorias tipo bottom sheet de la referencia */
.pedido-category-panel {
    width: min(720px, 100%) !important;
    max-height: 76dvh !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.pedido-category-panel header {
    min-height: 76px !important;
    padding: 0 20px !important;
}

.pedido-category-panel h2 {
    font-size: clamp(27px, 7.2vw, 34px) !important;
    font-weight: 760 !important;
    letter-spacing: .5px !important;
}

.pedido-category-panel header button {
    width: 44px !important;
    height: 44px !important;
    font-size: 42px !important;
    font-weight: 260 !important;
}

.pedido-category-panel nav {
    padding: 10px 16px 14px !important;
}

.pedido-category-panel nav a {
    min-height: 62px !important;
    padding: 0 18px !important;
    border-radius: 8px !important;
    font-size: clamp(21px, 5.8vw, 27px) !important;
    font-weight: 820 !important;
    letter-spacing: .7px !important;
}

.pedido-category-panel footer {
    padding: 14px 16px max(14px, env(safe-area-inset-bottom)) !important;
}

.pedido-category-panel footer button {
    min-height: 62px !important;
    border-radius: 19px !important;
    font-size: clamp(20px, 5.6vw, 26px) !important;
    font-weight: 820 !important;
}

/* Hoja de complementos: proporciones de la captura */
.pedido-phone-layout .pedido-sheet-panel {
    width: min(720px, 100%) !important;
    max-height: 76dvh !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.pedido-config-head {
    padding: 25px 18px 12px !important;
}

.pedido-config-head h2 {
    font-size: clamp(27px, 7.2vw, 35px) !important;
    line-height: 1.05 !important;
    font-weight: 500 !important;
    letter-spacing: .7px !important;
}

.pedido-config-head strong {
    font-size: clamp(25px, 6.6vw, 33px) !important;
    font-weight: 480 !important;
    letter-spacing: 1.6px !important;
}

.pedido-qty-row {
    gap: 13px !important;
    padding: 7px 18px 20px !important;
}

.pedido-qty-row button,
.pedido-qty-row strong {
    width: 68px !important;
    height: 50px !important;
    border-radius: 16px !important;
    font-size: 27px !important;
}

.pedido-qty-row strong {
    font-size: 23px !important;
}

.pedido-phone-layout .pedido-options-body {
    padding: 0 18px 96px !important;
}

.pedido-phone-layout .pedido-option-group {
    padding: 14px 0 22px !important;
}

.pedido-phone-layout .pedido-option-group + .pedido-option-group {
    border-top: 0;
}

.pedido-phone-layout .pedido-option-group-head {
    margin-bottom: 12px !important;
}

.pedido-phone-layout .pedido-option-group-head small {
    font-size: clamp(15px, 4vw, 19px) !important;
    font-weight: 480 !important;
}

.pedido-phone-layout .pedido-option-group-head h3 {
    font-size: clamp(18px, 5vw, 24px) !important;
    letter-spacing: 3.2px !important;
    font-weight: 560 !important;
}

.pedido-phone-layout .pedido-option-group-head span {
    padding-top: 23px !important;
    font-size: clamp(15px, 4vw, 20px) !important;
    font-weight: 480 !important;
}

.pedido-phone-layout .pedido-option-row {
    min-height: 59px !important;
    grid-template-columns: minmax(0, 1fr) auto 27px !important;
    gap: 9px !important;
}

.pedido-phone-layout .pedido-option-row strong {
    font-size: clamp(19px, 5vw, 24px) !important;
    letter-spacing: 2.4px !important;
    font-weight: 500 !important;
}

.pedido-phone-layout .pedido-option-row em {
    font-size: clamp(18px, 4.8vw, 23px) !important;
    letter-spacing: 1.2px !important;
}

.pedido-phone-layout .pedido-option-box {
    width: 27px !important;
    height: 27px !important;
    border-width: 3px !important;
}

.pedido-phone-layout .pedido-config-footer {
    grid-template-columns: .88fr 1.18fr !important;
    gap: 10px !important;
    padding: 14px 16px max(14px, env(safe-area-inset-bottom)) !important;
}

.pedido-phone-layout .pedido-sheet-footer button {
    min-height: 64px !important;
    border-radius: 18px !important;
    font-size: clamp(19px, 5vw, 25px) !important;
}

/* Moviles estrechos: todavia mas qamarero, sin romper */
@media (max-width: 390px) {
    .pedido-store-topbar { min-height: 120px !important; }
    .pedido-logo-box { width: 142px !important; height: 56px !important; }
    .pedido-store-info h1 { font-size: 27px !important; }
    .pedido-store-info p { font-size: 14px !important; }
    .pedido-phone-layout .pedido-mode-tabs button { min-height: 50px !important; }
    .pedido-open-row { min-height: 64px !important; }
    .pedido-open-row > strong { font-size: 20px !important; }
    .pedido-phone-layout .pedido-open-state { font-size: 16px !important; }
    .pedido-category-stick { min-height: 66px !important; }
    .pedido-menu-button { width: 54px !important; height: 54px !important; }
    .pedido-category-stick > strong { font-size: 20px !important; }
    .pedido-section > h2 { padding-top: 20px !important; padding-bottom: 20px !important; font-size: 20px !important; }
    .pedido-phone-layout .pedido-product { min-height: 118px !important; padding-top: 13px !important; padding-bottom: 13px !important; }
    .pedido-phone-layout .pedido-product-main-button { grid-template-columns: 78px minmax(0,1fr) !important; gap: 14px !important; }
    .pedido-phone-layout .pedido-product-img { width: 78px !important; height: 78px !important; }
    .pedido-phone-layout .pedido-product h3 { font-size: 18px !important; }
    .pedido-phone-layout .pedido-product p { font-size: 14px !important; margin: 7px 0 10px !important; }
    .pedido-phone-layout .pedido-product strong { font-size: 18px !important; }
    .pedido-phone-layout .pedido-add { width: 40px !important; height: 40px !important; font-size: 28px !important; }
    .pedido-search-fab { width: 62px !important; height: 62px !important; }
    .pedido-phone-layout .pedido-mobile-cart { left: 90px !important; min-height: 60px !important; }
}

/* Tablet y ordenador: mantiene la esencia app, pero no parece movil gigante */
@media (min-width: 700px) {
    .pedido-phone-layout .pedido-product-main-button {
        grid-template-columns: 104px minmax(0, 1fr) !important;
    }

    .pedido-phone-layout .pedido-product-img {
        width: 104px !important;
        height: 84px !important;
    }
}

@media (min-width: 901px) {
    .pedido-phone-layout {
        padding: 28px !important;
    }

    .pedido-phone-layout .pedido-menu-shell {
        min-height: calc(100dvh - 56px) !important;
        border-radius: 30px !important;
        overflow: hidden !important;
        box-shadow: 0 24px 70px rgba(0,0,0,.12) !important;
        border: 1px solid rgba(255,255,255,.9) !important;
    }

    .pedido-store-head {
        padding-top: 24px !important;
    }

    .pedido-store-topbar {
        min-height: 92px !important;
    }

    .pedido-logo-box {
        width: 190px !important;
        height: 64px !important;
    }

    .pedido-store-info h1 {
        font-size: 36px !important;
    }

    .pedido-store-info p {
        font-size: 17px !important;
    }

    .pedido-phone-layout .pedido-mode-tabs {
        max-width: 560px !important;
    }

    .pedido-category-stick {
        top: 0 !important;
        min-height: 68px !important;
    }

    .pedido-section > h2 {
        font-size: 25px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .pedido-phone-layout .pedido-product {
        min-height: 116px !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
    }

    .pedido-phone-layout .pedido-product-main-button {
        grid-template-columns: 100px minmax(0, 1fr) !important;
    }

    .pedido-phone-layout .pedido-product-img {
        width: 100px !important;
        height: 78px !important;
    }

    .pedido-phone-layout .pedido-product h3 {
        font-size: 23px !important;
    }

    .pedido-phone-layout .pedido-product p {
        font-size: 16px !important;
    }

    .pedido-phone-layout .pedido-product strong {
        font-size: 22px !important;
    }

    .pedido-phone-layout .pedido-mobile-cart {
        left: 50% !important;
        right: auto !important;
        width: min(460px, calc(100vw - 72px)) !important;
        transform: translateX(-50%) !important;
    }

    .pedido-search-fab {
        left: calc(50% - min(490px, calc((100vw - 56px) / 2)) + 20px) !important;
    }
}