/** Shopify CDN: Minification failed

Line 696:0 Unexpected "<"

**/
  /* ═══════════════════════════════════════════════════════
   FIX: SCROLL-BUG + KOMPAKTERE ABSTÄNDE
   ═══════════════════════════════════════════════════════ */
/* Scroll-Fix: nur der Item-Bereich scrollt */
#CartDrawer .drawer__inner {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#CartDrawer .drawer__header,
#CartDrawer .drawer__footer,
#CartDrawer .cd-rewards-container,
#CartDrawer .cart-timer {
  flex-shrink: 0 !important;
}
#CartDrawer cart-drawer-items {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}
#CartDrawer .drawer__inner-empty {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
/* Shipping Warranty — engere Abstände */
#CartDrawer #nrn-protect {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding: 11px !important;
}
/* Checkout-Button → 30 Day Returns */
#CartDrawer .nrn-guarantee {
  margin-top: 11px !important;
}
/* 30 Day Returns → Payment Icons */
#CartDrawer .footer__payment {
  margin-top: 14px !important;
}
#CartDrawer .list.list-payment-lm,
#CartDrawer .footer__payment ul,
#CartDrawer .payment-icons-drawer ul,
#CartDrawer ul.list-payment-lm {
  margin: 4px 0 0 0 !important;
}
/* ═══════════════════════════════════════════════════════
   NERIONA CART DRAWER v16
   ═══════════════════════════════════════════════════════ */

/* ── BODY SCROLL LOCK ── */
body:has(.drawer.active) { overflow: hidden !important; }
#CartDrawer-Overlay { background: rgba(0,0,0,0.4) !important; }

/* ── iOS Scroll-Lock ── */
cart-drawer-items {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

#CartDrawer .drawer__inner {
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

/* ── LAYOUT HELPERS ── */
quantity-popover .quantity:after { box-shadow: none; }
quantity-popover .quantity__button:first-child,
quantity-popover .quantity__button:last-child { border: 0; }
quantity-popover .quantity { background: rgba(var(--color-foreground), 0.05) !important; }

.cart-drawer .cart-item__details {
  width: auto;
  grid-column: 2 / 6;
  display: flex;
  justify-content: space-between;
}
cart-remove-button .button { min-height: 24px; }
cart-drawer .cart-item__totals {
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row-reverse;
  grid-column: 2 / 6;
  gap: 10px;
}
.cart-drawer .cart-item__price-wrapper .cart-item__discounted-prices {
  display: block;
  line-height: 1.2;
  margin-bottom: 6px;
}
.cart-item__name   { margin-bottom: 4px; }
.cart-drawer .cart-items td { padding-top: 0; }
.cart-drawer .cart-item { margin-bottom: 18px; scrollbar-width: none; }
.cart-drawer-items-wrapper { scrollbar-width: none; }

/* ══════════════════════════════════════════════════
   DRAWER HEADER
   ══════════════════════════════════════════════════ */
.drawer__header {
  padding: 10px 20px 10px 20px !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  min-height: 50px !important;
}

.drawer__inner > .drawer__header,
#CartDrawer .drawer__inner > .drawer__header {
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  min-height: 50px !important;
}

.drawer__heading {
  margin: 0 !important;
  flex: 1 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.2 !important;
  padding: 0 !important;
}
.drawer__contents { padding-top: 16px !important; }

/* ── X-Button: FIXED oben rechts ── */
.drawer__close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  background: rgba(var(--color-foreground), 0.06) !important;
  transition: background 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 5px !important;
  right: 18px !important;
  z-index: 9999 !important;
  flex-shrink: 0 !important;
}
.drawer__close:hover { background: rgba(var(--color-foreground), 0.11) !important; }
.drawer__close svg { width: 18px !important; height: 18px !important; }

/* ── PRODUCT IMAGE ── */
.cart-item__media {
  width: 110px !important;
  min-width: 110px !important;
  height: 110px !important;
  border-radius: 8px !important;
  position: relative !important;
  flex-shrink: 0 !important;
  /* Shimmer shown while image is loading — sits behind the img */
  background: linear-gradient(110deg, #f0f0f0 30%, #e8e8e8 50%, #f0f0f0 70%) !important;
  background-size: 200% 100% !important;
  animation: nrn-img-shimmer 1.2s linear infinite !important;
}

@keyframes nrn-img-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.cart-item__image {
  width: 110px !important;
  height: 110px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  transform: translateZ(0) !important;
  display: block !important;
  position: relative !important;
  /* Always visible — no opacity tricks, no JS dependency */
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════
   PRODUCT TITLE
   ══════════════════════════════════════════════════ */
.cart-item__name,
.cart-item__details a.cart-item__name,
#CartDrawer .cart-item__name,
#CartDrawer a.cart-item__name {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  word-spacing: 0.06em !important;
  line-height: 1.35 !important;
  color: rgb(var(--color-foreground)) !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
}
@media screen and (min-width: 750px) {
  .cart-item__name,
  .cart-item__details a.cart-item__name,
  #CartDrawer .cart-item__name,
  #CartDrawer a.cart-item__name {
    font-size: 19.5px !important;
    letter-spacing: -0.018em !important;
    word-spacing: 0.07em !important;
  }
}

/* ── VARIANT / OPTIONS ── */
.product-option,
#CartDrawer .product-option {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: rgba(var(--color-foreground), 0.5) !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  word-spacing: 0.04em !important;
  margin-bottom: 1px !important;
  word-break: break-word;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════
   ITEM TOTAL PRICE (rechte Spalte)
   ══════════════════════════════════════════════════ */
.cart-drawer .cart-item__totals .price,
.cart-drawer .cart-item__totals .price *,
.cart-drawer .cart-item__price-wrapper > .price,
.cart-drawer .cart-item__price-wrapper > .price *,
.cart-drawer .cart-item__price-wrapper > .cart-item__discounted-prices span > .price,
.cart-drawer .cart-item__price-wrapper > .cart-item__discounted-prices span > .price *,
#CartDrawer .cart-item__totals .price,
#CartDrawer .cart-item__totals .price * {
  font-family: 'Inter', sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 550 !important;
  color: rgb(var(--color-foreground)) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
  max-width: 100% !important;
  word-break: break-word !important;
}
@media screen and (min-width: 750px) {
  .cart-drawer .cart-item__totals .price,
  .cart-drawer .cart-item__totals .price *,
  .cart-drawer .cart-item__price-wrapper > .price,
  .cart-drawer .cart-item__price-wrapper > .price *,
  #CartDrawer .cart-item__totals .price,
  #CartDrawer .cart-item__totals .price * {
    font-size: 17.5px !important;
  }
}

/* ══════════════════════════════════════════════════
   VERGLEICHSPREIS / DURCHGESTRICHEN
   ══════════════════════════════════════════════════ */
.cart-drawer .cart-item__old-price,
.cart-drawer s.cart-item__old-price,
.cart-drawer .cart-item__price-wrapper s,
.cart-drawer .cart-item__discounted-prices .cart-item__old-price,
.cart-drawer .cart-item__discounted-prices s,
#CartDrawer .cart-item__old-price,
#CartDrawer s.cart-item__old-price,
#CartDrawer .price s,
#CartDrawer .price-item--strikethrough,
#CartDrawer .variant-item__old-price,
#CartDrawer .cart-item__discounted-prices s,
.cart-item__discounted-prices .cart-item__old-price.product-option,
.cart-drawer .product-option s,
#CartDrawer .product-option s {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #b0b0b0 !important;
  -webkit-text-fill-color: #b0b0b0 !important;
  opacity: 1 !important;
  text-decoration: line-through !important;
  text-decoration-color: #b0b0b0 !important;
  display: block !important;
  margin-top: 2px !important;
}

/* ── QUANTITY SELECTOR ── */
.cart-item__quantity .quantity {
  height: 34px !important;
  min-height: 34px !important;
  width: 96px !important;
  max-width: 96px !important;
  background: rgba(var(--color-foreground), 0.04) !important;
  border: 1px solid rgba(var(--color-foreground), 0.12) !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}
.quantity__button {
  width: 28px !important;
  height: 32px !important;
  min-width: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  transition: background 0.12s ease !important;
}
.quantity__button:hover { background: rgba(var(--color-foreground), 0.07) !important; }
.quantity__button .icon { width: 12px !important; height: 12px !important; }
.quantity__input {
  font-size: 14px !important;
  font-weight: 600 !important;
  width: 36px !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── DISCOUNTS BADGE ── */
.discounts__discount { font-size: 11px !important; padding: 3px 7px !important; }

/* ══════════════════════════════════════════════════
   FOOTER: FREE SHIPPING BADGE
   ══════════════════════════════════════════════════ */
.free-shipping-badge-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #ebf2ed;
  border-radius: 7px;
  margin-bottom: 10px;
}
.shipping-check-icon-cart { width: 18px; height: 18px; flex-shrink: 0; }
.shipping-text-cart {
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  color: #008100;
  letter-spacing: 0.2px;
}

/* ══════════════════════════════════════════════════
   FOOTER TOTALS
   ══════════════════════════════════════════════════ */
.totals { margin-bottom: 8px !important; }
.totals:last-of-type { margin-bottom: 0 !important; }

/* Label */
.totals__total,
.cart-drawer .totals__total,
#CartDrawer .totals__total {
  font-family: 'Inter', sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 450 !important;
  letter-spacing: -0.003em !important;
  color: rgba(var(--color-foreground), 0.8) !important;
}

/* Preiswert */
.totals__total-value,
.cart-drawer .totals__total-value,
#CartDrawer .totals__total-value,
.cart-drawer__footer .totals__total-value,
p.totals__total-value {
  font-family: 'Inter', sans-serif !important;
  font-size: 17.5px !important;
  font-weight: 450 !important;
  letter-spacing: 0.005em !important;
  color: rgba(var(--color-foreground), 0.85) !important;
}

/* ORDER TOTAL Label */
#CartDrawer .cart-drawer__footer .totals:last-of-type h2.totals__total,
#CartDrawer .cart-drawer__footer .totals:last-of-type .totals__total,
.cart-drawer__footer .totals:last-of-type h2.totals__total,
.cart-drawer__footer .totals:last-of-type .totals__total {
  font-family: 'Inter', sans-serif !important;
  font-size: 18.5px !important;
  font-weight: 450 !important;
  color: rgba(30,30,30,0.88) !important;
  -webkit-text-fill-color: rgba(30,30,30,0.88) !important;
  letter-spacing: -0.01em !important;
}

/* ORDER TOTAL PREIS */
#CartDrawer .cart-drawer__footer .totals:last-of-type p.totals__total-value,
#CartDrawer .cart-drawer__footer .totals:last-of-type .totals__total-value,
.cart-drawer__footer .totals:last-of-type p.totals__total-value,
.cart-drawer__footer .totals:last-of-type .totals__total-value {
  font-family: 'Inter', sans-serif !important;
  font-size: 19.5px !important;
  font-weight: 550 !important;
  letter-spacing: 0.01em !important;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* ══════════════════════════════════════════════════
   EINZELPREIS (linke Spalte)
   ══════════════════════════════════════════════════ */
#CartDrawer .cart-item__details .cart-item__price-solo,
#CartDrawer .cart-item__details .cart-item__final-price,
#CartDrawer .cart-item__discounted-prices .cart-item__final-price,
.cart-drawer #CartDrawer .cart-item__price-solo,
.cart-item__details .cart-item__price-solo,
td.cart-item__details .cart-item__price-solo,
td.cart-item__details strong.cart-item__final-price {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 550 !important;
  color: rgb(var(--color-foreground)) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.3 !important;
  display: block !important;
}


@media screen and (max-width: 749px) {
  .totals__total,
  .cart-drawer .totals__total,
  #CartDrawer .totals__total {
    font-size: 19px !important;
  }
  .cart-drawer__footer .totals:last-of-type h2.totals__total,
  .cart-drawer__footer .totals:last-of-type .totals__total {
    font-size: 19px !important;
  }
}

.cart-drawer .price { line-height: 1.2; }

/* ══════════════════════════════════════════════════
   CHECKOUT BUTTON — Apple-clean style
   ══════════════════════════════════════════════════ */
.cart__checkout-button {
  border: none !important;
  outline: none !important;
  letter-spacing: 0.018em !important;
  word-spacing: 0.1em !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border-radius: 2px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 15px 24px !important;
  min-height: 48px !important;
  color: #ffffff !important;
  background-clip: padding-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  width: 100% !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  position: relative !important;
}
.cart__checkout-button::before,
.cart__checkout-button::after { display: none !important; content: none !important; }
@media (hover: hover) {
  .cart__checkout-button { transition: background 0.2s ease !important; }
  .cart__checkout-button:hover { background: #201812 !important; }
}

/* ── Checkout tap pulse animation ── */
@keyframes nrn-checkout-pulse {
  0%   { transform: scale(1);     }
  35%  { transform: scale(0.974); }
  65%  { transform: scale(1.010); }
  100% { transform: scale(1);     }
}
.cart__checkout-button.nrn-pulse,
.product-form__submit.nrn-pulse {
  animation: nrn-checkout-pulse 0.38s cubic-bezier(0.36,0.07,0.19,0.97) both !important;
}
.cart__checkout-button .svg-wrapper,
.cart__checkout-button svg,
.cart__checkout-button .icon { display: none !important; }

/* Lock icon in checkout button */
.cart__checkout-button .nrn-lock-icon {
  display: flex !important;
  align-items: center !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  top: -1.5px !important;
}
.cart__checkout-button .nrn-lock-icon svg { display: flex !important; }

/* ══════════════════════════════════════════════════
   GUARANTEE BADGE — under checkout button
   ══════════════════════════════════════════════════ */
.nrn-guarantee {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 11px !important;
  padding: 0 4px !important;
}
.nrn-guarantee__icon {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.nrn-guarantee__text {
  font-family: 'Inter', sans-serif !important;
  font-size: 15.5px !important;
  color: rgba(var(--color-foreground), 0.72) !important;
  letter-spacing: 0.005em !important;
  line-height: 1 !important;
  font-weight: 450 !important;
}
.nrn-guarantee__text strong {
  font-weight: 600 !important;
  color: rgba(var(--color-foreground), 0.85) !important;
}

/* ── FOOTER CONTAINER ── */
.drawer__footer {
  padding: 0 20px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: none !important;
  margin-top: -1px !important;
  background: #ffffff !important;
}
/* Ensure white background all the way to bottom on all browsers */
.drawer__inner,
#CartDrawer {
  background: #ffffff !important;
}
@media screen and (min-width: 750px) {
  cart-drawer {
    background: transparent !important;
  }
  .drawer__inner {
    border-left: 1px solid rgba(0,0,0,0.12) !important;
  }
}
.drawer__footer > *:first-child,
.drawer__footer > cart-upsell-checkbox:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.drawer__footer > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.cart-upsell-checkbox,
.cart-upsell__checkbox,
.cart-upsell-checkbox-wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: -4px !important;
  padding-bottom: 0 !important;
}

