/* =====================================================================
   6 MUSHROOMS - CART (scoped to .six-cart)
   All sizes in px (theme sets html font-size:10px, so rem is 62.5% off).
   ===================================================================== */
.six-cart{
  /* every colour comes from the global tokens in chrome.css - never hardcode */
  --f: var(--ap-font);
  --ink:var(--ap-ink); --ink-2:var(--ap-ink-2); --muted:var(--ap-mute); --faint:var(--ap-faint);
  --line:var(--ap-line); --line-soft:var(--ap-line-soft); --line-strong:var(--ap-line-strong);
  --canvas:var(--ap-canvas); --parch:var(--ap-parchment); --surface:var(--ap-surface);
  --plum:var(--ap-plum); --plum-h:var(--ap-plum-dark); --plum-tint:var(--ap-plum-tint);
  --gold:var(--ap-gold); --sale:var(--ap-sale); --ok:var(--ap-stock);
  --wrap:1280px; --gut:clamp(20px,4vw,48px); --r:18px;
  --e:cubic-bezier(.16,1,.3,1);
  font-family:var(--f); color:var(--ink); background:var(--canvas);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.six-cart *{box-sizing:border-box;}
.six-cart .ct-wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); width:100%;}
.six-cart h1,.six-cart h2,.six-cart h3{margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.18;}
.six-cart p{margin:0;}
.six-cart a{color:inherit; text-decoration:none;}
.six-cart img{max-width:100%; display:block;}

/* head */
.six-cart .ct-crumb{padding:18px 0 0; font-size:12.5px; color:var(--faint);}
.six-cart .ct-crumb .ct-wrap{display:flex; flex-wrap:wrap; align-items:center; gap:7px;}
.six-cart .ct-crumb a:hover{color:var(--ink); text-decoration:underline;}
.six-cart .ct-head{padding:22px 0 20px; border-bottom:1px solid var(--line-soft);}
.six-cart .ct-head h1{font-size:clamp(26px,3vw,38px); letter-spacing:-.026em;}
.six-cart .ct-sub{margin-top:7px; font-size:14.5px; color:var(--muted);}
.six-cart .ct-body{padding-block:28px 72px;}

/* buttons
   The parent theme paints every <button> WordPress-admin blue (#2b7bb9) with a
   4px radius, and it wins on specificity - so these are forced onto the palette. */
.six-cart .ct-btn,
.six-cart button.ct-btn,
.six-cart .ct-actions button{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:46px; padding:12px 24px !important;
  border:1px solid transparent !important; border-radius:9999px !important; cursor:pointer;
  font-family:inherit !important; font-size:15px !important; font-weight:700 !important;
  letter-spacing:-.012em; text-shadow:none !important; box-shadow:none !important;
  transition:background-color .2s var(--e), color .2s var(--e), border-color .2s var(--e);}
.six-cart .ct-btn--solid,
.six-cart button.ct-btn--solid{background:var(--plum) !important; color:var(--canvas) !important;}
.six-cart .ct-btn--solid:hover,
.six-cart button.ct-btn--solid:hover{background:var(--plum-h) !important; transform:translateY(-1px);}
.six-cart .ct-btn:active{transform:translateY(0);}
/* secondary buttons are a plum outline, never grey - the brand uses one colour */
.six-cart .ct-btn--quiet,
.six-cart button.ct-btn--quiet{
  background:var(--canvas) !important; color:var(--plum) !important;
  border-color:var(--plum) !important;}
.six-cart .ct-btn--quiet:hover,
.six-cart button.ct-btn--quiet:hover{
  background:var(--plum-tint) !important; border-color:var(--plum) !important;}

/* ---------- LAYOUT ----------
   The summary is a fixed rail so the item column never stretches so wide that
   name and price drift apart; 380px keeps the totals readable on one line. */
.six-cart .ct-layout{display:grid; grid-template-columns:minmax(0,1fr) 380px;
  gap:clamp(28px,4vw,64px); align-items:start; padding-bottom:72px;}

/* ---------- LINE ITEMS ---------- */
.six-cart .ct-list{border-top:1px solid var(--line);}
.six-cart .ct-item{display:grid;
  grid-template-columns:96px minmax(0,1fr) 96px 110px 28px;
  gap:20px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line-soft);}
.six-cart .ct-item-media{width:96px; height:96px; border-radius:14px; overflow:hidden;
  background:var(--parch); flex:0 0 96px;}
