/* ============================================================
   XootiX Side Cart — cmi-theme design-system overrides
   ------------------------------------------------------------
   Loaded with a dependency on the plugin handle 'xoo-wsc-style'
   (see functions.php cmi_theme_side_cart_assets), so it prints
   after the plugin stylesheet + its inline settings-CSS. Plain
   specificity wins; !important is used only where the plugin's
   inline CSS forces it (each one is flagged below).

   Design tokens (--blue, --card, --bg, --border, --muted, …)
   come from style.css :root, which loads on every page.
   All rules are scoped under .xoo-wsc-container / .xoo-wsc-modal
   so nothing bleeds into the rest of the site.
   ============================================================ */

/* ---- Panel shell -------------------------------------------------------- */
.xoo-wsc-container{
  background:var(--card);
  font-family:var(--sans);
  color:var(--text);
  box-shadow:-8px 0 40px rgba(15,23,35,.18);
}

/* Neutral scroll body (kills the old full-blue void; the setting also flips
   scb-bgcolor, this is the belt-and-braces CSS guarantee). */
.xoo-wsc-modal .xoo-wsc-body{
  background:var(--bg);
  padding:14px 14px 4px;
}

.xoo-wsc-markup *::-webkit-scrollbar-thumb{background:var(--border-strong);}

/* ---- Header ------------------------------------------------------------- */
.xoo-wsc-container .xoo-wsc-header{
  background:var(--card);
  color:var(--slate);
  border-bottom:1px solid var(--border);
  padding:16px 18px;
}
.xoo-wsc-container span.xoo-wsch-text{
  font-family:var(--sans);
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--slate);
  margin-left:10px;
}
/* Header basket glyph + its count → blue accent */
.xoo-wsc-container .xoo-wsch-bki{color:var(--blue);}
.xoo-wsc-container .xoo-wsch-items-count{
  background:var(--blue);
  color:#fff;
}
.xoo-wsc-container span.xoo-wsch-close{
  color:var(--muted);
  transition:color .15s ease;
}
.xoo-wsc-container span.xoo-wsch-close:hover{color:var(--slate);}

/* ---- Line items --------------------------------------------------------- */
.xoo-wsc-container .xoo-wsc-products:not(.xoo-wsc-pattern-card) .xoo-wsc-product{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(15,23,35,.04);
  padding:12px;
  margin:0 0 10px;
  gap:12px;
  align-items:flex-start;
}

/* Fixed, tidy thumbnail box — works for real images and the WC placeholder */
.xoo-wsc-container .xoo-wsc-products:not(.xoo-wsc-pattern-card) .xoo-wsc-img-col{
  width:62px;
  flex:0 0 62px;
  align-self:flex-start;
}
.xoo-wsc-container .xoo-wsc-img-col img{
  width:62px;
  height:62px;
  object-fit:contain;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:4px;
}

.xoo-wsc-container .xoo-wsc-products:not(.xoo-wsc-pattern-card) .xoo-wsc-sum-col{
  padding-left:0;
}

/* Name */
.xoo-wsc-container span.xoo-wsc-pname,
.xoo-wsc-container span.xoo-wsc-pname a{
  font-size:var(--t-small);
  font-weight:600;
  line-height:1.35;
  color:var(--slate);
}

/* Qty (FREE plugin renders this as static text — see report; not an ajax
   stepper). Style it as a quiet pill so it still reads as a control hint. */
.xoo-wsc-container .xoo-wsc-sml-qty{
  font-size:13px;
  color:var(--muted);
}
.xoo-wsc-container .xoo-wsc-sml-qty span{
  font-weight:600;
  color:var(--text);
}

/* Unit price */
.xoo-wsc-container .xoo-wsc-pprice{
  font-size:13px;
  color:var(--muted);
}