.cart-drawer__footer {
  padding-top: 12px !important;
}
.cart__ctas {
  margin-top: 15px !important;
  margin-bottom: 0 !important;
}

.footer__payment {
  margin-top: 17px !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.drawer__footer > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

[class*="payment-icon"],
[class*="payment_icon"],
.payment-icons-drawer,
.payment-icons,
.payment-icons-drawer *:last-child,
.footer__payment *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.drawer__footer {
  padding-bottom: 10px !important;
}
/* ══════════════════════════════════════════════════
   PAYMENT ICONS — gleichmäßig, kein versetztes Icon
   ══════════════════════════════════════════════════ */
.list.list-payment-lm,
.footer__payment ul,
.payment-icons-drawer ul,
ul.list-payment-lm {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10.0px 10.0px !important;
  list-style: none !important;
  margin: 14px 0 0 0 !important;
  padding: 0 !important;
}

.list.list-payment-lm li,
.payment-icons-drawer li,
ul.list-payment-lm li,
.list-payment__item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* ── EMPTY CART ── */
.cart-drawer__empty-content .button {
  margin: 24px auto 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  min-height: 50px !important;
  text-align: center;
  width: auto;
  max-width: 280px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: #1a1a1a!important;
  color: #ffffff !important;
  font-weight: 500 !important;
  transition: background 0.2s ease !important;
}
.cart-drawer__empty-content .button::before,
.cart-drawer__empty-content .button::after { display: none !important; content: none !important; }
@media (hover: hover) {
  .cart-drawer__empty-content .button:hover { background: #1a1310 !important; }
}

/* ── MISC ── */
#Details-CartDrawer > .cart__note:after { box-shadow: none; }
#Details-CartDrawer > .cart__note { top: 0; }
.drawer__footer > details[open] { padding-bottom: 0; }
.drawer.is-empty .drawer__header:not(:first-of-type) { display: none !important; }
.drawer.is-empty cart-drawer-items .drawer__heading { display: none !important; }


@media screen and (min-width: 750px) {
  .cart-items .cart-items__heading--quantity,
  .cart-item .cart-item__quantity,
  .cart-item__quantity--info quantity-popover > * { padding-left: 0; }
}

@media screen and (max-width: 749px) {
  #CartDrawer .cart-item__final-price,
  cart-drawer .cart-item__final-price,
  #CartDrawer .cart-item__price-wrapper .price,
  cart-drawer .cart-item__price-wrapper .price { font-size: 16.5px !important; }

  #CartDrawer s.cart-item__old-price,
  cart-drawer .cart-item__old-price,
  #CartDrawer .cart-item__price-wrapper s,
  cart-drawer .cart-item__price-wrapper s { font-size: 12.5px !important; }

  #CartDrawer .totals__total-value,
  cart-drawer .totals__total-value { font-size: 17.5px !important; }

  #CartDrawer .totals__total,
  cart-drawer .totals__total { font-size: 17.5px !important; }

  #CartDrawer .cart-drawer__footer .totals:last-of-type .totals__total-value,
  .cart-drawer__footer .totals:last-of-type .totals__total-value { font-size: 18.5px !important; }
}

</style>

<style>
/* ═══════════════════════════════════════════════════════
   NRN SHIPPING PROTECTION WIDGET
   ═══════════════════════════════════════════════════════ */

#nrn-protect {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px !important;
  margin-top: 11px !important;
  margin-bottom: 10px !important;
  background: #ffffff !important;
  border-top: 1px solid #e0e0e0 !important;
  border: none !important;
  border-radius: 12px !important;
  transition: background .22s !important;
  box-sizing: border-box !important;
  cursor: default !important;
}
#nrn-protect.nrn-protect--on {
  border-color: rgba(var(--color-foreground), 0.1) !important;
  background: #ffffff !important;
}
#nrn-protect.nrn-loading {
  opacity: .45 !important;
  pointer-events: none !important;
}

#nrn-protect .nrn-protect__img {
  flex-shrink: 0 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  background: transparent !important;
}
#nrn-protect .nrn-protect__img img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  display: block !important;
}

#nrn-protect .nrn-protect__body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
#nrn-protect .nrn-protect__title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: rgb(var(--color-foreground)) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.008em !important;
  word-spacing: 0.13em !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
#nrn-protect .nrn-protect__sub {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: rgba(var(--color-foreground), 0.58) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.015em !important;
}

#nrn-protect .nrn-protect__right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}
#nrn-protect .nrn-protect__price {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: rgb(var(--color-foreground)) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  padding-right: 3px !important;
  white-space: nowrap !important;
}

#nrn-protect .nrn-tog {
  position: relative !important;
  display: inline-block !important;
  width: 46px !important;
  height: 26px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
#nrn-protect .nrn-tog__input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
#nrn-protect .nrn-tog__track {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(var(--color-foreground), 0.16) !important;
  border-radius: 26px !important;
  transition: none !important;
}
#nrn-protect .nrn-tog__thumb {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.22) !important;
  transition: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#nrn-protect .nrn-tog__check {
  opacity: 0 !important;
  transition: none !important;
}

#nrn-protect.nrn-animated .nrn-tog__track  { transition: background .25s !important; }
#nrn-protect.nrn-animated .nrn-tog__thumb  { transition: transform .25s !important; }
#nrn-protect.nrn-animated .nrn-tog__check  { transition: opacity .18s !important; }

#nrn-protect.nrn-protect--on .nrn-tog__track  { background: #1a1a1a !important; }
#nrn-protect.nrn-protect--on .nrn-tog__thumb  { transform: translateX(20px) !important; }
#nrn-protect.nrn-protect--on .nrn-tog__check  { opacity: 1 !important; }

@media (max-width: 749px) {
  #nrn-protect .nrn-protect__title { font-size: 15.5px !important; }
  #nrn-protect .nrn-protect__sub   { font-size: 12.75px !important; }
  #nrn-protect .nrn-protect__price { font-size: 17.5px !important; }
}
@media (min-width: 750px) {
  #nrn-protect .nrn-protect__title { font-size: 16px !important; }
  #nrn-protect .nrn-protect__sub   { font-size: 13.5px !important; }
  #nrn-protect .nrn-protect__price { font-size: 18.5px !important; }
}

/* ══════════════════════════════════════════════════════════════
   NRN FIX: Optimistic cart-loading state — no more white screen
   When ATC fetch takes >500ms, drawer opens with a skeleton.
   ══════════════════════════════════════════════════════════════ */

/* 1) While loading: show the skeleton, hide empty-state content */
cart-drawer.nrn-cart-loading #CartDrawer-ItemsWrapper,
cart-drawer.nrn-cart-loading .cart-drawer__form,
cart-drawer.nrn-cart-loading cart-drawer-items,
cart-drawer.nrn-cart-loading .drawer__footer {
  visibility: hidden !important;
}

/* 2) Animated loading skeleton overlay */
cart-drawer.nrn-cart-loading .drawer__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #ffffff;
  pointer-events: none;
}
cart-drawer.nrn-cart-loading .drawer__inner::after {
  content: '';
  position: absolute;
  top: 70px;
  left: 20px;
  right: 20px;
  height: calc(100% - 90px);
  z-index: 11;
  pointer-events: none;
  background-image:
    /* Product image placeholder */
    linear-gradient(#ebebeb 1px, transparent 0),
    linear-gradient(90deg, #ebebeb 68px, transparent 0),
    /* Title line */
    linear-gradient(#ebebeb 14px, transparent 0),
    /* Price line */
    linear-gradient(#ebebeb 12px, transparent 0),
    /* Separator */
    linear-gradient(#e0e0e0 1px, transparent 0),
    /* Footer skeleton */
    linear-gradient(#ebebeb 44px, transparent 0),
    linear-gradient(#d6d6d6 50px, transparent 0);
  background-size:
    68px 68px,
    68px 68px,
    calc(100% - 88px) 14px,
    80px 12px,
    100% 1px,
    100% 44px,
    50% 50px;
  background-position:
    20px 20px,
    20px 20px,
    96px 22px,
    96px 46px,
    0 110px,
    0 calc(100% - 130px),
    25% calc(100% - 60px);
  background-repeat: no-repeat;
  animation: nrn-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes nrn-skeleton-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ══════════════════════════════════════════════════════════
   NRN FIX v2: suppress content-jump when drawer HTML is
   injected via renderContents(). The DOM swap causes a brief
   repaint that looks like everything "shifts down".
   Solution: keep the drawer inner stable with contain:strict
   and clip overflow during the render frame.
   ══════════════════════════════════════════════════════════ */

/* Stable compositing layer for the whole drawer — prevents
   GPU texture invalidation during innerHTML swap */
#CartDrawer {
  will-change: transform;
  transform: translateZ(0);
}

/* nrn-just-rendered class removed — no longer needed */

/* No flicker of the page content when body.overflow-hidden
   is added (cart drawer opening). Use contain:strict on the
   sticky ATC to prevent it from triggering a layout pass. */
.sticky-atc, .nrn-sticky-atc {
  contain: layout style;
  /* will-change removed — promotes a permanent GPU compositor layer that floats
     above the real viewport bottom on Chrome Android during URL-bar collapse */
}

/* Prevent body scroll-lock from causing width shift — even
   when no position:fixed is used, removing the scrollbar
   can shift content. Pre-reserve scrollbar width on desktop. */
@media (min-width: 750px) {
  html {
    scrollbar-gutter: stable;
  }
}

/* =========================================================
   NRN FINAL CART DRAWER FIXES — Mayberry/Bowlift feel
   Fixes: black checkout, black left border, cleaner drawer
   animation, progress spacing, mobile payment icon size.
   ========================================================= */
#CartDrawer .cart__checkout-button,
#CartDrawer-Checkout,
.cart-drawer .cart__checkout-button {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#CartDrawer .cart__checkout-button:hover,
#CartDrawer-Checkout:hover {
  background: #201812 !important;
  color: #ffffff !important;
}

#CartDrawer .drawer__inner,
cart-drawer .drawer__inner {
  border-left: 1px solid #000000 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
}

cart-drawer.drawer.active #CartDrawer .drawer__inner,
cart-drawer.drawer.active .drawer__inner,
.drawer.active #CartDrawer .drawer__inner,
.drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}

cart-drawer.is-closing #CartDrawer .drawer__inner,
cart-drawer.is-closing .drawer__inner {
  transform: translate3d(100%, 0, 0) !important;
  transition: transform 300ms cubic-bezier(0.4, 0, 1, 1) !important;
}

#CartDrawer-Overlay,
.cart-drawer__overlay {
  background: rgba(0,0,0,0.42) !important;
  transition: opacity 300ms ease, visibility 300ms ease !important;
}

/* Progress message must sit above the bar, never touch/overlap it */
#CartDrawer .cd-rewards-container {
  padding-top: 14px !important;
}
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg {
  margin: 0 0 14px 0 !important;
  line-height: 1.35 !important;
  position: relative !important;
  z-index: 2 !important;
}
#CartDrawer .cd-progress-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
#CartDrawer .cd-icon-container-wrapper {
  margin-top: 8px !important;
  padding-bottom: 12px !important;
}

/* Mobile payment icons: exactly 0.25px smaller than current 24.25px */
@media screen and (max-width: 749px) {
  #CartDrawer .payment-icons-drawer img,
  #CartDrawer .footer__payment img,
  #CartDrawer .list-payment-lm img,
  #CartDrawer .list-payment-lm svg,
  #CartDrawer .list-payment__item svg,
  #CartDrawer .list-payment__item .icon,
  #CartDrawer .list-payment__item .icon--full-color {
    height: 28px !important;
    width: auto !important;
  }
}


/* =========================================================
   NRN CART DRAWER FIX v8 — clean drawer + real outside click
   ========================================================= */

/* Outside area must be clickable; old pointer-events:none blocked overlay clicks */
cart-drawer.drawer.active,
.drawer.active {
  pointer-events: auto !important;
}

/* No white backup box behind drawer: only drawer panel is white */
#CartDrawer,
cart-drawer.drawer,
.drawer {
  background: transparent !important;
}
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner,
#CartDrawer .drawer__inner-empty,
cart-drawer .drawer__inner-empty {
  background: #ffffff !important;
}

/* Overlay covers the left click-area and closes reliably */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.36) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity 280ms ease, visibility 280ms ease !important;
}
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Drawer panel above overlay, slightly smaller, no left black line */
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(452px, calc(100vw - 18px)) !important;
  max-width: calc(100vw - 18px) !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: -10px 0 30px rgba(0,0,0,0.10) !important;
  transform: translate3d(104%, 0, 0) !important;
  transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
}
.drawer.active #CartDrawer .drawer__inner,
cart-drawer.drawer.active #CartDrawer .drawer__inner,
.drawer.active .drawer__inner,
cart-drawer.drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}
cart-drawer.is-closing #CartDrawer .drawer__inner,
cart-drawer.is-closing .drawer__inner {
  transform: translate3d(104%, 0, 0) !important;
  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1) !important;
}