.six-cart .ct-item-media img{width:100%; height:100%; object-fit:cover;}
.six-cart .ct-item-info{display:flex; flex-direction:column; gap:4px; min-width:0;}
.six-cart .ct-item-cat{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint);}
.six-cart .ct-item-name{font-size:16.5px; font-weight:700; letter-spacing:-.016em; line-height:1.3;}
/* the theme colours every link #5b2a86 - product names must read as ink */
.six-cart .ct-item-name a{color:var(--ink) !important; text-decoration:none !important;}
.six-cart .ct-item-name a:hover{color:var(--plum) !important;}
.six-cart .ct-item-unit{font-size:13px; color:var(--muted);}
.six-cart .ct-item-note{font-size:12px; color:var(--faint);}
.six-cart .ct-item .variation{margin:2px 0 0; font-size:13px; color:var(--muted);}
.six-cart .ct-item .variation dt,.six-cart .ct-item .variation dd{display:inline; margin:0; font-weight:400;}
.six-cart .ct-item .variation dd{margin-right:8px;}
.six-cart .ct-item .variation p{margin:0;}
/* qty */
.six-cart .ct-item-qty .quantity{display:flex;}
.six-cart .ct-item-qty input.qty{width:70px; height:44px; padding:0 8px; text-align:center; font-family:inherit;
  font-size:15px; color:var(--ink); border:1px solid var(--line); border-radius:11px; background:var(--canvas);}
.six-cart .ct-item-qty input.qty:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-tint);}
.six-cart .ct-item-total{font-size:16px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums;}
/* WooCommerce core styles a.remove as a filled circle with !important colours,
   and the parent theme repaints it #480371 - reset it hard to a quiet grey x. */
.six-cart .ct-item-remove .remove,
.six-cart .ct-item-remove a.remove{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border:0 !important; border-radius:50%;
  font-size:20px; font-weight:400 !important; line-height:1;
  color:var(--faint) !important;
  background:none !important; background-color:transparent !important; background-image:none !important;
  text-decoration:none !important; box-shadow:none !important;
  transition:background-color .18s var(--e), color .18s var(--e);}
.six-cart .ct-item-remove .remove:hover,
.six-cart .ct-item-remove a.remove:hover{
  background-color:var(--plum-tint) !important; color:var(--plum) !important;}

/* actions row - the promo field is a compact 260px input, not a full-width slab */
.six-cart .ct-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-top:24px;}
.six-cart .ct-coupon{display:flex; gap:8px; flex:0 1 auto;}
.six-cart .ct-coupon input{width:260px; max-width:100%; min-width:0; height:46px; padding:0 16px;
  font-family:inherit; font-size:15px; color:var(--ink);
  border:1px solid var(--line); border-radius:9999px; background:var(--canvas);}
.six-cart .ct-coupon input::placeholder{color:var(--faint);}
.six-cart .ct-coupon input:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-tint);}
.six-cart .ct-update{margin-left:auto;}
.six-cart .ct-continue{display:inline-block; margin-top:22px; font-size:14.5px; color:var(--plum) !important; font-weight:400;}
.six-cart .ct-continue:hover{text-decoration:underline;}

/* ---------- SUMMARY ----------
   A crisp white card with a hairline edge reads cleaner against the white page
   than a tinted slab, and keeps the totals as the only thing with weight. */
.six-cart .ct-summary{position:sticky; top:64px;}
.six-cart .ct-summary-card{
  background:var(--canvas); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 24px 26px; box-shadow:var(--ap-shadow-sm);}
.six-cart .ct-summary-card h2{
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:14px;}
/* WooCommerce prints its own "Cart totals" heading inside the card - we already
   have "Order summary" above it, so drop the duplicate */
.six-cart .cart_totals > h2{display:none !important;}

/* ---------- WOOCOMMERCE NOTICES ----------
   Default Woo/theme notices are a tall lavender slab with a big pill button.
   Make them a compact, on-palette strip. */
.six-cart .woocommerce-message,
.six-cart .woocommerce-info,
.six-cart .woocommerce-error{
  display:flex !important; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 12px !important; padding:13px 16px !important;
  background:var(--parch) !important; border:1px solid var(--line) !important;
  border-left:3px solid var(--plum) !important; border-radius:12px !important;
  font-size:14px !important; line-height:1.45; color:var(--ink) !important;
  list-style:none !important; box-shadow:none !important;}
