/* Native same-origin navigation fade; no checkout interception or added delay. */
@view-transition { navigation:auto; }
::view-transition-old(root),::view-transition-new(root) { animation-duration:160ms; animation-timing-function:ease-out; }
@media(prefers-reduced-motion:reduce) {
 @view-transition { navigation:none; }
 ::view-transition-old(root),::view-transition-new(root) { animation:none; }
}

  
  

  .cdraw {
    position: fixed; top: 0; right: 0;
    width: 100%; max-width: 420px;
    height: 100%; height: 100dvh; z-index: 9999;
    background: var(--bg-base, #FFFFFF);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex; flex-direction: column;
    font-family: 'General Sans', sans-serif;
  }
  .cdraw.is-open { transform: translateX(0); }
  @media (min-width: 750px) { .cdraw { max-width: 460px; } }

  /* Header */
  .cdraw__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--border-light, #E8ECF1); flex-shrink: 0;
  }
  .cdraw__title {
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 20px; font-weight: 500; margin: 0; color: var(--text-primary, #2C3340);
  }
  .cdraw__count {
    font-family: 'General Sans', sans-serif;
    font-size: 13px; color: var(--text-secondary, #5D6773); margin-left: 8px;
  }
  .cdraw__close {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg-subtle, #F7F8FA); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease; color: var(--text-primary, #2C3340);
  }
  .cdraw__close:hover { background: var(--bg-muted, #EDF0F5); }
  .cdraw__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

  /* Free-shipping progress */
  .cdraw__ship { padding: 14px 20px; border-bottom: 1px solid var(--border-light, #E8ECF1); flex-shrink: 0; }
  .cdraw__ship-msg {
    font-size: 13px; color: var(--text-primary, #2C3340); margin: 0 0 8px;
    display: flex; align-items: center; gap: 6px;
  }
  .cdraw__ship-msg strong { color: var(--brand-dark, #0A1628); }
  .cdraw__ship-msg svg { width: 16px; height: 16px; fill: var(--brand-dark, #0A1628); flex-shrink: 0; }
  .cdraw__ship-track { height: 6px; border-radius: 3px; background: var(--bg-muted, #EDF0F5); overflow: hidden; }
  .cdraw__ship-fill { height: 100%; width: 0; background: var(--accent, #00AAFF); border-radius: 3px; transition: width 0.4s ease; }

  /* Body */
  .cdraw__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .cdraw__empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 24px; text-align: center; min-height: 60%;
  }
  
  
  .cdraw__empty-text { font-size: 16px; color: var(--text-secondary, #5D6773); margin: 0 0 24px; }
  .cdraw__empty-btn {
    display: flex; width: 100%; box-sizing: border-box;
    align-items: center; justify-content: center; text-align: center;
    min-height: 48px; padding: 15px 28px;
    background: #0A1628; color: #FFFFFF; border: none; border-radius: 10px; cursor: pointer;
    font-family: 'General Sans', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none;
    transition: background 0.2s ease;
  }
  .cdraw__empty-btn:hover { background: #102A4C; }

  .cdraw__item { display: flex; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border-light, #E8ECF1); }
  .cdraw__item-img { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--bg-subtle, #F7F8FA); }
  .cdraw__item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cdraw__item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  
  
  .cdraw__item-sub {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    font-family: 'General Sans', sans-serif; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-dark, #0A1628);
    background: var(--bg-subtle, #F7F8FA); border: 1px solid var(--border-light, #E8ECF1);
    border-radius: 4px; padding: 3px 7px; margin: 0 0 6px;
  }
  .cdraw__item-sub svg { width: 11px; height: 11px; fill: var(--brand-dark, #0A1628); }
  
  
  
  
  
  
  .cdraw__item-price { font-family: 'General Sans', sans-serif; font-size: 14px; font-weight: 700; color: var(--text-primary, #2C3340); }
  .cdraw__item-compare { font-family: 'General Sans', sans-serif; font-size: 12px; color: var(--text-tertiary, #8E96A0); text-decoration: line-through; }
  .cdraw__item-remove { font-size: 11px; color: var(--text-tertiary, #8E96A0); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
  .cdraw__item-remove:hover { color: var(--brand-dark, #0A1628); }

  /* Subscribe & Save nudge */
  .cdraw__nudge { display: none; margin: 14px 20px; padding: 14px; border: 1px dashed var(--brand-dark, #0A1628); border-radius: 8px; background: var(--bg-subtle, #F7F8FA); }
  .cdraw__nudge.is-shown { display: block; }
  .cdraw__nudge-text { font-size: 13px; color: var(--text-primary, #2C3340); line-height: 1.45; margin: 0 0 10px; }
  .cdraw__nudge-text strong { color: var(--brand-dark, #0A1628); }
  .cdraw__nudge-btn {
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; color: #FFFFFF; background: var(--brand-dark, #0A1628);
    border: none; border-radius: 6px; padding: 9px 16px; cursor: pointer; transition: background 0.2s ease;
  }
  .cdraw__nudge-btn:hover { background: var(--brand-medium, #102A4C); }

  /* Order bump / cross-sell */
  
  
  
  
  
  
  
  
  
  

  /* Footer */
  .cdraw__footer { border-top: 1px solid var(--border-light, #E8ECF1); padding: 16px 20px; flex-shrink: 0; }
  .cdraw__footer form { margin: 0; }
  .cdraw__trust { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
  .cdraw__trust-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary, #5D6773); }
  .cdraw__trust-row svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--brand-dark, #0A1628); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .cdraw__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
  .cdraw__subtotal-label { font-size: 15px; font-weight: 600; color: var(--text-primary, #2C3340); }
  .cdraw__subtotal-price { font-family: 'General Sans', sans-serif; font-size: 18px; font-weight: 700; color: var(--text-primary, #2C3340); }
  
  
  .cdraw__checkout {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 56px;
    background: var(--brand-dark, #0A1628); color: #FFFFFF; border: none; border-radius: 8px; cursor: pointer;
    font-family: var(--font-primary); font-size: 17px; font-weight: 700; text-decoration: none;
    transition: background 0.2s ease;
  }
  .cdraw__checkout:hover { background: var(--brand-medium, #102A4C); }
  .cdraw__microcopy { text-align: center; font-size: 11.5px; color: var(--text-secondary, #5D6773); margin: 10px 0 0; }
  .cdraw__continue { display: block; width: 100%; text-align: center; margin-top: 12px; font-size: 13px; color: var(--brand-dark, #0A1628); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: var(--font-primary); }
  
  
  .cdraw.is-busy [data-cart-action] { cursor: wait; opacity: 0.55; }

/* Native dialog shell; existing Next SDK remains the cart authority. */
dialog.cdraw { inset:0 0 0 auto; margin:0; padding:0; border:0; max-height:100vh; max-height:100dvh; color:#2C3340; box-shadow:-12px 0 40px rgba(10,22,40,.14); transform:translateX(100%); transition:transform .32s cubic-bezier(.32,.72,0,1); will-change:transform; }
dialog.cdraw:not([open]) { display:none; }
dialog.cdraw[open] { display:flex; }
dialog.cdraw.is-open { transform:none; }
dialog.cdraw::backdrop { background:rgba(10,22,40,.5); opacity:0; transition:opacity .32s ease; }
dialog.cdraw.is-open::backdrop { opacity:1; }
.cdraw__body { min-height:0; }
.cdraw .summary-wrapper,.cdraw .order-summary,.cdraw .order-summary__content { margin:0; padding:0; background:none; border:0; }
.cdraw__ship-fill { width:100%; }
.cdraw__item .abl-order-description { display:flex; flex-direction:column; gap:4px; min-width:0; }
.cdraw__item .abl-order-description strong { font-size:14px; font-weight:600; line-height:1.3; }
.cdraw__item .abl-order-description span { font-size:12px; color:#5D6773; }
.cdraw__item .abl-order-description .cdraw__item-sub { font-size:10px; color:#0A1628; }
.cdraw [aria-disabled="true"] { cursor:wait; opacity:.6; }
.cdraw__checkout { font-family:'General Sans',sans-serif; }
.cdraw__continue { font-family:'General Sans',sans-serif; }
.cdraw [data-abl-cart-status] { padding:10px 20px; font-size:12px; margin:0; }
.cdraw [aria-busy="true"] { opacity:.55; }

/* Source header bag and compact count; the opener never changes the cart. */
.abl-funnel-header { position:relative; }
.abl-header-cart { position:absolute; right:max(16px,calc((100% - 1200px)/2)); display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; border:0; border-radius:50%; background:none; color:#0A1628; cursor:pointer; }
.abl-header-cart:hover { background:#F7F8FA; }
.abl-header-cart svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.abl-header-cart-count { position:absolute; right:0; top:0; min-width:18px; height:18px; padding:0 4px; border-radius:50%; background:#0A1628; color:#fff; font:600 10px/18px 'General Sans',sans-serif; text-align:center; }
.abl-header-cart-count:empty { display:none; }
.abl-header-cart:focus-visible,.cdraw__nudge-btn:focus-visible { outline:2px solid #00AAFF; outline-offset:3px; }

/* Compact per-supply prices; the complete Next total belongs in the footer. */
.cdraw__item { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px 14px; align-items:start; }
.cdraw__item-img { grid-column:1; grid-row:1 / span 2; }
.cdraw__item-img img { object-fit:contain; }
.cdraw__item-info { grid-column:2; }
.cdraw__item-pricing { grid-column:2; display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; }
.cdraw__item-pricing .cdraw__item-compare { font:400 13px/1.4 'General Sans',sans-serif; color:#8E96A0; text-decoration-thickness:1px; }
.cdraw__item-pricing .cdraw__item-price { font:600 14px/1.4 'General Sans',sans-serif; color:#0A1628; }
.cdraw__item-each { font:600 16px/1.4 'General Sans',sans-serif; color:#0A1628; }
.cdraw__item>.cdraw__item-remove { grid-column:2; justify-self:start; }
.cdraw__nudge:not([hidden]) { display:block; padding:16px; border:1px solid #D9DFE5; background:#F7F8FA; border-radius:10px; }
.cdraw__nudge-btn { width:100%; justify-content:center; padding:14px; min-height:48px; border-radius:10px; font:600 14px/1.4 'General Sans',sans-serif; text-transform:none; letter-spacing:0; }
.cdraw__nudge-btn svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cdraw__nudge-btn:disabled { opacity:.55; cursor:wait; }
.cdraw__nudge-terms { margin:10px 0 0; font:400 11px/1.5 'General Sans',sans-serif; color:#5D6773; }
.abl-offer { scroll-margin-top:24px; }
@media(max-width:360px) {
 .cdraw__item { padding:16px; grid-template-columns:60px minmax(0,1fr); gap:10px; }
 .cdraw__item-img { width:60px; height:60px; }
 .cdraw__item-pricing .cdraw__item-compare { font-size:12px; }
 .cdraw__item-pricing .cdraw__item-price { font-size:14px; }
}

.cdraw__totals { display:inline-flex; align-items:baseline; gap:8px; }
.cdraw__totals s { font-size:14px; font-weight:400; color:#8E96A0; }
.cdraw__totals .cdraw__subtotal-price { font-size:17px; }
.cdraw__item-pricing [hidden],.cdraw__totals [hidden] { display:none!important; }

.cdraw__item-controls { grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cdraw__quantity { display:inline-flex; align-items:center; border:1px solid #D9DFE5; border-radius:6px; }
.cdraw__quantity button { width:32px; height:32px; padding:0; border:0; background:transparent; color:#0A1628; font:400 18px/1 'General Sans',sans-serif; cursor:pointer; }
.cdraw__quantity span { min-width:24px; padding:0 4px; text-align:center; font-size:13px; }
.cdraw__quantity button:disabled,.cdraw__item-remove:disabled { opacity:.45; cursor:wait; }
.cdraw__quantity button:focus-visible { outline:2px solid #00AAFF; outline-offset:2px; }