/* Kill old loading/skeleton white rectangle completely */
cart-drawer.nrn-cart-loading #CartDrawer-ItemsWrapper,
cart-drawer.nrn-cart-loading .cart-drawer__form,
cart-drawer.nrn-cart-loading cart-drawer-items,
cart-drawer.nrn-cart-loading .drawer__footer {
  visibility: visible !important;
}
cart-drawer.nrn-cart-loading .drawer__inner::before,
cart-drawer.nrn-cart-loading .drawer__inner::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* Progress bar back to the original centered icon position */
#CartDrawer .cd-rewards-container {
  padding: 13px 23px 0 !important;
}
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg {
  margin: 0 0 10px 0 !important;
  line-height: 1.4 !important;
}
#CartDrawer .cd-progress-container {
  margin: 0 23px !important;
  height: 5px !important;
}
#CartDrawer .cd-progress-bar-background,
#CartDrawer .cd-progress-bar {
  height: 5px !important;
}
#CartDrawer .cd-icon-container-wrapper {
  margin-top: -20px !important;
  padding: 0 3px 14px !important;
  align-items: flex-start !important;
}

/* Mobile payment icons: another 0.25px smaller */
@media screen and (max-width: 749px) {
  #CartDrawer .payment-icons-drawer img,
  #CartDrawer .footer__payment img,
  #CartDrawer .list-payment-lm img,
  #CartDrawer .list-payment-lm svg,
  #CartDrawer .list-payment__item svg,
  #CartDrawer .list-payment__item .icon,
  #CartDrawer .list-payment__item .icon--full-color {
    height: 28px !important;
    width: auto !important;
  }
}


/* =========================================================
   NRN CART DRAWER CLEAN PATCH v8
   Exact fixes: outside-click close, no left divider, smaller
   drawer, clean slide animation, progress bar back centered,
   mobile payment icons -0.25px, stable black checkout hover.
   ========================================================= */

/* No divider / no broken black line on the left side */
#CartDrawer,
#CartDrawer .cart-drawer,
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer__inner {
  border-left: 0 !important;
  border-inline-start: 0 !important;
  box-shadow: none !important;
}
#CartDrawer .drawer__inner::before,
#CartDrawer .drawer__inner::after,
cart-drawer .drawer__inner::before,
cart-drawer .drawer__inner::after {
  border-left: 0 !important;
  border-inline-start: 0 !important;
  box-shadow: none !important;
}

/* Drawer a little smaller / more premium spacing */
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner {
  width: min(455px, calc(100vw - 5rem)) !important;
  max-width: calc(100vw - 5rem) !important;
  overflow-x: hidden !important;
  transform: translate3d(102%, 0, 0) !important;
  transition: transform 360ms cubic-bezier(.25,.9,.25,1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  contain: layout paint !important;
}
@media screen and (min-width: 750px) {
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner {
    max-width: 455px !important;
  }
}
@media screen and (max-width: 600px) {
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner {
    width: calc(100vw - 5rem) !important;
    max-width: calc(100vw - 5rem) !important;
  }
}
cart-drawer.drawer.active #CartDrawer .drawer__inner,
cart-drawer.drawer.active .drawer__inner,
.drawer.active #CartDrawer .drawer__inner,
.drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}
cart-drawer.is-closing #CartDrawer .drawer__inner,
cart-drawer.is-closing .drawer__inner {
  transform: translate3d(102%, 0, 0) !important;
  transition: transform 280ms cubic-bezier(.4,0,1,1) !important;
}

/* Clean overlay only, no white backup box/flicker during animation */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  display: block !important;
  background: rgba(0,0,0,.40) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 260ms ease, visibility 260ms ease !important;
}
.drawer.active #CartDrawer-Overlay,
cart-drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.active .cart-drawer__overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
cart-drawer.nrn-cart-loading .drawer__inner::before,
cart-drawer.nrn-cart-loading .drawer__inner::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}
cart-drawer.nrn-cart-loading #CartDrawer-ItemsWrapper,
cart-drawer.nrn-cart-loading .cart-drawer__form,
cart-drawer.nrn-cart-loading cart-drawer-items,
cart-drawer.nrn-cart-loading .drawer__footer {
  visibility: visible !important;
}

/* Progress bar back to original centered position with reward icons */
#CartDrawer .cd-rewards-container {
  padding: 13px 23px 0 !important;
}
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg {
  margin: 0 0 10px 0 !important;
  line-height: 1.4 !important;
}
#CartDrawer .cd-progress-container {
  margin: 0 23px !important;
  height: 5px !important;
}
#CartDrawer .cd-progress-bar-background,
#CartDrawer .cd-progress-bar {
  height: 5px !important;
}
#CartDrawer .cd-icon-container-wrapper {
  margin-top: -20px !important;
  padding: 0 3px 14px !important;
  align-items: flex-start !important;
}

/* Mobile payment icons another 0.25px smaller */
@media screen and (max-width: 749px) {
  #CartDrawer .payment-icons-drawer img,
  #CartDrawer .footer__payment img,
  #CartDrawer .list-payment-lm img,
  #CartDrawer .list-payment-lm svg,
  #CartDrawer .list-payment__item svg,
  #CartDrawer .list-payment__item .icon,
  #CartDrawer .list-payment__item .icon--full-color {
    height: 28px !important;
    width: auto !important;
  }
}

/* Checkout button: wider by 1.5px each side and no weird hover color */
#CartDrawer .cart__checkout-button,
#CartDrawer-Checkout,
.cart-drawer .cart__checkout-button {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  width: calc(100% + 3px) !important;
  max-width: none !important;
  margin-left: -1.5px !important;
  margin-right: -1.5px !important;
}
#CartDrawer .cart__checkout-button:hover,
#CartDrawer .cart__checkout-button:focus,
#CartDrawer .cart__checkout-button:active,
#CartDrawer-Checkout:hover,
#CartDrawer-Checkout:focus,
#CartDrawer-Checkout:active {
  background: #1a1a1a !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}


/* =========================================================
   NRN CART DRAWER FINAL PATCH v9 — clean last chance
   ========================================================= */

/* LEFT SIDE: no random grey/black divider anywhere. Keep only soft overlay darkness. */
#CartDrawer,
#CartDrawer *,
cart-drawer,
cart-drawer * {
  border-left-color: transparent !important;
  border-inline-start-color: transparent !important;
}
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer__inner {
  border: 0 !important;
  border-left: 0 !important;
  border-inline-start: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}
#CartDrawer .drawer__inner::before,
#CartDrawer .drawer__inner::after,
cart-drawer .drawer__inner::before,
cart-drawer .drawer__inner::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Drawer size + real slide, no white backup box in background */
#CartDrawer,
cart-drawer.drawer,
.drawer {
  background: transparent !important;
}
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner {
  position: relative !important;
  z-index: 3 !important;
  width: min(452px, calc(100vw - 5rem)) !important;
  max-width: calc(100vw - 5rem) !important;
  transform: translate3d(105%, 0, 0) !important;
  transition: transform 390ms cubic-bezier(.22,.84,.24,1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  contain: layout paint !important;
}
@media screen and (min-width: 750px) {
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner {
    width: 452px !important;
    max-width: 452px !important;
  }
}
.drawer.active #CartDrawer .drawer__inner,
cart-drawer.drawer.active #CartDrawer .drawer__inner,
.drawer.active .drawer__inner,
cart-drawer.drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}
cart-drawer.is-closing #CartDrawer .drawer__inner,
cart-drawer.is-closing .drawer__inner {
  transform: translate3d(105%, 0, 0) !important;
  transition: transform 300ms cubic-bezier(.4,0,1,1) !important;
}

/* Overlay: left side gets darker/blurred and remains clickable for close */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,.46) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: opacity 300ms ease, visibility 300ms ease !important;
}
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Kill skeleton/white rectangle completely while add-to-cart updates. */
cart-drawer.nrn-cart-loading .drawer__inner::before,
cart-drawer.nrn-cart-loading .drawer__inner::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}
cart-drawer.nrn-cart-loading #CartDrawer-ItemsWrapper,
cart-drawer.nrn-cart-loading .cart-drawer__form,
cart-drawer.nrn-cart-loading cart-drawer-items,
cart-drawer.nrn-cart-loading .drawer__footer {
  visibility: visible !important;
}

/* Rewards: text ABOVE with real air; progress bar BEHIND icons, not over them. */
#CartDrawer .cd-rewards-container,
.cd-rewards-container {
  padding: 14px 23px 0 !important;
  background: #ffffff !important;
  position: relative !important;
  overflow: visible !important;
}
#CartDrawer .cd-rewards-container::after,
.cd-rewards-container::after {
  display: none !important;
  content: none !important;
}
#CartDrawer .cd-rewards-text,
.cd-rewards-text {
  position: relative !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  display: block !important;
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  position: relative !important;
  z-index: 5 !important;
  transform: none !important;
}
#CartDrawer .cd-progress-container,
.cd-progress-container {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 23px !important;
  height: 5px !important;
  overflow: visible !important;
  transform: none !important;
}
#CartDrawer .cd-progress-bar-background,
#CartDrawer .cd-progress-bar,
.cd-progress-bar-background,
.cd-progress-bar {
  height: 5px !important;
  border-radius: 4px !important;
}
#CartDrawer .cd-progress-bar-background,
.cd-progress-bar-background {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
#CartDrawer .cd-progress-bar,
.cd-progress-bar {
  position: relative !important;
  z-index: 1 !important;
}
#CartDrawer .cd-icon-container-wrapper,
.cd-icon-container-wrapper {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-top: -22.5px !important;
  padding: 0 3px 14px !important;
  pointer-events: none !important;
}
#CartDrawer .cd-icon-container,
.cd-icon-container,
#CartDrawer .cd-icon-reward,
.cd-icon-reward {
  position: relative !important;
  z-index: 5 !important;
}

/* Mobile cart drawer payment icons: 0.25px smaller again. */
@media screen and (max-width: 749px) {
  #CartDrawer .payment-icons-drawer img,
  #CartDrawer .footer__payment img,
  #CartDrawer .list-payment-lm img,
  #CartDrawer .list-payment-lm svg,
  #CartDrawer .list-payment__item svg,
  #CartDrawer .list-payment__item .icon,
  #CartDrawer .list-payment__item .icon--full-color {
    height: 28px !important;
    width: auto !important;
  }
}

/* Checkout button remains black in every state and stays slightly wider. */
#CartDrawer .cart__checkout-button,
#CartDrawer-Checkout,
.cart-drawer .cart__checkout-button {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  width: calc(100% + 3px) !important;
  max-width: none !important;
  margin-left: -1.5px !important;
  margin-right: -1.5px !important;
}
#CartDrawer .cart__checkout-button:hover,
#CartDrawer .cart__checkout-button:focus,
#CartDrawer .cart__checkout-button:active,
#CartDrawer-Checkout:hover,
#CartDrawer-Checkout:focus,
#CartDrawer-Checkout:active {
  background: #1a1a1a !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════
   NERIONA CART DRAWER v10 FINAL MICRO FIXES
   - correct drawer payment icons mobile -0.25px
   - icon gap -0.5px
   - reward text +4px away from progress
   - overlay only on LEFT side, never behind drawer
   - checkout text/price mobile -0.5px
   - product price never wraps into two lines
   ═══════════════════════════════════════════════════════ */

:root {
  --nrn-cart-drawer-width-mobile: min(452px, calc(100vw - 5rem));
  --nrn-cart-drawer-width-desktop: 452px;
}

/* Overlay must darken ONLY the left side. No black layer behind the drawer during slide. */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  right: var(--nrn-cart-drawer-width-mobile) !important;
  width: auto !important;
  height: 100dvh !important;
  background: rgba(0,0,0,.46) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media screen and (min-width: 750px) {
  #CartDrawer-Overlay,
  .cart-drawer__overlay {
    right: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

/* Drawer itself stays clean white; no shadow/line/fake border on the left. */
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner {
  border-left: 0 !important;
  border-inline-start: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: #fff !important;
}
#CartDrawer .drawer__inner::before,
#CartDrawer .drawer__inner::after,
cart-drawer .drawer__inner::before,
cart-drawer .drawer__inner::after {
  display: none !important;
  content: none !important;
}

/* Rewards: text sits clearly above the progress bar, bar sits behind icons. */
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  margin-bottom: 22px !important; /* was 18px in v9: +4px */
  line-height: 1.35 !important;
}
#CartDrawer .cd-progress-container,
.cd-progress-container {
  z-index: 1 !important;
  pointer-events: none !important;
}
#CartDrawer .cd-progress-bar-background,
.cd-progress-bar-background {
  z-index: 1 !important;
}
#CartDrawer .cd-icon-container-wrapper,
.cd-icon-container-wrapper {
  z-index: 3 !important;
  margin-top: -22.5px !important;
}
#CartDrawer .cd-icon-reward,
.cd-icon-reward {
  z-index: 4 !important;
  background-clip: padding-box !important;
}

/* Correct payment icons INSIDE cart drawer on mobile: 0.25px smaller + gap 0.5px tighter. */
@media screen and (max-width: 749px) {
  #CartDrawer .footer__payment .list-payment-lm,
  #CartDrawer .payment-icons-drawer .list-payment-lm,
  #CartDrawer ul.list-payment-lm {
    gap: 6px 8px !important; /* snippet was 6.5px 8.5px */
  }

  #CartDrawer .footer__payment .list-payment__item svg,
  #CartDrawer .footer__payment .list-payment__item .icon,
  #CartDrawer .footer__payment .list-payment__item .icon--full-color,
  #CartDrawer .payment-icons-drawer .list-payment__item svg,
  #CartDrawer .payment-icons-drawer .list-payment__item .icon,
  #CartDrawer .payment-icons-drawer .list-payment__item .icon--full-color,
  #CartDrawer .list-payment-lm .list-payment__item svg,
  #CartDrawer .list-payment-lm .list-payment__item .icon,
  #CartDrawer .list-payment-lm .list-payment__item .icon--full-color {
    height: 28px !important; /* v9 was 23.5px: another -0.25px */
    width: auto !important;
  }

  /* Checkout label + total price 0.5px smaller on mobile. */
  #CartDrawer .cart__checkout-button,
  #CartDrawer-Checkout,
  #CartDrawer .cart__checkout-button * {
    font-size: 20px !important;
    letter-spacing: -0.02px !important;
  }
}