.six-cart .woocommerce-error{border-left-color:var(--sale) !important;}
.six-cart .woocommerce-message::before,
.six-cart .woocommerce-info::before,
.six-cart .woocommerce-error::before{content:none !important;}
/* the "View cart" button inside a notice becomes a quiet inline link */
.six-cart .woocommerce-message .button,
.six-cart .woocommerce-info .button{
  margin-left:auto !important; padding:0 !important; min-height:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  color:var(--plum) !important; font-size:14px !important; font-weight:700 !important;
  text-decoration:underline !important; text-underline-offset:3px;}
.six-cart .woocommerce-notices-wrapper:empty{display:none;}
/* WooCommerce totals table, restyled */
.six-cart .cart_totals table,
.six-cart .shop_table{width:100%; border:0; border-collapse:collapse; margin:0;}
/* Woo paints a 0.8px #e6e6e6 hairline on every cell - kill it and let the
   row border (our --line token) be the only divider */
.six-cart .cart_totals th,
.six-cart .cart_totals td,
.six-cart .cart_totals tr.order-total th,
.six-cart .cart_totals tr.order-total td,
.six-cart .cart_totals tr.woocommerce-shipping-totals th,
.six-cart .cart_totals tr.woocommerce-shipping-totals td{
  border:0 !important; padding:11px 0 !important; font-size:14.5px; vertical-align:top;}
/* labels left, values hard right - including the shipping destination line and
   the "Change address" link, which Woo leaves left-aligned inside the cell */
.six-cart .cart_totals th{text-align:left !important; font-weight:400 !important;}
.six-cart .cart_totals td,
.six-cart .cart_totals td *,
.six-cart .cart_totals .woocommerce-shipping-destination,
.six-cart .cart_totals .shipping-calculator-button{text-align:right !important;}
/* the theme sets padding-right:10px / font-weight:400 on these cells, which
   pulled the amounts 10px off the card's right edge */
.six-cart .cart_totals td{padding-right:0 !important; font-weight:700 !important;}
.six-cart .cart_totals tr.order-total td{font-weight:700 !important;}
.six-cart .cart_totals .shipping-calculator-button{display:inline-block !important;}
.six-cart .cart_totals .shipping-calculator-form{text-align:left !important;}
.six-cart .cart_totals th{font-weight:400; color:var(--muted);}
.six-cart .cart_totals td{text-align:right; font-weight:700; font-variant-numeric:tabular-nums;}
.six-cart .cart_totals tr{border-top:1px solid var(--line);}
.six-cart .cart_totals tr:first-child{border-top:0;}
.six-cart .cart_totals .order-total th,
.six-cart .cart_totals .order-total td{font-size:18px; font-weight:700; padding-top:15px; color:var(--ink);}
.six-cart .cart_totals .woocommerce-shipping-destination{font-size:12.5px; color:var(--faint); font-weight:400;}
.six-cart .cart_totals .shipping-calculator-button{color:var(--plum) !important; text-decoration:underline; font-size:13px;}
.six-cart .cart_totals ul#shipping_method{list-style:none; margin:0; padding:0; text-align:right;}
.six-cart .cart_totals ul#shipping_method li{margin-bottom:6px; font-size:14px;}
.six-cart .cart_totals ul#shipping_method label{font-weight:400;}
/* checkout CTA */
.six-cart .wc-proceed-to-checkout{margin-top:18px; padding:0;}
.six-cart .wc-proceed-to-checkout a.checkout-button{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; padding:15px 24px;
  border-radius:9999px; background:var(--plum); color:var(--canvas); font-size:16px; font-weight:700; letter-spacing:-.012em;
  transition:background-color .2s var(--e);}
.six-cart .wc-proceed-to-checkout a.checkout-button:hover{background:var(--plum-h);}
/* assurance */
.six-cart .ct-assure{list-style:none; margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:11px;}
.six-cart .ct-assure li{display:flex; flex-direction:column; gap:1px;}
.six-cart .ct-assure strong{font-size:13px; font-weight:700; letter-spacing:-.008em;}
.six-cart .ct-assure span{font-size:12.5px; color:var(--muted); line-height:1.4;}

