/* =========================================================
   WojByte — Cart Drawer (Heading Above Image Layout)
   - Uses Woo's .widget_shopping_cart_content as the scrollable region
   - Footer actions remain visible (sticky) outside the fragment
   ========================================================= */

:root{
  --cart-z: 130;
  /* Drawer widths */
  --cart-w-xs: min(100vw, 460px);
  --cart-w-sm: 520px;
  --cart-w-md: 600px;
  --cart-w-lg: 680px;

  --cart-bg: var(--surface,#fff);
  --cart-text: var(--text,#111);
  --cart-muted: color-mix(in srgb,var(--cart-text) 60%,transparent);
  --cart-border: var(--border,rgba(0,0,0,0.08));
  --cart-accent: var(--accent,#E17A30);
  --cart-on-accent: var(--on-accent,#fff);

  --cart-pad:12px;
  --cart-content-pad:16px;
  --cart-gap:6px;
  /* Reserve space for sticky footer so last item is not hidden */
  --wbc-footer-space: 120px;
  --cart-radius:10px;
  --touch-min:38px;
  --btn-h:42px;
}

/* -------- Drawer shell (unchanged essentials) -------- */
#wbc-cart-drawer.wbc-drawer,
.wbc-drawer{ position:fixed; inset:0; z-index:99999; pointer-events:none; }
#wbc-cart-drawer .wbc-drawer__overlay,
.wbc-drawer__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); opacity:0; transition:opacity .25s; pointer-events:none; }

/* The panel should be a flex column so the fragment region can scroll */
#wbc-cart-drawer .wbc-drawer__panel,
.wbc-drawer__panel{
  position:absolute; 
  top:0; 
  right:0 !important; 
  left:auto !important;
  width:var(--cart-w-xs); max-width:100%; height:100%;
  background:var(--cart-bg); color:var(--cart-text);
  box-shadow:-10px 0 40px rgba(0,0,0,.2);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  pointer-events:auto;

  display:flex;
  flex-direction:column;
  overflow:hidden;
  max-height:100vh; /* ensure the panel doesn't grow beyond the viewport */
  /* Allow vertical panning inside the panel (lets inner scroll work on touch devices) */
  touch-action: pan-y;
}

/* Make the content area fill available space so the inner fragment can scroll.
   Without this the inner .widget_shopping_cart_content cannot become the scroll
   container and the footer may be pushed off-screen. */
.wbc-cart-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Footer area sticks to bottom */
.wbc-cart-footer{
  flex: 0 0 auto;
  margin-top: auto;
}

/* Ensure the immediate list wrapper takes available space and hides overflow so the
   inner Woo fragment (.widget_shopping_cart_content) can scroll internally. */
.wbc-cart__list{
  flex:1 1 auto;
  min-height:0;
  /* Make the list wrapper scrollable as a robust fallback in case the
     Woo fragment does not include the expected .widget_shopping_cart_content
     wrapper. This ensures the drawer will always scroll when contents overflow. */
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: var(--cart-pad);
}

/* Ensure overlay/panel stack predictably so the panel receives pointer events
   and the overlay sits behind it. This also helps avoid the overlay accidentally
   intercepting scroll/touch events. */
.wbc-drawer__overlay{ z-index: 1; }
.wbc-drawer__panel{ z-index: 2; }

#wbc-cart-drawer.wbc-drawer.is-open .wbc-drawer__overlay,
.wbc-drawer.is-open .wbc-drawer__overlay{ opacity:1; pointer-events:auto; }
#wbc-cart-drawer.wbc-drawer.is-open .wbc-drawer__panel,
.wbc-drawer.is-open .wbc-drawer__panel{ transform:translateX(0); }

/* Optional header (non-scrolling) */
.wbc-drawer__header,
.wbc-cart__header{
  flex:0 0 auto;
  padding: var(--cart-pad) var(--cart-content-pad);
  border-bottom: 1px solid var(--cart-border);
}

/* -------- Woo fragment region: make it the scrollable area -------- */
.wbc-cart-scroll .woocommerce-mini-cart{
  padding: var(--cart-pad) var(--cart-content-pad);
  margin: 0;
  list-style: none;
}

.wbc-cart-scroll .woocommerce-mini-cart__total{
  padding: var(--cart-pad) var(--cart-content-pad);
  margin: 0;
  border-top: 1px solid var(--cart-border);
  font-weight: 600;
}
  -webkit-overflow-scrolling: touch; /* smooth scrolling on mobile */
}

/* Make sure the scrolling area leaves room for the sticky footer so the final
   cart item isn't hidden underneath it. We also add a small gap for visual
   breathing room. */
#wbc-cart-drawer .widget_shopping_cart_content{
  padding-bottom: calc(var(--wbc-footer-space) + var(--cart-pad));
  /* Keep scrolling contained to the cart region (prevents body scrolling) */
  overscroll-behavior: contain;
}