/* Product info price: force one clean line, no split like "487,75" + "0". */
#CartDrawer .cart-item__details {
  min-width: 0 !important;
}
#CartDrawer .cart-item__totals,
#CartDrawer .cart-item__price-wrapper {
  min-width: max-content !important;
  width: auto !important;
  flex: 0 0 auto !important;
  text-align: right !important;
  white-space: nowrap !important;
}
#CartDrawer .cart-item__totals .price,
#CartDrawer .cart-item__totals .price *,
#CartDrawer .cart-item__price-wrapper .price,
#CartDrawer .cart-item__price-wrapper .price *,
#CartDrawer .price,
#CartDrawer .price * {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
@media screen and (max-width: 749px) {
  #CartDrawer .cart-item__totals .price,
  #CartDrawer .cart-item__totals .price *,
  #CartDrawer .cart-item__price-wrapper .price,
  #CartDrawer .cart-item__price-wrapper .price * {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   NERIONA CART DRAWER v11 CLEAN FINAL
   - reward text one-line on mobile
   - drawer payment icons mobile -0.25px + gap -0.5px
   - Mayberry-style dim only LEFT of drawer, never behind drawer
   ═══════════════════════════════════════════════════════ */

:root {
  --nrn-cart-drawer-width-mobile: min(452px, calc(100vw - 5rem));
  --nrn-cart-drawer-width-desktop: 452px;
}

/* Cart drawer must sit above the dim layer; dim layer only covers site content on the left. */
cart-drawer,
.drawer {
  background: transparent !important;
}
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer__inner {
  position: relative !important;
  z-index: 3 !important;
  background: #fff !important;
  width: var(--nrn-cart-drawer-width-mobile) !important;
  max-width: var(--nrn-cart-drawer-width-mobile) !important;
  border-left: 0 !important;
  border-inline-start: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
@media screen and (min-width: 750px) {
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner,
  .drawer__inner {
    width: var(--nrn-cart-drawer-width-desktop) !important;
    max-width: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

#CartDrawer-Overlay,
.cart-drawer__overlay {
  position: fixed !important;
  z-index: 1 !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: var(--nrn-cart-drawer-width-mobile) !important;
  width: auto !important;
  height: 100dvh !important;
  background: rgba(0,0,0,.42) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 280ms ease, visibility 280ms ease !important;
}
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}
@media screen and (min-width: 750px) {
  #CartDrawer-Overlay,
  .cart-drawer__overlay {
    right: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

/* Reward headline: always one clean row, never inside the progress bar. */
#CartDrawer .cd-rewards-text,
.cd-rewards-text {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.25 !important;
  margin-bottom: 36px !important;
  font-size: clamp(11.25px, 3.2vw, 14px) !important;
}
@media screen and (min-width: 750px) {
  #CartDrawer .cd-rewards-text p,
  #CartDrawer #cd-rewards-msg,
  .cd-rewards-text p,
  #cd-rewards-msg {
    font-size: 14px !important;
  }
}

/* Progress bar remains behind the icons. */
#CartDrawer .cd-progress-container,
.cd-progress-container {
  position: relative !important;
  z-index: 1 !important;
}
#CartDrawer .cd-progress-bar-background,
#CartDrawer .cd-progress-bar,
.cd-progress-bar-background,
.cd-progress-bar {
  position: relative !important;
  z-index: 1 !important;
}
#CartDrawer .cd-icon-container-wrapper,
.cd-icon-container-wrapper {
  position: relative !important;
  z-index: 5 !important;
}
#CartDrawer .cd-icon-reward,
.cd-icon-reward {
  position: relative !important;
  z-index: 6 !important;
}

/* Correct cart-drawer payment icons on mobile: another -0.25px and gap -0.5px. */
@media screen and (max-width: 749px) {
  #CartDrawer .footer__payment .list-payment-lm,
  #CartDrawer .payment-icons-drawer .list-payment-lm,
  #CartDrawer .list.list-payment-lm,
  #CartDrawer ul.list-payment-lm {
    gap: 5.5px 7.5px !important;
  }
  #CartDrawer .payment-icons-drawer svg,
  #CartDrawer .payment-icons-drawer .icon,
  #CartDrawer .payment-icons-drawer .icon--full-color,
  #CartDrawer .footer__payment svg,
  #CartDrawer .footer__payment .icon,
  #CartDrawer .footer__payment .icon--full-color,
  #CartDrawer .list-payment-lm svg,
  #CartDrawer .list-payment-lm .icon,
  #CartDrawer .list-payment-lm .icon--full-color {
    height: 28px !important;
    width: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v12 — real Mayberry-style left dim +
   correct mobile payment icon sizing/gap + one-line reward text
   ═══════════════════════════════════════════════════════ */
:root {
  --nrn-cart-drawer-width-mobile: min(452px, calc(100vw - 5rem));
  --nrn-cart-drawer-width-desktop: 452px;
}

/* The actual dark layer: only the website area LEFT of the drawer.
   This uses the cart-drawer element itself so it works even if the
   theme overlay selector is overwritten elsewhere. */
cart-drawer.drawer,
.drawer {
  background: transparent !important;
  overflow: visible !important;
}
cart-drawer.drawer::before,
.drawer::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: var(--nrn-cart-drawer-width-mobile) !important;
  width: auto !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.42) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity 280ms ease, visibility 280ms ease !important;
}
cart-drawer.drawer.active::before,
.drawer.active::before {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
@media screen and (min-width: 750px) {
  cart-drawer.drawer::before,
  .drawer::before {
    right: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

/* Keep native overlay functional for click-close, but make it visually identical. */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  position: fixed !important;
  z-index: 2 !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: var(--nrn-cart-drawer-width-mobile) !important;
  width: auto !important;
  height: 100dvh !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  visibility: visible !important;
  pointer-events: auto !important;
}
@media screen and (min-width: 750px) {
  #CartDrawer-Overlay,
  .cart-drawer__overlay {
    right: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

/* Drawer always above the dim layer; no dark layer behind the panel. */
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer__inner {
  position: relative !important;
  z-index: 5 !important;
  background: #fff !important;
}

/* Reward headline: force both messages into one row. */
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.2 !important;
  font-size: clamp(10.75px, 2.95vw, 13.5px) !important;
}

/* Correct mobile payment icons in CART DRAWER only: -0.25px size and -0.5px gap. */
@media screen and (max-width: 749px) {
  #CartDrawer .footer__payment ul.list-payment-lm,
  #CartDrawer .footer__payment .list-payment-lm,
  #CartDrawer .payment-icons-drawer ul.list-payment-lm,
  #CartDrawer .payment-icons-drawer .list-payment-lm,
  #CartDrawer ul.list-payment-lm,
  #CartDrawer .list.list-payment-lm {
    gap: 5px 7px !important;
    column-gap: 7px !important;
    row-gap: 5px !important;
  }
  #CartDrawer .footer__payment .list-payment__item,
  #CartDrawer .payment-icons-drawer .list-payment__item,
  #CartDrawer .list-payment-lm .list-payment__item {
    margin: 0 !important;
    padding: 0 !important;
  }
  
}

/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v13 — final micro tuning
   - payment icons +0.25px and gap +0.25px from v12
   - reward headline larger but still one line
   - left dim appears only after drawer slide-in finishes
   ═══════════════════════════════════════════════════════ */

/* Dim layer: no visible darkening during slide-in; fade in after panel arrives. */
cart-drawer.drawer::before,
.drawer::before {
  transition: opacity 180ms ease 0ms, visibility 180ms ease 0ms !important;
}
cart-drawer.drawer.active::before,
.drawer.active::before {
  transition: opacity 180ms ease 330ms, visibility 180ms ease 330ms !important;
}

/* Keep click-close area active, but visual dim is handled by ::before above. */
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  background: transparent !important;
  opacity: 1 !important;
}

/* Reward headline: bigger, still forced to one clean row. */
#CartDrawer .cd-rewards-text,
.cd-rewards-text {
  min-width: 0 !important;
}
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.18 !important;
}
@media screen and (max-width: 749px) {
  #CartDrawer .cd-rewards-text p,
  #CartDrawer #cd-rewards-msg,
  .cd-rewards-text p,
  #cd-rewards-msg {
    font-size: clamp(12.75px, 3.35vw, 15.5px) !important;
    letter-spacing: -0.025em !important;
  }
}
@media screen and (min-width: 750px) {
  #CartDrawer .cd-rewards-text p,
  #CartDrawer #cd-rewards-msg,
  .cd-rewards-text p,
  #cd-rewards-msg {
    font-size: 14.5px !important;
    letter-spacing: -0.01em !important;
  }
}

/* Correct CART DRAWER mobile payment icons: +0.25px size and +0.25px gap vs v12. */
@media screen and (max-width: 749px) {
  #CartDrawer .footer__payment ul.list-payment-lm,
  #CartDrawer .footer__payment .list-payment-lm,
  #CartDrawer .payment-icons-drawer ul.list-payment-lm,
  #CartDrawer .payment-icons-drawer .list-payment-lm,
  #CartDrawer ul.list-payment-lm,
  #CartDrawer .list.list-payment-lm,
  #CartDrawer .list-payment {
    gap: 5.25px 7.25px !important;
    row-gap: 5.25px !important;
    column-gap: 7.25px !important;
  }
  #CartDrawer .footer__payment .list-payment__item,
  #CartDrawer .payment-icons-drawer .list-payment__item,
  #CartDrawer .list-payment-lm .list-payment__item,
  #CartDrawer .list-payment .list-payment__item {
    margin: 0 !important;
    padding: 0 !important;
  }
  #CartDrawer .footer__payment svg,
  #CartDrawer .footer__payment .icon,
  #CartDrawer .footer__payment .icon--full-color,
  #CartDrawer .payment-icons-drawer svg,
  #CartDrawer .payment-icons-drawer .icon,
  #CartDrawer .payment-icons-drawer .icon--full-color,
  #CartDrawer .list-payment-lm svg,
  #CartDrawer .list-payment-lm .icon,
  #CartDrawer .list-payment-lm .icon--full-color,
  #CartDrawer .list-payment svg,
  #CartDrawer .list-payment .icon,
  #CartDrawer .list-payment .icon--full-color {
    height: 21px !important;
    max-height: 21px !important;
    width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v14 — exact micro correction
   - dim appears earlier than v13, not instant
   - reward text really +2px, top spacing -2px, bottom spacing +1px
   - mobile payment icon gap +0.25px from v13
   ═══════════════════════════════════════════════════════ */

/* Left dim: v13 was too late (330ms). Start after drawer is mostly in. */
cart-drawer.drawer::before,
.drawer::before {
  transition: opacity 180ms ease 0ms, visibility 180ms ease 0ms !important;
}
cart-drawer.drawer.active::before,
.drawer.active::before {
  transition: opacity 180ms ease 180ms, visibility 180ms ease 180ms !important;
}

/* Reward top area: 2px less above, 1px more below the text/bar flow. */
#CartDrawer .cd-rewards-container,
.cd-rewards-container {
  padding-top: 11px !important;
}
#CartDrawer .cd-rewards-text,
.cd-rewards-text {
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-width: 0 !important;
}
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  margin-top: 0 !important;
  margin-bottom: 11px !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.16 !important;
  letter-spacing: -0.035em !important;
}
@media screen and (max-width: 749px) {
  #CartDrawer .cd-rewards-text p,
  #CartDrawer #cd-rewards-msg,
  .cd-rewards-text p,
  #cd-rewards-msg {
    font-size: 18px !important;
  }
}
@media screen and (min-width: 750px) {
  #CartDrawer .cd-rewards-text p,
  #CartDrawer #cd-rewards-msg,
  .cd-rewards-text p,
  #cd-rewards-msg {
    font-size: 18.5px !important;
  }
}

/* Payment icons mobile: +0.25px MORE spacing vs v13, size unchanged. */
@media screen and (max-width: 749px) {
  #CartDrawer .footer__payment ul.list-payment-lm,
  #CartDrawer .footer__payment .list-payment-lm,
  #CartDrawer .payment-icons-drawer ul.list-payment-lm,
  #CartDrawer .payment-icons-drawer .list-payment-lm,
  #CartDrawer ul.list-payment-lm,
  #CartDrawer .list.list-payment-lm,
  #CartDrawer .list-payment {
    gap: 5.5px 7.5px !important;
    row-gap: 5.5px !important;
    column-gap: 7.5px !important;
  }
  #CartDrawer .footer__payment .list-payment__item,
  #CartDrawer .payment-icons-drawer .list-payment__item,
  #CartDrawer .list-payment-lm .list-payment__item,
  #CartDrawer .list-payment .list-payment__item {
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v15 — FINAL requested correction
   - mobile reward text 1.5px smaller than v14
   - reward side padding 1.5px less
   - much more space below reward text so it never sits in the progress bar
   - left dim starts immediately with drawer movement (not late)
   - payment icon gap +0.25px from v14
   ═══════════════════════════════════════════════════════ */

/* Overlay/dimming: start immediately when drawer opens, no delayed pop-in. */
cart-drawer.drawer::before,
.drawer::before {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 160ms ease 0ms, visibility 0ms linear 160ms !important;
}
cart-drawer.drawer.active::before,
.drawer.active::before {
  opacity: 0.38 !important;
  visibility: visible !important;
  transition: opacity 160ms ease 0ms, visibility 0ms linear 0ms !important;
}
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  background: transparent !important;
  opacity: 1 !important;
}

