:root{
    --pos-navy:#071a38;
    --pos-blue:#1269d3;
    --pos-blue2:#0d55bd;
    --pos-green:#08a843;
    --pos-red:#e32727;
    --pos-bg:#f4f7fb;
    --pos-line:#dce3ec;
    --pos-text:#0e1930;
    --pos-muted:#64748b;
}

*{box-sizing:border-box}

html,body{
    margin:0;
    min-height:100%;
    background:var(--pos-bg);
    color:var(--pos-text);
    font-family:Arial,Helvetica,sans-serif;
}

.store-shell{width:100%;background:var(--pos-bg);overflow-x:hidden}

.store-topbar{
    min-height:82px;
    display:grid;
    grid-template-columns:285px minmax(320px,1fr) 210px 155px;
    align-items:center;
    background:var(--pos-navy);
    color:white;
    box-shadow:0 4px 14px rgba(7,26,56,.18);
}

.store-brand{padding:0 22px;display:flex;align-items:center;gap:14px;font-size:17px;font-weight:700}
.store-brand > div:last-child{min-width:0}
.store-brand small,.store-user small{display:block;font-size:12px;font-weight:400;opacity:.8;margin-top:3px}
.store-brand small{white-space:nowrap}
.store-brand .pos-brand-icon svg{width:34px;height:34px;display:block}

