/*
 * DroiX Side Cart — Direction A
 * Maps the handoff design onto Shoptimizer + WooCommerce + Commerce Kit classes.
 * Loaded via wp_enqueue_style on all pages (drawer is always in the DOM).
 */

/* ── Design tokens on the real drawer element ─────────────────────── */
.shoptimizer-mini-cart-wrap {
  --green:       #B0CB1F;
  --green-dark:  #74A401;
  --green-tint:  #F3F8DC;
  --magenta:     #BB3DA1;
  --red-sale:    #D80027;
  --ink:         #0B0B0B;
  --ink-2:       #242421;
  --muted:       #666;
  --muted-2:     #999;
  --line:        #F0F0F0;
  --line-2:      #EEE;
  --line-3:      #D9D9D9;
  --surface:     #F8F8F8;
  --surface-2:   #FCFCFC;
  --disabled-bg: #F0F0F0;
  --disabled-fg: #AAA;
  --danger:      #DC3545;
  --font-ui:   "Ubuntu", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 14px;
  --shadow-cta: 0 8px 20px rgba(176,203,31,0.35);

  /* Frame */
  width: 420px !important;
  max-width: 100vw !important;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  background: #fff;
  font-family: var(--font-body);
  color: var(--ink);
  overflow: hidden;
  box-sizing: border-box;
  z-index: 10020 !important;
}
.shoptimizer-mini-cart-wrap *,
.shoptimizer-mini-cart-wrap *::before,
.shoptimizer-mini-cart-wrap *::after { box-sizing: border-box; }

body.drawer-open::before,
body.drawer-open .mobile-overlay {
  z-index: 10010;
}

/* ── Header: heading row ──────────────────────────────────────────── */
/* Parent theme positions this absolutely (top) and clears it with a fixed
   margin-top on the widget. Our taller header (bag mark) broke that, so the
   strip rendered under the header. Put it back in normal flex flow so the
   column stacks header → widget at any header height. */
.shoptimizer-mini-cart-wrap .cart-drawer-heading {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  margin: 0 !important; /* override parent's margin:12px 20px so the bag mark sits at the 20px gutter */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 52px 14px 20px; /* right padding clears the absolute close button */
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.shoptimizer-mini-cart-wrap .cart-drawer-heading .dx-cart-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--green);
  color: #1c2400;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shoptimizer-mini-cart-wrap .cart-drawer-heading .dx-cart-mark svg { width: 17px; height: 17px; }
.shoptimizer-mini-cart-wrap .cart-drawer-heading .cart-drawer-title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}
.shoptimizer-mini-cart-wrap .cart-drawer-heading .dx-cart-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* Close button */
.shoptimizer-mini-cart-wrap .close-drawer {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: #484848;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}
.shoptimizer-mini-cart-wrap .close-drawer:hover { background: var(--line); }
.shoptimizer-mini-cart-wrap .close-drawer svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.shoptimizer-mini-cart-wrap .close-drawer span { display: flex; align-items: center; }

/* Loading overlay. Hidden by default; shown as a full-drawer overlay only while
   body.dx-cart-loading is set (drawer opened on adding_to_cart, before the add-to-cart AJAX
   response arrives). Opaque so it fully masks the stale/empty "Your cart is empty" content
   until the fresh fragment is injected on added_to_cart. When the cart is genuinely empty
   (drawer opened without an add), dx-cart-loading is never set, so no spinner appears. */
.shoptimizer-mini-cart-wrap #ajax-loading {
  position: absolute;
  /* Above .widget_shopping_cart (position:relative; z-index:10) so the opaque overlay
     actually covers the cart content/empty message rather than painting beneath it. */
  z-index: 20;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}
body.dx-cart-loading .shoptimizer-mini-cart-wrap #ajax-loading {
  display: flex;
}
/* Three-dot bounce spinner. The parent theme ships the markup (.spinner > .bounce1/2/3) but
   not its sizing/animation, so supply them here, scoped to the drawer overlay. */