/* Reward block: less left/right padding, more room below message before bar. */
#CartDrawer .cd-rewards-container,
.cd-rewards-container {
  padding-left: 21.5px !important;
  padding-right: 21.5px !important;
  padding-top: 11px !important;
}
#CartDrawer .cd-rewards-container::after,
.cd-rewards-container::after {
  margin-left: -21.5px !important;
  margin-right: -21.5px !important;
}
#CartDrawer .cd-rewards-text,
.cd-rewards-text {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.16 !important;
  letter-spacing: -0.014em !important;
}
@media screen and (max-width: 749px) {
  #CartDrawer .cd-rewards-text p,
  #CartDrawer #cd-rewards-msg,
  .cd-rewards-text p,
  #cd-rewards-msg {
    font-size: 16.75px !important;
  }
}
@media screen and (min-width: 750px) {
  #CartDrawer .cd-rewards-text p,
  #CartDrawer #cd-rewards-msg,
  .cd-rewards-text p,
  #cd-rewards-msg {
    font-size: 20.5px !important;
  }
}
#CartDrawer .cd-progress-container,
.cd-progress-container {
  margin-top: 0 !important;
}

/* Cart drawer payment icons: +0.25px more spacing than v14. */
@media screen and (max-width: 749px) {
  #CartDrawer .footer__payment ul.list-payment-lm,
  #CartDrawer .footer__payment .list-payment-lm,
  #CartDrawer .payment-icons-drawer ul.list-payment-lm,
  #CartDrawer .payment-icons-drawer .list-payment-lm,
  #CartDrawer ul.list-payment-lm,
  #CartDrawer .list.list-payment-lm,
  #CartDrawer .list-payment {
    gap: 5.75px 7.75px !important;
    row-gap: 5.75px !important;
    column-gap: 10px !important;
  }
  #CartDrawer .footer__payment .list-payment__item,
  #CartDrawer .payment-icons-drawer .list-payment__item,
  #CartDrawer .list-payment-lm .list-payment__item,
  #CartDrawer .list-payment .list-payment__item {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v16 — FINAL overlay timing + reward spacing
   - reward text gets +3px more space below before progress bar
   - left dim is stronger but appears only after drawer slide-in is basically complete
   ═══════════════════════════════════════════════════════ */

/* Reward message: 3px more below text, so it cannot sit inside the progress bar. */
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  margin-bottom: 23px !important;
}

/* Left-side dim: not early. Wait until drawer is fully/visibly in place, then fade stronger. */
cart-drawer.drawer::before,
.drawer::before {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 180ms ease 0ms, visibility 0ms linear 180ms !important;
}
cart-drawer.drawer.active::before,
.drawer.active::before {
  opacity: 0.52 !important;
  visibility: visible !important;
  transition: opacity 180ms ease 300ms, visibility 0ms linear 300ms !important;
}

/* Keep the native click-close overlay visually clear; only ::before creates the dim. */
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  background: transparent !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v17 — exact final micro tweak
   - left dim starts when drawer animation is 3/4 complete
   - reward text gets +4px more space before progress bar
   ═══════════════════════════════════════════════════════ */

/* Reward message: +4px more below text vs v16. */
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  margin-bottom: 27px !important;
}

/* Drawer slide is 420ms, so 75% = 315ms. Dim starts at that point. */
cart-drawer.drawer::before,
.drawer::before {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 180ms ease 0ms, visibility 0ms linear 180ms !important;
}
cart-drawer.drawer.active::before,
.drawer.active::before {
  opacity: 0.52 !important;
  visibility: visible !important;
  transition: opacity 180ms ease 315ms, visibility 0ms linear 315ms !important;
}

.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  background: transparent !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v18 — REAL PATCH
   - progress text gets +3px more space before progress bar vs v17
   - left dim starts at 60% of drawer animation
   - left dim strength is 62%
   ═══════════════════════════════════════════════════════ */

/* Reward message: +3px more below text vs v17 (27px -> 30px). */
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  margin-bottom: 30px !important;
}

/* Drawer slide is 420ms, so 60% = 252ms. Dim starts there and fades to 62%. */
cart-drawer.drawer::before,
.drawer::before {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 180ms ease 0ms, visibility 0ms linear 180ms !important;
}
cart-drawer.drawer.active::before,
.drawer.active::before {
  opacity: 0.62 !important;
  visibility: visible !important;
  transition: opacity 180ms ease 252ms, visibility 0ms linear 252ms !important;
}

.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  background: transparent !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v19 — real overlay + faster animation
   - dim starts at 20% of the new faster slide animation
   - dim strength is a true 70% black overlay
   - drawer animation is 1.25x faster than v18
   ═══════════════════════════════════════════════════════ */

/* Drawer animation: v18 open 390ms / close 300ms → 1.25x faster = 312ms / 240ms. */
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer__inner {
  transition: transform 312ms cubic-bezier(.22,.84,.24,1) !important;
}
cart-drawer.is-closing #CartDrawer .drawer__inner,
cart-drawer.is-closing .drawer__inner {
  transition: transform 240ms cubic-bezier(.4,0,1,1) !important;
}

/* Real left-side dim: only left of drawer, 70% black, visible from 20% of 312ms = ~62ms. */
cart-drawer.drawer::before,
.drawer::before {
  background: rgba(0, 0, 0, 0.70) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 150ms ease 0ms, visibility 0ms linear 150ms !important;
}
cart-drawer.drawer.active::before,
.drawer.active::before {
  background: rgba(0, 0, 0, 0.70) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 150ms ease 62ms, visibility 0ms linear 62ms !important;
}

/* Native overlay remains clickable but visually transparent; ::before does the dimming. */
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v20 — CLEAN ANIMATION + DIM 63%
   - dim reduced from 70% to 63%
   - dim timing/speed from v19 kept
   - ONLY the drawer panel moves; overlay/page never transforms
   - fixes jerky/dragged background objects during slide-in
   ═══════════════════════════════════════════════════════ */

:root {
  --nrn-cart-drawer-width-mobile: min(452px, calc(100vw - 5rem));
  --nrn-cart-drawer-width-desktop: 452px;
  --nrn-cart-open-ms: 312ms;
  --nrn-cart-close-ms: 240ms;
  --nrn-cart-dim-delay: 62ms; /* 20% of 312ms — timing from v19 */
  --nrn-cart-dim-strength: 0.63;
}

/* The shell stays fixed and calm. Never animate/transform the page wrapper. */
cart-drawer.drawer,
.drawer {
  position: fixed !important;
  inset: 0 0 auto auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  background: transparent !important;
  transform: none !important;
  transition: visibility var(--nrn-cart-open-ms) ease !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 1000 !important;
  contain: layout style paint !important;
}
cart-drawer.drawer.active,
.drawer.active {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Disable the old pseudo dim layer completely. It could visually fight the panel animation. */
cart-drawer.drawer::before,
.drawer::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Real dim layer: fixed left area only, never under/inside the drawer panel. */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: var(--nrn-cart-drawer-width-mobile) !important;
  width: auto !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, var(--nrn-cart-dim-strength)) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 150ms ease 0ms, visibility 0ms linear 150ms !important;
  z-index: 1 !important;
}
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  background: rgba(0, 0, 0, var(--nrn-cart-dim-strength)) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 150ms ease var(--nrn-cart-dim-delay), visibility 0ms linear var(--nrn-cart-dim-delay) !important;
}
@media screen and (min-width: 750px) {
  #CartDrawer-Overlay,
  .cart-drawer__overlay {
    right: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

/* Only the white panel slides. No translate on overlay, no translate on wrapper. */
#CartDrawer {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  width: var(--nrn-cart-drawer-width-mobile) !important;
  max-width: var(--nrn-cart-drawer-width-mobile) !important;
  height: 100dvh !important;
  background: transparent !important;
  transform: none !important;
  z-index: 3 !important;
  pointer-events: none !important;
  overflow: visible !important;
}
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer__inner {
  position: relative !important;
  z-index: 4 !important;
  width: var(--nrn-cart-drawer-width-mobile) !important;
  max-width: var(--nrn-cart-drawer-width-mobile) !important;
  height: 100dvh !important;
  background: #fff !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: transform var(--nrn-cart-open-ms) cubic-bezier(.22,.84,.24,1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  perspective: 1000px !important;
  contain: paint !important;
  pointer-events: auto !important;
}
.drawer.active #CartDrawer,
cart-drawer.drawer.active #CartDrawer {
  pointer-events: auto !important;
}
.drawer.active #CartDrawer .drawer__inner,
cart-drawer.drawer.active #CartDrawer .drawer__inner,
.drawer.active .drawer__inner,
cart-drawer.drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}
cart-drawer.is-closing #CartDrawer .drawer__inner,
cart-drawer.is-closing .drawer__inner {
  transition: transform var(--nrn-cart-close-ms) cubic-bezier(.4,0,1,1) !important;
  transform: translate3d(100%, 0, 0) !important;
}
@media screen and (min-width: 750px) {
  #CartDrawer,
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner,
  .drawer__inner {
    width: var(--nrn-cart-drawer-width-desktop) !important;
    max-width: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v21 — dim restored + reward spacing
   - keep v20 clean panel-only animation
   - restore left dim with fixed pseudo layer, not transformed
   - +2px more space between reward text and progress bar
   ═══════════════════════════════════════════════════════ */

:root {
  --nrn-cart-dim-strength: 0.63;
  --nrn-cart-dim-delay: 62ms;
}

/* Extra spacing under You unlocked / Add additional item text */
#CartDrawer .cd-rewards-text p,
#CartDrawer #cd-rewards-msg,
.cd-rewards-text p,
#cd-rewards-msg {
  margin-bottom: 32px !important;
}

/* Use a fixed pseudo overlay on the shell so the page dims but never moves with the drawer. */
cart-drawer.drawer::before,
.drawer::before {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: var(--nrn-cart-drawer-width-mobile) !important;
  width: auto !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, var(--nrn-cart-dim-strength)) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: opacity 150ms ease 0ms, visibility 0ms linear 150ms !important;
  z-index: 2 !important;
}
cart-drawer.drawer.active::before,
.drawer.active::before {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: opacity 150ms ease var(--nrn-cart-dim-delay), visibility 0ms linear var(--nrn-cart-dim-delay) !important;
}
@media screen and (min-width: 750px) {
  cart-drawer.drawer::before,
  .drawer::before {
    right: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

/* Native overlay stays as click target only, transparent. */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  z-index: 1 !important;
}
.drawer:not(.active) #CartDrawer-Overlay,
cart-drawer.drawer:not(.active) #CartDrawer-Overlay,
.drawer:not(.active) .cart-drawer__overlay,
cart-drawer.drawer:not(.active) .cart-drawer__overlay {
  pointer-events: none !important;
}

/* Keep the drawer panel above both overlay layers. */
#CartDrawer,
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer__inner {
  z-index: 4 !important;
}

/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v22 — clean moving dim layer
   - dim strength: 54%
   - dim starts after ~5% of drawer movement
   - dim reveals from right to left with the drawer motion
   - only overlay layer transforms; website and drawer shell stay stable
   ═══════════════════════════════════════════════════════ */
:root {
  --nrn-cart-dim-strength: 0.54;
  --nrn-cart-dim-delay: 16ms; /* ~5% of 312ms */
  --nrn-cart-dim-ms: 296ms;
}

/* Shell must stay fixed and never drag page/background content. */
cart-drawer.drawer,
.drawer {
  transform: none !important;
  background: transparent !important;
  overflow: hidden !important;
  contain: layout style paint !important;
}

/* Moving dim layer: reveals from the drawer edge toward the left. */
cart-drawer.drawer::before,
.drawer::before {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: var(--nrn-cart-drawer-width-mobile) !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, var(--nrn-cart-dim-strength)) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform-origin: right center !important;
  transform: scaleX(0) translateZ(0) !important;
  transition:
    transform var(--nrn-cart-dim-ms) cubic-bezier(.22,.84,.24,1) var(--nrn-cart-dim-delay),
    opacity var(--nrn-cart-dim-ms) ease var(--nrn-cart-dim-delay),
    visibility 0ms linear calc(var(--nrn-cart-dim-delay) + var(--nrn-cart-dim-ms)) !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  z-index: 2 !important;
}

cart-drawer.drawer.active::before,
.drawer.active::before {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scaleX(1) translateZ(0) !important;
  transition:
    transform var(--nrn-cart-dim-ms) cubic-bezier(.22,.84,.24,1) var(--nrn-cart-dim-delay),
    opacity var(--nrn-cart-dim-ms) ease var(--nrn-cart-dim-delay),
    visibility 0ms linear var(--nrn-cart-dim-delay) !important;
}

@media screen and (min-width: 750px) {
  cart-drawer.drawer::before,
  .drawer::before {
    right: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

/* Native overlay is only the click target; keep it invisible so it cannot create black flashes. */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}
.drawer:not(.active) #CartDrawer-Overlay,
cart-drawer.drawer:not(.active) #CartDrawer-Overlay,
.drawer:not(.active) .cart-drawer__overlay,
cart-drawer.drawer:not(.active) .cart-drawer__overlay {
  pointer-events: none !important;
}

/* Keep drawer panel on its own stable layer above moving dim. */
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer__inner {
  transform: translate3d(100%, 0, 0) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  z-index: 4 !important;
}
.drawer.active #CartDrawer .drawer__inner,
cart-drawer.drawer.active #CartDrawer .drawer__inner,
.drawer.active .drawer__inner,
cart-drawer.drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}

/* ═══════════════════════════════════════════════════════
   NRN CART DRAWER FIX v23 — rebuilt clean attached dim
   - dim strength: 50%
   - dim layer is fixed + clipped, NOT scaled/transformed
   - visible dark area is attached to drawer edge while it slides in
   - website/background never transforms or gets filtered
   ═══════════════════════════════════════════════════════ */
:root {
  --nrn-cart-dim-strength: 0.50;
  --nrn-cart-dim-delay: 0ms;
  --nrn-cart-dim-ms: var(--nrn-cart-open-ms);
}