/* ---------- EMPTY ---------- */
.six-cart .ct-empty{text-align:center; padding:44px 0 20px; max-width:640px; margin-inline:auto;}
.six-cart .ct-empty-icon{width:64px; height:64px; margin:0 auto 20px; color:var(--faint);}
.six-cart .ct-empty-icon svg{width:100%; height:100%;}
.six-cart .ct-empty h2{font-size:24px; margin-bottom:8px;}
.six-cart .ct-empty > p{font-size:15.5px; color:var(--muted); margin-bottom:24px;}
.six-cart .ct-picks{margin-top:60px; text-align:left;}
.six-cart .ct-picks h3{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); margin-bottom:16px; text-align:center;}
.six-cart .ct-picks-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.six-cart .ct-pick-media{display:block; aspect-ratio:1/1; border-radius:13px; overflow:hidden;
  background:var(--parch); margin-bottom:9px;}
.six-cart .ct-pick-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e);}
.six-cart .ct-pick:hover .ct-pick-media img{transform:scale(1.05);}
.six-cart .ct-pick-name{display:block; font-size:14px; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.six-cart .ct-pick-price{display:block; font-size:14px; font-weight:700; color:var(--muted); margin-top:3px;}

/* ---------- strip the leftover Beaver Builder chrome inside the cart ----------
   The cart page content still carries a BB layout: a duplicate "Shopping Cart"
   heading module and a lavender row background. Our own header replaces them. */
.six-cart .fl-module-pp-heading,
.six-cart .pp-heading-content{ display:none !important; }
.six-cart .fl-row,
.six-cart .fl-row-content-wrap,
.six-cart .fl-col,
.six-cart .fl-col-content{
  background-color:transparent !important;
  background-image:none !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
/* The BB row also imposes its own max-width + side padding, which pulled the
   cart body 40px inside the header/H1 edges. Let it fill .ct-wrap instead so
   items and the order summary line up with the logo and the header icons. */
.six-cart .fl-builder-content,
.six-cart .fl-row,
.six-cart .fl-row-content-wrap,
.six-cart .fl-row-content,
.six-cart .fl-col-group,
.six-cart .fl-col,
.six-cart .fl-col-content,
.six-cart .fl-module,
.six-cart .fl-module-content{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  float:none !important;
}
.six-cart .fl-row-content{ max-width:none !important; width:100% !important; padding-inline:0 !important; margin:0 !important; }
.six-cart .fl-module{ margin-bottom:0 !important; }

/* WooCommerce notices inside the cart */
.six-cart .woocommerce-message,
.six-cart .woocommerce-info,
.six-cart .woocommerce-error{border-radius:12px; border:1px solid var(--line); background:var(--parch);
  padding:14px 18px; font-size:14.5px; margin-bottom:18px; list-style:none;}
.six-cart .woocommerce-message a,.six-cart .woocommerce-info a{color:var(--plum); text-decoration:underline;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  .six-cart .ct-layout{grid-template-columns:minmax(0,1fr); gap:30px;}
  .six-cart .ct-summary{position:static;}
  /* grid children default to min-width:auto, so a long product name kept the
     item column wider than its track and pushed the page 24px wide */
  .six-cart .ct-items, .six-cart .ct-summary,
  .six-cart .ct-list, .six-cart .ct-item, .six-cart .woocommerce-cart-form{min-width:0;}
  .six-cart .ct-picks-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  /* line item reflows to: image | info+qty ... total, remove */
  .six-cart .ct-item{grid-template-columns:72px minmax(0,1fr) auto; grid-template-areas:
    "media info remove"
    "media qty  total"; gap:12px 14px; padding:18px 0;}
  .six-cart .ct-item-media{grid-area:media; width:72px; height:72px; flex:0 0 72px;}
  .six-cart .ct-item-info{grid-area:info; min-width:0;}
  .six-cart .ct-item-name{overflow-wrap:anywhere;}
  .six-cart .ct-item-qty{grid-area:qty; min-width:0;}
  .six-cart .ct-item-total{grid-area:total; text-align:right; align-self:center;}
  .six-cart .ct-item-remove{grid-area:remove; justify-self:end;}
  .six-cart .ct-item-qty input.qty{width:64px; height:40px;}
  .six-cart .ct-item-name{font-size:15px;}
  .six-cart .ct-actions{gap:10px;}
  .six-cart .ct-update{margin-left:0; width:100%;}
  /* the promo field is a fixed 260px on desktop - let it flex on phones so the
     input + Apply button don't push the page wider than the viewport */
  .six-cart .ct-coupon{flex:1 1 100%; min-width:0;}
  .six-cart .ct-coupon input{width:auto; flex:1 1 auto; min-width:0;}
  .six-cart .ct-summary-card{padding:22px;}
}
@media (prefers-reduced-motion:reduce){ .six-cart *{transition:none !important;} }