.shoptimizer-mini-cart-wrap #ajax-loading .spinner {
  width: auto;
  display: flex;
  gap: 6px;
}
.shoptimizer-mini-cart-wrap #ajax-loading .spinner > div {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  animation: dx-cart-bounce 1.4s infinite ease-in-out both;
}
.shoptimizer-mini-cart-wrap #ajax-loading .spinner .bounce1 { animation-delay: -0.32s; }
.shoptimizer-mini-cart-wrap #ajax-loading .spinner .bounce2 { animation-delay: -0.16s; }
@keyframes dx-cart-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ── Widget wrapper: fill remaining height, flex-column ───────────── */
/* The parent theme (incl. inlined critical CSS) forces .widget_shopping_cart
   padding:0 20px and a -20px-margin compensation on the <ul>. That insets every
   band 20px, so the grey strip/bumps bands show white side-gutters. Zero it with
   !important and run the bands full-bleed (their own 20px padding insets content). */
.shoptimizer-mini-cart-wrap .widget_shopping_cart,
.shoptimizer-mini-cart-wrap .widget_shopping_cart_content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* Belt-and-suspenders: never show Commerce Kit's native FSN bar inside the drawer
   (it's removed server-side, but guard the AJAX edge so two banners can't appear). */
.shoptimizer-mini-cart-wrap .cgkit-fsn-bar { display: none !important; }

/* ── Free-shipping / savings strip (.dx-ship — server-rendered, 4 variants) ──
   Replaces Commerce Kit's native mini-cart FSN bar. Variants:
   · .dx-ship              A reached (truck + "unlocked" + save pill + full bar)
   · .dx-ship.is-progress  B in-progress (truck + "€X from free shipping" + bar)
   · .dx-ship.is-savings   C module off but saving (tag + amount, no bar)
   · (omitted)             D nothing to show
   ──────────────────────────────────────────────────────────────────────────*/
.shoptimizer-mini-cart-wrap .dx-ship {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 20px;
  background: var(--green-tint);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.shoptimizer-mini-cart-wrap .dx-ship__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
}

/* Right cell: promo control merged into the strip (was a separate footer band). */
.shoptimizer-mini-cart-wrap .dx-ship__promo {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}
.shoptimizer-mini-cart-wrap .dx-ship__promo .dx-promo-wrap { padding: 0; }
/* When the promo input is open, drop it onto its own full-width line below the
   message so the field + Apply button have room (graceful wrap on 420/mobile). */
.shoptimizer-mini-cart-wrap .dx-ship__row:has(.dx-promo__field:not([hidden])) .dx-ship__promo {
  flex: 1 1 100%;
  margin-left: 0;
}
.shoptimizer-mini-cart-wrap .dx-ship__promo .dx-promo__field { width: 100%; }
/* When a coupon is applied, keep the chip INLINE on the message row as a
   content-hugging pill (right-aligned). A long code fades out inside the chip
   rather than wrapping to a second full-width row — see .dx-promo__applied-code. */
