:root{
  --scd-ink:#0F0F0F; --scd-muted:#6E6E73;
  --scd-glass-bg:rgba(255,255,255,.72);
  --scd-glass-border:rgba(15,15,15,.06);
  --scd-beige:#F5F2EB;
  --scd-radius:22px;
  --scd-ease:cubic-bezier(0.32,0.72,0,1);
  --scd-width:440px;
}

/* Hide Elementor Menu Cart's native drawer panel (keep the toggle icon visible) */
.elementor-menu-cart__main,
.elementor-menu-cart__container,
.elementor-menu-cart__main-wrap,
.elementor-menu-cart__content{
  display:none !important;
}
/* Keep ONLY the header toggle button visible (the icon + count badge) */
.elementor-menu-cart__toggle{ display:inline-flex !important; }

/* Body lock when drawer open.
 * `overflow:hidden` is enough on desktop, but iOS Safari IGNORES it for touch
 * scrolling — the page scrolls underneath even when the drawer is up. The JS
 * supplements this by setting `position:fixed` on body with a saved scrollY
 * (see open()/close()) — that's the only reliable cross-device lock. We keep
 * `overflow:hidden` here for the desktop scrollbar suppression.
 * `touch-action:none` on the BACKDROP stops touches there from chaining to
 * the page; `overscroll-behavior:contain` on the scroll container stops the
 * drawer's own scroll from chaining to body when the user hits top/bottom. */
body.siil-drawer-open{overflow:hidden;}
body.siil-drawer-open .siil-drawer-backdrop{touch-action:none;}

/* ============================================================================
 * BACKDROP — frosted fullscreen overlay
 * Z-index above chat widgets (Brevo/Crisp/Tidio use ~9999) so clicks through
 * the backdrop land on US, not on the chat icon. Max practical 32-bit signed
 * int leaves headroom for anything else.
 * ========================================================================== */
.siil-drawer-backdrop{
  position:fixed; inset:0; z-index:2147483646;
  background:rgba(15,15,15,.34);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  opacity:0; pointer-events:none;
  /* SIIL_DRAWER_MOTION 1.4.28: this is the fade-OUT (close); the fade-in lives on the open rule */
  transition:opacity .28s var(--scd-ease);
}
/* SIIL_DRAWER_MOTION 1.4.28: stays painted (opacity 0, no clicks) while it fades out */
.siil-drawer-backdrop[aria-hidden="true"]:not(.is-closing){display:none !important;}
.siil-drawer-backdrop.is-closing{display:block !important;opacity:0 !important;pointer-events:none !important;}
.siil-drawer-open .siil-drawer-backdrop{display:block !important;opacity:1;pointer-events:auto;transition:opacity .3s var(--scd-ease);}
body.siil-drawer-just-closed .mobile-sticky{
  bottom:0 !important;
  transform:translate3d(0,0,0);
}

/* ============================================================================
 * PANEL — crystal glass sidebar
 * Highest int-32 z-index so it always sits above any 3rd-party widget
 * (chat, popups, cookie banner) without hiding them — layer-based approach.
 * ========================================================================== */