/* Right column: remove control + line total */
.xoo-wsc-container span.xoo-wsc-smr-del{
  color:var(--muted);
  font-size:15px;
  transition:color .15s ease;
}
.xoo-wsc-container span.xoo-wsc-smr-del:hover{color:#c0362c;}
.xoo-wsc-container span.xoo-wsc-del-txt{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.xoo-wsc-container .xoo-wsc-smr-ptotal{
  font-family:var(--mono);
  font-weight:600;
  font-size:var(--t-small);
  color:var(--slate);
}

/* ---- Footer ------------------------------------------------------------- */
.xoo-wsc-container .xoo-wsc-footer{
  background:var(--card);
  color:var(--text);
  border-top:1px solid var(--border);
  box-shadow:0 -2px 12px rgba(15,23,35,.06);
  padding:16px 18px;
}
.xoo-wsc-container .xoo-wsc-ft-totals{padding:0 0 12px;}
.xoo-wsc-container .xoo-wsc-ft-amt{padding:4px 0;}
.xoo-wsc-container span.xoo-wsc-ft-amt-label{
  font-weight:500;
  color:var(--muted);
}
.xoo-wsc-container .xoo-wsc-ft-amt-subtotal{
  font-size:var(--t-body);
  color:var(--slate);
}
.xoo-wsc-container .xoo-wsc-ft-amt-subtotal .xoo-wsc-ft-amt-value,
.xoo-wsc-container .xoo-wsc-ft-amt-subtotal span.amount{
  font-family:var(--mono);
  font-weight:700;
  color:var(--slate);
}
/* "Shipping, taxes … calculated at checkout" — small + muted */
.xoo-wsc-container span.xoo-wsc-footer-txt{
  font-size:12px;
  color:var(--muted);
  margin:0 auto 12px;
}

/* Buttons → design system. Layout: Checkout (primary) full-width on top,
   View Cart (line) + Continue (ghost) sharing the row below. */
.xoo-wsc-container .xoo-wsc-ft-buttons-cont{
  grid-template-columns:1fr 1fr;
  grid-gap:10px;
}
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn{
  font-family:var(--sans);
  font-size:var(--t-small);
  font-weight:600;
  letter-spacing:-0.01em;
  border-radius:var(--r-sm);
  padding:12px 18px;
  border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
/* Checkout = primary */
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-checkout{
  order:-1;
  grid-column:1 / -1;
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-checkout:hover{
  background:var(--blue-hover);
  border-color:var(--blue-hover);
  color:#fff;
}
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-checkout .amount{color:#fff;}
/* View Cart = line (outline blue) */
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-cart{
  background:transparent;
  color:var(--blue);
  border-color:var(--blue);
}
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-cart:hover{
  background:var(--tint);
  color:var(--blue);
  border-color:var(--blue);
}
/* Continue Shopping = ghost */
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-continue{
  background:transparent;
  color:var(--slate);
  border-color:var(--border-strong);
}
.xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-continue:hover{
  background:transparent;
  color:var(--slate);
  border-color:var(--slate);
}

/* ---- Empty state -------------------------------------------------------- */
.xoo-wsc-container .xoo-wsc-empty-cart{
  padding:54px 30px;
  color:var(--muted);
  text-align:center;
}
.xoo-wsc-container .xoo-wsc-empty-cart > span{
  font-size:var(--t-body);
  color:var(--slate);
  font-weight:500;
}
.xoo-wsc-container .xoo-wsc-empty-cart a.xoo-wsc-btn{
  background:var(--blue);
  color:#fff;
  border:1px solid var(--blue);
  border-radius:var(--r-sm);
  padding:11px 22px;
  font-weight:600;
  font-size:var(--t-small);
}
.xoo-wsc-container .xoo-wsc-empty-cart a.xoo-wsc-btn:hover{
  background:var(--blue-hover);
  border-color:var(--blue-hover);
  color:#fff;
}

/* ---- Floating basket (FAB) accent -------------------------------------- */
/* Position (bottom-right) + hide-when-empty are handled by plugin settings;
   this only aligns the accent colours to the design system. */
.xoo-wsc-basket{background-color:var(--blue);}
.xoo-wsc-basket .xoo-wsc-items-count{
  background-color:var(--slate);
  color:#fff;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:600px){
  /* Near full-width drawer on phones (plugin caps width at 95% already;
     this nudges it edge-to-edge for the small screens). */
  .xoo-wsc-container{width:100%;max-width:100%;}
}