.shoptimizer-mini-cart-wrap .dx-ship__row:has(.dx-promo__applied:not([hidden])) .dx-ship__promo {
  flex: 0 1 auto;
  margin-left: auto;
  min-width: 0;
}
/* Applied chip reads as a white outlined chip against the green-tint strip. */
.shoptimizer-mini-cart-wrap .dx-ship__promo .dx-promo__applied { background: #fff; }
.shoptimizer-mini-cart-wrap .dx-ship__promo .dx-promo__link { color: var(--green-dark); }
.shoptimizer-mini-cart-wrap .dx-ship__msg {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-2);
  font-family: var(--font-body);
}
.shoptimizer-mini-cart-wrap .dx-ship__msg strong { white-space: nowrap; }
.shoptimizer-mini-cart-wrap .dx-ship__msg svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--green-dark); }
.shoptimizer-mini-cart-wrap .dx-ship.is-progress .dx-ship__msg svg { color: var(--muted); }
.shoptimizer-mini-cart-wrap .dx-ship__msg strong { font-weight: 700; }
.shoptimizer-mini-cart-wrap .dx-ship.is-progress .dx-ship__msg strong { color: var(--ink); }
.shoptimizer-mini-cart-wrap .dx-ship__msg .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.shoptimizer-mini-cart-wrap .dx-ship__save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--green-dark);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.shoptimizer-mini-cart-wrap .dx-ship__save svg { width: 12px; height: 12px; flex: 0 0 auto; }
.shoptimizer-mini-cart-wrap .dx-ship__save .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.shoptimizer-mini-cart-wrap .dx-ship__bar { height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.shoptimizer-mini-cart-wrap .dx-ship__fill { height: 100%; background: var(--green); border-radius: 3px; transition: width .3s; }
/* C · savings-only band */
.shoptimizer-mini-cart-wrap .dx-ship.is-savings { background: var(--green-tint); }
.shoptimizer-mini-cart-wrap .dx-ship.is-savings .dx-ship__msg { color: var(--green-dark); font-weight: 600; }
.shoptimizer-mini-cart-wrap .dx-ship.is-savings .dx-ship__msg svg { color: var(--green-dark); }
.shoptimizer-mini-cart-wrap .dx-ship__amount { font-size: 14.5px; font-weight: 700; color: var(--green-dark); white-space: nowrap; }
.shoptimizer-mini-cart-wrap .dx-ship__amount .woocommerce-Price-amount { color: inherit; font-weight: inherit; }

/* ── In-cart messages (deposits notice + any WooCommerce notice) ───────
   Re-skin notices that render inside the drawer (e.g. droix-woo-deposits'
   "ship together" notice: .woocommerce-info.cwdp-mixed-cart-notice, default
   WooCommerce blue) into the brand soft-tinted card. Mirrors the site-wide
   notice palette: info = grey, success = green, error = red.
   ──────────────────────────────────────────────────────────────────────*/
.shoptimizer-mini-cart-wrap .woocommerce-info,
.shoptimizer-mini-cart-wrap .woocommerce-message,
.shoptimizer-mini-cart-wrap .woocommerce-error,
.shoptimizer-mini-cart-wrap .cwdp-mixed-cart-notice {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 20px !important;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-left-width: 4px !important;
  border-radius: var(--r-md) !important;
  background-image: none !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  list-style: none !important;
  box-shadow: none !important;
  animation: none !important;
}
.shoptimizer-mini-cart-wrap .woocommerce-info::before,
.shoptimizer-mini-cart-wrap .woocommerce-message::before,
.shoptimizer-mini-cart-wrap .woocommerce-error::before { content: none !important; display: none !important; }
.shoptimizer-mini-cart-wrap .woocommerce-error li { list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* Info (grey) — the deposits "ship together" notice */
.shoptimizer-mini-cart-wrap .woocommerce-info,
.shoptimizer-mini-cart-wrap .cwdp-mixed-cart-notice {
  background: #F4F6F8 !important;
  border-color: #E2E6EA !important;
  border-left-color: #5B6670 !important;
  color: #3A434C !important;
}
.shoptimizer-mini-cart-wrap .cwdp-mixed-cart-notice .cwdp-info-icon {
  color: #5B6670 !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
  margin-top: 1px;
}
.shoptimizer-mini-cart-wrap .cwdp-mixed-cart-notice span,
.shoptimizer-mini-cart-wrap .woocommerce-info a { color: #3A434C !important; }
.shoptimizer-mini-cart-wrap .cwdp-mixed-cart-notice strong {
  color: var(--ink-2) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Success (green) — any in-cart success message */
.shoptimizer-mini-cart-wrap .woocommerce-message {
  background: var(--green-tint) !important;
  border-color: #DDE9A8 !important;
  border-left-color: var(--green-dark) !important;
  color: #4D6B00 !important;
}
/* Error (red) */
.shoptimizer-mini-cart-wrap .woocommerce-error {
  background: #FDECEC !important;
  border-color: #F7C3C3 !important;
  border-left-color: var(--red-sale) !important;
  color: #A30019 !important;
}

/* ── Scrollable item list ──────────────────────────────────────────── */
.shoptimizer-mini-cart-wrap ul.woocommerce-mini-cart {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  width: 100% !important;   /* override parent's calc(100% + 38px) full-bleed hack */
  padding: 0 20px !important;
  margin: 0 !important;      /* override parent's -20px compensation */
  list-style: none;
}
.shoptimizer-mini-cart-wrap ul.woocommerce-mini-cart::-webkit-scrollbar { width: 5px; }
.shoptimizer-mini-cart-wrap ul.woocommerce-mini-cart::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 3px; }

/* ── Line item ────────────────────────────────────────────────────── */
/* Parent theme sets li.mini_cart_item { padding-left:26px; padding-right:0 } at an
   equal specificity, which (via inlined critical CSS) indents the row ~26px and
   cramps the right side. Force flush so content uses the full 20px gutter. */
.shoptimizer-mini-cart-wrap .widget_shopping_cart li.mini_cart_item,
.shoptimizer-mini-cart-wrap li.woocommerce-mini-cart-item {
  padding: 0 !important;
  border: none;
}
.shoptimizer-mini-cart-wrap li.woocommerce-mini-cart-item + li.woocommerce-mini-cart-item .dx-line {
  border-top: 1px solid var(--line);
}
.shoptimizer-mini-cart-wrap .dx-line {
  display: flex;
  gap: 12px;
  padding: 14px 0;
}

/* Thumbnail */
.shoptimizer-mini-cart-wrap .dx-line__thumb {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.shoptimizer-mini-cart-wrap .dx-line__thumb img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  border-radius: 0;
  border: none;
  /* Parent floats mini-cart imgs right + margin-left:20px, which de-centres them
     inside our flex thumb. Reset so the flex container centres the image. */
  float: none !important;
  margin: 0 !important;
  max-width: 100% !important;
}
.shoptimizer-mini-cart-wrap .dx-line__thumb a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Main column */
.shoptimizer-mini-cart-wrap .dx-line__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shoptimizer-mini-cart-wrap .dx-line__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.shoptimizer-mini-cart-wrap .dx-line__titlewrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}
.shoptimizer-mini-cart-wrap .dx-line__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  text-decoration: none;
  font-family: var(--font-body);
}
.shoptimizer-mini-cart-wrap .dx-line__title:hover { color: var(--green-dark); }

/* Prices */
.shoptimizer-mini-cart-wrap .dx-line__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
}
.shoptimizer-mini-cart-wrap .dx-line__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
}
.shoptimizer-mini-cart-wrap .dx-line__price--free,
.shoptimizer-mini-cart-wrap .dx-line__price--free .woocommerce-Price-amount { color: var(--green-dark) !important; }
/* Force ink on the current price's inner WC amount (a global .amount rule colours it). */
.shoptimizer-mini-cart-wrap .dx-line__price,
.shoptimizer-mini-cart-wrap .dx-line__price .woocommerce-Price-amount { color: var(--ink) !important; }
.shoptimizer-mini-cart-wrap .dx-line__was {
  font-size: 12px;
  color: var(--muted-2);
  text-decoration: line-through;
  line-height: 1.2;
  white-space: nowrap;
}
/* The struck RRP's inner amount is coloured #111 + text-decoration:none by a global
   rule; force muted grey + line-through so it reads as a struck price, not a 2nd price. */