/* Keep shell and page completely stable. */
cart-drawer.drawer,
.drawer {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  background: transparent !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 1000 !important;
  contain: layout style paint !important;
}
cart-drawer.drawer.active,
.drawer.active {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Kill pseudo overlay variants from older patches. */
cart-drawer.drawer::before,
.drawer::before,
cart-drawer.drawer::after,
.drawer::after {
  content: none !important;
  display: none !important;
}

/* Native overlay becomes the visual dim AND click target.
   It clips from 100% → drawer-width, so its right edge follows the drawer edge.
   No transform/scale = no dragged/verzerrt website content. */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, var(--nrn-cart-dim-strength)) !important;
  opacity: 1 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: inset(0 100% 0 0) !important;
  -webkit-clip-path: inset(0 100% 0 0) !important;
  transition:
    clip-path var(--nrn-cart-dim-ms) cubic-bezier(.22,.84,.24,1) var(--nrn-cart-dim-delay),
    -webkit-clip-path var(--nrn-cart-dim-ms) cubic-bezier(.22,.84,.24,1) var(--nrn-cart-dim-delay),
    visibility 0ms linear calc(var(--nrn-cart-dim-delay) + var(--nrn-cart-dim-ms)) !important;
  will-change: clip-path !important;
  z-index: 1 !important;
}
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay,
.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay {
  visibility: visible !important;
  pointer-events: auto !important;
  clip-path: inset(0 var(--nrn-cart-drawer-width-mobile) 0 0) !important;
  -webkit-clip-path: inset(0 var(--nrn-cart-drawer-width-mobile) 0 0) !important;
  transition:
    clip-path var(--nrn-cart-dim-ms) cubic-bezier(.22,.84,.24,1) var(--nrn-cart-dim-delay),
    -webkit-clip-path var(--nrn-cart-dim-ms) cubic-bezier(.22,.84,.24,1) var(--nrn-cart-dim-delay),
    visibility 0ms linear 0ms !important;
}
@media screen and (min-width: 750px) {
  .drawer.active #CartDrawer-Overlay,
  cart-drawer.drawer.active #CartDrawer-Overlay,
  .drawer.active .cart-drawer__overlay,
  cart-drawer.drawer.active .cart-drawer__overlay {
    clip-path: inset(0 var(--nrn-cart-drawer-width-desktop) 0 0) !important;
    -webkit-clip-path: inset(0 var(--nrn-cart-drawer-width-desktop) 0 0) !important;
  }
}

/* Drawer panel: the only element that physically slides. */
#CartDrawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: var(--nrn-cart-drawer-width-mobile) !important;
  max-width: var(--nrn-cart-drawer-width-mobile) !important;
  height: 100dvh !important;
  background: transparent !important;
  transform: none !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 3 !important;
}
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner,
.drawer__inner {
  position: relative !important;
  z-index: 4 !important;
  width: var(--nrn-cart-drawer-width-mobile) !important;
  max-width: var(--nrn-cart-drawer-width-mobile) !important;
  height: 100dvh !important;
  background: #fff !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: transform var(--nrn-cart-open-ms) cubic-bezier(.22,.84,.24,1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  contain: paint !important;
  pointer-events: auto !important;
}
.drawer.active #CartDrawer,
cart-drawer.drawer.active #CartDrawer {
  pointer-events: auto !important;
}
.drawer.active #CartDrawer .drawer__inner,
cart-drawer.drawer.active #CartDrawer .drawer__inner,
.drawer.active .drawer__inner,
cart-drawer.drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}
cart-drawer.is-closing #CartDrawer .drawer__inner,
cart-drawer.is-closing .drawer__inner {
  transition: transform var(--nrn-cart-close-ms) cubic-bezier(.4,0,1,1) !important;
  transform: translate3d(100%, 0, 0) !important;
}
@media screen and (min-width: 750px) {
  #CartDrawer,
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner,
  .drawer__inner {
    width: var(--nrn-cart-drawer-width-desktop) !important;
    max-width: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

/* =========================================================
   NRN CART DRAWER FIX v24 — SIMPLE CLEAN DIM FINAL
   - Restore the older/simple left dim behavior
   - Dim starts immediately at 0% of opening
   - Total dim strength: 50%
   - No moving/clipped/transformed dim layer
   - Website/background never transforms; only drawer panel slides
   ========================================================= */
cart-drawer {
  --nrn-cart-dim-strength: 0.50 !important;
  --nrn-cart-open-ms: 312ms !important;
  --nrn-cart-close-ms: 260ms !important;
  --nrn-cart-drawer-width-mobile: min(452px, calc(100vw - 5rem)) !important;
  --nrn-cart-drawer-width-desktop: 452px !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: none !important;
  contain: none !important;
  z-index: 9999 !important;
}

cart-drawer .drawer,
#CartDrawer.drawer,
.drawer {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  contain: none !important;
}

cart-drawer.drawer.active,
cart-drawer .drawer.active,
.drawer.active {
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Kill every old experimental dim layer so nothing sits behind/inside the drawer. */
cart-drawer::before,
cart-drawer::after,
cart-drawer .drawer::before,
cart-drawer .drawer::after,
.drawer::before,
.drawer::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
}

/* The native overlay is the ONLY dark layer + click target.
   It covers only the website area left of the drawer, never behind the drawer. */
.cart-drawer__overlay,
#CartDrawer-Overlay {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: var(--nrn-cart-drawer-width-mobile) !important;
  width: auto !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, var(--nrn-cart-dim-strength)) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 10000 !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  filter: none !important;
  will-change: opacity !important;
  transition: opacity 220ms ease 0ms, visibility 0ms linear 220ms !important;
}

.drawer.active .cart-drawer__overlay,
cart-drawer.drawer.active .cart-drawer__overlay,
.drawer.active #CartDrawer-Overlay,
cart-drawer.drawer.active #CartDrawer-Overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 220ms ease 0ms, visibility 0ms linear 0ms !important;
}

@media screen and (min-width: 750px) {
  .cart-drawer__overlay,
  #CartDrawer-Overlay {
    right: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

/* Only the actual white drawer panel slides. Nothing else moves. */
#CartDrawer .drawer__inner,
cart-drawer .drawer__inner {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: var(--nrn-cart-drawer-width-mobile) !important;
  max-width: var(--nrn-cart-drawer-width-mobile) !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #fff !important;
  border-left: 0 !important;
  box-shadow: none !important;
  z-index: 10001 !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: transform var(--nrn-cart-open-ms) cubic-bezier(.22,.84,.24,1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  contain: layout paint !important;
}

.drawer.active #CartDrawer .drawer__inner,
cart-drawer.drawer.active #CartDrawer .drawer__inner,
.drawer.active .drawer__inner,
cart-drawer.drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}

cart-drawer.is-closing #CartDrawer .drawer__inner,
cart-drawer.is-closing .drawer__inner {
  transition-duration: var(--nrn-cart-close-ms) !important;
  transform: translate3d(100%, 0, 0) !important;
}

@media screen and (min-width: 750px) {
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner {
    width: var(--nrn-cart-drawer-width-desktop) !important;
    max-width: var(--nrn-cart-drawer-width-desktop) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer__overlay,
  #CartDrawer-Overlay,
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner {
    transition: none !important;
  }
}

/* =========================================================
   NRN CART DRAWER FIX v25 — GUARANTEED BODY DIM OVERLAY
   - Uses a separate body-level overlay so the dim is always visible
   - 50% darkness, starts immediately when drawer opens
   - Website is never transformed/moved
   - Only drawer panel slides; overlay only fades
   ========================================================= */
body > .nrn-cart-body-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: var(--nrn-cart-drawer-width-mobile, min(452px, calc(100vw - 5rem))) !important;
  width: auto !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.50) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 9998 !important;
  transform: none !important;
  transition: opacity 220ms ease, visibility 0ms linear 220ms !important;
  will-change: opacity !important;
}

body.nrn-cart-dim-active > .nrn-cart-body-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 220ms ease, visibility 0ms linear 0ms !important;
}

@media screen and (min-width: 750px) {
  body > .nrn-cart-body-overlay {
    right: var(--nrn-cart-drawer-width-desktop, 452px) !important;
  }
}

/* Let the body overlay receive outside clicks; keep drawer panel clickable. */
cart-drawer.drawer.active,
cart-drawer.active,
cart-drawer .drawer.active,
.drawer.active {
  pointer-events: none !important;
}

cart-drawer.drawer.active .drawer__inner,
cart-drawer.active .drawer__inner,
.drawer.active .drawer__inner,
#CartDrawer .drawer__inner {
  pointer-events: auto !important;
}

/* Disable the old inline/native overlay visuals so there is no double overlay or weird layer. */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}






/* =========================================================
   NRN CART DRAWER — v26.4 SIMPLE & CLEAN
   ──────────────────────────────────────────────────────────
   Just the two things:
   1) Dim 45% on the left, smooth fade, website shows through darkened
   2) Checkout button forced pure #000000
   NOTHING else. No body height forcing, no touch-action manipulation,
   no html locking, no dvh hacks — those broke the page layout last time.
   ========================================================= */

/* Kill any leftover v25 body-overlay element so it can't paint or block */
body > .nrn-cart-body-overlay,
.nrn-cart-body-overlay {
  display: none !important;
}

/* ── DIM LAYER ── 45% black, fixed on the left of the drawer */
cart-drawer.drawer::before,
.drawer::before {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: min(452px, calc(100vw - 5rem)) !important;
  width: auto !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.45) !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 260ms cubic-bezier(.32,.72,0,1),
              visibility 0ms linear 260ms !important;
  z-index: 2 !important;
}

cart-drawer.drawer.active::before,
.drawer.active::before {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 320ms cubic-bezier(.32,.72,0,1) 0ms,
              visibility 0ms linear 0ms !important;
}

@media screen and (min-width: 750px) {
  cart-drawer.drawer::before,
  .drawer::before {
    right: 452px !important;
  }
}

/* Native overlay = transparent click target only */
#CartDrawer-Overlay,
.cart-drawer__overlay {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── CHECKOUT BUTTON: pure black, no grey-green ── */
#CartDrawer .cart__checkout-button,
#CartDrawer-Checkout,
#CartDrawer a#CartDrawer-Checkout,
.cart-drawer .cart__checkout-button,
cart-drawer .cart__checkout-button,
cart-drawer #CartDrawer-Checkout,
.cart__checkout-button,
a.cart__checkout-button,
button.cart__checkout-button {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

#CartDrawer .cart__checkout-button:hover,
#CartDrawer .cart__checkout-button:focus,
#CartDrawer .cart__checkout-button:active,
#CartDrawer-Checkout:hover,
#CartDrawer-Checkout:focus,
#CartDrawer-Checkout:active,
.cart-drawer .cart__checkout-button:hover,
.cart-drawer .cart__checkout-button:focus,
.cart-drawer .cart__checkout-button:active,
.cart__checkout-button:hover,
.cart__checkout-button:focus,
.cart__checkout-button:active {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
}


/* =========================================================
   NRN CART DRAWER v27 — ONE CLEAN FINAL LAYER FIX
   - Body-level backdrop sits ON TOP of the website so background glitches are hidden
   - Drawer panel sits above backdrop
   - Website is never transformed / filtered / moved
   - Background scrolling is locked while cart drawer is open
   ========================================================= */

/* Hard-kill all old dim experiments inside the drawer. */
cart-drawer.drawer::before,
cart-drawer.drawer::after,
.drawer::before,
.drawer::after,
#CartDrawer-Overlay,
.cart-drawer__overlay,
.nrn-cart-body-overlay {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The only visual dim layer. It is created by cart-drawer.js directly under <body>. */
body > .nrn-cart-backdrop-v27 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.45) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 2147483000 !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 160ms cubic-bezier(.32,.72,0,1), visibility 0ms linear 160ms !important;
  will-change: opacity !important;
  contain: paint !important;
}

body.nrn-cart-open-v27 > .nrn-cart-backdrop-v27 {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 180ms cubic-bezier(.32,.72,0,1), visibility 0ms linear 0ms !important;
}

/* Lock page/background scroll only while drawer is open. No height forcing = no zoom/white-screen bug. */
html.nrn-cart-scroll-lock-v27,
body.nrn-cart-scroll-lock-v27 {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Host covers screen but never moves the website. */
cart-drawer.drawer {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
  z-index: 2147483100 !important;
}
cart-drawer.drawer.active {
  pointer-events: auto !important;
}

/* Container stays fixed/static; only drawer__inner slides. */
#CartDrawer,
cart-drawer .cart-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(452px, calc(100vw - 5rem)) !important;
  max-width: min(452px, calc(100vw - 5rem)) !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  z-index: 2147483200 !important;
  contain: none !important;
}

#CartDrawer .drawer__inner,
cart-drawer .drawer__inner {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(452px, calc(100vw - 5rem)) !important;
  max-width: min(452px, calc(100vw - 5rem)) !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #fff !important;
  pointer-events: auto !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: transform 312ms cubic-bezier(.22,.84,.24,1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: flat !important;
  contain: layout paint style !important;
  isolation: isolate !important;
  z-index: 2147483300 !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

cart-drawer.drawer.active #CartDrawer .drawer__inner,
cart-drawer.drawer.active .drawer__inner,
.drawer.active #CartDrawer .drawer__inner,
.drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}

cart-drawer.is-closing #CartDrawer .drawer__inner,
cart-drawer.is-closing .drawer__inner {
  transition: transform 250ms cubic-bezier(.4,0,1,1) !important;
  transform: translate3d(100%, 0, 0) !important;
}

@media screen and (min-width: 750px) {
  #CartDrawer,
  cart-drawer .cart-drawer,
  #CartDrawer .drawer__inner,
  cart-drawer .drawer__inner {
    width: 452px !important;
    max-width: 452px !important;
  }
}

/* Drawer internal scroll only — background never scrolls. */
#CartDrawer .drawer__inner {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#CartDrawer cart-drawer-items {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
#CartDrawer .cart-drawer__footer {
  flex: 0 0 auto !important;
}

/* Keep checkout button pure black. */
#CartDrawer .cart__checkout-button,
#CartDrawer-Checkout,
#CartDrawer a#CartDrawer-Checkout,
.cart-drawer .cart__checkout-button,
cart-drawer .cart__checkout-button,
cart-drawer #CartDrawer-Checkout,
.cart__checkout-button,
a.cart__checkout-button,
button.cart__checkout-button,
#CartDrawer .cart__checkout-button:hover,
#CartDrawer .cart__checkout-button:focus,
#CartDrawer .cart__checkout-button:active,
#CartDrawer-Checkout:hover,
#CartDrawer-Checkout:focus,
#CartDrawer-Checkout:active {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* =========================================================
   NRN CART DRAWER v28 — FINAL SMOOTH LAYER + SCROLL FREEZE
   Fixes the last 0.3s background-pull/jitter by freezing the page
   without transform, keeping the backdrop above the website, and
   moving ONLY the drawer panel.
   ========================================================= */

/* stable page width, no scrollbar jump when drawer locks scroll */
html {
  scrollbar-gutter: stable !important;
}

html.nrn-cart-scroll-lock-v27 {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.nrn-cart-scroll-lock-v27 {
  position: fixed !important;
  top: var(--nrn-cart-scroll-y, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  padding-right: var(--nrn-cart-scrollbar-comp, 0px) !important;
  transform: none !important;
  filter: none !important;
}

/* One backdrop, fixed above the website. It hides any underlying paint glitch. */
body > .nrn-cart-backdrop-v27 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.45) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 2147483000 !important;
  transform: translateZ(0) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 220ms cubic-bezier(.32,.72,0,1), visibility 0ms linear 220ms !important;
  will-change: opacity !important;
  contain: paint !important;
}

body.nrn-cart-open-v27 > .nrn-cart-backdrop-v27 {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 220ms cubic-bezier(.32,.72,0,1), visibility 0ms linear 0ms !important;
}

/* Kill every older internal overlay so nothing double-paints or drags. */
cart-drawer.drawer::before,
cart-drawer.drawer::after,
.drawer::before,
.drawer::after,
#CartDrawer-Overlay,
.cart-drawer__overlay,
.nrn-cart-body-overlay {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Host is just a fixed click/layout shell. It never animates. */
html body cart-drawer.drawer,
html body cart-drawer.drawer.active,
html body .drawer,
html body .drawer.active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: transparent !important;
  pointer-events: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  contain: paint style !important;
  isolation: isolate !important;
  z-index: 2147483100 !important;
}
html body cart-drawer.drawer.active {
  pointer-events: auto !important;
}

/* Cart wrapper also never animates. */
html body cart-drawer.drawer #CartDrawer,
html body cart-drawer.drawer.active #CartDrawer,
html body #CartDrawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(452px, calc(100vw - 5rem)) !important;
  max-width: min(452px, calc(100vw - 5rem)) !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: visible !important;
  background: transparent !important;
  pointer-events: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  contain: paint style !important;
  isolation: isolate !important;
  z-index: 2147483200 !important;
}