/* Fallback: target alternate drawer markup and any UL inside the panel.
   This ensures a scrollbar appears even when the mini-cart uses different
   class names. Uses the footer-space variable so the footer isn't covered. */
.wbc-drawer__panel .wbc-mini-cart__inner,
.wbc-drawer__panel .wbc-cart__list,
.wbc-drawer__panel .widget_shopping_cart_content{
  /* single scroll container: the inner wrapper should handle scrolling */
  max-height: calc(100vh - var(--wbc-footer-space));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--wbc-footer-space) + var(--cart-pad));
}

/* Ensure the UL itself doesn't create a nested scrollbar; let the wrapper scroll */
.wbc-drawer__panel .woocommerce-mini-cart,
.wbc-drawer__panel ul{
  overflow: visible;
  max-height: none;
}

/* Tidy layout: ensure the drawer panel is a column with a single scrolling region
   and sticky footer. Also remove unwanted large whitespace below content. */
.wbc-drawer__panel{
  display:flex;
  flex-direction:column;
  height:100vh;
  box-sizing:border-box;
  padding-bottom:0; /* footer space handled by sticky footer */
}

.wbc-drawer__panel .wbc-mini-cart__inner,
.wbc-drawer__panel .widget_shopping_cart_content{
  flex:1 1 auto;
  min-height:0; /* allow flex child to shrink and overflow */
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--cart-pad) var(--cart-content-pad) var(--cart-pad) var(--cart-content-pad);
  overscroll-behavior: contain;
}

/* Make sure subtotal sits above the footer without extra gap */
.wbc-drawer__panel .woocommerce-mini-cart__total,
.wbc-drawer__panel .woocommerce-mini-cart__total.total,
.wbc-drawer__panel p.woocommerce-mini-cart__total{
  margin: 0 0 8px 0;
  padding: 0 8px;
}

/* Sticky footer area in the drawer */
.wbc-mini-cart__sticky,
.wbc-drawer__panel .wbc-mini-cart__sticky,
.wbc-drawer__panel .woocommerce-mini-cart__buttons{
  position:sticky;
  bottom:0;
  flex:0 0 auto;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding: var(--cart-pad) var(--cart-content-pad) calc(var(--cart-pad) + env(safe-area-inset-bottom, 0px)) var(--cart-content-pad);
  background:var(--cart-bg);
  border-top:1px solid var(--cart-border);
  z-index:10;
  margin-top: auto;
}

/* Position the close button neatly in the header area */
.wbc-drawer__close,
.wbc-cart__close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:12;
  background:transparent;
  border:0;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

/* Ensure buttons row sits flush at the bottom on small heights */
.wbc-mini-cart__sticky .wbc-btn,
.wbc-cart__actions .wbc-cart__btn{
  min-width:120px;
}

/* Keep the list grid/gap styling */
#wbc-cart-drawer .widget_shopping_cart_content .woocommerce-mini-cart{
  display:grid;
  gap: var(--cart-gap);
  margin: 0; /* Woo sometimes adds default margins */
  padding: 0;
  list-style: none;
}

/* -------- Card -------- */
.woocommerce-mini-cart-item{
  display:flex; flex-direction:column; gap:6px;
  border:1px solid var(--cart-border); border-radius:8px;
  padding:8px 10px; line-height:1.1; position:relative; background:var(--cart-bg);
  margin-right: 10px; /* real gap from the scrollbar/edge */
}
.woocommerce-mini-cart-item img{ width:70px; height:70px; object-fit:contain; }
.woocommerce-mini-cart-item .remove{
  position:absolute; top:6px; right:6px; color:var(--cart-muted);
  text-decoration:none; font-size:.9rem;
}
.woocommerce-mini-cart-item .remove:hover{ color:var(--cart-text); }