.shoptimizer-mini-cart-wrap .dx-line__was,
.shoptimizer-mini-cart-wrap .dx-line__was .woocommerce-Price-amount,
.shoptimizer-mini-cart-wrap .dx-line__was bdi {
  color: var(--muted-2) !important;
  text-decoration: line-through !important;
}

/* Item meta: WooCommerce outputs <dl class="variation"><dt>Label:</dt><dd><p>Value</p></dd>…
   Render each dt/dd pair inline on its own line ("Label: value"). */
.shoptimizer-mini-cart-wrap .dx-meta { display: block; }
.shoptimizer-mini-cart-wrap .dx-meta dl.variation,
.shoptimizer-mini-cart-wrap .dx-meta dl {
  display: block;
  margin: 0;
}
.shoptimizer-mini-cart-wrap .dx-meta dt,
.shoptimizer-mini-cart-wrap .dx-meta dd {
  display: inline;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
}
.shoptimizer-mini-cart-wrap .dx-meta dt { color: var(--muted); font-weight: 400; }
.shoptimizer-mini-cart-wrap .dx-meta dt::after { content: " "; white-space: pre; }
.shoptimizer-mini-cart-wrap .dx-meta dd { color: var(--ink-2); font-weight: 500; }
.shoptimizer-mini-cart-wrap .dx-meta dd p { display: inline; margin: 0; }
/* Force a line break after each value so each pair sits on its own line */
.shoptimizer-mini-cart-wrap .dx-meta dd::after { content: ""; display: block; }

/* Actions row */
.shoptimizer-mini-cart-wrap .dx-line__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

/* ── Qty stepper (Shoptimizer native) ─────────────────────────────── */
.shoptimizer-mini-cart-wrap .dx-stepper-wrap { display: flex; align-items: center; }

/* Shoptimizer's minicart_quantity filter outputs: price_html + stepper_container.
   The price is already shown in .dx-line__prices, so hide every child of the
   stepper wrap, then re-show only the stepper / qty elements. This catches the
   price regardless of its markup (del/ins/.woocommerce-Price-amount/bdi). */