/* ONLY this white panel slides. */
html body cart-drawer.drawer #CartDrawer .drawer__inner,
html body cart-drawer.drawer .drawer__inner,
html body #CartDrawer .drawer__inner,
html body .drawer__inner {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(452px, calc(100vw - 5rem)) !important;
  max-width: min(452px, calc(100vw - 5rem)) !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #fff !important;
  pointer-events: auto !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: transform 312ms cubic-bezier(.22,.84,.24,1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: flat !important;
  contain: layout paint style !important;
  isolation: isolate !important;
  z-index: 2147483300 !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

html body cart-drawer.drawer.active #CartDrawer .drawer__inner,
html body cart-drawer.drawer.active .drawer__inner,
html body .drawer.active #CartDrawer .drawer__inner,
html body .drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}

html body cart-drawer.is-closing #CartDrawer .drawer__inner,
html body cart-drawer.is-closing .drawer__inner {
  transition: transform 250ms cubic-bezier(.4,0,1,1) !important;
  transform: translate3d(100%, 0, 0) !important;
}

@media screen and (min-width: 750px) {
  html body cart-drawer.drawer #CartDrawer,
  html body cart-drawer.drawer #CartDrawer .drawer__inner,
  html body cart-drawer.drawer .drawer__inner,
  html body #CartDrawer,
  html body #CartDrawer .drawer__inner {
    width: 452px !important;
    max-width: 452px !important;
  }
}

/* Inside drawer scroll only; page behind cannot scroll. */
html body #CartDrawer .drawer__inner {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html body #CartDrawer cart-drawer-items {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
html body #CartDrawer .cart-drawer__footer {
  flex: 0 0 auto !important;
}

/* =========================================================
   NRN CART DRAWER v29 — LOOP BLOCK + NO BACKGROUND PULL
   - background clicks cannot reach Add-to-cart while drawer is open
   - no body position:fixed snapshot, so the website cannot be dragged/distorted
   - only the white drawer panel moves
   - animation 1.1x faster than v28
   ========================================================= */

html.nrn-cart-scroll-lock-v27,
body.nrn-cart-scroll-lock-v27 {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.nrn-cart-scroll-lock-v27 {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  padding-right: var(--nrn-cart-scrollbar-comp, 0px) !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  contain: none !important;
}

body > .nrn-cart-backdrop-v27 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.45) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 2147483000 !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 200ms cubic-bezier(.32,.72,0,1), visibility 0ms linear 200ms !important;
  will-change: opacity !important;
  contain: paint !important;
}

body.nrn-cart-open-v27 > .nrn-cart-backdrop-v27 {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 200ms cubic-bezier(.32,.72,0,1), visibility 0ms linear 0ms !important;
}

/* Disable all native/old overlays to avoid double drawer/ghost layers. */
cart-drawer.drawer::before,
cart-drawer.drawer::after,
.drawer::before,
.drawer::after,
#CartDrawer-Overlay,
.cart-drawer__overlay,
.nrn-cart-body-overlay {
  content: none !important;
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
}

/* Shell never animates and never paints white behind the panel. */
html body cart-drawer.drawer,
html body cart-drawer.drawer.active,
html body .drawer,
html body .drawer.active,
html body cart-drawer.drawer #CartDrawer,
html body cart-drawer.drawer.active #CartDrawer,
html body #CartDrawer {
  background: transparent !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body cart-drawer.drawer,
html body cart-drawer.drawer.active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  pointer-events: none !important;
  z-index: 2147483100 !important;
  isolation: isolate !important;
  contain: paint style !important;
}
html body cart-drawer.drawer.active { pointer-events: auto !important; }

html body cart-drawer.drawer #CartDrawer,
html body cart-drawer.drawer.active #CartDrawer,
html body #CartDrawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(452px, calc(100vw - 5rem)) !important;
  max-width: min(452px, calc(100vw - 5rem)) !important;
  height: 100vh !important;
  height: 100dvh !important;
  pointer-events: none !important;
  z-index: 2147483200 !important;
  contain: paint style !important;
  isolation: isolate !important;
}

/* ONLY the actual white panel moves. 1.1x faster than v28: 312ms → 284ms. */
html body cart-drawer.drawer #CartDrawer .drawer__inner,
html body cart-drawer.drawer .drawer__inner,
html body #CartDrawer .drawer__inner,
html body .drawer__inner {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(452px, calc(100vw - 5rem)) !important;
  max-width: min(452px, calc(100vw - 5rem)) !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #fff !important;
  pointer-events: auto !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: transform 284ms cubic-bezier(.22,.84,.24,1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: flat !important;
  contain: layout paint style !important;
  isolation: isolate !important;
  z-index: 2147483300 !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

html body cart-drawer.drawer.active #CartDrawer .drawer__inner,
html body cart-drawer.drawer.active .drawer__inner,
html body .drawer.active #CartDrawer .drawer__inner,
html body .drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}

html body cart-drawer.is-closing #CartDrawer .drawer__inner,
html body cart-drawer.is-closing .drawer__inner {
  transition: transform 227ms cubic-bezier(.4,0,1,1) !important;
  transform: translate3d(100%, 0, 0) !important;
}

@media screen and (min-width: 750px) {
  html body cart-drawer.drawer #CartDrawer,
  html body cart-drawer.drawer #CartDrawer .drawer__inner,
  html body cart-drawer.drawer .drawer__inner,
  html body #CartDrawer,
  html body #CartDrawer .drawer__inner {
    width: 452px !important;
    max-width: 452px !important;
  }
}

html body #CartDrawer .drawer__inner {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
html body #CartDrawer cart-drawer-items {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
html body #CartDrawer .cart-drawer__footer {
  flex: 0 0 auto !important;
}

/* =========================================================
   NRN CART DRAWER v30 — STABLE OVERLAY + OPEN RELIABILITY
   - fixes v29 sometimes closing/not opening from same pointerup/click
   - backdrop is the only outside-click layer, so page buttons cannot loop
   - page never transforms; only white drawer panel slides
   - background scroll is locked while drawer is open
   ========================================================= */

/* Scroll lock without freezing/transforming the website layout. */
html.nrn-cart-scroll-lock-v27,
body.nrn-cart-scroll-lock-v27 {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
body.nrn-cart-scroll-lock-v27 {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  contain: none !important;
  padding-right: var(--nrn-cart-scrollbar-comp, 0px) !important;
}

/* The guaranteed visible backdrop: above website, below drawer. */
body > .nrn-cart-backdrop-v27 {
  display: block !important;
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.45) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 2147483000 !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 180ms cubic-bezier(.32,.72,0,1), visibility 0ms linear 180ms !important;
  will-change: opacity !important;
  isolation: isolate !important;
  contain: paint !important;
}
body.nrn-cart-open-v27 > .nrn-cart-backdrop-v27 {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 180ms cubic-bezier(.32,.72,0,1), visibility 0ms linear 0ms !important;
}

/* Kill all old/native overlay attempts to avoid double/ghost layers. */
cart-drawer.drawer::before,
cart-drawer.drawer::after,
.drawer::before,
.drawer::after,
#CartDrawer-Overlay,
.cart-drawer__overlay,
.nrn-cart-body-overlay {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
  transform: none !important;
  filter: none !important;
}

/* Shell is only a fixed transparent viewport. It never animates/paints. */
html body cart-drawer.drawer,
html body cart-drawer.drawer.active,
html body .drawer,
html body .drawer.active,
html body cart-drawer.drawer #CartDrawer,
html body cart-drawer.drawer.active #CartDrawer,
html body #CartDrawer {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  contain: paint style !important;
  isolation: isolate !important;
}
html body cart-drawer.drawer,
html body cart-drawer.drawer.active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147483100 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
html body cart-drawer.drawer.active { pointer-events: none !important; }

html body cart-drawer.drawer #CartDrawer,
html body cart-drawer.drawer.active #CartDrawer,
html body #CartDrawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(452px, calc(100vw - 5rem)) !important;
  max-width: min(452px, calc(100vw - 5rem)) !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147483200 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

/* ONLY the real white panel moves. */
html body cart-drawer.drawer #CartDrawer .drawer__inner,
html body cart-drawer.drawer .drawer__inner,
html body #CartDrawer .drawer__inner {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(452px, calc(100vw - 5rem)) !important;
  max-width: min(452px, calc(100vw - 5rem)) !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #fff !important;
  pointer-events: auto !important;
  transform: translate3d(100%, 0, 0) !important;
  transition: transform 284ms cubic-bezier(.22,.84,.24,1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: flat !important;
  contain: layout paint style !important;
  isolation: isolate !important;
  z-index: 2147483300 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body cart-drawer.drawer.active #CartDrawer .drawer__inner,
html body cart-drawer.drawer.active .drawer__inner,
html body .drawer.active #CartDrawer .drawer__inner,
html body .drawer.active .drawer__inner {
  transform: translate3d(0, 0, 0) !important;
}
html body cart-drawer.is-closing #CartDrawer .drawer__inner,
html body cart-drawer.is-closing .drawer__inner {
  transition: transform 227ms cubic-bezier(.4,0,1,1) !important;
  transform: translate3d(100%, 0, 0) !important;
}

@media screen and (min-width: 750px) {
  html body cart-drawer.drawer #CartDrawer,
  html body cart-drawer.drawer #CartDrawer .drawer__inner,
  html body cart-drawer.drawer .drawer__inner,
  html body #CartDrawer,
  html body #CartDrawer .drawer__inner {
    width: 452px !important;
    max-width: 452px !important;
  }
}

/* Only the item list scrolls inside the drawer. Page behind cannot scroll. */
html body #CartDrawer .drawer__inner {
  display: flex !important;
  flex-direction: column !important;
}
html body #CartDrawer cart-drawer-items {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
html body #CartDrawer .cart-drawer__footer {
  flex: 0 0 auto !important;
}


/* =========================================================
   NRN CART DRAWER v31 — RELIABLE ATC OPEN + DIM 51
   - Add-to-cart button is never blocked while drawer is closed
   - Backdrop only receives clicks after drawer is active
   - Dim strength hard-set to 51%
   - Website/page never transforms; only drawer panel slides
   ========================================================= */

body > .nrn-cart-backdrop-v27 {
  background: rgba(0, 0, 0, 0.57) !important;
  background-color: rgba(0, 0, 0, 0.57) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  transition: opacity 180ms cubic-bezier(.32,.72,0,1), visibility 0ms linear 180ms !important;
}
body.nrn-cart-open-v27 > .nrn-cart-backdrop-v27 {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 180ms cubic-bezier(.32,.72,0,1), visibility 0ms linear 0ms !important;
}

/* Closed drawer shell must not block product page ATC/variant clicks. */
html body cart-drawer.drawer:not(.active),
html body cart-drawer.drawer:not(.active) #CartDrawer,
html body cart-drawer.drawer:not(.active) #CartDrawer-Overlay,
html body cart-drawer.drawer:not(.active) .drawer__inner {
  pointer-events: none !important;
}

