:root {
    --shop-surface: #ffffff;
    --shop-surface-soft: #f8fafc;
    --shop-text: #111827;
    --shop-muted: #64748b;
    --shop-primary: #0f62fe;
    --shop-primary-dark: #0b4bd3;
    --shop-accent: #f59e0b;
    --shop-danger: #dc2626;
    --shop-success: #16a34a;
    --shop-border: rgba(15, 23, 42, .1);
    --shop-shadow: 0 18px 45px rgba(15, 23, 42, .14);
    --shop-radius: 22px;
}

.shop-section { margin: 32px auto; }
.section-shell { max-width: 1180px; margin-inline: auto; }

.conversion-banner,
.whatsapp-cta,
.detail-shell,
.quick-card,
.track-shell,
.favorites-modern-panel {
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow);
}

.conversion-banner {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 24px;
    padding: 28px;
    align-items: center;
}

.conversion-banner h2,
.whatsapp-cta h2 { color: var(--shop-text); font-weight: 900; margin-bottom: 10px; }
.conversion-banner p,
.whatsapp-cta p { color: var(--shop-muted); margin: 0; line-height: 1.8; }

.conversion-points { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.conversion-points div {
    padding: 14px;
    background: var(--shop-surface-soft);
    border-radius: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 800;
    color: var(--shop-text);
}
.conversion-points i { color: var(--shop-primary); font-size: 1.2rem; }

.promo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.promo-card {
    background: #fff;
    border: 1px solid var(--shop-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
    transition: transform .2s ease, box-shadow .2s ease;
}
.promo-card:hover { transform: translateY(-4px); box-shadow: var(--shop-shadow); }
.promo-card__image { position: relative; aspect-ratio: 4 / 5; background: #eef2ff; overflow: hidden; }
.promo-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-card__badge {
    position: absolute; top: 12px; inset-inline-start: 12px;
    background: var(--shop-accent); color: #111827;
    border-radius: 999px; padding: 5px 11px; font-weight: 900; font-size: .8rem;
}
.promo-card__body { padding: 14px; }
.promo-card__body small { color: var(--shop-muted); font-weight: 800; }
.promo-card__body h3 { color: var(--shop-text); font-size: 1rem; font-weight: 900; margin: 6px 0; min-height: 42px; }
.promo-card__price { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.promo-card__price strong { color: var(--shop-primary); font-size: 1.1rem; }
.promo-card__price del { color: var(--shop-muted); }
.promo-actions { display: grid; grid-template-columns: 1fr 44px; gap: 8px; }

.btn-shop-primary,
.btn-primary-cta {
    border: 0 !important;
    background: linear-gradient(135deg, var(--shop-primary), var(--shop-primary-dark)) !important;
    color: #fff !important;
    font-weight: 900 !important;
    border-radius: 14px !important;
    padding: 11px 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-shop-primary:hover,
.btn-primary-cta:hover { filter: brightness(.96); color: #fff !important; }
.btn-shop-outline {
    background: #fff !important;
    border: 1px solid var(--shop-border) !important;
    color: var(--shop-text) !important;
    font-weight: 900 !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
}
.btn-shop-icon {
    width: 44px; height: 44px; border-radius: 14px !important;
    border: 1px solid var(--shop-border) !important;
    background: #fff !important;
    color: var(--shop-primary) !important;
    display: inline-flex; align-items: center; justify-content: center;
}

.product-card-v2 .product-actions { grid-template-columns: 1fr 44px 44px; }
.product-card-v2 .product-body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 48px; }

.whatsapp-cta {
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #fff, #ecfdf5);
}
.whatsapp-cta .btn { background: #16a34a !important; color: #fff !important; border: 0 !important; border-radius: 16px; font-weight: 900; padding: 12px 18px; }

.detail-shell { padding: 28px; margin-top: 26px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 32px; align-items: start; }
.detail-media {
    background: #f8fafc;
    border: 1px solid var(--shop-border);
    border-radius: 24px;
    padding: 16px;
    position: sticky;
    top: 100px;
}
.detail-media img { width: 100%; aspect-ratio: 4/5; object-fit: contain; border-radius: 18px; background: #fff; }
.detail-info .category { color: var(--shop-primary); font-weight: 900; }
.detail-info h1 { color: var(--shop-text); font-weight: 900; margin: 10px 0; }
.detail-rating { display: flex; align-items: center; gap: 8px; color: var(--shop-muted); margin-bottom: 14px; }
.detail-rating i { color: var(--shop-accent); }
.detail-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.detail-price strong { color: var(--shop-primary); font-size: 2rem; font-weight: 900; }
.detail-price del { color: var(--shop-muted); font-size: 1.15rem; }
.detail-description { color: var(--shop-text); line-height: 1.9; background: var(--shop-surface-soft); border-radius: 18px; padding: 18px; margin-bottom: 18px; }
.quantity-box { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.quantity-box input { max-width: 92px; text-align: center; border-radius: 14px; padding: 11px; border: 1px solid var(--shop-border); }
.detail-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.detail-trust div { background: #fff; border: 1px solid var(--shop-border); border-radius: 16px; padding: 14px; color: var(--shop-text); font-weight: 800; text-align: center; }
.detail-trust i { display: block; color: var(--shop-primary); font-size: 1.4rem; margin-bottom: 6px; }

.review-panel,
.related-panel { margin-top: 26px; background: rgba(255,255,255,.96); border: 1px solid var(--shop-border); border-radius: var(--shop-radius); padding: 24px; box-shadow: var(--shop-shadow); }
.review-list { display: grid; gap: 12px; }
.review-item { background: var(--shop-surface-soft); border-radius: 16px; padding: 16px; }
.review-item header { display: flex; justify-content: space-between; gap: 12px; color: var(--shop-text); font-weight: 900; }
.review-stars { color: var(--shop-accent); white-space: nowrap; }
.review-form { display: grid; gap: 12px; margin-bottom: 20px; }
.review-form select, .review-form textarea { border-radius: 14px; border: 1px solid var(--shop-border); padding: 12px; }

.cart-drawer-offcanvas { width: min(440px, 100vw) !important; }
.cart-drawer { height: 100%; display: flex; flex-direction: column; }
.cart-drawer__items { flex: 1; overflow-y: auto; display: grid; gap: 12px; padding: 12px 0; }
.cart-drawer-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--shop-border); border-radius: 16px; padding: 10px; }
.cart-drawer-item img { width: 72px; height: 86px; object-fit: cover; border-radius: 12px; background: #f8fafc; }
.cart-drawer-item h4 { font-size: .95rem; font-weight: 900; margin: 0 0 4px; color: var(--shop-text); }
.cart-drawer-item small { color: var(--shop-muted); }
.cart-qty { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.cart-qty button { width: 30px; height: 30px; border: 1px solid var(--shop-border); background: #fff; border-radius: 10px; }
.cart-drawer__footer { border-top: 1px solid var(--shop-border); padding-top: 16px; }
.cart-total-row { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 900; margin-bottom: 12px; }
.empty-cart-drawer { text-align: center; padding: 40px 16px; color: var(--shop-muted); }
.empty-cart-drawer i { font-size: 3rem; color: var(--shop-primary); }

.quick-view-modal .modal-content { border: 0; border-radius: 24px; overflow: hidden; }
.quick-card { box-shadow: none; border: 0; display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; }
.quick-card img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; background: #f8fafc; }
.quick-card__body { padding: 26px; }
.quick-card__body h2 { font-weight: 900; color: var(--shop-text); }

.track-shell { padding: 28px; margin-top: 28px; }
.track-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 22px; }
.track-form input { border-radius: 14px; border: 1px solid var(--shop-border); padding: 12px; }
.status-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
.status-timeline .step { background: var(--shop-surface-soft); border-radius: 16px; padding: 14px; text-align: center; color: var(--shop-muted); font-weight: 800; }
.status-timeline .step.active { background: #dbeafe; color: var(--shop-primary); }
.status-timeline .step.done { background: #dcfce7; color: var(--shop-success); }

.favorites-modern-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.favorites-modern-panel { padding: 26px; }

.shop-toast {
    position: fixed;
    bottom: 24px;
    inset-inline-start: 24px;
    z-index: 2000;
    background: #111827;
    color: #fff;
    padding: 12px 16px;
    border-radius: 14px;
    box-shadow: var(--shop-shadow);
    opacity: 0;
    transform: translateY(10px);
    transition: .2s ease;
    pointer-events: none;
}
.shop-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 992px) {
    .conversion-banner,
    .whatsapp-cta,
    .detail-grid,
    .quick-card { grid-template-columns: 1fr; }
    .promo-grid,
    .favorites-modern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-media { position: static; }
    .track-form { grid-template-columns: 1fr; }
    .status-timeline { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
    .conversion-points,
    .detail-trust,
    .promo-grid,
    .favorites-modern-grid { grid-template-columns: 1fr; }
    .detail-shell,
    .review-panel,
    .related-panel,
    .conversion-banner,
    .whatsapp-cta { padding: 18px; }
    .quick-card img { min-height: 300px; }
    .product-card-v2 .product-actions { grid-template-columns: 1fr 44px; }
    .product-card-v2 .product-actions .js-quick-view { display: none; }
}