.siil-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:2147483647;
  width:var(--scd-width); max-width:100vw;
  box-sizing:border-box;
  /* Brighter, cleaner white — container glass still subtle behind the backdrop */
  background:
    linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 100%);
  backdrop-filter:blur(32px) saturate(1.6);
  -webkit-backdrop-filter:blur(32px) saturate(1.6);
  border-left:1px solid rgba(15,15,15,.05);
  box-shadow:
    -12px 0 32px rgba(15,15,15,.06),
    -28px 0 80px rgba(15,15,15,.08);
  /* SIIL_DRAWER_MOTION 1.4.28: closed pose on desktop = 40 px to the right + transparent. open() paints
   * this pose for one style pass before adding body.siil-drawer-open, so the browser has a start value
   * (from display:none nothing can transition). The transition here is the CLOSE (280 ms); the open
   * one (400 ms) is on the open rule. Only transform + opacity move (GPU). */
  transform:translate3d(40px,0,0);
  opacity:0;
  pointer-events:none;
  transition:transform .28s var(--scd-ease), opacity .28s var(--scd-ease), visibility 0s linear .28s;
  display:flex; flex-direction:column;
  will-change:transform, opacity;
  font-family:'Albert Sans', system-ui, -apple-system, sans-serif;
  color:var(--scd-ink);
}
.siil-drawer[aria-hidden="true"]{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.siil-drawer[aria-hidden="true"]:not(.is-closing){
  display:none !important;
}
.siil-drawer.is-closing[aria-hidden="true"]{
  visibility:visible !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.siil-drawer-open .siil-drawer{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transition:transform .4s var(--scd-ease), opacity .3s var(--scd-ease);
  transform:translate3d(0,0,0);
}

/* Drag handle (mobile grip) */
.siil-drawer__drag-handle{display:none;}

/* ============================================================================
 * HEADER
 * ========================================================================== */
.siil-drawer__header{
  padding:22px 24px 14px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(15,15,15,.06);
  flex-shrink:0;
}
.siil-drawer__title{
  font-size:19px; font-weight:600; letter-spacing:-.01em;
  margin:0; display:flex; align-items:baseline; gap:10px;
}
.siil-drawer__count{
  font-size:13px; color:var(--scd-muted); font-weight:500;
}
/* Close: minimal X. No bg, no circle — just the icon. */
.siil-drawer__close{
  width:32px !important; min-width:32px !important; height:32px !important;
  border-radius:50% !important;
  background:transparent !important;
  border:0 !important; padding:0 !important;
  color:var(--scd-ink) !important;
  cursor:pointer;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  transition:color .2s var(--scd-ease), transform .25s var(--scd-ease), background .2s var(--scd-ease);
  -webkit-appearance:none !important; appearance:none !important;
  box-shadow:none !important;
  font-size:0; line-height:0;
}
.siil-drawer__close:hover{color:var(--scd-ink) !important; background:rgba(15,15,15,.05) !important; transform:rotate(90deg);}
.siil-drawer__close:active{transform:rotate(90deg) scale(.9);}
.siil-drawer__close svg{width:20px;height:20px;stroke-width:1.8;}

/* ============================================================================
 * LFFS banner slot (populated at open-time if siil-lffs available)
 * ========================================================================== */
.siil-drawer__lffs{ padding:12px 16px 0; flex-shrink:0; }
.siil-drawer__lffs:empty{display:none;}
.siil-drawer__lffs .siil-lffs-banner{
  border-radius:14px; padding:10px 14px; font-size:13px;
}

/* ============================================================================
 * CONTENT — scrollable container holding the items list OR the empty state.
 *
 * `flex:1 1 auto` + `min-height:0` lets it take all space between header/lffs
 * and footer AND shrink below natural content height so the inner scroll kicks
 * in. Without `min-height:0`, a flex child defaults to `min-height:auto`
 * (= content height) — meaning a tall items list inflates `__content` past the
 * drawer bounds, the footer (with the checkout CTA) gets pushed BELOW the
 * viewport, and the user can't reach "Finalizar compra". Bug fixed in 1.4.7.
 *
 * Scrollbar is monochrome (Crystal Glass black-and-white aesthetic). On mobile
 * a swipe is the natural gesture; the thin thumb is just a hint that more is
 * below the fold.
 * ========================================================================== */
.siil-drawer__content{
  flex:1 1 auto;
  min-height:0;
  display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  /* iOS Safari needs both. `overscroll-behavior:contain` stops scroll chain
   * to body when at boundaries; `touch-action:pan-y` tells the engine this
   * area captures vertical drags so they don't bubble to the underlying page. */
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:rgba(15,15,15,.30) transparent;
}
.siil-drawer__content::-webkit-scrollbar{width:6px;}
.siil-drawer__content::-webkit-scrollbar-track{background:transparent;}
.siil-drawer__content::-webkit-scrollbar-thumb{
  background:rgba(15,15,15,.28);
  border-radius:3px;
  transition:background-color .25s ease;
}
.siil-drawer__content::-webkit-scrollbar-thumb:hover{background:rgba(15,15,15,.55);}

/* ============================================================================
 * ITEMS LIST — refined, airy, minimal
 * Scroll is delegated to `.siil-drawer__content` (the parent). Keep the list
 * as a naturally-sized flex child so the parent can scroll cleanly.
 * ========================================================================== */
.siil-drawer__items{
  flex:none;
  overflow:visible;
  padding:6px 24px 12px;
  list-style:none; margin:0;
}

.siil-drawer-item{
  display:grid; grid-template-columns:66px 1fr; gap:16px;
  padding:18px 0; border-bottom:1px solid rgba(15,15,15,.06);
  transition:opacity .3s var(--scd-ease);
  list-style:none;
}
.siil-drawer-item:last-child{border-bottom:0;}
.siil-drawer-item.is-removing{opacity:.35;pointer-events:none;}
/* SIIL_DRAWER_RM 1.4.30: while a removal waits for the server the line stays (dimmed, above) and the count +
   subtotal show they are about to change; they update together when the line folds away. */
.siil-drawer__count, .siil-drawer__subtotal-value{transition:opacity .2s ease;}
.siil-drawer.is-updating .siil-drawer__count, .siil-drawer.is-updating .siil-drawer__subtotal-value{opacity:.4;}
.siil-drawer-item__thumb{
  width:66px; height:99px; border-radius:10px;
  overflow:hidden; background:var(--scd-beige);
  box-shadow:0 1px 2px rgba(15,15,15,.03);
  display:block;
}
.siil-drawer-item__thumb img{
  width:100% !important; height:100% !important; object-fit:cover;
  object-position:center 18%;
  display:block; margin:0 !important; padding:0;
}
.siil-drawer-item__body{display:flex; flex-direction:column; gap:6px; min-width:0;}
.siil-drawer-item__title{
  font-size:14px; font-weight:500; line-height:1.3;
  color:var(--scd-ink) !important; text-decoration:none !important;
  letter-spacing:-.005em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.siil-drawer-item__title:hover{color:var(--scd-ink) !important;text-decoration:none !important;}
.siil-drawer-item__variation{
  font-size:11.5px; color:var(--scd-muted); line-height:1.3;
  letter-spacing:.005em;
}
.siil-drawer-item__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:auto;
}
.siil-drawer-item__actions{
  display:flex; align-items:center; gap:6px;
}

/* Qty stepper — minimal hairline, zero fill, icons only */
.siil-drawer-item__qty{
  display:inline-flex; align-items:center;
  border:1px solid rgba(15,15,15,.12);
  border-radius:999px;
  background:transparent !important;
  height:28px; padding:0 2px;
}
.siil-drawer-item__qty button{
  width:24px !important; min-width:24px !important; height:24px !important;
  border:0 !important; background:transparent !important;
  font-size:15px !important; line-height:1 !important;
  color:var(--scd-ink) !important;
  cursor:pointer; padding:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:50% !important;
  -webkit-appearance:none !important; appearance:none !important;
  transition:color .2s var(--scd-ease), background .2s var(--scd-ease);
  font-family:inherit; font-weight:400;
  box-shadow:none !important;
  letter-spacing:0;
}
.siil-drawer-item__qty button:hover:not(:disabled){color:var(--scd-ink) !important; background:rgba(15,15,15,.05) !important;}
.siil-drawer-item__qty button:disabled{opacity:.25;cursor:not-allowed;}
.siil-drawer-item__qty-value{
  min-width:22px; text-align:center;
  font-size:12.5px; font-weight:500; color:var(--scd-ink);
  font-variant-numeric:tabular-nums;
  padding:0 2px;
}

.siil-drawer-item__price{
  font-size:13.5px; font-weight:500; color:var(--scd-ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
  white-space:nowrap;
}

/* Remove — trash icon, inline with qty stepper */
.siil-drawer-item__remove{
  width:28px !important; min-width:28px !important; height:28px !important;
  background:transparent !important; border:0 !important; padding:0 !important;
  cursor:pointer;
  color:var(--scd-muted) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border-radius:50% !important;
  transition:color .2s var(--scd-ease), background .2s var(--scd-ease), transform .2s var(--scd-ease);
  -webkit-appearance:none !important; appearance:none !important;
  box-shadow:none !important;
  flex-shrink:0;
  font-size:0; line-height:0;
}
.siil-drawer-item__remove:hover{color:#B8342C !important; background:rgba(184,52,44,.06) !important;}
.siil-drawer-item__remove:active{transform:scale(.9);}
.siil-drawer-item__remove svg{width:15px !important; height:15px !important; stroke-width:1.6; display:block;}

/* ============================================================================
 * EMPTY STATE
 * ========================================================================== */
.siil-drawer__empty{
  flex:1 1 auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:40px 24px; text-align:center;
}
.siil-drawer__empty-icon{
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.55); backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; color:var(--scd-muted);
  box-shadow:0 8px 24px rgba(15,15,15,.08);
}
.siil-drawer__empty-title{
  font-size:17px; font-weight:600; margin:0 0 6px; color:var(--scd-ink);
}
.siil-drawer__empty-text{
  font-size:13px; color:var(--scd-muted); margin:0 0 20px;
  max-width:260px; line-height:1.5;
}

/* ============================================================================
 * FOOTER
 * ========================================================================== */
.siil-drawer__footer{
  flex-shrink:0;
  padding:18px 22px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.5) 40%);
  border-top:1px solid rgba(15,15,15,.06);
}
.siil-drawer__subtotal{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:14px;
}
.siil-drawer__subtotal-label{font-size:13px; color:var(--scd-muted); font-weight:500;}
.siil-drawer__subtotal-value{font-size:19px; font-weight:600; color:var(--scd-ink); font-variant-numeric:tabular-nums;}

.siil-drawer__ctas{ display:flex; flex-direction:column; gap:10px; }

.siil-drawer__btn{
  display:flex; align-items:center; justify-content:center;
  padding:15px 18px; border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:500;
  letter-spacing:.005em; text-decoration:none !important; cursor:pointer; border:0;
  transition:transform .36s var(--scd-ease), box-shadow .4s var(--scd-ease), background-color .25s ease, color .25s ease;
  will-change:transform, box-shadow;
}
.siil-drawer__btn, .siil-drawer__btn:hover, .siil-drawer__btn:focus, .siil-drawer__btn:visited{
  /* Kill theme link colors (blue underline from Elementor kit) */
  text-decoration:none !important;
}
.siil-drawer__btn--primary{
  background:var(--scd-ink);
  color:#fff !important;
  box-shadow:0 1px 2px rgba(15,15,15,.08), 0 4px 10px rgba(15,15,15,.14);
}
.siil-drawer__btn--primary:hover{
  color:#fff !important;
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(15,15,15,.06), 0 10px 22px rgba(15,15,15,.18), 0 18px 40px rgba(15,15,15,.14);
}
/* SIIL_CTA_TOUCH_NOLIFT_20261014 (1.4.35): touch = sticky :hover at the tap point -> no lift, or the CTA bobs 3 px */
@media (hover:none){ .siil-drawer__btn--primary:hover{transform:none;} }
.siil-drawer__btn--primary:active{transform:translateY(-1px) scale(.985);}
.siil-drawer__btn--primary.loading,
.siil-drawer__btn--primary.siil-is-loading{
  position:relative;
  color:transparent !important;
  /* SIIL_BFCACHE_CTA 1.4.26: no pointer-events:none here - a CTA restored from the iOS back-forward cache stayed dead */
  transform:translateY(0);
}
.siil-drawer__btn--primary.loading *,
.siil-drawer__btn--primary.siil-is-loading *{color:transparent !important;}
.siil-drawer__btn--primary.loading::after,
.siil-drawer__btn--primary.siil-is-loading::after{
  content:"";
  position:absolute;left:50%;top:50%;
  width:20px;height:20px;margin:-10px 0 0 -10px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  color:#fff;
  animation:siil-atc-spin .7s linear infinite;
  opacity:.95;
}
@keyframes siil-atc-spin { to { transform:rotate(360deg); } }

/* Tiny secondary link under primary CTA (replaces chunky "Ver carrito" button) */
.siil-drawer__cart-link{
  display:block; text-align:center;
  font-size:12px; color:var(--scd-muted) !important;
  text-decoration:underline !important;
  text-decoration-color:rgba(15,15,15,.2) !important;
  text-underline-offset:3px;
  padding:4px 0;
  letter-spacing:.01em;
  transition:color .2s var(--scd-ease);
}
.siil-drawer__cart-link:hover{color:var(--scd-ink) !important;text-decoration-color:var(--scd-ink) !important;}

/* ============================================================================
 * MOBILE — bottom sheet style
 * Force 100vw with !important so any upstream width cascade can't leak through
 * and overflow the viewport. `100dvw` avoids the iOS Safari toolbar-offset bug
 * where 100vw can exceed the visible viewport when URL bar is hidden.
 * ========================================================================== */
@media (max-width:1199px){
  :root{--scd-width:100vw;}
  .siil-drawer{
    top:auto !important; right:0 !important; left:0 !important; bottom:0 !important;
    width:100vw !important;
    width:100dvw !important;
    max-width:100vw !important;
    max-width:100dvw !important;
    height:86vh; max-height:86vh;
    border-left:0;
    border-top-left-radius:24px; border-top-right-radius:24px;
    /* Closed sheet must be fully off-screen on real iOS Safari. translateY(100%)
       can leave the rounded top/handle peeking above the bottom browser chrome. */
    transform:translateY(calc(100% + 96px));
    /* SIIL_DRAWER_MOTION 1.4.28: the sheet itself never fades - it rises from the bottom and goes back down */
    opacity:1;
    box-shadow:0 -12px 32px rgba(15,15,15,.1), 0 -28px 80px rgba(15,15,15,.14);
  }
  .siil-drawer[aria-hidden="true"]{
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translateY(calc(100% + 160px)) !important;
  }
  /* SIIL_DRAWER_MOTION 1.4.28: exit target just below the edge (+48 px covers the shadow) so the
     visible part of the 280 ms exit is ~150 ms, not ~90 ms; then display:none (+160 px rule above). */
  .siil-drawer.is-closing[aria-hidden="true"]{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:none !important;
    transform:translateY(calc(100% + 48px)) !important;
  }
  .siil-drawer-open .siil-drawer{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:var(--siil-drawer-mobile-transform, translateY(0)) !important;
  }
  .siil-drawer__drag-handle{
    display:block; width:44px; height:5px; border-radius:3px;
    background:rgba(15,15,15,.18);
    margin:10px auto 4px;
    cursor:grab;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
  }
  .siil-drawer__header{
    touch-action:none;
  }
  .siil-drawer.is-dragging{transition:none !important; cursor:grabbing;}
  /* Guarantee children can't exceed parent box when browser zooms font */
  .siil-drawer__header,
  .siil-drawer__footer,
  .siil-drawer__items,
  .siil-drawer__content,
  .siil-drawer__lffs{ max-width:100%; box-sizing:border-box; }
}

/* SIIL_DRAWER_SHORT_20261025 (1.4.37): low screens. JS adds .siil-drawer--short only when the header, banner,
   upsell and footer do not fit in the sheet (the list had 0 px and "Checkout" fell below the screen): the whole
   sheet scrolls (list + upsell) and the footer (subtotal + checkout) stays pinned at the bottom. */
.siil-drawer.siil-drawer--short{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.siil-drawer.siil-drawer--short > *{flex-shrink:0;}
.siil-drawer.siil-drawer--short .siil-drawer__content{flex:0 0 auto;overflow:visible;}
.siil-drawer.siil-drawer--short .siil-drawer__footer{position:sticky;bottom:0;z-index:3;background:rgba(255,255,255,.97);}

/* ============================================================================
 * SIIL_DRAWER_MOTION 1.4.28 — lines (in/out) + small ticks. The JS adds the classes;
 * nothing here can delay a click (the leaving line has pointer-events:none, the rest stays live).
 * ========================================================================== */
@keyframes siil-dr-in{from{opacity:0;transform:translate3d(0,8px,0);}to{opacity:1;transform:translate3d(0,0,0);}}
.siil-drawer-item.is-entering,
.siil-drawer-adding.is-entering,
.siil-drawer__empty.is-entering{animation:siil-dr-in .32s var(--scd-ease) both;}
.siil-drawer-item.is-leaving{
  box-sizing:border-box;
  height:0 !important; min-height:0 !important;
  padding-top:0 !important; padding-bottom:0 !important;
  border-bottom-color:transparent !important;
  opacity:0 !important; overflow:hidden; pointer-events:none;
  transition:opacity .18s ease, height .22s var(--scd-ease), padding .22s var(--scd-ease), border-color .22s ease;
}

/* Reduced motion: no animation at all (1.4.28; before: a 0.2 s fade) */
@media (prefers-reduced-motion:reduce){
  .siil-drawer, .siil-drawer-open .siil-drawer,
  .siil-drawer-backdrop, .siil-drawer-open .siil-drawer-backdrop,
  .siil-drawer__close, .siil-drawer__btn, .siil-drawer-item, .siil-drawer-item.is-leaving,
  .siil-drawer__count, .siil-drawer__subtotal-value{transition:none !important;}
  .siil-drawer-item.is-entering, .siil-drawer-adding.is-entering, .siil-drawer__empty.is-entering{animation:none !important;}
  .siil-drawer__close:hover, .siil-drawer__btn:hover{transform:none !important;}
}

/* Small tweak to the header Elementor Menu Cart toggle — make it trigger our drawer cleanly */
.elementor-menu-cart__toggle{cursor:pointer;}

/* ============================================================================
 * Drawer upsell (-40% extra unit) — AOV-2026-08-15
 * Same Crystal Glass look as the checkout banner (siil-checkout-improvements.php),
 * compacted for the 440px drawer. Scoped under .siil-drawer__upsell: the checkout
 * styles are only printed on is_checkout() (where the drawer never renders).
 * The slot div is always in the (cached) shell; content arrives per-session via
 * the #siil-drawer-upsell WC fragment. Empty slot => no layout footprint.
 * ========================================================================== */
.siil-drawer__upsell{padding:0 16px;}
.siil-drawer__upsell:empty{display:none;}
.siil-drawer__upsell #siil-upsell-fragment:empty{display:none;}
.siil-drawer__upsell #siil-upsell-wrap{
  background:radial-gradient(ellipse at 20% 15%,rgba(252,252,250,0.32) 0%,transparent 45%),radial-gradient(ellipse at 85% 25%,rgba(245,247,250,0.20) 0%,transparent 50%),linear-gradient(180deg,rgba(255,255,255,0.62) 0%,rgba(253,253,253,0.45) 100%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(15,15,15,.08);border-radius:14px;padding:12px;margin:10px 0 4px;
  box-shadow:0 1px 2px rgba(14,14,14,0.05),0 10px 30px rgba(14,14,14,0.06),inset 0 1px 0 rgba(255,255,255,0.85);
  display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;cursor:default;
  transition:all .25s ease;
}
.siil-drawer__upsell #siil-upsell-wrap:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(14,14,14,0.06),0 14px 40px rgba(14,14,14,0.10),inset 0 1px 0 rgba(255,255,255,0.9);}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-img{position:relative;flex-shrink:0;width:72px;height:96px;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(14,14,14,0.10);z-index:1;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;border:none;max-width:none;max-height:none;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-pct{display:inline-flex;align-items:center;position:absolute;bottom:5px;left:5px;background:rgba(255,255,255,0.94);color:#0E0E0E;font-weight:700;font-size:9px;padding:3px 7px;border-radius:20px;box-shadow:0 4px 12px rgba(14,14,14,0.18),inset 0 0 0 1px rgba(14,14,14,0.06);letter-spacing:.2px;z-index:3;line-height:1;text-shadow:none;white-space:nowrap;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;position:relative;z-index:1;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-offer-tag{display:inline-block;align-self:flex-start;background:rgba(255,255,255,0.85);color:#0E0E0E;font-weight:700;font-size:9px;letter-spacing:.6px;padding:2px 7px;border-radius:12px;text-transform:uppercase;border:1px solid rgba(14,14,14,0.10);}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-subtitle{color:#0E0E0E;font-weight:600;font-size:12.5px;line-height:1.15;letter-spacing:-.2px;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-name{color:#7F7F7F;font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-price-row{display:flex;align-items:baseline;gap:6px;margin:0;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-old{color:#9a9a9a;font-size:11px;text-decoration:line-through;font-weight:400;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-new{color:#0E0E0E;font-weight:700;font-size:13px;letter-spacing:0;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-save-row{display:inline-block;align-self:flex-start;background:linear-gradient(135deg,#1A1A1A 0%,#0A0A0A 100%);color:#fff;font-weight:600;font-size:10px;padding:5px 10px;border-radius:100px;letter-spacing:.3px;text-transform:uppercase;box-shadow:0 4px 14px rgba(14,14,14,0.18),inset 0 1px 0 rgba(255,255,255,0.10);margin-top:4px;line-height:1.2;white-space:nowrap;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-add{flex-shrink:0;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;}
/* SIIL_UPSELL_PLUS_ONLY_20261025: only the "+" adds; its touch target is >= 44 px (transparent ::after, no pixel moves) */
.siil-drawer__upsell #siil-upsell-wrap .siil-u-add{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-add::after{content:"";position:absolute;top:-6px;right:-8px;bottom:-6px;left:-8px;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-plus{background:#0E0E0E;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:300;line-height:1;box-shadow:0 4px 14px rgba(14,14,14,0.22),inset 0 1px 0 rgba(255,255,255,0.12);transition:all .25s ease;}
.siil-drawer__upsell #siil-upsell-wrap:hover .siil-u-plus{transform:scale(1.08);background:#1F1F1F;}
.siil-drawer__upsell #siil-upsell-wrap .siil-u-add-label{color:#0E0E0E;font-weight:600;font-size:9px;letter-spacing:.5px;margin-top:3px;text-transform:uppercase;}
.siil-drawer__upsell .siil-u-hint{text-align:center;color:#7F7F7F;font-size:11px;margin:4px 0 8px;letter-spacing:.2px;}
.siil-drawer__upsell .siil-u-hint .siil-u-link{color:#1569AE;text-decoration:underline;cursor:pointer;}
.siil-drawer__upsell .siil-u-sizes{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0 1px;}
.siil-drawer__upsell .siil-u-size{border:1px solid rgba(14,14,14,.16);background:#fff;color:#0E0E0E;font-size:10px;font-weight:700;padding:3px 7px;border-radius:999px;cursor:pointer;line-height:1.2;letter-spacing:.2px;}
.siil-drawer__upsell .siil-u-size.is-on{background:#0E0E0E;color:#fff;border-color:#0E0E0E;}
.siil-drawer__upsell .siil-u-size.is-off,.siil-drawer__upsell .siil-u-size:disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through;}
.siil-drawer__upsell #siil-upsell-wrap.is-deal .siil-u-pct{background:#0E0E0E;color:#fff;}
.siil-drawer__upsell #siil-upsell-wrap.is-deal .siil-u-offer-tag{background:#0E0E0E;color:#fff;border-color:#0E0E0E;}
.siil-drawer__upsell #siil-upsell-wrap.need-size .siil-u-sizes{box-shadow:0 0 0 1.5px #0E0E0E;}
.siil-drawer__upsell #siil-upsell-wrap.need-size .siil-u-plus{opacity:.45;}

/* SIIL_DRAWER_PHONE_COMPACT_20261026 (1.4.40, GO Santi): phones in portrait (<= 599 px wide). The upsell becomes one
   compact row and the paddings around the list tighten, so the shopper sees what is in her cart without scrolling
   (iPhone SE 548 px: 0 -> 1 whole line). The checkout button keeps its size; the "+" keeps its >= 44 px target.
   Tablets, desktop and phones in landscape (> 599 px) are untouched. */
@media (max-width:599px){
  .siil-drawer__drag-handle{margin:6px auto 2px;}
  .siil-drawer__header{padding:10px 20px 8px;}
  .siil-drawer__lffs{padding:6px 16px 0;}
  .siil-drawer__lffs .siil-lffs-banner{padding:8px 12px;}
  .siil-drawer__items{padding-top:2px;}
  .siil-drawer-item{padding:12px 0;}
  .siil-drawer__footer{padding:10px 20px 14px;}
  .siil-drawer__subtotal{margin-bottom:6px;}
  .siil-drawer__upsell #siil-upsell-wrap{padding:8px 10px;margin:4px 0 3px;gap:10px;border-radius:12px;}
  .siil-drawer__upsell #siil-upsell-wrap .siil-u-img{width:42px;height:56px;border-radius:8px;}
  .siil-drawer__upsell #siil-upsell-wrap .siil-u-pct{font-size:7.5px;padding:2px 4px;bottom:3px;left:3px;}
  .siil-drawer__upsell #siil-upsell-wrap .siil-u-info{gap:2px;}
  .siil-drawer__upsell #siil-upsell-wrap .siil-u-offer-tag{display:none;}
  .siil-drawer__upsell #siil-upsell-wrap .siil-u-subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .siil-drawer__upsell #siil-upsell-wrap .siil-u-name{display:none;}
  .siil-drawer__upsell .siil-u-sizes{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:1px 0;}
  .siil-drawer__upsell .siil-u-sizes::-webkit-scrollbar{display:none;}
  .siil-drawer__upsell .siil-u-size{font-size:9.5px;padding:2px 6px;flex-shrink:0;}
  .siil-drawer__upsell .siil-u-hint{display:none;}
}