/* Active drawer: only the actual drawer panel is interactive; backdrop handles left-side close. */
html body cart-drawer.drawer.active,
html body cart-drawer.drawer.active #CartDrawer {
  pointer-events: none !important;
}
html body cart-drawer.drawer.active #CartDrawer .drawer__inner,
html body cart-drawer.drawer.active .drawer__inner {
  pointer-events: auto !important;
}

/* Keep every website/background container visually untouched during cart animation. */
html,
body,
#MainContent,
.shopify-section,
.product,
.product__info-wrapper,
.product__media-wrapper,
.header-wrapper,
.page-width {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  perspective: none !important;
}

/* ATC button should not stay grey/disabled after variant changes unless truly disabled. */
product-form [type="submit"]:not([disabled]) {
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v35b — FINAL SCROLL-LOCK OVERRIDE (Mayberry/Bowlift pattern)

   Diagnosis: this file declares `body.nrn-cart-scroll-lock-v27` three times.
   The correct rule (around line 3441) sets `position:fixed; top:var(--nrn-cart-scroll-y)`
   so the page stays visually pinned while the drawer slides. But two later
   rules (around lines 3636 and 3830) override it with `position:static !important`,
   which kills the lock. On mobile Chrome, body:static + overflow:hidden makes
   the URL bar reappear and the visible viewport shifts up — that's the
   "scrollt nach oben" bug.

   Fix: this block is appended LAST so it wins the cascade. Body becomes
   position:fixed at the saved scroll-Y while the drawer is open; on close,
   cart-drawer.js calls window.scrollTo(0, savedY) to restore.
   ═══════════════════════════════════════════════════════════════════════ */

html.nrn-cart-scroll-lock-v27 {
  /* No overflow:hidden on html — it triggers the mobile URL-bar reflow.
     Page-scroll prevention is handled by body being position:fixed. */
}

body.nrn-cart-scroll-lock-v27 {
  position: fixed !important;
  top: var(--nrn-cart-scroll-y, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  padding-right: var(--nrn-cart-scrollbar-comp, 0px) !important;
  /* Hard-cancel any transforms/filters from elsewhere — they'd break the lock. */
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  contain: none !important;
}

/* ─── Cart-drawer-items + footer layout (Mayberry) ───
   The inner panel is a flex column. Items grow to fill the slack; footer
   is glued to the bottom. No gap below the footer, no JS height calc. */
html body #CartDrawer .drawer__inner,
html body #CartDrawer .drawer__inner-empty {
  display: flex !important;
  flex-direction: column !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html body #CartDrawer .drawer__inner > .drawer__header,
html body #CartDrawer .drawer__inner > .drawer__footer,
html body #CartDrawer .drawer__inner > cart-progress-bar,
html body #CartDrawer .drawer__inner > .cd-rewards-container,
html body #CartDrawer .drawer__inner > .cart-timer {
  flex: 0 0 auto !important;
}
html body #CartDrawer .drawer__inner > cart-drawer-items {
  display: block !important;       /* custom-element defaults to inline */
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
html body #CartDrawer .drawer__footer {
  flex: 0 0 auto !important;
  margin-bottom: 0 !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v35c — FULL-WIDTH MOBILE DRAWER + WHITE SAFE-AREA STRIP

   1) Mobile (<750px): the drawer fills the ENTIRE screen — no left gap,
      no max-width clamp, no overlay strip on the left. Edge-to-edge.
   2) The drawer__inner extends its white background through the iOS
      safe-area-inset-bottom so the translucent Safari bottom toolbar
      doesn't show the page behind anymore.
   ═══════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 749px) {
  /* Drawer panel: full width, edge-to-edge */
  html body #CartDrawer .drawer__inner,
  html body #CartDrawer .drawer__inner-empty,
  html body cart-drawer .drawer__inner,
  html body cart-drawer .drawer__inner-empty {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* Container that holds the inner panel — also full width */
  html body #CartDrawer,
  html body cart-drawer .cart-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }
  /* Hide the overlay/backdrop click-zone on the left (drawer is full
     width now, no left strip to show through). Backdrop only behind
     drawer for visual dimming on slide-in. */
  html body #CartDrawer-Overlay,
  html body cart-drawer #CartDrawer-Overlay,
  html body cart-drawer .cart-drawer__overlay {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* Solid white through the iOS safe-area strip (under the translucent
   Safari URL bar). Background extends past the footer's content
   padding so nothing of the page behind ever peeks through.
   This works because the drawer__inner already has white bg and
   100dvh height — we just guarantee no element below the footer
   leaves a transparent gap. */
html body #CartDrawer .drawer__inner,
html body #CartDrawer .drawer__inner-empty,
html body cart-drawer .drawer__inner,
html body cart-drawer .drawer__inner-empty {
  background: #ffffff !important;
}
html body #CartDrawer .drawer__footer,
html body #CartDrawer .cart-drawer__footer,
html body cart-drawer .drawer__footer,
html body cart-drawer .cart-drawer__footer {
  background: #ffffff !important;
}
/* The cart-drawer host fills the viewport — give it a white floor too
   so even if a child has a gap, the safe-area zone stays white instead
   of showing the dimmed page behind via the translucent Safari toolbar. */
html body cart-drawer.drawer.active::before,
html body cart-drawer.active::before {
  content: "" !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: env(safe-area-inset-bottom, 0px) !important;
  background: #ffffff !important;
  z-index: 2147483099 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v35d — HARD RESET: drawer fills the entire mobile viewport, edge-to-edge.
   No left gap, no overlay strip, no width clamp, no border-radius, nothing.

   Specificity matters here: every selector uses ID + class stacking so it
   beats the existing (0,3,1) rules like `cart-drawer.drawer.active .drawer__inner`.
   The selectors below target every state (idle, .active, .is-closing,
   .is-empty, .nrn-cart-loading) and every container (#CartDrawer,
   cart-drawer.drawer, .drawer__inner, .drawer__inner-empty).
   ═══════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 749px) {

  /* The cart-drawer host element — full viewport */
  html body cart-drawer.drawer,
  html body cart-drawer.drawer.active,
  html body cart-drawer.drawer.is-closing,
  html body cart-drawer.drawer.is-empty {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  /* Inner container #CartDrawer — full viewport */
  html body cart-drawer.drawer #CartDrawer,
  html body cart-drawer.drawer.active #CartDrawer,
  html body cart-drawer.drawer.is-closing #CartDrawer,
  html body #CartDrawer.cart-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100dvh !important;
  }

  /* The white panel that slides in — edge-to-edge, no border, no shadow,
     no radius. Slides in from the right (translateX 100% → 0). */
  html body cart-drawer.drawer #CartDrawer .drawer__inner,
  html body cart-drawer.drawer.active #CartDrawer .drawer__inner,
  html body cart-drawer.drawer.is-closing #CartDrawer .drawer__inner,
  html body cart-drawer.drawer #CartDrawer .drawer__inner-empty,
  html body cart-drawer.drawer.active #CartDrawer .drawer__inner-empty,
  html body cart-drawer.drawer.is-closing #CartDrawer .drawer__inner-empty,
  html body #CartDrawer.cart-drawer .drawer__inner,
  html body #CartDrawer.cart-drawer .drawer__inner-empty {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1) !important;
  }
  html body cart-drawer.drawer.active #CartDrawer .drawer__inner,
  html body cart-drawer.drawer.active #CartDrawer .drawer__inner-empty,
  html body #CartDrawer.cart-drawer.active .drawer__inner,
  html body .drawer.active #CartDrawer.cart-drawer .drawer__inner {
    transform: translate3d(0, 0, 0) !important;
  }
  html body cart-drawer.drawer.is-closing #CartDrawer .drawer__inner,
  html body cart-drawer.drawer.is-closing #CartDrawer .drawer__inner-empty {
    transform: translate3d(100%, 0, 0) !important;
    transition: transform 240ms cubic-bezier(0.4, 0, 1, 1) !important;
  }

  /* Overlay/backdrop — drawer is full-width now, no left strip to dim.
     Hide them completely. The body-fixed scroll-lock is the only thing
     keeping the page behind in place. */
  html body cart-drawer.drawer #CartDrawer-Overlay,
  html body cart-drawer.drawer.active #CartDrawer-Overlay,
  html body cart-drawer.drawer.is-closing #CartDrawer-Overlay,
  html body cart-drawer #CartDrawer-Overlay,
  html body #CartDrawer-Overlay,
  html body cart-drawer .cart-drawer__overlay,
  html body cart-drawer.drawer .cart-drawer__overlay {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  /* Body-level backdrop (from cart-drawer.js _ensureNrnBackdropV27) — also hide */
  html body > .nrn-cart-backdrop-v27 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* iOS Safari safe-area floor — white strip under the translucent URL bar.
   On full-width drawer this must extend the white floor edge-to-edge. */
@media screen and (max-width: 749px) {
  html body cart-drawer.drawer.active::before,
  html body cart-drawer.active::before {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: env(safe-area-inset-bottom, 0px) !important;
    background: #ffffff !important;
    z-index: 2147483099 !important;
    pointer-events: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v35e — Faster, smoother slide animation. 320ms → 260ms with a slightly
   gentler ease-out so the panel "settles" instead of snapping. Closing is
   240ms → 220ms with a sharper ease-in for a quick exit. The selectors
   match the v35d hard-reset specificity so this wins.
   ═══════════════════════════════════════════════════════════════════════ */

html body cart-drawer.drawer #CartDrawer .drawer__inner,
html body cart-drawer.drawer.active #CartDrawer .drawer__inner,
html body cart-drawer.drawer.is-closing #CartDrawer .drawer__inner,
html body cart-drawer.drawer #CartDrawer .drawer__inner-empty,
html body cart-drawer.drawer.active #CartDrawer .drawer__inner-empty,
html body cart-drawer.drawer.is-closing #CartDrawer .drawer__inner-empty {
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
html body cart-drawer.drawer.is-closing #CartDrawer .drawer__inner,
html body cart-drawer.drawer.is-closing #CartDrawer .drawer__inner-empty {
  transition: transform 220ms cubic-bezier(0.55, 0, 0.7, 0.2) !important;
}

/* Loading-state dim while content is being swapped — gentle 0.55 opacity,
   smooth fade when the new content arrives. No translateY pulse. */
html body cart-drawer.drawer.nrn-cart-loading #CartDrawer .drawer__inner > *:not(.drawer__header):not(.drawer__fixed-header) {
  opacity: 0.55 !important;
  transition: opacity 160ms ease !important;
  pointer-events: none !important;
}
html body cart-drawer.drawer:not(.nrn-cart-loading) #CartDrawer .drawer__inner > *:not(.drawer__header):not(.drawer__fixed-header) {
  opacity: 1 !important;
  transition: opacity 200ms ease !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   v35h REAL — Mobile rewards text + faster ATC-to-drawer open.
   - Rewards text: +0.5px from v35g, more letter spacing, +1px bottom gap.
   - Drawer visible open transition: slightly faster (245ms).
   ═══════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  html body cart-drawer.drawer #CartDrawer .cd-rewards-text p,
  html body cart-drawer.drawer.active #CartDrawer .cd-rewards-text p,
  html body #CartDrawer .cd-rewards-text p,
  html body .cd-rewards-text p {
    font-size: 18.25px !important;
    letter-spacing: 0.06em !important;
    word-spacing: 0.14em !important;
    margin-bottom: 22px !important;
    line-height: 1.22 !important;
  }
  html body cart-drawer.drawer #CartDrawer .drawer__inner,
  html body cart-drawer.drawer.active #CartDrawer .drawer__inner,
  html body cart-drawer.drawer #CartDrawer .drawer__inner-empty,
  html body cart-drawer.drawer.active #CartDrawer .drawer__inner-empty {
    transition: transform 245ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   v35i — Race-proof faster drawer + mobile rewards text update
   - Mobile rewards: +0.75px from v35h and letter-spacing 0.08em.
   - Drawer open/close transition slightly faster.
   ═══════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  html body cart-drawer.drawer #CartDrawer .cd-rewards-text p,
  html body cart-drawer.drawer.active #CartDrawer .cd-rewards-text p,
  html body #CartDrawer .cd-rewards-text p,
  html body .cd-rewards-text p {
    font-size: 19px !important;
    letter-spacing: 0.08em !important;
    word-spacing: 0.05em !important;
    margin-bottom: 22px !important;
    line-height: 1.22 !important;
  }

  html body cart-drawer.drawer #CartDrawer .drawer__inner,
  html body cart-drawer.drawer.active #CartDrawer .drawer__inner,
  html body cart-drawer.drawer #CartDrawer .drawer__inner-empty,
  html body cart-drawer.drawer.active #CartDrawer .drawer__inner-empty {
    transition: transform 225ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }

  html body cart-drawer.drawer.is-closing #CartDrawer .drawer__inner,
  html body cart-drawer.drawer.is-closing #CartDrawer .drawer__inner-empty {
    transition: transform 195ms cubic-bezier(0.55, 0, 0.7, 0.2) !important;
  }
}
html body #CartDrawer .cd-rewards-text p,
html body #CartDrawer #cd-rewards-msg {
  margin-bottom: 36px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUG FIX: Mobile white gap below cart drawer
   - overscroll-behavior:none on html+body prevents iOS rubber-band bounce
     that reveals the page background beneath the drawer
   - cart-drawer host gets explicit white background
   - ::after creates a fixed white floor 60px below screen bottom —
     physically impossible for any gap to show through
   ═══════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 749px) {
  html.nrn-cart-scroll-lock-v27,
  body.nrn-cart-scroll-lock-v27 {
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  cart-drawer,
  #CartDrawer {
    background: #ffffff !important;
  }

  cart-drawer::after {
    content: '';
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: -60px;
    height: 60px;
    background: #ffffff;
    z-index: 9999;
    pointer-events: none;
  }
}