.shoptimizer-mini-cart-wrap .dx-stepper-wrap { font-size: 0; }
.shoptimizer-mini-cart-wrap .dx-stepper-wrap > * { display: none !important; }
.shoptimizer-mini-cart-wrap .dx-stepper-wrap > .shoptimizer-custom-quantity-mini-cart_container,
.shoptimizer-mini-cart-wrap .dx-stepper-wrap > .dx-qty-simple,
.shoptimizer-mini-cart-wrap .dx-stepper-wrap > .dx-qty-locked {
  display: inline-flex !important;
  font-size: 13px;
}

/* Simple qty (when minicart_quantity is off) */
.shoptimizer-mini-cart-wrap .dx-qty-simple {
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-3);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

/* Locked qty (free / giveaway items — no stepper) */
.shoptimizer-mini-cart-wrap .dx-qty-locked {
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--disabled-bg);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--disabled-fg);
  background: var(--disabled-bg);
}

/* Shoptimizer stepper container */
.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_container { display: flex; align-items: center; }
.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart {
  display: inline-flex;
  align-items: center;
  height: 30px;
  border: 1px solid var(--line-3);
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}
.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_button {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  padding: 0;
  flex: 0 0 auto;
}
.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_button:hover { background: var(--surface); }
.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_button svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}
.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_input {
  width: 24px;
  border: 0;
  outline: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  -moz-appearance: textfield;
}
.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_input::-webkit-inner-spin-button,
.shoptimizer-mini-cart-wrap .shoptimizer-custom-quantity-mini-cart_input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Remove button ─────────────────────────────────────────────────── */
/* Hide ANY remove link that is not our .dx-remove (plugin/theme injected ones,
   regardless of nesting). Our template no longer routes the remove link through
   the woocommerce_cart_item_remove_link filter, but a plugin may still inject one. */
.shoptimizer-mini-cart-wrap a.remove_from_cart_button:not(.dx-remove),
.shoptimizer-mini-cart-wrap a.remove:not(.dx-remove) {
  display: none !important;
}
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove {
  display: inline-flex !important;
  position: static !important; /* parent theme forces absolute top-left; keep it in the actions row */
  align-items: center;
  gap: 5px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted-2) !important; /* parent theme colours li/a #111; force grey */
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  padding: 0;
  line-height: 1;
}
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove span,
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove svg { color: var(--muted-2) !important; }
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove:hover,
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove:hover span,
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove:hover svg { color: var(--danger) !important; }
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
/* Parent theme styles a.remove with font-size:0 + a ::before/::after trash glyph.
   Suppress that pseudo-glyph (it duplicates our SVG) and restore the label size. */
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove,
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove span {
  font-size: 12px !important;
}
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove span { display: inline !important; }
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove::before,
.shoptimizer-mini-cart-wrap .remove_from_cart_button.dx-remove::after {
  content: none !important;
  display: none !important;
}

/* Free gift badge */
.shoptimizer-mini-cart-wrap .dx-badge--free {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 7px;
  border-radius: 5px;
  background: var(--green-tint);
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Empty state */
.shoptimizer-mini-cart-wrap .dx-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--muted);
}
.shoptimizer-mini-cart-wrap .dx-empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.35;
}
.shoptimizer-mini-cart-wrap .dx-empty p {
  font-size: 14px;
  margin: 0;
}
.shoptimizer-mini-cart-wrap .dx-empty__title {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-2);
}
.shoptimizer-mini-cart-wrap .dx-empty__sub {
  max-width: 280px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.shoptimizer-mini-cart-wrap .dx-empty__browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-lg);
  background: var(--green);
  color: #1c2400;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: background .15s;
}
.shoptimizer-mini-cart-wrap .dx-empty__browse:hover { background: var(--green-dark); }
.shoptimizer-mini-cart-wrap .dx-empty__browse svg { width: 17px; height: 17px; flex: 0 0 auto; }
.shoptimizer-mini-cart-wrap .dx-empty__continue { margin-top: 2px; }

/* ── Band 4 · Pinned order-bumps (.dx-bumps) ───────────────────────────
   side-cart.js MOVES Commerce Kit's .commercekit-order-bump-wrap out of the
   scrolling <ul> into .dx-bumps__slot so it stays visible at any height.
   CK injects its own <style> at wp_footer; we override under the
   .shoptimizer-mini-cart-wrap scope (higher specificity).
   ──────────────────────────────────────────────────────────────────────*/
