/* Visual refresh limited to the cart opened from the menu. */
.dropcart--style--offcanvas {
    --cart-accent: var(--main-bg-color, #262626);
    --cart-on-accent: var(--main-letra, #fff);
    --cart-border: #e5e7eb;
    --cart-muted: #626873;
    color: #262b33;
}

.dropcart--style--offcanvas .dropcart__backdrop { background: #171b22; }
.dropcart--style--offcanvas.dropcart--open .dropcart__backdrop { opacity: .45; }
.dropcart--style--offcanvas .dropcart__body {
    width: 440px;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100%;
    background: #f7f7f7;
    border-radius: 24px 0 0 24px;
    box-shadow: -12px 0 48px rgba(20, 25, 35, .12);
    overflow: hidden;
}
.dropcart--style--offcanvas #divCarritoAlt { box-shadow: -12px 0 48px rgba(20, 25, 35, .12); }
[dir=rtl] .dropcart--style--offcanvas .dropcart__body { border-radius: 0 24px 24px 0; }

.dropcart--style--offcanvas .dropcart__header {
    height: auto;
    min-height: 100px;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border-bottom: 1px solid var(--cart-border);
}
.dropcart--style--offcanvas .dropcart__heading { min-width: 0; }
.dropcart--style--offcanvas .dropcart__eyebrow { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1.5; color: var(--cart-muted); }
.dropcart--style--offcanvas .dropcart__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: #262b33; font-size: 24px; line-height: 1.25; letter-spacing: -.025em; }
.dropcart--style--offcanvas .dropcart__count { display: inline-flex; justify-content: center; align-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 9px; background: var(--cart-accent); color: var(--cart-on-accent); font-size: 12px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.dropcart--style--offcanvas .dropcart__close { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: #f3f4f6; fill: #626873; }
.dropcart--style--offcanvas :is(a, button):focus-visible,
.dropcart--style--offcanvas .dropcart__close:focus-visible { outline: 3px solid var(--cart-accent); outline-offset: 3px; }

.dropcart--style--offcanvas .dropcart__products-list { min-height: 0; padding: 20px 24px; overflow-y: auto; overscroll-behavior-y: contain; }
.dropcart--style--offcanvas .dropcart__share { margin-bottom: 20px; }
.dropcart--style--offcanvas .dropcart__share-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; border: 1px dashed #d2d6dc; border-radius: 10px; background: #fff; color: #434b56; font-size: 13px; font-weight: 500; white-space: normal; }
.dropcart--style--offcanvas .dropcart__share-button i { color: var(--cart-accent); }
.dropcart--style--offcanvas .dropcart__share-button:hover { border-color: var(--cart-accent); background: #fff; }
.dropcart--style--offcanvas .urlCompartir { display: block; margin-top: 10px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.dropcart--style--offcanvas .urlCompartir:empty { display: none; }
.dropcart--style--offcanvas .dropcart__product { display: grid; grid-template-columns: 64px minmax(0, 1fr) 32px; align-items: start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--cart-border); border-radius: 16px; background: #fff; box-shadow: 0 2px 6px rgba(20, 25, 35, .02); }
.dropcart--style--offcanvas .dropcart__product + .dropcart__product { margin-top: 12px; }
.dropcart--style--offcanvas .dropcart__product--skeleton { align-items: center; }
.dropcart--style--offcanvas .dropcart__skeleton-block { display: block; flex-shrink: 0; max-width: 100%; border-radius: 5px; background: #eceef1; background-image: linear-gradient(100deg, #eceef1 25%, #f7f8fa 45%, #eceef1 65%); background-size: 240% 100%; animation: cart-skeleton-shimmer 1.8s ease-in-out infinite; }
.dropcart--style--offcanvas .dropcart__skeleton-image { width: 64px; height: 72px; border-radius: 10px; }
.dropcart--style--offcanvas .dropcart__skeleton-info { display: grid; gap: 8px; min-width: 0; }
.dropcart--style--offcanvas .dropcart__skeleton-title { width: 100%; height: 12px; }
.dropcart--style--offcanvas .dropcart__skeleton-subtitle { width: 74%; height: 10px; }
.dropcart--style--offcanvas .dropcart__skeleton-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dropcart--style--offcanvas .dropcart__skeleton-quantity { width: 22px; height: 12px; }
.dropcart--style--offcanvas .dropcart__skeleton-price { width: 80px; height: 16px; }
.dropcart--style--offcanvas .dropcart__skeleton-remove { width: 24px; height: 24px; align-self: start; border-radius: 7px; }
.dropcart--style--offcanvas .dropcart__skeleton-footer { margin-top: auto; padding: 22px 24px 24px; }
.dropcart--style--offcanvas .dropcart__skeleton-total { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.dropcart--style--offcanvas .dropcart__skeleton-label { width: 64px; height: 14px; }
.dropcart--style--offcanvas .dropcart__skeleton-amount { width: 110px; height: 24px; }
.dropcart--style--offcanvas .dropcart__skeleton-button { width: 100%; height: 48px; border-radius: 10px; }
@keyframes cart-skeleton-shimmer {
    from { background-position: 150% 0; }
    to { background-position: -90% 0; }
}
.dropcart--style--offcanvas .dropcart__product-image { width: 64px; height: 72px; border-radius: 10px; overflow: hidden; background: #fff; }
.dropcart--style--offcanvas .dropcart__product-image .product-image__body { display: block; height: 100%; padding: 0; }
.dropcart--style--offcanvas .dropcart__product-image .product-image__img { position: static; display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.dropcart--style--offcanvas .dropcart__product-info { min-width: 0; padding: 0; margin: 0; }
.dropcart--style--offcanvas .dropcart__product-name { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.dropcart--style--offcanvas .dropcart__product-name a { color: #262b33; }
.dropcart--style--offcanvas .dropcart__product-options { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--cart-muted); overflow-wrap: anywhere; }
.dropcart--style--offcanvas .dropcart__product-options:empty { display: none; }
.dropcart--style--offcanvas .dropcart__extra { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.dropcart--style--offcanvas .dropcart__extra-remove { width: 32px; height: 32px; padding: 0; flex-shrink: 0; border: 1px solid var(--cart-border); border-radius: 8px; background: #f7f7f7; }
.dropcart--style--offcanvas .dropcart__product-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.dropcart--style--offcanvas .dropcart__product-quantity { color: var(--cart-muted); white-space: nowrap; }
.dropcart--style--offcanvas .dropcart__product-price { font-size: 15px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.dropcart--style--offcanvas .dropcart__product > .dropcart__product-remove { width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 8px; border: 1px solid var(--cart-border); background: #f7f7f7; fill: #707784; }
.dropcart--style--offcanvas .dropcart__product-remove:hover,
.dropcart--style--offcanvas .dropcart__extra-remove:hover { background: #e9ebee; fill: #262b33; }

.dropcart--style--offcanvas .dropcart__footer { flex-shrink: 0; background: #fff; border-top: 1px solid var(--cart-border); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 20px rgba(20, 25, 35, .03); }
.dropcart--style--offcanvas .dropcart__totals { border: 0; padding: 18px 24px 0; }
.dropcart--style--offcanvas .dropcart__totals th,
.dropcart--style--offcanvas .dropcart__totals td { padding: 4px 0; font-size: 13px; line-height: 1.5; font-weight: 400; color: var(--cart-muted); }
.dropcart--style--offcanvas .dropcart__totals td { text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dropcart--style--offcanvas .dropcart__totals th { padding-right: 12px; }
.dropcart--style--offcanvas .dropcart__totals .dropcart__total-row th,
.dropcart--style--offcanvas .dropcart__totals .dropcart__total-row td { padding-top: 14px; color: #262b33; font-weight: 700; }
.dropcart--style--offcanvas .dropcart__totals .dropcart__total-row th { font-size: 16px; }
.dropcart--style--offcanvas .dropcart__totals .dropcart__total-row td { font-size: 25px; letter-spacing: -.025em; }
.dropcart--style--offcanvas .dropcart__buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 18px 24px 24px; }
.dropcart--style--offcanvas .dropcart__buttons > .btn,
.dropcart--style--offcanvas .dropcart__explore { min-height: 48px; display: flex; justify-content: center; align-items: center; margin: 0; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5; font-weight: 600; white-space: normal; }
.dropcart--style--offcanvas .dropcart__buttons > .btn-primary,
.dropcart--style--offcanvas .dropcart__explore { background: var(--cart-accent); color: var(--cart-on-accent); border-color: var(--cart-accent); }
.dropcart--style--offcanvas .dropcart__buttons > .btn-secondary { background: #f6f7f8; color: #434b56; border: 1px solid var(--cart-border); }
.dropcart--style--offcanvas .dropcart__empty-state { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 320px; min-height: 100%; margin: 0 auto; padding: 32px 8px; box-sizing: border-box; text-align: center; }
.dropcart--style--offcanvas .dropcart__empty-icon { display: flex; justify-content: center; align-items: center; flex: 0 0 auto; width: 100px; height: 100px; margin-bottom: 28px; border-radius: 28px; background: #f3f4f6; background: color-mix(in srgb, var(--cart-accent) 8%, white); color: var(--cart-accent); border: 1px solid var(--cart-border); }
.dropcart--style--offcanvas .dropcart__empty-icon svg { display: block; flex: 0 0 auto; width: 48px; height: 48px; max-width: 100%; fill: none; }
.dropcart--style--offcanvas .dropcart__empty-state > * { flex-shrink: 0; max-width: 100%; }
.dropcart--style--offcanvas .dropcart__empty-state h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.dropcart--style--offcanvas .dropcart__empty-state p { max-width: 280px; margin: 0 0 24px; color: var(--cart-muted); font-size: 14px; line-height: 1.7; }
.dropcart--style--offcanvas .dropcart__explore { width: 100%; max-width: 280px; }

@media (max-width: 479px) {
    .dropcart--style--offcanvas .dropcart__body { width: 100%; margin: 0; border-radius: 0; }
    .dropcart--style--offcanvas .dropcart__header { min-height: 92px; padding: 20px; }
    .dropcart--style--offcanvas .dropcart__products-list { padding: 16px; }
    .dropcart--style--offcanvas .dropcart__product { grid-template-columns: 56px minmax(0, 1fr) 32px; gap: 10px; padding: 14px; }
    .dropcart--style--offcanvas .dropcart__product-image { width: 56px; height: 64px; }
    .dropcart--style--offcanvas .dropcart__skeleton-image { width: 56px; height: 64px; }
    .dropcart--style--offcanvas .dropcart__skeleton-footer { padding: 20px; }
    .dropcart--style--offcanvas .dropcart__totals { padding: 16px 20px 0; }
    .dropcart--style--offcanvas .dropcart__buttons { padding: 16px 20px 20px; }
}

@media (max-height: 599px) {
    .dropcart--style--offcanvas .dropcart__body { overflow-y: auto; }
    .dropcart--style--offcanvas .dropcart__header { position: sticky; top: 0; z-index: 2; }
    .dropcart--style--offcanvas .dropcart__products-list { flex-shrink: 0; overflow: visible; }
    .dropcart--style--offcanvas .dropcart__empty-state { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    /* The existing close handler uses visibility's transitionend to unlock body scroll. */
    .dropcart--style--offcanvas { transition: visibility .001s; }
    .dropcart--style--offcanvas .dropcart__body,
    .dropcart--style--offcanvas .dropcart__backdrop { transition: none; }
    .dropcart--style--offcanvas .dropcart__skeleton-block { animation: none; background-image: none; }
}