/* Final pedido fixes and inline counter adjustments.
   Extraído de site.css para poder mantener la web por bloques. */

/* =========================================================
   V12 - QAMARERO LOOK FINAL MILIMETRICO
   Ajuste visual sobre V9.3: proporciones iPhone, sheet de opciones,
   botones inferiores, comentario y espaciados tipo referencia.
   ========================================================= */
.pedido-page.pedido-phone-layout[data-pedido-page] {
    --qm-app-width: 428px;
    --qm-accent: #f25a3f;
    --qm-green: #379456;
    --qm-text: #252525;
    --qm-muted: #747474;
    --qm-soft: #f4f4f4;
    --qm-line: #eeeeee;
    background: #f1f1f1 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.pedido-phone-layout .pedido-menu-shell,
.pedido-category-panel,
.pedido-phone-layout .pedido-sheet-panel,
.pedido-sheet-panel {
    max-width: var(--qm-app-width) !important;
}

.pedido-store-head {
    padding: max(17px, env(safe-area-inset-top)) 17px 0 !important;
    background: linear-gradient(180deg, #eeeeee 0%, #f7f7f7 60%, #fff 100%) !important;
}

.pedido-store-topbar { min-height: 145px !important; }
.pedido-logo-box { width: 174px !important; height: 68px !important; background: #f8f8f8 !important; border-radius: 0 0 7px 7px !important; }

.pedido-store-info h1 {
    font-size: 34px !important;
    font-weight: 400 !important;
    letter-spacing: -.7px !important;
    line-height: 1.05 !important;
}

.pedido-store-info p {
    margin-top: 13px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    color: var(--qm-muted) !important;
    letter-spacing: .2px !important;
}

.pedido-phone-layout .pedido-mode-tabs {
    margin-top: 20px !important;
    padding: 5px !important;
    border-radius: 15px !important;
    background: #eeeeee !important;
    gap: 6px !important;
}

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

.pedido-open-row { min-height: 66px !important; }
.pedido-open-row > strong { font-size: 22px !important; font-weight: 400 !important; }
.pedido-phone-layout .pedido-open-state { font-size: 21px !important; font-weight: 400 !important; }

.pedido-category-stick {
    height: 66px !important;
    min-height: 66px !important;
    padding: 13px 17px !important;
    gap: 14px !important;
    background: #fff !important;
    border-bottom: 0 !important;
}

.pedido-menu-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 5px !important;
    background: #181818 !important;
    gap: 5px !important;
}
.pedido-menu-button span { width: 18px !important; height: 2px !important; background: #b9b9b9 !important; }
.pedido-category-stick > strong { font-size: 18px !important; font-weight: 800 !important; letter-spacing: .55px !important; }

.pedido-section { scroll-margin-top: 66px !important; }
.pedido-section > h2 {
    min-height: 66px !important;
    padding: 0 17px !important;
    background: #f3f3f3 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: .15px !important;
}

.pedido-phone-layout .pedido-product {
    height: 120px !important;
    min-height: 120px !important;
    grid-template-columns: minmax(0,1fr) 34px !important;
    gap: 8px !important;
    padding: 0 17px !important;
    border-bottom: 1px solid #eeeeee !important;
}

.pedido-phone-layout .pedido-product-main-button { grid-template-columns: 84px minmax(0,1fr) !important; gap: 16px !important; }
.pedido-phone-layout .pedido-product-img { width: 84px !important; height: 84px !important; border-radius: 7px !important; background: #f4f4f4 !important; }
.pedido-phone-layout .pedido-product h3 { font-size: 16px !important; font-weight: 400 !important; line-height: 1.22 !important; letter-spacing: .2px !important; }
.pedido-phone-layout .pedido-product p { margin: 7px 0 10px !important; font-size: 15px !important; font-weight: 400 !important; color: #6f6f6f !important; line-height: 1.25 !important; }
.pedido-phone-layout .pedido-product strong { font-size: 16px !important; font-weight: 400 !important; letter-spacing: 1.7px !important; font-family: "Courier New", ui-monospace, monospace !important; }
.pedido-phone-layout .pedido-add { width: 32px !important; height: 32px !important; min-width: 32px !important; color: var(--qm-accent) !important; font-size: 24px !important; box-shadow: 0 4px 13px rgba(0,0,0,.13) !important; }

.pedido-search-fab { width: 66px !important; height: 66px !important; left: calc(50% - min(214px, 50vw) + 10px) !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; border-radius: 17px !important; font-size: 41px !important; }
.pedido-phone-layout .pedido-mobile-cart { left: calc(50% - min(214px, 50vw) + 88px) !important; right: calc(50% - min(214px, 50vw) + 10px) !important; min-height: 62px !important; border-radius: 22px !important; bottom: calc(14px + env(safe-area-inset-bottom)) !important; }

/* Menú categorías: panel bajo con borde mínimo y lista limpia */
.pedido-category-backdrop { background: rgba(0,0,0,.42) !important; backdrop-filter: none !important; }
.pedido-category-panel { border-radius: 7px 7px 0 0 !important; box-shadow: 0 -10px 28px rgba(0,0,0,.12) !important; }
.pedido-category-panel header { min-height: 76px !important; padding: 0 18px !important; }
.pedido-category-panel h2 { font-size: 27px !important; font-weight: 700 !important; letter-spacing: .25px !important; }
.pedido-category-panel header button { font-size: 39px !important; color: #202020 !important; }
.pedido-category-panel nav { padding: 12px 17px 12px !important; }
.pedido-category-panel nav a { min-height: 58px !important; padding: 0 18px !important; border-radius: 6px !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: .5px !important; }
.pedido-category-panel nav a.active { background: var(--qm-accent) !important; color: #fff !important; }
.pedido-category-panel footer { padding: 14px 17px max(14px, env(safe-area-inset-bottom)) !important; }
.pedido-category-panel footer button { min-height: 58px !important; border-radius: 17px !important; font-size: 19px !important; font-weight: 800 !important; }

/* Sheet de producto: en la referencia ocupa desde media pantalla y el footer va pegado abajo */
.pedido-sheet-backdrop { background: rgba(0,0,0,.44) !important; backdrop-filter: none !important; }
.pedido-phone-layout .pedido-sheet-panel,
.pedido-sheet-panel {
    width: 100% !important;
    max-height: 77dvh !important;
    border-radius: 5px 5px 0 0 !important;
    box-shadow: 0 -8px 28px rgba(0,0,0,.15) !important;
}

.pedido-config-head { padding: 24px 17px 14px !important; }
.pedido-config-head h2 { font-size: 27px !important; font-weight: 400 !important; letter-spacing: .5px !important; }
.pedido-config-head strong { font-family: "Courier New", ui-monospace, monospace !important; font-size: 24px !important; font-weight: 400 !important; letter-spacing: 1.4px !important; }
.pedido-qty-row { gap: 12px !important; padding: 8px 17px 21px !important; }
.pedido-qty-row button,
.pedido-qty-row strong { width: 58px !important; height: 48px !important; border-radius: 15px !important; box-shadow: 0 3px 12px rgba(0,0,0,.07) !important; border: 1px solid #eeeeee !important; font-weight: 400 !important; }
.pedido-qty-row strong { font-size: 20px !important; font-weight: 700 !important; color: #222 !important; }

.pedido-phone-layout .pedido-options-body,
.pedido-options-body { padding: 0 17px 0 !important; }
.pedido-phone-layout .pedido-option-group { padding: 12px 0 22px !important; }
.pedido-phone-layout .pedido-option-group-head { margin-bottom: 9px !important; }
.pedido-phone-layout .pedido-option-group-head small { font-size: 14px !important; font-weight: 400 !important; color: #777 !important; }
.pedido-phone-layout .pedido-option-group-head h3 { font-size: 17px !important; font-weight: 700 !important; letter-spacing: 4.3px !important; line-height: 1.15 !important; }
.pedido-phone-layout .pedido-option-group-head span { padding-top: 20px !important; font-size: 16px !important; font-weight: 400 !important; color: #777 !important; }
.pedido-phone-layout .pedido-option-row { min-height: 59px !important; grid-template-columns: minmax(0,1fr) auto 24px !important; padding: 6px 0 !important; gap: 8px !important; }
.pedido-phone-layout .pedido-option-row strong { font-size: 18px !important; font-weight: 400 !important; letter-spacing: 2.45px !important; line-height: 1.15 !important; color: #2b2b2b !important; }
.pedido-phone-layout .pedido-option-row em { font-family: "Courier New", ui-monospace, monospace !important; font-size: 17px !important; font-weight: 400 !important; letter-spacing: 1.4px !important; color: var(--qm-green) !important; }
.pedido-phone-layout .pedido-option-box { width: 23px !important; height: 23px !important; border: 3px solid #eeeeee !important; border-radius: 4px !important; }
.pedido-phone-layout .pedido-option-row.is-selected .pedido-option-box { background: var(--qm-accent) !important; border-color: var(--qm-accent) !important; }

.pedido-comment-row { flex: 0 0 auto !important; border-top: 1px solid #eeeeee !important; background: #fff !important; }
.pedido-comment-head { width: 100% !important; min-height: 58px !important; padding: 0 17px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: #fff !important; color: #777 !important; font-size: 18px !important; font-weight: 400 !important; letter-spacing: .2px !important; cursor: pointer !important; }
.pedido-comment-head strong { color: #222 !important; font-size: 25px !important; font-weight: 400 !important; transition: transform .18s ease !important; }
.pedido-comment-row textarea { display: none !important; width: calc(100% - 34px) !important; margin: 0 17px 12px !important; border: 1px solid #eeeeee !important; border-radius: 12px !important; background: #f8f8f8 !important; padding: 12px !important; font: inherit !important; resize: vertical !important; }
.pedido-comment-row.is-open textarea { display: block !important; }
.pedido-comment-row.is-open .pedido-comment-head strong { transform: rotate(180deg) !important; }

.pedido-phone-layout .pedido-config-footer,
.pedido-sheet-footer { grid-template-columns: 64px minmax(0,1fr) minmax(0,1.32fr) !important; gap: 10px !important; padding: 12px 17px max(12px, env(safe-area-inset-bottom)) !important; border-top: 1px solid #eeeeee !important; }
.pedido-sheet-footer button { min-height: 58px !important; border-radius: 17px !important; font-size: 17px !important; font-weight: 800 !important; }
.pedido-sheet-footer .icon { display: grid !important; place-items: center !important; background: #f7f7f7 !important; color: #222 !important; border: 1px solid #e9e9e9 !important; font-size: 30px !important; font-weight: 300 !important; }
.pedido-sheet-footer .secondary { background: #f7f7f7 !important; border: 0 !important; color: #333 !important; }
.pedido-sheet-footer .primary { background: var(--qm-green) !important; color: #fff !important; border: 0 !important; }

/* En carritos y checkout no queremos la columna del botón X de opciones */
.pedido-cart-sheet-panel .pedido-sheet-footer,
.pedido-checkout-panel .pedido-sheet-footer { grid-template-columns: .9fr 1.2fr !important; }

@media (max-width: 390px) {
    .pedido-store-topbar { min-height: 132px !important; }
    .pedido-logo-box { width: 154px !important; height: 61px !important; }
    .pedido-store-info h1 { font-size: 31px !important; }
    .pedido-store-info p { font-size: 15px !important; }
    .pedido-phone-layout .pedido-product-main-button { grid-template-columns: 76px minmax(0,1fr) !important; gap: 14px !important; }
    .pedido-phone-layout .pedido-product-img { width: 76px !important; height: 76px !important; }
    .pedido-phone-layout .pedido-product h3 { font-size: 15.5px !important; }
    .pedido-phone-layout .pedido-product p { font-size: 14px !important; }
}

/* =========================================================
   INTEGRACIÓN FINAL: CONTADOR INLINE DE CANTIDADES
   ========================================================= */

/* 1. Ajustamos el grid de tu V12 para que quepa el contador en lugar de solo 34px */
.pedido-phone-layout .pedido-product {
    grid-template-columns: minmax(0,1fr) auto !important; 
}

/* 2. Estilos del nuevo contador inline */
.pedido-inline-counter {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 4px 13px rgba(0,0,0,.13);
    height: 32px;
    width: auto;
}

.pedido-inline-counter button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--qm-accent, #f25a3f);
    font-size: 24px;
    font-weight: 300;
    display: grid;
    place-items: center;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.pedido-inline-counter button:disabled {
    color: #d1d1d1;
    cursor: not-allowed;
}

.pedido-inline-counter .qty {
    min-width: 24px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #222;
}
/* =========================================================
   QAMARERO: producto marcado + contador solo cuando hay cantidad
   ========================================================= */
.pedido-phone-layout .pedido-product {
    grid-template-columns: minmax(0,1fr) auto !important;
    transition: background-color .12s ease !important;
}

.pedido-phone-layout .pedido-product.is-in-cart {
    background: #fdeced !important;
}

.pedido-phone-layout .pedido-product.is-in-cart + .pedido-product.is-in-cart {
    border-top-color: rgba(255,255,255,.55) !important;
}

.pedido-phone-layout .pedido-inline-counter {
    align-self: center !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-width: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: 0 4px 13px rgba(0,0,0,.13) !important;
    transition: width .12s ease, min-width .12s ease !important;
}

.pedido-phone-layout .pedido-inline-counter.is-active {
    width: 110px !important;
    min-width: 110px !important;
    justify-content: space-between !important;
}

.pedido-phone-layout .pedido-inline-counter .btn-minus,
.pedido-phone-layout .pedido-inline-counter .qty {
    display: none !important;
}

.pedido-phone-layout .pedido-inline-counter.is-active .btn-minus,
.pedido-phone-layout .pedido-inline-counter.is-active .qty {
    display: grid !important;
}

.pedido-phone-layout .pedido-inline-counter button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--qm-accent, #f25a3f) !important;
    font-size: 23px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    padding: 0 0 2px !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: none !important;
}

.pedido-phone-layout .pedido-inline-counter .btn-plus {
    display: grid !important;
}

.pedido-phone-layout .pedido-inline-counter .qty {
    min-width: 34px !important;
    height: 32px !important;
    place-items: center !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #222 !important;
    line-height: 32px !important;
}

.pedido-phone-layout .pedido-inline-counter button:disabled {
    color: var(--qm-accent, #f25a3f) !important;
    opacity: 1 !important;
}

/* =========================================================
   AJUSTE QAMARERO: contador a la altura del precio
   =========================================================
   En la referencia el + / contador no va centrado verticalmente:
   baja hasta la línea del precio para no tapar ni competir con la
   descripción cuando es larga.
*/
.pedido-phone-layout .pedido-inline-counter {
    align-self: end !important;
    margin-bottom: 15px !important;
}

@media (max-width: 390px) {
    .pedido-phone-layout .pedido-inline-counter {
        margin-bottom: 14px !important;
    }
}