/* Heading */
.wbc-item__heading{ margin-bottom:2px; }
.wbc-heading-title{
  font-weight:700; font-size:.96rem; line-height:1.15;
  text-decoration:none; color:var(--cart-text);
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wbc-heading-title:hover{ text-decoration:underline; }

/* Image + meta row */
.wbc-item__main{
  display:grid; grid-template-columns:70px 1fr auto; align-items:center; column-gap:10px;
}
.wbc-item__desc{ font-size:.9rem; color:var(--cart-text); opacity:.92; }
.wbc-item__meta{ font-size:.88rem; color:var(--cart-muted); }
.wbc-mpn{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wbc-price{ font-weight:600; font-size:.95rem; white-space:nowrap; }

/* Qty row */
.wbc-item__bottom{ display:flex; justify-content:flex-start; align-items:center; gap:6px; margin-top:2px; }
.wbc-qty-control{ display:inline-flex; align-items:center; }
.wbc-step{
  width:var(--touch-min); height:var(--touch-min);
  border:1px solid var(--cart-border); border-radius:8px;
  background:#fff; color:var(--cart-text); cursor:pointer; font-size:1rem;
}
.woocommerce-mini-cart-item input.qty{
  width:56px; height:var(--touch-min); text-align:center;
  border:1px solid var(--cart-border); border-radius:8px;
  font-size:.92rem; margin:0 6px; background:#fff; color:var(--cart-text);
}

/* -------- Footer: sticky actions, always visible (outside fragment) -------- */
aside#wbc-cart-drawer .wbc-cart__footer{
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  background: var(--cart-bg);
  border-top:1px solid var(--cart-border);
  padding: var(--cart-pad) var(--cart-content-pad);
  /* Align with card inner text (card: list padding + 1px border + 10px inner) */
  --wbc-card-inner-left: calc(var(--cart-content-pad) + 1px + 10px);
  padding-left: var(--wbc-card-inner-left) !important;
  z-index: 1;
}

/* Ensure footer sits above the scroll area and is clearly visible */
aside#wbc-cart-drawer .wbc-cart__footer{
  z-index: 6;
}

@media (max-width:520px){
  /* reduce reserved footer space on small screens */
  :root{ --wbc-footer-space: 96px; }
}

/* ------------------------------------------------------------------
   Debug helper (temporary)
   Enable by adding the class `wbc-cart-debug` to the <html> element in
   DevTools: `document.documentElement.classList.add('wbc-cart-debug')`.
   This highlights the list and fragment areas so you can see which
   element is scrollable and inspect computed sizes.
   Remove the class to hide the debug outlines.
   ------------------------------------------------------------------ */
html.wbc-cart-debug #wbc-cart-drawer .wbc-cart__list{
  outline: 3px dashed rgba(4, 120, 240, 0.45);
  background: rgba(4,120,240,0.02);
}
html.wbc-cart-debug #wbc-cart-drawer .widget_shopping_cart_content{
  outline: 3px dotted rgba(200, 40, 40, 0.45);
  background: rgba(200,40,40,0.02);
}
html.wbc-cart-debug #wbc-cart-drawer .wbc-cart__footer{
  outline: 2px solid rgba(20,160,60,0.5);
}

.wbc-cart__totals{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:700; margin-bottom:6px;
}
.wbc-cart__subtotal-label{ color:var(--cart-muted); font-weight:600; }
.wbc-cart__subtotal-value{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cart-accent) 20%, transparent), var(--cart-accent));
  color: var(--cart-on-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--cart-accent) 22%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  cursor:default; -webkit-font-smoothing:antialiased;
}
.wbc-cart__subtotal-value:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--cart-accent) 28%, transparent);
  filter:brightness(1.02);
}
.wbc-cart__subtotal-value:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--cart-accent) 20%, transparent);
}
.wbc-cart__subtotal-value:focus{
  outline: 3px solid color-mix(in srgb, var(--cart-accent) 30%, transparent);
  outline-offset: 3px;
}