.shoptimizer-mini-cart-wrap .dx-bumps {
  flex: 0 0 auto;
  padding: 11px 20px 10px;
  border-top: 1px solid var(--line-2);
  background: var(--surface-2, #FCFCFC);
}
.shoptimizer-mini-cart-wrap .dx-bumps[hidden] { display: none !important; }
.shoptimizer-mini-cart-wrap .dx-bumps__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.shoptimizer-mini-cart-wrap .dx-bumps__title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}
/* Wrap now lives in the band, not an <li>: drop list-context spacing/border. */
.shoptimizer-mini-cart-wrap .dx-bumps .commercekit-order-bump-wrap,
.shoptimizer-mini-cart-wrap .commercekit-order-bump-wrap.cgkit-minicart {
  padding: 0;
  border-top: 0;
  margin: 0;
  background: transparent;
}
/* Old :has() list rule kept inert (bumps no longer sit in an <li>). */
.shoptimizer-mini-cart-wrap li.woocommerce-mini-cart-item:has(.commercekit-order-bump-wrap) {
  padding: 0;
  margin: 0;
  border: none;
}
/* CK's own eyebrow is redundant — we render our own .dx-bumps__title above. */
.shoptimizer-mini-cart-wrap .commercekit-order-bump-wrap .ckobp-before-you-go { display: none !important; }

