/* ============================================================
   Loja: paginacao (Carregar mais) + upsell + order bump
   Aditivo. Usa os tokens existentes da vitrine (--primary, etc).
   Identidade propria da loja: nao usa classes utilitarias de framework.
   ============================================================ */

/* ---- Botao "Carregar mais produtos" ---- */
.btn-carregar-mais {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 999px;
    border: 1.5px solid var(--primary, #059669);
    background: #fff;
    color: var(--primary-dark, #047857);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn-carregar-mais:hover:not(:disabled) {
    background: var(--primary, #059669);
    color: #fff;
    box-shadow: 0 6px 18px var(--primary-glow, rgba(5,150,105,.18));
}
.btn-carregar-mais:disabled { opacity: .65; cursor: default; }

/* ---- Upsell ("leve tambem") no modal do produto ---- */
.upsell-bloco {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--ink-200, #e2e8f0);
}
.upsell-bloco .upsell-titulo {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink-900, #0f172a);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.upsell-bloco .upsell-titulo i { color: var(--primary, #059669); }
.upsell-lista {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}
.upsell-item {
    flex: 0 0 150px;
    scroll-snap-align: start;
    border: 1px solid var(--ink-200, #e2e8f0);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.upsell-item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    background: var(--ink-100, #f1f5f9);
    border-radius: 8px;
}
.upsell-item .upsell-nome {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-900, #0f172a);
    line-height: 1.25;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.upsell-item .upsell-preco {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--primary-dark, #047857);
}
.upsell-item .upsell-add {
    border: none;
    border-radius: 8px;
    background: var(--primary, #059669);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 7px 8px;
    cursor: pointer;
    transition: background .15s ease;
}
.upsell-item .upsell-add:hover { background: var(--primary-dark, #047857); }

/* ---- Order bump no checkout ---- */
.orderbump {
    margin: 4px 0 8px;
    border: 2px dashed var(--primary, #059669);
    border-radius: 12px;
    padding: 14px;
    background: var(--primary-glow, rgba(5,150,105,.08));
}
.orderbump-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.orderbump-check {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    accent-color: var(--primary, #059669);
    cursor: pointer;
}
.orderbump img {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--ink-200, #e2e8f0);
}
.orderbump-info { flex: 1 1 auto; min-width: 0; }
.orderbump-titulo {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--ink-900, #0f172a);
}
.orderbump-sub {
    font-size: 0.82rem;
    color: var(--ink-500, #64748b);
}
.orderbump-preco {
    font-weight: 800;
    color: var(--primary-dark, #047857);
    white-space: nowrap;
}
.orderbump-preco s {
    color: var(--ink-400, #94a3b8);
    font-weight: 600;
    margin-right: 6px;
}
.orderbump-tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    background: var(--primary, #059669);
    border-radius: 999px;
    padding: 2px 8px;
}

@media (max-width: 560px) {
    .orderbump-row { flex-wrap: wrap; }
    .orderbump-preco { width: 100%; text-align: right; }
}