/* v502: carrito legible en modo día/noche, botones cómodos y anuncios responsivos. */
html[data-theme="light"] body #cartDrawer {
  --surface: #fff9f1;
  --surface2: #f7eee3;
  --card: #fffdf9;
  --line: rgba(73, 43, 22, .16);
  --text: #2b1a10;
  --muted: #795d49;
  --accent: #ffad32;
  --accent2: #eb7417;
}

html[data-theme="dark"] body #cartDrawer {
  --surface: #1c1511;
  --surface2: #2a201a;
  --card: #251b16;
  --line: rgba(255, 226, 196, .16);
  --text: #fff3e5;
  --muted: #d0b49a;
  --accent: #ffad32;
  --accent2: #ff9229;
}

html[data-theme="light"] body #cartDrawer .drawer-head,
html[data-theme="light"] body #cartDrawer .drawer-body,
html[data-theme="light"] body #cartDrawer .drawer-foot,
html[data-theme="light"] body #cartDrawer .checkout-panel {
  background-color: #fff9f1 !important;
  color: #2b1a10 !important;
}

html[data-theme="dark"] body #cartDrawer .drawer-head,
html[data-theme="dark"] body #cartDrawer .drawer-body,
html[data-theme="dark"] body #cartDrawer .drawer-foot,
html[data-theme="dark"] body #cartDrawer .checkout-panel {
  background-color: #1c1511 !important;
  color: #fff3e5 !important;
}

html[data-theme="dark"] body #cartDrawer .checkout-panel,
html[data-theme="dark"] body #cartDrawer .cart-item,
html[data-theme="dark"] body #cartDrawer #addonsPanel,
html[data-theme="dark"] body #cartDrawer .cart-addons-pro {
  border-color: rgba(255, 226, 196, .16) !important;
}

html[data-theme="light"] body #cartDrawer .tv482-total-submit-row {
  background: #fff9f1 !important;
  border-color: rgba(116, 72, 31, .24) !important;
}

html[data-theme="dark"] body #cartDrawer .tv482-total-submit-row {
  background: #251b16 !important;
  border-color: rgba(255, 226, 196, .2) !important;
  box-shadow: inset 3px 0 0 #ff9229, 0 6px 18px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] body #cartDrawer .tv482-total-block small {
  color: #e6c9ae !important;
}

html[data-theme="dark"] body #cartDrawer .tv482-total-block #cartTotal {
  color: #ffad55 !important;
  font-size: 24px !important;
}

html[data-theme="dark"] body #cartDrawer .input,
html[data-theme="dark"] body #cartDrawer .textarea,
html[data-theme="dark"] body #cartDrawer select {
  background-color: #2a201a !important;
  color: #fff3e5 !important;
  border-color: rgba(255, 226, 196, .22) !important;
  color-scheme: dark;
}

html body #cartDrawer .total-row.total {
  min-height: 58px !important;
  align-self: stretch !important;
  padding: 7px 11px !important;
  border: 1px solid color-mix(in srgb, var(--accent2) 42%, var(--line)) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--accent) 13%, var(--card)) !important;
  box-shadow: inset 3px 0 0 var(--accent2), 0 5px 15px rgba(0, 0, 0, .08) !important;
}

html body #cartDrawer .total-row.total span:last-child {
  font-size: clamp(24px, 6vw, 29px) !important;
  letter-spacing: -.035em !important;
  color: var(--accent2) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

html body #cartDrawer #continueBtn {
  min-height: 56px !important;
  padding: 9px 14px !important;
}

html body #cartDrawer #continueBtn span {
  font-size: clamp(16px, 4.4vw, 19px) !important;
  line-height: 1.05 !important;
  letter-spacing: .005em !important;
}

html body #cartDrawer #continueBtn small {
  font-size: 11px !important;
}

html body #cartDrawer .drawer-foot .btn,
html body #cartDrawer .addon-add-btn,
html body #cartDrawer .addon-tab,
html body #cartDrawer .qty-control button,
html body #cartDrawer #drawerCloseBtn,
html body #cartDrawer .cart-remove-icon {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

html body #promoBanners {
  width: min(calc(100% - 24px), 1380px) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

html body #promoBanners .promo-premium-shell,
html body #promoBanners .promo-premium-track {
  width: 100% !important;
  max-width: 100% !important;
}

html body #promoBanners .promo-premium-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 3 / 1;
  height: auto !important;
  overflow: hidden !important;
}

html body #promoBanners .promo-picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 3 / 1;
}

html body #promoBanners .promo-picture img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 520px) {
  html body #promoBanners { width: calc(100% - 20px) !important; }
  html body #promoBanners .promo-premium-slide,
  html body #promoBanners .promo-picture { aspect-ratio: 3 / 1; }
  html body #cartDrawer .drawer-foot .btn { min-width: 148px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body #cartDrawer button { transition: none !important; }
}