.store-search{padding:0 22px;border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}
.store-search form{margin:0}
.store-search .pos-search-box{position:relative}
.store-search .pos-search-box input{
    width:100%;
    box-sizing:border-box;
    height:52px;
    border:0;
    border-radius:12px;
    padding:0 92px 0 52px;
    font-size:16px;
    color:#25324a;
    background:#fff;
    outline:none;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.store-search .pos-search-icon,
.store-search .pos-scan-icon{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:22px;
    color:#152849;
}
.store-search .pos-search-icon{left:17px}
.store-search .pos-scan-icon{right:17px}
.store-search-clear{
    position:absolute;
    right:48px;
    top:50%;
    transform:translateY(-50%);
    width:28px;height:28px;
    border-radius:50%;
    background:#eef3f8;
    color:#526277;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.store-user{
    padding:0 22px;
    font-weight:700;
    border-right:1px solid rgba(255,255,255,.1);
}
.store-clock{padding:0 22px;text-align:right;font-size:20px;line-height:1.25}
.store-clock small{display:block;font-size:13px;opacity:.9}

.store-main{
    display:grid;
    grid-template-columns:minmax(0,64%) minmax(430px,36%);
    min-height:760px;
}

.store-catalog{
    padding:14px 10px 14px 14px;
    border-right:1px solid var(--pos-line);
    min-width:0;
}

.store-categories{display:flex;gap:8px;overflow:auto;padding-bottom:12px}
.store-categories .pos-category{
    height:46px;
    padding:0 16px;
    border:1px solid #d7dee8;
    border-radius:11px;
    background:#fff;
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#17233b;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 2px 5px rgba(15,23,42,.04);
}
.store-categories .pos-category.active{background:#1476df;color:#fff;border-color:#1476df}

.store-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.store-product{
    position:relative;
    min-width:0;
    min-height:126px;
    padding:10px 11px;
    border:1px solid #dfe5ed;
    border-radius:12px;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:0 2px 6px rgba(15,23,42,.045);
    overflow:hidden;
}
.store-product .pos-product-top{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0}
.store-product .pos-product-image{
    width:100%!important;
    height:120px!important;
    min-width:0!important;
    max-width:none!important;
    flex:0 0 120px!important;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:9px;
    background:#f2f6fb;
    position:relative;
}
.store-product .pos-product-image img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover;
    object-position:center;
    display:block;
    border-radius:9px;
}
.store-image-fallback{position:absolute;inset:0;place-items:center}
.store-image-fallback svg{width:40px;height:40px}

.store-product .pos-product-name{
    font-size:13px;
    line-height:1.25;
    min-height:32px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.store-product .pos-product-code{
    font-size:10px;
    color:var(--pos-muted);
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.store-product .pos-product-price{
    margin-top:6px;
    display:flex;
    align-items:baseline;
    gap:3px;
    white-space:nowrap;
}
.store-product .pos-product-price .currency{font-size:11px;color:#334155;font-weight:700}
.store-product .pos-product-price .amount{font-size:16px;color:#0b172d;font-weight:800}

.store-product .pos-product-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:5px;min-height:30px;gap:8px}
.store-product .pos-stock{font-size:10px;background:#dff5e6;color:#187638;padding:3px 7px;border-radius:6px;white-space:nowrap}
.store-product .pos-add{
    width:31px;height:31px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#1378df;color:white;text-decoration:none;
    font-size:23px;font-weight:400;line-height:1
}

.store-pagination{display:flex;justify-content:center;gap:8px;align-items:center;padding:11px 0 5px}
.store-pagination a{min-width:30px;height:30px;padding:0 4px;display:flex;align-items:center;justify-content:center;border-radius:50%;text-decoration:none;color:#17233b;font-weight:700}
.store-pagination a.active{background:#1476df;color:#fff}

.store-order{
    display:flex;
    flex-direction:column;
    background:#fff;
    min-width:0;
    position:sticky;
    top:0;
    height:calc(100vh - 20px);
    min-height:720px;
    overflow:hidden;
}

.store-order .pos-sale-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 18px 12px;
    font-size:18px;
    font-weight:800;
}

.store-order .pos-sale-head-actions{display:flex;align-items:center;gap:12px}
.store-order .pos-clear{
    width:34px;height:34px;border:1px solid #dce3ec;border-radius:8px;
    background:#fff;color:#e32727;display:flex;align-items:center;justify-content:center;
    text-decoration:none!important;font-size:18px;line-height:1
}

.store-customer-card{margin:0 14px 8px;border:1px solid #dce3ec;border-radius:12px;background:#fff;padding:10px;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.store-customer-card .pos-customer-view{display:flex;align-items:center;gap:11px}
.store-customer-card .pos-customer-icon{width:38px;height:38px;border-radius:9px;background:#f1f5f9;display:flex;align-items:center;justify-content:center}
.store-customer-card .pos-customer-icon svg{width:28px;height:28px}
.store-customer-card .pos-customer-name{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-customer-card .pos-customer-meta{font-size:10px;color:var(--pos-muted);margin-top:3px}

.store-lines{margin:0 8px;border-top:1px solid var(--pos-line);border-bottom:1px solid var(--pos-line);flex:1;overflow:auto}
.store-lines .pos-lines-head,
.store-lines .pos-line{
    display:grid;
    grid-template-columns:minmax(0,1fr) 92px 68px 78px 22px;
    align-items:center;
    gap:5px;
}
.store-lines .pos-lines-head{
    background:#0d55bd;
    color:#fff;
    padding:10px 12px;
    font-size:12px;
    font-weight:700;
    position:sticky;
    top:0;
    z-index:2;
}
.store-lines .pos-line{padding:10px 12px;border-bottom:1px solid #e3e8ef;font-size:12px}
.store-lines .pos-line-product{min-width:0}
.store-lines .pos-line-name{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-lines .pos-line-code{font-size:11px;color:var(--pos-muted);margin-top:4px}
.store-lines .pos-qty{display:flex;align-items:center;justify-content:center}
.store-lines .pos-qty a{width:30px;height:30px;border:1px solid #d7dee8;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#17233b;font-size:19px;background:#fff}
.store-lines .pos-qty a:first-child{border-radius:7px 0 0 7px}
.store-lines .pos-qty a:last-child{border-radius:0 7px 7px 0}
.store-lines .pos-qty span{height:30px;min-width:32px;border-top:1px solid #d7dee8;border-bottom:1px solid #d7dee8;display:flex;align-items:center;justify-content:center;font-weight:800}
.store-lines .pos-line-price,.store-lines .pos-line-total{text-align:right;white-space:nowrap}
.store-lines .pos-line-total{font-weight:800}
.store-lines .pos-line-delete{text-align:center;color:var(--pos-red);font-size:19px;text-decoration:none}
.store-lines .pos-empty{padding:55px 20px;text-align:center;color:#8290a5}

.store-summary{padding:12px 18px 8px;background:#fff}
.store-summary .pos-summary-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14px}
.store-summary .pos-summary-row.total{margin-top:8px;border-top:1px dashed #cfd8e5;padding-top:14px;font-size:20px;font-weight:800}
.store-summary .pos-summary-row.total strong{font-size:25px;color:#1156b7}

.store-send-wrap{padding:0 16px 16px;background:#fff}
.store-send{
    width:100%;
    height:58px;
    border:0;
    border-radius:10px;
    background:#0caf46;
    color:#fff;
    font-size:19px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 5px 12px rgba(10,175,70,.19);
}
.store-send:disabled{background:#cbd5e1;color:#64748b;box-shadow:none;cursor:not-allowed}

.store-no-products{padding:60px 20px;text-align:center;color:#718096;background:#fff;border-radius:12px}

@media(max-width:1450px){
    .store-main{grid-template-columns:minmax(0,63%) minmax(0,37%)}
    .store-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
}

@media(max-width:1280px){
    .store-topbar{grid-template-columns:270px minmax(200px,1fr) 155px 120px}
    .store-search{padding-left:14px;padding-right:14px}
    .store-main{grid-template-columns:minmax(0,59%) minmax(0,41%)}
    .store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:980px){
    .store-topbar{grid-template-columns:1fr}
    .store-brand,.store-user-menu,.store-clock{display:none}
    .store-search{padding:14px}
    .store-main{grid-template-columns:1fr}
    .store-order{position:relative;height:auto;min-height:600px}
    .store-catalog{border-right:0}
    .store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ===== Menú de cuenta del cliente · v6 ===== */
.store-user-menu{
    position:relative;
    align-self:stretch;
    display:flex;
    align-items:center;
    min-width:0;
    padding:0 10px;
    border-right:1px solid rgba(255,255,255,.10);
    z-index:250;
}

.store-user-button{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-width:0;
    height:58px;
    margin:0;
    padding:7px 10px;
    border:1px solid transparent;
    border-radius:11px;
    background:transparent;
    color:#fff;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 18px;
    align-items:center;
    column-gap:9px;
    cursor:pointer;
    font:inherit;
    text-align:left;
    box-shadow:none;
    outline:none;
}

.store-user-button:hover,
.store-user-button[aria-expanded="true"]{
    background:rgba(255,255,255,.075);
    border-color:rgba(255,255,255,.08);
}

.store-user-avatar{
    width:34px;
    height:34px;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:#b9d5ff;
    background:rgba(255,255,255,.08);
}

.store-user-avatar svg{
    width:22px;
    height:22px;
    display:block;
}

.store-user-text{
    min-width:0;
    display:block;
}

.store-user-label{
    display:block;
    color:#9fc6ff;
    font-size:10px;
    line-height:1.1;
    font-weight:600;
    letter-spacing:.01em;
}

.store-user-text strong{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:12px;
    line-height:1.15;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.store-user-caret{
    width:18px;
    height:18px;
    color:#a9bdd8;
    display:grid;
    place-items:center;
    transition:transform .16s ease;
}

.store-user-caret svg{
    width:15px;
    height:15px;
    display:block;
}

.store-user-button[aria-expanded="true"] .store-user-caret{
    transform:rotate(180deg);
}

.store-user-dropdown{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    right:8px !important;
    left:auto !important;
    width:310px !important;
    max-width:calc(100vw - 24px);
    margin:0 !important;
    padding:0 !important;
    display:none !important;
    overflow:hidden;
    border:1px solid #dce4ee !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#172033 !important;
    box-shadow:0 18px 45px rgba(7,26,56,.26) !important;
    z-index:9999 !important;
}

.store-user-dropdown.open{
    display:block !important;
}

.store-account-head{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:14px;
    background:linear-gradient(180deg,#f8fbff 0%,#f3f7fc 100%);
    border-bottom:1px solid #e6edf5;
}

.store-account-avatar{
    width:42px;
    height:42px;
    border-radius:11px;
    display:grid;
    place-items:center;
    color:#0d55bd;
    background:#e9f2ff;
}

.store-account-avatar svg{
    width:25px;
    height:25px;
}

.store-account-copy{
    min-width:0;
}

.store-account-copy strong{
    display:block;
    color:#0f1d33;
    font-size:13px;
    font-weight:800;
}

.store-account-copy span{
    display:block;
    margin-top:3px;
    color:#69788c;
    font-size:11px;
}

.store-account-status{
    display:inline-flex;
    align-items:center;
    min-height:23px;
    padding:0 8px;
    border-radius:999px;
    background:#eaf8ef;
    color:#16713a;
    font-size:9px;
    font-weight:800;
    white-space:nowrap;
}

.store-account-menu{
    padding:7px;
}

.store-account-link{
    min-height:52px !important;
    padding:7px 9px !important;
    border-radius:10px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    align-items:center !important;
    gap:9px !important;
    color:#26364c !important;
    text-decoration:none !important;
    background:transparent !important;
}

.store-account-link:hover{
    background:#f3f7fc !important;
}

.store-account-link-icon{
    width:34px;
    height:34px;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:#315f9f;
    background:#eef4fb;
}

.store-account-link-icon svg{
    width:19px;
    height:19px;
}

.store-account-link-copy{
    min-width:0;
}

.store-account-link-copy strong{
    display:block;
    color:inherit;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
}

.store-account-link-copy small{
    display:block;
    margin-top:3px;
    color:#8190a3;
    font-size:9px;
    line-height:1.25;
    font-weight:500;
}

.store-account-link.is-disabled{
    cursor:default !important;
    opacity:.58;
}

.store-account-link.is-disabled:hover{
    background:transparent !important;
}

.store-user-divider{
    height:1px;
    margin:5px 7px;
    background:#edf1f5;
}

.store-account-link.store-logout{
    color:#b42318 !important;
}

.store-account-link.store-logout .store-account-link-icon{
    color:#b42318;
    background:#fff0ef;
}

.store-account-link.store-logout:hover{
    background:#fff5f4 !important;
}

/* ===== Impuestos en las líneas ===== */
.store-line-tax{
    display:block;
    margin-top:2px;
    color:#0d55bd;
    font-size:9px;
    font-weight:800;
    line-height:1.1;
}

.store-line-tax.is-exempt{
    color:#15803d;
}

@media(max-width:1280px){
    .store-user-menu{
        padding:0 5px;
    }
    .store-user-button{
        padding:6px;
        grid-template-columns:30px minmax(0,1fr) 14px;
        column-gap:6px;
    }
    .store-user-avatar{
        width:30px;
        height:30px;
    }
}

@media(max-width:980px){
    .store-user-menu{
        display:none;
    }
}


/* ===== Ajuste de columnas para importes de miles · v7 ===== */
.store-lines .pos-lines-head,
.store-lines .pos-line{
    grid-template-columns:
        minmax(150px, 1fr)
        92px
        86px
        116px
        18px;
    column-gap:8px;
}

.store-lines .pos-lines-head > span:nth-child(2){
    text-align:center !important;
}

.store-lines .pos-lines-head > span:nth-child(3),
.store-lines .pos-lines-head > span:nth-child(4){
    text-align:right !important;
}

.store-lines .pos-line-price,
.store-lines .pos-line-total{
    min-width:0;
    text-align:right;
    white-space:nowrap;
}

.store-lines .pos-line-price{
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    gap:3px;
    font-size:11px;
}

.store-lines .pos-line-total{
    display:block;
    padding-right:1px;
}

.store-line-total-money{
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    gap:3px;
    white-space:nowrap;
    line-height:1.05;
}

.store-money-currency{
    color:#334155;
    font-size:10px;
    font-weight:600;
    flex:0 0 auto;
}

.store-money-amount{
    color:#0d1729;
    font-size:12px;
    font-weight:800;
    letter-spacing:-.1px;
    flex:0 0 auto;
}

.store-lines .pos-line-total .store-money-amount{
    font-size:13px;
    font-weight:900;
}

.store-line-tax{
    margin-top:3px;
    text-align:right;
    font-size:8px;
    line-height:1;
    letter-spacing:.01em;
}

.store-lines .pos-line-delete{
    width:18px;
    min-width:18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Evita que la cantidad robe espacio a Precio/Total. */
.store-lines .pos-qty{
    width:92px;
    min-width:92px;
}

/* En paneles algo más estrechos conservamos una lectura limpia. */
@media(max-width:1450px){
    .store-lines .pos-lines-head,
    .store-lines .pos-line{
        grid-template-columns:
            minmax(125px, 1fr)
            88px
            80px
            108px
            18px;
        column-gap:6px;
    }

    .store-lines .pos-qty{
        width:88px;
        min-width:88px;
    }

    .store-money-currency{
        font-size:9px;
    }

    .store-money-amount{
        font-size:11px;
    }

    .store-lines .pos-line-total .store-money-amount{
        font-size:12px;
    }
}


/* ===== Cambiar teléfono debajo del número ===== */
.store-change-phone-link{
    appearance:none;
    -webkit-appearance:none;
    display:inline-flex;
    align-items:center;
    margin:4px 0 0;
    padding:0;
    border:0;
    background:transparent;
    color:#1768ca;
    font:inherit;
    font-size:9px;
    line-height:1.2;
    font-weight:800;
    cursor:pointer;
    text-decoration:none;
}

.store-change-phone-link:hover{
    color:#0b55ad;
    text-decoration:underline;
}

/* ===== Modal cambio de teléfono ===== */
body.store-modal-open{
    overflow:hidden;
}

.store-modal-backdrop{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(7,26,56,.48);
    backdrop-filter:blur(2px);
}

.store-modal-backdrop.open{
    display:flex;
}

.store-modal-card{
    width:min(100%,430px);
    overflow:hidden;
    border:1px solid #dbe4ef;
    border-radius:15px;
    background:#fff;
    box-shadow:0 24px 70px rgba(4,18,42,.32);
}

.store-modal-head{
    min-height:70px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:#f7faff;
    border-bottom:1px solid #e4ebf4;
}

.store-modal-head small{
    display:block;
    color:#1768ca;
    font-size:9px;
    font-weight:900;
    letter-spacing:.11em;
}

.store-modal-head strong{
    display:block;
    margin-top:4px;
    color:#10213a;
    font-size:18px;
}

.store-modal-close{
    width:34px;
    height:34px;
    border:1px solid #d9e2ed;
    border-radius:9px;
    background:#fff;
    color:#6b7789;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}

.store-modal-close:hover{
    color:#16243a;
    background:#f7f9fc;
}

.store-modal-body{
    padding:18px;
}

.store-modal-copy{
    margin:0 0 16px;
    color:#637187;
    font-size:12px;
    line-height:1.55;
}

.store-modal-form label{
    display:block;
    margin-bottom:7px;
    color:#24344a;
    font-size:11px;
    font-weight:800;
}

.store-modal-phone{
    height:48px;
    display:flex;
    overflow:hidden;
    border:1px solid #d8e1ec;
    border-radius:10px;
    background:#fff;
}

.store-modal-phone > span{
    width:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f6f8fb;
    border-right:1px solid #d8e1ec;
    color:#334155;
    font-size:13px;
    font-weight:800;
}

.store-modal-phone input{
    flex:1;
    min-width:0;
    height:100%;
    padding:0 12px;
    border:0;
    outline:0;
    color:#1f2d42;
    font-size:15px;
}

.store-modal-primary{
    width:100%;
    height:48px;
    margin-top:14px;
    border:0;
    border-radius:10px;
    background:#1269d3;
    color:#fff;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.store-modal-primary:hover{
    background:#0d58b8;
}

.store-modal-secondary{
    width:100%;
    height:42px;
    margin-top:8px;
    border:1px solid #d8e1ec;
    border-radius:9px;
    background:#fff;
    color:#58687c;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.store-modal-secondary:hover{
    background:#f7f9fc;
}

.store-modal-otp{
    width:100%;
    height:54px;
    border:1px solid #d8e1ec;
    border-radius:10px;
    outline:0;
    text-align:center;
    color:#0f1e34;
    font-size:25px;
    font-weight:800;
    letter-spacing:.32em;
    padding-left:.32em;
}

.store-modal-alert{
    margin-bottom:14px;
    padding:10px 11px;
    border-radius:9px;
    font-size:11px;
    line-height:1.4;
}

.store-modal-alert.error{
    color:#a61b1b;
    background:#fff1f1;
    border:1px solid #ffd0d0;
}

.store-modal-alert.success{
    color:#146c36;
    background:#edf9f1;
    border:1px solid #cdeed7;
}

.store-modal-alert.dev{
    color:#7d5200;
    background:#fff8e7;
    border:1px solid #f2dfaa;
}


/* ============================================================
 * TIENDA MÓVIL · PEDIDO ACTUAL
 * Corrección de columnas, desbordamiento y espacio vertical.
 * Insertar al FINAL de store.css para que tenga prioridad.
 * ============================================================ */
@media(max-width:980px){

    /* El panel deja de comportarse como columna rígida de escritorio. */
    .store-order{
        position:relative !important;
        top:auto !important;
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
    }

    /* El listado no debe crecer para llenar toda la pantalla. */
    .store-lines{
        flex:0 0 auto !important;
        margin:0 12px !important;
        overflow:visible !important;
        border-top:0 !important;
        border-bottom:1px solid var(--pos-line) !important;
    }

    /* En móvil no necesitamos encabezado de columnas. */
    .store-lines .pos-lines-head{
        display:none !important;
    }

    /* Cada producto se convierte en una tarjeta/fila responsive. */
    .store-lines .pos-line{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        grid-template-areas:
            "product delete"
            "qty price"
            "qty total" !important;
        gap:6px 12px !important;
        width:100% !important;
        min-width:0 !important;
        padding:14px 4px !important;
        border-bottom:1px solid #e3e8ef !important;
        box-sizing:border-box !important;
    }

    .store-lines .pos-line:last-child{
        border-bottom:0 !important;
    }

    .store-lines .pos-line-product{
        grid-area:product !important;
        min-width:0 !important;
        padding-right:4px !important;
    }

    .store-lines .pos-line-name{
        font-size:14px !important;
        line-height:1.25 !important;
        font-weight:800 !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
        word-break:break-word !important;
    }

    .store-lines .pos-line-code{
        margin-top:4px !important;
        font-size:11px !important;
        line-height:1.2 !important;
    }

    .store-lines .pos-qty{
        grid-area:qty !important;
        align-self:center !important;
        justify-self:start !important;
        width:auto !important;
        min-width:0 !important;
    }

    .store-lines .pos-qty a{
        width:36px !important;
        height:36px !important;
        font-size:20px !important;
    }

    .store-lines .pos-qty span{
        min-width:38px !important;
        height:36px !important;
        font-size:14px !important;
    }

    .store-lines .pos-line-price{
        grid-area:price !important;
        align-self:end !important;
        justify-self:end !important;
        display:flex !important;
        align-items:baseline !important;
        justify-content:flex-end !important;
        gap:4px !important;
        width:auto !important;
        min-width:0 !important;
        text-align:right !important;
        white-space:nowrap !important;
    }

    .store-lines .pos-line-total{
        grid-area:total !important;
        align-self:start !important;
        justify-self:end !important;
        width:auto !important;
        min-width:0 !important;
        padding-right:0 !important;
        text-align:right !important;
        white-space:nowrap !important;
    }

    .store-lines .pos-line-delete{
        grid-area:delete !important;
        align-self:start !important;
        justify-self:end !important;
        width:30px !important;
        min-width:30px !important;
        height:30px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:7px !important;
        background:#fff4f3 !important;
        color:var(--pos-red) !important;
        font-size:20px !important;
        line-height:1 !important;
    }

    .store-lines .store-money-currency{
        font-size:10px !important;
    }

    .store-lines .store-money-amount{
        font-size:13px !important;
    }

    .store-lines .pos-line-total .store-money-amount{
        font-size:14px !important;
    }

    .store-lines .store-line-tax{
        margin-top:3px !important;
        font-size:9px !important;
        line-height:1.1 !important;
    }

    /* El resumen aparece inmediatamente después del último producto. */
    .store-summary{
        margin-top:0 !important;
        padding:14px 22px 10px !important;
    }

    .store-summary .pos-summary-row{
        padding:7px 0 !important;
        font-size:15px !important;
    }

    .store-summary .pos-summary-row.total{
        margin-top:8px !important;
        padding-top:14px !important;
        font-size:20px !important;
    }

    .store-summary .pos-summary-row.total strong{
        font-size:24px !important;
    }

    .store-send-wrap{
        padding:0 22px 22px !important;
    }

    .store-send{
        height:56px !important;
        font-size:18px !important;
    }
}

/* Ajuste adicional para teléfonos estrechos. */
@media(max-width:480px){
    .store-lines .pos-line{
        grid-template-columns:minmax(0,1fr) auto !important;
        gap:5px 8px !important;
        padding:13px 2px !important;
    }

    .store-lines .pos-qty a{
        width:34px !important;
        height:34px !important;
    }

    .store-lines .pos-qty span{
        min-width:36px !important;
        height:34px !important;
    }

    .store-lines .pos-line-delete{
        width:28px !important;
        min-width:28px !important;
        height:28px !important;
    }
}


/* ============================================================
 * TIENDA MÓVIL · BARRA FIJA Y PANEL DEL PEDIDO · v32
 * ============================================================ */
.store-mobile-cart-bar,
.store-mobile-cart-backdrop,
.store-mobile-cart-close{
    display:none;
}

@media(max-width:980px){

    /* Deja espacio para la barra fija inferior mientras se navega. */
    .online-store-page{
        padding-bottom:86px;
    }

    .store-mobile-cart-bar{
        appearance:none;
        -webkit-appearance:none;
        position:fixed;
        left:12px;
        right:12px;
        bottom:calc(10px + env(safe-area-inset-bottom));
        z-index:9000;
        min-height:64px;
        padding:8px 12px;
        border:1px solid rgba(7,26,56,.08);
        border-radius:16px;
        background:#071a38;
        color:#fff;
        box-shadow:0 12px 34px rgba(7,26,56,.28);
        display:grid;
        grid-template-columns:38px minmax(0,1fr) auto;
        align-items:center;
        gap:10px;
        text-align:left;
        font:inherit;
        cursor:pointer;
    }

    .store-mobile-cart-bar:disabled{
        display:none;
    }

    .store-mobile-cart-icon{
        width:38px;
        height:38px;
        border-radius:11px;
        display:grid;
        place-items:center;
        background:rgba(255,255,255,.10);
        font-size:20px;
    }

    .store-mobile-cart-copy{
        min-width:0;
        display:block;
    }

    .store-mobile-cart-copy strong{
        display:block;
        color:#fff;
        font-size:13px;
        line-height:1.15;
        font-weight:800;
    }

    .store-mobile-cart-copy small{
        display:block;
        margin-top:4px;
        color:#bcd6fa;
        font-size:12px;
        line-height:1.15;
        font-weight:700;
    }

    .store-mobile-cart-action{
        min-height:38px;
        padding:0 12px;
        border-radius:10px;
        background:#1269d3;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-size:11px;
        line-height:1;
        font-weight:900;
        white-space:nowrap;
    }

    .store-mobile-cart-backdrop{
        position:fixed;
        inset:0;
        z-index:9100;
        background:rgba(7,26,56,.46);
        backdrop-filter:blur(2px);
    }

    body.store-mobile-cart-open{
        overflow:hidden;
    }

    body.store-mobile-cart-open .store-mobile-cart-backdrop{
        display:block;
    }

    /*
     * En móvil el pedido deja de formar parte del flujo de la página.
     * Se convierte en un panel deslizable desde abajo.
     */
    .online-store-page .store-order{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        top:auto !important;
        z-index:9200 !important;
        width:100% !important;
        max-width:none !important;
        height:auto !important;
        max-height:88vh !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 0 env(safe-area-inset-bottom) !important;
        overflow:hidden !important;
        border-radius:20px 20px 0 0 !important;
        background:#fff !important;
        box-shadow:0 -18px 50px rgba(7,26,56,.28) !important;
        transform:translateY(105%) !important;
        transition:transform .22s ease !important;
        pointer-events:none !important;
    }

    body.store-mobile-cart-open .store-order{
        transform:translateY(0) !important;
        pointer-events:auto !important;
    }

    .online-store-page .store-order .pos-sale-head{
        flex:0 0 auto !important;
        min-height:58px !important;
        padding:14px 16px 10px !important;
        border-bottom:1px solid #e7edf4 !important;
        background:#fff !important;
    }

    .store-mobile-cart-close{
        appearance:none;
        -webkit-appearance:none;
        width:34px;
        height:34px;
        padding:0;
        border:1px solid #dce3ec;
        border-radius:9px;
        background:#f5f8fc;
        color:#334155;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:22px;
        line-height:1;
        cursor:pointer;
    }

    .online-store-page .store-order .pos-sale-head-actions{
        gap:8px !important;
    }

    .online-store-page .store-customer-card{
        flex:0 0 auto !important;
        margin-top:8px !important;
    }

    /*
     * El listado puede crecer, pero solo dentro del panel.
     * El resumen y ENVIAR PEDIDO permanecen visibles debajo.
     */
    .online-store-page .store-lines{
        flex:1 1 auto !important;
        max-height:38vh !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        overscroll-behavior:contain;
    }

    .online-store-page .store-summary{
        flex:0 0 auto !important;
        border-top:1px solid #e7edf4 !important;
        background:#fff !important;
    }

    .online-store-page .store-send-wrap{
        flex:0 0 auto !important;
        background:#fff !important;
    }

    /* El catálogo ocupa toda la página; el panel ya no crea una segunda sección abajo. */
    .online-store-page .store-main{
        display:block !important;
        min-height:0 !important;
    }

    .online-store-page .store-catalog{
        width:100% !important;
        border-right:0 !important;
    }
}

@media(max-width:420px){
    .store-mobile-cart-bar{
        left:8px;
        right:8px;
        bottom:calc(8px + env(safe-area-inset-bottom));
        grid-template-columns:34px minmax(0,1fr) auto;
        gap:8px;
        min-height:60px;
        padding:7px 9px;
        border-radius:14px;
    }

    .store-mobile-cart-icon{
        width:34px;
        height:34px;
        border-radius:10px;
        font-size:18px;
    }

    .store-mobile-cart-action{
        min-height:36px;
        padding:0 10px;
        font-size:10px;
    }

    .online-store-page .store-order{
        max-height:91vh !important;
    }

    .online-store-page .store-lines{
        max-height:40vh !important;
    }
}


/* ============================================================
 * FIX v33 · MOSTRAR PANEL DEL PEDIDO EN MÓVIL
 * La clase .online-store-page está en <body>, no dentro de <body>.
 * Por eso el selector anterior nunca encontraba .store-order.
 * ============================================================ */
@media(max-width:980px){
    body.store-mobile-cart-open .store-order{
        transform:translateY(0) !important;
        pointer-events:auto !important;
        visibility:visible !important;
    }
}


/* ============================================================
 * FIX v34 · SCROLL CORRECTO DEL LISTADO DEL PEDIDO EN MÓVIL
 * Mantiene fijos cabecera, cliente, resumen y botón.
 * Solo se desplaza la lista de productos.
 * ============================================================ */
@media(max-width:980px){

    .online-store-page .store-order{
        display:flex !important;
        flex-direction:column !important;
        max-height:90vh !important;
    }

    .online-store-page .store-order .pos-sale-head,
    .online-store-page .store-customer-card,
    .online-store-page .store-summary,
    .online-store-page .store-send-wrap{
        flex:0 0 auto !important;
    }

    .online-store-page .store-lines{
        flex:1 1 auto !important;
        min-height:120px !important;
        max-height:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        overscroll-behavior:contain !important;
        padding-bottom:12px !important;
        scroll-padding-bottom:18px !important;
    }

    .online-store-page .store-lines .pos-line:last-child{
        margin-bottom:8px !important;
    }

    .online-store-page .store-summary{
        position:relative !important;
        z-index:2 !important;
        box-shadow:0 -8px 18px rgba(15,23,42,.05) !important;
    }

    .online-store-page .store-send-wrap{
        position:relative !important;
        z-index:3 !important;
    }
}

@media(max-width:420px){
    .online-store-page .store-order{
        max-height:92vh !important;
    }

    .online-store-page .store-lines{
        min-height:110px !important;
        padding-bottom:14px !important;
    }
}


/* ============================================================
 * v35 · ENCABEZADO FIJO EN MÓVIL
 * Mantiene visible: nombre de tienda + cuenta + buscador.
 * Las categorías y productos continúan desplazándose.
 * ============================================================ */
@media(max-width:980px){

    .store-topbar{
        position:sticky !important;
        top:0 !important;
        z-index:8500 !important;
        min-height:0 !important;
        display:grid !important;
        grid-template-columns:minmax(0,1fr) 58px !important;
        grid-template-areas:
            "brand user"
            "search search" !important;
        align-items:center !important;
        background:var(--pos-navy) !important;
        box-shadow:0 5px 14px rgba(7,26,56,.20) !important;
    }

    .store-brand{
        grid-area:brand !important;
        display:flex !important;
        min-width:0 !important;
        padding:12px 10px 8px 20px !important;
    }

    .store-brand > div{
        min-width:0 !important;
    }

    .store-brand > div > div{
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .store-brand small{
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .store-user-menu{
        grid-area:user !important;
        display:flex !important;
        align-self:stretch !important;
        justify-content:center !important;
        padding:6px 8px 2px 0 !important;
        border-right:0 !important;
    }

    .store-user-button{
        width:46px !important;
        min-width:46px !important;
        height:46px !important;
        padding:5px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:11px !important;
    }

    .store-user-avatar{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px !important;
    }

    .store-user-text,
    .store-user-caret{
        display:none !important;
    }

    .store-user-dropdown{
        position:absolute !important;
        top:calc(100% + 8px) !important;
        right:12px !important;
        left:auto !important;
        width:min(360px,calc(100vw - 24px)) !important;
        max-width:calc(100vw - 24px) !important;
    }

    .store-search{
        grid-area:search !important;
        display:block !important;
        width:100% !important;
        padding:7px 14px 14px !important;
        border-left:0 !important;
        border-right:0 !important;
    }

    .store-search .pos-search-box input{
        height:52px !important;
    }

    .store-clock{
        display:none !important;
    }
}

@media(max-width:480px){
    .store-brand{
        padding-left:18px !important;
    }

    .store-brand .pos-brand-icon svg{
        width:28px !important;
        height:28px !important;
    }

    .store-search{
        padding:6px 14px 12px !important;
    }

    .store-search .pos-search-box input{
        height:50px !important;
        font-size:15px !important;
    }
}


/* ============================================================
 * FIX v36 · STICKY REAL DEL ENCABEZADO EN MÓVIL
 *
 * .store-shell tenía overflow-x:hidden. Ese overflow convierte al
 * contenedor en referencia de desplazamiento y evita que position:sticky
 * se adhiera al viewport del navegador móvil.
 * ============================================================ */
@media(max-width:980px){

    html,
    body{
        overflow-x:hidden !important;
    }

    .store-shell{
        overflow:visible !important;
        overflow-x:visible !important;
    }

    .store-topbar{
        position:-webkit-sticky !important;
        position:sticky !important;
        top:0 !important;
        z-index:8500 !important;
        width:100% !important;
        isolation:isolate !important;
    }
}


/* ============================================================
 * FIX v38 · ENCABEZADO MÓVIL REALMENTE FIJO
 *
 * Se abandona position:sticky y se usa position:fixed.
 * La altura real se mide desde tienda.php y se guarda en:
 * --store-mobile-header-height
 * ============================================================ */
@media(max-width:980px){

    html,
    body{
        overflow-x:hidden !important;
    }

    .store-shell{
        overflow-x:hidden !important;
        overflow-y:visible !important;
        padding-top:var(--store-mobile-header-height,124px) !important;
    }

    .store-topbar{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        z-index:8500 !important;
        margin:0 !important;
        transform:none !important;
        will-change:auto !important;
    }

    /*
     * No reservamos espacio adicional en el catálogo:
     * el padding de .store-shell ya compensa la cabecera fija.
     */
    .store-main{
        margin-top:0 !important;
    }
}

@media(min-width:981px){
    .store-shell{
        padding-top:0 !important;
    }
}


/* ============================================================
 * FIX v39 · ESPACIO EXACTO DEBAJO DEL ENCABEZADO FIJO
 * ============================================================ */
@media(max-width:980px){

    .store-shell{
        /*
         * 168px es solo respaldo inicial.
         * tienda.php reemplaza este valor con la altura real + 12px.
         */
        padding-top:var(--store-mobile-header-height,168px) !important;
    }

    .store-main{
        position:relative !important;
        z-index:1 !important;
    }

    .store-catalog{
        padding-top:12px !important;
    }
}


/* ============================================================
 * v40 · CONFIRMACIÓN VISUAL DEL PEDIDO
 * Reemplaza únicamente la alerta nativa window.confirm().
 * No modifica VER PEDIDO, MIS PEDIDOS ni la cabecera móvil.
 * ============================================================ */
.store-order-confirm-backdrop{
    position:fixed;
    inset:0;
    z-index:20000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(7,26,56,.58);
}

.store-order-confirm-backdrop.open{
    display:flex;
}

.store-order-confirm-card{
    position:relative;
    width:min(460px,94vw);
    padding:28px 26px 24px;
    border:1px solid #dbe4ef;
    border-radius:20px;
    background:#fff;
    box-shadow:0 28px 80px rgba(4,18,42,.34);
    text-align:center;
}

.store-order-confirm-close{
    appearance:none;
    -webkit-appearance:none;
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid #dfe6ef;
    border-radius:10px;
    background:#f7f9fc;
    color:#64748b;
    font:inherit;
    font-size:23px;
    line-height:1;
    cursor:pointer;
}

.store-order-confirm-close:hover{
    background:#eef3f8;
    color:#17233b;
}

.store-order-confirm-icon{
    width:64px;
    height:64px;
    margin:2px auto 14px;
    border-radius:18px;
    display:grid;
    place-items:center;
    color:#1269d3;
    background:#eaf3ff;
    box-shadow:inset 0 0 0 1px #d6e8ff;
}

.store-order-confirm-icon svg{
    width:34px;
    height:34px;
    display:block;
}

.store-order-confirm-eyebrow{
    color:#1269d3;
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.14em;
}

.store-order-confirm-card h2{
    margin:9px 34px 0;
    color:#10213a;
    font-size:22px;
    line-height:1.2;
    font-weight:900;
}

.store-order-confirm-card p{
    margin:10px auto 0;
    max-width:360px;
    color:#66758a;
    font-size:13px;
    line-height:1.5;
}

.store-order-confirm-summary{
    margin:22px 0 20px;
    padding:17px 16px 16px;
    border:1px solid #dde7f2;
    border-radius:14px;
    background:#f8fbff;
}

.store-order-confirm-summary > span{
    display:block;
    color:#637187;
    font-size:11px;
    font-weight:800;
}

.store-order-confirm-summary > strong{
    display:block;
    margin-top:7px;
    color:#1156b7;
    font-size:28px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.4px;
}

.store-order-confirm-summary > small{
    display:block;
    margin-top:8px;
    color:#7a8798;
    font-size:10px;
    line-height:1.25;
    font-weight:700;
}

.store-order-confirm-actions{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
    gap:10px;
}

.store-order-confirm-cancel,
.store-order-confirm-submit{
    appearance:none;
    -webkit-appearance:none;
    min-height:50px;
    padding:0 14px;
    border-radius:11px;
    font:inherit;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.store-order-confirm-cancel{
    border:1px solid #d7e0ea;
    background:#fff;
    color:#536276;
}

.store-order-confirm-cancel:hover{
    background:#f6f8fb;
}

.store-order-confirm-submit{
    border:1px solid #10a246;
    background:#0caf46;
    color:#fff;
    box-shadow:0 6px 16px rgba(12,175,70,.20);
}

.store-order-confirm-submit:hover{
    background:#099a3d;
}

@media(max-width:520px){
    .store-order-confirm-backdrop{
        padding:14px;
    }

    .store-order-confirm-card{
        width:100%;
        padding:26px 18px 18px;
        border-radius:18px;
    }

    .store-order-confirm-icon{
        width:58px;
        height:58px;
        border-radius:16px;
    }

    .store-order-confirm-icon svg{
        width:31px;
        height:31px;
    }

    .store-order-confirm-card h2{
        margin-left:28px;
        margin-right:28px;
        font-size:20px;
    }

    .store-order-confirm-card p{
        font-size:12px;
    }

    .store-order-confirm-summary{
        margin:18px 0;
        padding:15px 12px 14px;
    }

    .store-order-confirm-summary > strong{
        font-size:26px;
    }

    .store-order-confirm-actions{
        grid-template-columns:1fr 1.35fr;
        gap:8px;
    }

    .store-order-confirm-cancel,
    .store-order-confirm-submit{
        min-height:48px;
        padding:0 10px;
        font-size:10px;
    }
}

@media(max-width:360px){
    .store-order-confirm-actions{
        grid-template-columns:1fr;
    }

    .store-order-confirm-submit{
        grid-row:1;
    }
}


/* ============================================================
 * v41 · CATEGORÍAS VISIBLES DEBAJO DEL BUSCADOR EN MÓVIL
 * Único ajuste externo de esta revisión.
 * ============================================================ */
@media(max-width:980px){

    .online-store-page .store-categories{
        position:sticky !important;
        top:var(--store-mobile-header-height,168px) !important;
        z-index:8400 !important;

        margin:-12px -10px 10px -14px !important;
        padding:10px 14px 12px !important;

        background:var(--pos-bg) !important;
        border-bottom:1px solid #e2e8f0 !important;
        box-shadow:0 5px 12px rgba(7,26,56,.05) !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
    }

    .online-store-page .store-categories::-webkit-scrollbar{
        display:none !important;
    }

    .online-store-page .store-categories .pos-category{
        flex:0 0 auto !important;
    }
}


/* ============================================================
 * v42 · FIX MÓVIL · LOGO DE TIENDA + FAVORITOS
 *
 * Estas reglas críticas viven también en el CSS externo para que
 * el encabezado y el corazón no dependan de estilos inline.
 * Escritorio conserva las dimensiones aprobadas; móvil se compacta.
 * ============================================================ */

/* Logo de la tienda · escritorio: conserva 68px. */
body.online-store-page .store-topbar .store-brand .pos-brand-icon.has-store-logo{
    position:relative !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    flex:0 0 68px !important;
    width:68px !important;
    height:68px !important;
    min-width:68px !important;
    min-height:68px !important;
    max-width:68px !important;
    max-height:68px !important;
    padding:5px !important;
    border-radius:50% !important;
    background:#fff !important;
    border:4px solid rgba(241,246,252,.98) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.16),0 0 0 1px rgba(255,255,255,.35) !important;
}

body.online-store-page .store-topbar .store-brand .pos-brand-icon.has-store-logo .store-brand-logo{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:50% !important;
    background:#fff !important;
}

body.online-store-page .store-topbar .store-brand .pos-brand-icon.has-store-logo > svg{
    display:none !important;
}

/* Favorito: tamaño blindado para evitar el SVG nativo 300x150. */
body.online-store-page .store-product > .store-favorite-button{
    appearance:none !important;
    -webkit-appearance:none !important;
    position:absolute !important;
    top:10px !important;
    left:10px !important;
    z-index:6 !important;
    display:grid !important;
    place-items:center !important;
    box-sizing:border-box !important;
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    max-width:36px !important;
    max-height:36px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(207,217,230,.96) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.95) !important;
    color:#718096 !important;
    box-shadow:0 4px 12px rgba(15,23,42,.12) !important;
    line-height:1 !important;
}

body.online-store-page .store-product > .store-favorite-button > svg{
    display:block !important;
    flex:0 0 19px !important;
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    min-height:19px !important;
    max-width:19px !important;
    max-height:19px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    pointer-events:none !important;
}

body.online-store-page .store-product > .store-favorite-button.is-favorite{
    border-color:#f1aab4 !important;
    background:#fff3f5 !important;
    color:#d6283c !important;
}

body.online-store-page .store-product > .store-favorite-button.is-favorite > svg{
    fill:currentColor !important;
}

@media(max-width:980px){
    body.online-store-page .store-topbar .store-brand .pos-brand-icon.has-store-logo{
        flex-basis:44px !important;
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        min-height:44px !important;
        max-width:44px !important;
        max-height:44px !important;
        padding:3px !important;
        border-width:3px !important;
        box-shadow:0 4px 12px rgba(0,0,0,.15) !important;
    }

    body.online-store-page .store-product > .store-favorite-button{
        top:8px !important;
        left:8px !important;
        flex-basis:32px !important;
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        min-height:32px !important;
        max-width:32px !important;
        max-height:32px !important;
    }

    body.online-store-page .store-product > .store-favorite-button > svg{
        flex-basis:17px !important;
        width:17px !important;
        height:17px !important;
        min-width:17px !important;
        min-height:17px !important;
        max-width:17px !important;
        max-height:17px !important;
    }
}

@media(max-width:480px){
    body.online-store-page .store-topbar .store-brand .pos-brand-icon.has-store-logo{
        flex-basis:40px !important;
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;
        max-width:40px !important;
        max-height:40px !important;
    }
}


/* ============================================================
 * FIX v43 · VER PEDIDO VISIBLE SOBRE EL BACKDROP EN MÓVIL
 *
 * v39 dejó .store-main con z-index:1, creando un stacking context.
 * Como .store-order vive dentro de .store-main y el backdrop vive
 * fuera, el panel quedaba debajo del backdrop aunque tuviera z-index:9200.
 * Al abrir el pedido eliminamos ese stacking context para que el panel
 * fijo pueda respetar su z-index global y quedar sobre el backdrop.
 * ============================================================ */
@media(max-width:980px){
    body.store-mobile-cart-open .store-main{
        z-index:auto !important;
    }

    body.store-mobile-cart-open .store-order{
        z-index:9200 !important;
        transform:translateY(0) !important;
        pointer-events:auto !important;
        visibility:visible !important;
    }

    body.store-mobile-cart-open .store-mobile-cart-backdrop{
        z-index:9100 !important;
    }
}


/* ============================================================
 * FIX v44 · PANEL DEL PEDIDO FUERA DEL STACKING CONTEXT
 *
 * tienda.php mueve #storeMobileCartPanel directamente bajo <body>
 * cuando el viewport es <= 980px. El panel ya no queda atrapado
 * dentro del z-index de .store-main y se muestra sobre el backdrop.
 * ============================================================ */
@media(max-width:980px){
    body.online-store-page > #storeMobileCartPanel{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        top:auto !important;
        z-index:9200 !important;
        width:100% !important;
        max-width:none !important;
        max-height:90vh !important;
        min-height:0 !important;
        margin:0 !important;
        transform:translateY(105%) !important;
        transition:transform .22s ease !important;
        pointer-events:none !important;
        visibility:visible !important;
    }

    body.online-store-page.store-mobile-cart-open > #storeMobileCartPanel{
        transform:translateY(0) !important;
        pointer-events:auto !important;
        visibility:visible !important;
    }

    body.online-store-page .store-mobile-cart-backdrop{
        z-index:9100 !important;
    }
}

@media(max-width:420px){
    body.online-store-page > #storeMobileCartPanel{
        max-height:92vh !important;
    }
}