/* Cards track */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .commercekit-order-bumps {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  padding: 0 2px 2px !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .commercekit-order-bumps::-webkit-scrollbar { display: none !important; }

/* Individual card — taller column: marketing blurb on top, product row below */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .commercekit-order-bump {
  flex: 0 0 300px !important;
  width: 300px !important;
  min-width: 0 !important;
  scroll-snap-align: start !important;
  border: 1px solid var(--line-3) !important;
  border-radius: 13px !important;
  padding: 11px 12px 12px !important;
  margin: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  position: relative !important;
  overflow: hidden !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .commercekit-order-bump.added { border-color: var(--green) !important; }

/* Card image */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-image {
  grid-area: image !important;
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  border-radius: 11px !important;
  background: var(--surface) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Commerce Kit's per-card "title" (admin marketing text) = the card's blurb headline
   on top of the row. Renders only when the merchant filled the per-bump title. */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.35 !important;
}

/* Card body: image left, product info/actions right */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-wrapper {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  grid-template-areas: "image product" !important;
  align-items: start !important;
  gap: 11px !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 112px !important;
  padding-bottom: 47px !important;
  position: relative !important;
  overflow: hidden !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-item {
  display: contents !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-product {
  grid-area: product !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-height: 40px !important;
  overflow: hidden !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-name,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-name a {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-decoration: none !important;
  font-family: var(--font-body) !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  row-gap: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
/* Hide WooCommerce's "incl. VAT" suffix on bump prices (line prices don't show it). */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-price small,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-price .woocommerce-price-suffix,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-price .tax_label { display: none !important; }
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-price .amount,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-price ins .amount {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--red-sale) !important;
  text-decoration: none !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-price del .amount {
  font-size: 11.5px !important;
  color: var(--muted-2) !important;
  font-weight: 400 !important;
}

/* Add button — wraps translated labels without forcing the card row wider. */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-actions {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 65px !important;
  margin-top: 0 !important;
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-button {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-button button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 30px !important;
  height: auto !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  background: var(--green) !important;
  color: #1c2400 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
  transition: background 0.15s !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-button button:hover { background: var(--green-dark) !important; color: #fff !important; }
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-button button.added { background: var(--green-tint) !important; color: var(--green-dark) !important; }

/* Prev / Next arrows */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-prevnext {
  display: flex !important;
  gap: 6px !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-prev,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-next {
  width: 26px !important;
  height: 26px !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 7px !important;
  background: #fff !important;
  cursor: pointer !important;
  color: #484848 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  top: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  transition: background 0.15s !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-prev:hover,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-next:hover { background: var(--surface) !important; }
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-prev svg,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-next svg {
  width: 14px !important;
  height: 14px !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-disabled,
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-disabled svg path { opacity: 0.35; stroke: var(--muted-2) !important; }

/* Nav row (eyebrow + arrows) */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 9px !important;
}

/* Dots */
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-bullets {
  display: flex !important;
  gap: 5px !important;
  justify-content: center !important;
  margin-top: 9px !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-bullet {
  width: 6px !important;
  height: 6px !important;
  border-radius: 3px !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  background: var(--line-3) !important;
  transition: width .2s, background .2s !important;
  display: block !important;
}
.shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .ckobp-bullet.active {
  width: 16px !important;
  background: var(--green) !important;
}

/* Suppress Commerce Kit's mobile price-move container (handled by our CSS) */
.shoptimizer-mini-cart-wrap .ckobp-price-container { display: none !important; }

/* ── Footer summary (.dx-sum) — single Subtotal figure + VAT note ──── */
.shoptimizer-mini-cart-wrap .dx-sum {
  flex: 0 0 auto;
  padding: 12px 20px 0;
  margin: 0;
  border-top: 1px solid var(--line-2);
  background: #fff;
}
.shoptimizer-mini-cart-wrap .dx-sum__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.shoptimizer-mini-cart-wrap .dx-sum__line-lab { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink); }
.shoptimizer-mini-cart-wrap .dx-sum__line-val { font-size: 18px; font-weight: 700; color: var(--magenta); white-space: nowrap; }
.shoptimizer-mini-cart-wrap .dx-sum__line-val .woocommerce-Price-amount { color: var(--magenta); font-weight: 700; font-size: 18px; }
.shoptimizer-mini-cart-wrap .dx-sum__line-lab { min-width: 0; }
.shoptimizer-mini-cart-wrap .dx-sum__vat { text-align: right; font-size: 12px; color: var(--muted-2); margin-top: 2px; }

/* ── Stepper "updating" cue ── while a qty change syncs (body.drawer-updating set
   by minicart-quantity.js on +/- click, cleared on wc_fragments_refreshed), dim the
   subtotal and spin a small ring on the figure so the ~1s server sync reads as busy. */
body.drawer-updating .shoptimizer-mini-cart-wrap .dx-sum { opacity: 0.5; transition: opacity 0.15s; }
body.drawer-updating .shoptimizer-mini-cart-wrap .dx-sum__line-val { position: relative; }
body.drawer-updating .shoptimizer-mini-cart-wrap .dx-sum__line-val::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -22px;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  border: 2px solid var(--line-3);
  border-top-color: var(--green-dark);
  border-radius: 50%;
  animation: dx-spin 0.6s linear infinite;
}
@keyframes dx-spin { to { transform: rotate(360deg); } }

/* The native total <p> is kept hidden (plugin compat) — ensure it never shows */
.shoptimizer-mini-cart-wrap p.woocommerce-mini-cart__total { display: none !important; }

/* ── Promo code (injected via PHP hook, renders above the summary) ──── */
.shoptimizer-mini-cart-wrap .dx-promo-wrap {
  flex: 0 0 auto;
  padding: 14px 20px 4px;
}
.shoptimizer-mini-cart-wrap .dx-promo__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  font-family: var(--font-body);
  white-space: nowrap;
}
.shoptimizer-mini-cart-wrap .dx-promo__link svg { width: 14px; height: 14px; flex: 0 0 auto; }
.shoptimizer-mini-cart-wrap .dx-promo__field { display: flex; gap: 8px; }
.shoptimizer-mini-cart-wrap .dx-promo__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-md);
  padding: 0 12px;
  background: #fff;
}
.shoptimizer-mini-cart-wrap .dx-promo__input-wrap:focus-within { border-color: var(--ink); }
.shoptimizer-mini-cart-wrap .dx-promo__input-wrap svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted-2); }
.shoptimizer-mini-cart-wrap .dx-promo__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink);
}
.shoptimizer-mini-cart-wrap .dx-promo__apply {
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  background: var(--green);
  color: #1c2400;
  flex: 0 0 auto;
}
.shoptimizer-mini-cart-wrap .dx-promo__apply:disabled { background: var(--disabled-bg); color: var(--disabled-fg); cursor: default; }
.shoptimizer-mini-cart-wrap .dx-promo__cancel {
  display: block;
  margin-top: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted-2);
  font-size: 12px;
  padding: 0;
  font-family: var(--font-body);
}
/* Applied coupon = content-hugging pill chip (white, green outline) that sits
   inline on the savings/free-shipping message row. */
.shoptimizer-mini-cart-wrap .dx-promo__applied {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  height: 26px;
  padding: 0 6px 0 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--green);
}
.shoptimizer-mini-cart-wrap .dx-promo__applied-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--green-dark);
}
.shoptimizer-mini-cart-wrap .dx-promo__applied-label svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* Single-line code. JS (side-cart.js) adds .is-truncated only when the code
   overflows the chip, so short codes stay crisp to the last letter and only a
   long code gets the soft fade-out at its right edge. */