/* Buttons row */
.wbc-cart__actions{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.wbc-cart__btn{
  display:flex; height:var(--btn-h); align-items:center; justify-content:center;
  border-radius:10px; border:1px solid var(--cart-border);
  font-weight:700; text-decoration:none;
}
.wbc-cart__btn--secondary{ background:#fff; color:var(--cart-text); }
.wbc-cart__btn--primary{ background:var(--cart-accent); color:var(--cart-on-accent); border-color:transparent; }
/* -------- WooCommerce mini-cart buttons - sticky at bottom -------- */
.wbc-cart-footer .woocommerce-mini-cart__buttons,
.wbc-cart-footer p.buttons{
  display:flex !important;
  gap:12px;
  align-items:stretch;
  justify-content:space-between;
  padding: 16px !important;
  background:var(--cart-bg);
  border-top:2px solid var(--cart-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
  margin: 0 !important;
}

.wbc-cart-footer .woocommerce-mini-cart__buttons a.button,
.wbc-cart-footer p.buttons a.button{
#wbc-cart-drawer .widget_shopping_cart_content .buttons a.button{
  /* Match base theme button styles from buttons.css */
  flex: 1;
  margin: 0 !important;
  text-align: center;
  padding: 12px 16px !important;
  min-height: 48px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  border: 0 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.4;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
  -webkit-font-smoothing: antialiased;
}

#wbc-cart-drawer .woocommerce-mini-cart__buttons a.button:first-child,
#wbc-cart-drawer p.buttons a.button:first-child,
#wbc-cart-drawer .widget_shopping_cart_content .buttons a.button:first-child{
  /* View Cart - secondary gray style */
  background: #f5f5f5 !important;
  color: #333 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.06) !important;
}

#wbc-cart-drawer .woocommerce-mini-cart__buttons a.button:first-child:hover,
.wbc-cart-footer .woocommerce-mini-cart__buttons a.button:first-child,
.wbc-cart-footer p.buttons a.button:first-child{
  background: #f5f5f5 !important;
  color: #333 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.06) !important;
}

.wbc-cart-footer .woocommerce-mini-cart__buttons a.button:first-child:hover,
.wbc-cart-footer p.buttons a.button:first-child:hover{
  transform: translateY(-1px) !important;
  background: #eee !important;
  color: #111 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10), inset 0 -2px 0 rgba(0,0,0,.08) !important;
}

.wbc-cart-footer .woocommerce-mini-cart__buttons a.button.checkout,
.wbc-cart-footer p.buttons a.button.checkout{
  /* Checkout - primary CTA style with gradient */
  background: linear-gradient(180deg, var(--cta-bg-2, #f39c63), var(--cta-bg-1, #E17A30)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.12) !important;
}

.wbc-cart-footer .woocommerce-mini-cart__buttons a.button.checkout:hover,
.wbc-cart-footer p.buttons a.button.checkout:hover{
  transform: translateY(-1px) !important;
  filter: saturate(1.05) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.10) !important;
}

.wbc-cart-footer .woocommerce-mini-cart__buttons a.button.checkout:active,
.wbc-cart-footer p.buttons a.button.checkout:active{
  transform: translateY(0) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.18) !important;
}

.wbc-cart-footer .woocommerce-mini-cart__buttons a.button:focus-visible,
.wbc-cart-footer p.buttons a.button:focus-visible{
  outline: 0 !important;
  box-shadow: 0 0 0 4px rgba(225, 122, 48, 0.25), 0 8px 22px rgba(0,0,0,.16), inset 0 -2px 0 rgba(0,0,0,.12) !important;
}

/* Cart item styling */
.wbc-cart__item{
  gap: 8px;
}
.wbc-mpn{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stock badge styles */
.wbc-stock{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--cart-border);
}

/* Color variants */
.wbc-stock--in{
  color: #0a7f2e;
  background: color-mix(in srgb, #0a7f2e 12%, transparent);
  border-color: color-mix(in srgb, #0a7f2e 25%, transparent);
}
.wbc-stock--low{
  color: #b36b00;
  background: color-mix(in srgb, #b36b00 12%, transparent);
  border-color: color-mix(in srgb, #b36b00 25%, transparent);
}
.wbc-stock--out{
  color: #b00020;
  background: color-mix(in srgb, #b00020 12%, transparent);
  border-color: color-mix(in srgb, #b00020 25%, transparent);
}
.wbc-stock--back{
  color: #5b5b00;
  background: color-mix(in srgb, #5b5b00 12%, transparent);
  border-color: color-mix(in srgb, #5b5b00 25%, transparent);
}

/* --- Make Woo's default subtotal compact if present --- */
#wbc-cart-drawer .woocommerce-mini-cart__total { 
  padding: 0px 8px;
}

/* Small / compact screens: slightly reduced padding */
@media (max-width:520px){
  .wbc-cart__subtotal-value{ padding:6px 10px; font-size:.98rem; }
}

/* ------------------------------------------------------------------
  Scoped runtime fixes: only raise drawer z-index when the drawer is
  actually open, and avoid global !important overrides that hide other
  UI (rotated menu). These are conservative and only active while the
  drawer is open (html.wbc-cart-open).
  ------------------------------------------------------------------ */
html.wbc-cart-open .wbc-cart{ z-index: 2147483600; }
html.wbc-cart-open .wbc-drawer__panel{ padding-bottom: 0; box-sizing: border-box; }
html.wbc-cart-open .wbc-drawer__panel .wbc-mini-cart__inner{ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
html.wbc-cart-open .wbc-drawer__panel .woocommerce-mini-cart__total,
html.wbc-cart-open .wbc-drawer__panel p.woocommerce-mini-cart__total{ margin-bottom: 0; padding-bottom: 0; }
html.wbc-cart-open .wbc-drawer__panel .woocommerce-mini-cart{ margin-bottom: 0; }
html.wbc-cart-open .wbc-drawer__panel ul.woocommerce-mini-cart{ padding-bottom: 0; margin-bottom: 0; }
html.wbc-cart-open .wbc-mini-cart__sticky{ z-index: 2147483647; box-shadow: 0 -8px 18px rgba(0,0,0,0.06); }