.shoptimizer-mini-cart-wrap .dx-promo__applied-code {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.shoptimizer-mini-cart-wrap .dx-promo__applied-code.is-truncated {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
/* "applied" word dropped from the chip — the green check + outline already read
   as applied, and the space goes to the code. */
.shoptimizer-mini-cart-wrap .dx-promo__applied-suffix { display: none; }
.shoptimizer-mini-cart-wrap .dx-promo__remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
}
.shoptimizer-mini-cart-wrap .dx-promo__remove:hover { background: var(--line-2); color: var(--ink); }
.shoptimizer-mini-cart-wrap .dx-promo__remove svg { width: 13px; height: 13px; }
.shoptimizer-mini-cart-wrap .dx-promo__error { color: var(--danger); font-size: 12px; margin-top: 6px; display: block; }
.shoptimizer-mini-cart-wrap [hidden] { display: none !important; }

/* ── Buttons (Checkout + View cart) ───────────────────────────────── */
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons {
  flex: 0 0 auto;
  padding: 12px 20px 0 !important; /* parent adds a 12px bottom padding — force it off */
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 !important;
  background: #fff;
}
/* Checkout CTA */
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.checkout,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.button.checkout {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--green) !important;
  color: #1c2400 !important;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-cta);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.checkout.dx-checkout-loading,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.button.checkout.dx-checkout-loading,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.checkout.dx-checkout-loading:hover,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.button.checkout.dx-checkout-loading:hover {
  background: var(--green) !important;
  color: #1c2400 !important;
  box-shadow: var(--shadow-cta) !important;
  cursor: wait !important;
}
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.checkout.dx-checkout-loading::after,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.button.checkout.dx-checkout-loading::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid rgba(28, 36, 0, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dx-spin 0.65s linear infinite;
}
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.checkout:hover,
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.button.checkout:hover {
  background: var(--magenta) !important; /* secondary brand colour on hover */
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(187, 61, 161, 0.35) !important; /* match shadow to magenta */
}
/* View cart (quiet) */
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a:not(.checkout),
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout) {
  width: 100%;
  height: 40px;
  margin-top: 8px;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  background: transparent !important;
  color: #484848 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: color 0.15s !important;
}
.shoptimizer-mini-cart-wrap .woocommerce-mini-cart__buttons a:not(.checkout):hover { color: var(--ink) !important; }

/* ── Continue shopping (quiet text button, injected after_buttons) ──── */
.shoptimizer-mini-cart-wrap .dx-continue {
  flex: 0 0 auto;
  display: block;
  width: calc(100% - 40px);
  margin: 6px 20px 14px;
  height: 36px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: #484848;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}
.shoptimizer-mini-cart-wrap .dx-continue:hover { color: var(--ink); }

/* ── Shoptimizer below-cart text (sidebar_cart_below_text) ────────── */
.shoptimizer-mini-cart-wrap .cart-drawer-below {
  flex: 0 0 auto;
  padding: 0 20px 12px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ── Hide LiveChat widget while the side cart is open ──────────────── */
body.drawer-open #chat-widget-container {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* ── Mobile (≤480px) ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .shoptimizer-mini-cart-wrap { width: 100% !important; }
  body.drawer-open .shoptimizer-mini-cart-wrap { max-width: 100% !important; }
  .shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .commercekit-order-bump { flex: 0 0 280px !important; width: 280px !important; }
}

/* ── Pixel 10 Fold (unfolded) / small-tablet portrait: roomier 500px drawer ──
   The unfolded fold sits ~840px wide; widen the drawer from 420 → 500px and give
   the upgrade cards more room. Laptop/desktop (≥901px) keep the 420px default;
   phones (≤480px) stay full-bleed. */
@media (min-width: 600px) and (max-width: 900px) {
  /* Closed drawer must be pushed fully off-screen by its own width. The parent
     theme (loaded after this file) only offsets by -420px, so a 500px drawer left
     an 80px strip peeking in on the right at iPad-portrait / fold-tablet widths.
     The closed offset needs !important to beat the later-loaded parent rule; the
     open state then needs its own higher-specificity !important rule so the drawer
     still slides fully in (an !important closed offset alone would trap it). */
  .shoptimizer-mini-cart-wrap { width: 500px !important; right: -500px !important; }
  body.drawer-open .shoptimizer-mini-cart-wrap { right: 0 !important; }
  .shoptimizer-mini-cart-wrap .commercekit-order-bumps-wrap .commercekit-order-bump { flex: 0 0 320px !important; width: 320px !important; }
}