/* ==========================================================================
   Vitamin Well Bulgaria — WooCommerce styling
   Brings shop, single product, cart and checkout onto the design system.
   ========================================================================== */

.woocommerce-page main.site-main,
.woocommerce main.site-main{padding-block:clamp(40px,6vw,72px)}
.woocommerce .vw-wrap,.woocommerce-page .vw-wrap{max-width:var(--vw-maxw)}

/* page intro */
.vw-shop-hero{background:var(--vw-sky-tint); padding-block:clamp(38px,5vw,64px); border-bottom:1px solid var(--vw-line)}
.vw-shop-hero h1{font-size:clamp(30px,4.4vw,48px)}
.vw-shop-hero p{margin-top:12px; color:var(--vw-muted); max-width:60ch; font-size:clamp(16px,2vw,19px)}

/* notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{
  border-radius:var(--vw-radius); border:1px solid var(--vw-line-strong); border-top:3px solid var(--vw-navy);
  background:var(--vw-surface); color:var(--vw-ink); font-family:var(--vw-body); padding:16px 20px; list-style:none;
}
.woocommerce-error{border-top-color:#C6413B}
.woocommerce-message{border-top-color:var(--vw-sky)}
.woocommerce-message a.button,.woocommerce-info a.button{float:right}
/* The icon-font glyph these notices normally lead with doesn't render
   reliably here and shows as a stray box instead -- the text alone is
   clear enough, so the icon is dropped rather than fought with. */
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before,.woocommerce-notice::before{content:none!important; display:none!important}

/* ---------- product grid ---------- */
.woocommerce ul.products{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:0; padding:0; list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  width:auto!important; margin:0!important; float:none!important;
  background:var(--vw-surface); border:1px solid var(--vw-line); border-radius:var(--vw-radius-lg);
  overflow:hidden; display:flex; flex-direction:column; padding:0; text-align:left;
  transition:transform .22s ease,box-shadow .22s,border-color .22s;
}
.woocommerce ul.products li.product:hover{transform:translateY(-5px); box-shadow:var(--vw-shadow); border-color:var(--vw-line-strong)}
.woocommerce ul.products li.product a img{
  margin:0; aspect-ratio:1/1; object-fit:contain; background:var(--vw-surface-2);
  padding:16px; transition:transform .5s ease; width:100%;
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.045)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--vw-display); font-size:20px!important; font-weight:600; padding:16px 18px 0!important; color:var(--vw-ink);
}
.woocommerce ul.products li.product .vw-loop-taste{padding:3px 18px 0; color:var(--vw-faint); font-size:13.5px}
.woocommerce ul.products li.product .vw-loop-meta{padding:2px 18px 0; color:var(--vw-muted); font-size:14px}
.woocommerce ul.products li.product .price{
  padding:10px 18px 0; font-family:var(--vw-display); font-weight:700; font-size:18px; color:var(--vw-ink); margin:0;
}
.woocommerce ul.products li.product .price del{color:var(--vw-faint); font-weight:500; font-size:15px}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .button{margin:14px 18px 20px; align-self:flex-start}
.woocommerce ul.products li.product .onsale,.woocommerce span.onsale{
  position:absolute; top:12px; left:12px; right:auto; margin:0; min-height:0; min-width:0; line-height:1;
  background:var(--vw-surface); color:var(--vw-navy); font-family:var(--vw-display); font-weight:600;
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; padding:6px 11px; border-radius:100px;
  box-shadow:var(--vw-shadow); z-index:2;
}
.woocommerce ul.products li.product{position:relative}

/* ---------- buttons ---------- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit{
  font-family:var(--vw-display); font-weight:600; font-size:15px; letter-spacing:.005em;
  padding:13px 24px; border-radius:100px; border:1.5px solid transparent;
  background:var(--vw-ink); color:var(--vw-ground); line-height:1.2;
  transition:transform .18s ease,background .18s,box-shadow .18s,color .18s;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover{background:var(--vw-navy); color:#fff; box-shadow:var(--vw-shadow)}
.woocommerce a.button:focus-visible,.woocommerce button.button:focus-visible{outline:3px solid var(--vw-sky); outline-offset:2px}
.woocommerce .button.alt,.woocommerce #place_order,.woocommerce button[name=woocommerce_checkout_place_order]{background:var(--vw-navy); color:#fff}
.woocommerce .button.alt:hover,.woocommerce #place_order:hover{background:var(--vw-navy-2)}
.woocommerce a.added_to_cart{
  display:inline-block; margin:0 18px 18px; font-family:var(--vw-display); font-weight:600;
  font-size:14px; color:var(--vw-navy); text-decoration:underline; text-underline-offset:3px;
}

/* ---------- single product ---------- */
.woocommerce div.product{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,60px); align-items:start}
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto!important; float:none!important; margin:0!important; grid-column:1; grid-row:1}
.woocommerce div.product div.summary{grid-column:2}
.woocommerce div.product .woocommerce-product-gallery__trigger{display:none}
.woocommerce div.product div.images img{
  border-radius:var(--vw-radius-lg); background:var(--vw-surface-2); padding:20px;
  max-height:380px; width:100%; object-fit:contain;
}
.woocommerce div.product .product_title{font-size:clamp(28px,3.8vw,44px); font-weight:700; letter-spacing:-.02em}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--vw-display); font-weight:700; font-size:clamp(22px,2.6vw,30px); color:var(--vw-ink); margin-block:14px;
}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--vw-muted); font-size:17px; line-height:1.65}
.woocommerce div.product form.cart{margin-block:26px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.woocommerce div.product form.cart div.quantity{margin:0}
.woocommerce .quantity input.qty{
  width:78px; padding:12px 8px; border-radius:100px; border:1.5px solid var(--vw-line-strong);
  background:var(--vw-surface); font-family:var(--vw-display); font-weight:600; text-align:center; font-size:15px;
}
.woocommerce div.product .woocommerce-tabs{grid-column:2; grid-row:2; margin-top:clamp(20px,3vw,32px)}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0; margin:0 0 24px; display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--vw-line)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent; border:0; border-radius:0; margin:0; padding:0;
  border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--vw-navy)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--vw-display); font-weight:600; font-size:15px; color:var(--vw-muted); padding:12px 14px; display:block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--vw-navy)}
.woocommerce div.product .woocommerce-tabs .panel{max-width:72ch}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:24px; margin-bottom:14px}
.woocommerce div.product .woocommerce-tabs table.shop_attributes th{font-family:var(--vw-display); font-weight:600}
.woocommerce .product_meta{font-size:14px; color:var(--vw-faint); border-top:1px solid var(--vw-line); padding-top:18px; margin-top:6px}
.woocommerce .product_meta a{color:var(--vw-navy)}
.woocommerce section.related,.woocommerce section.up-sells{grid-column:1/-1; margin-top:clamp(40px,6vw,80px)}
.woocommerce section.related>h2,.woocommerce section.up-sells>h2{font-size:clamp(24px,3vw,34px); margin-bottom:26px}

/* ---------- cart ---------- */
.woocommerce table.shop_table{
  border:1px solid var(--vw-line); border-radius:var(--vw-radius-lg); border-collapse:separate;
  border-spacing:0; overflow:hidden; background:var(--vw-surface);
}
.woocommerce table.shop_table th{
  font-family:var(--vw-display); font-weight:600; font-size:12.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--vw-faint); padding:14px 20px; background:transparent;
  border-bottom:1px solid var(--vw-line);
}
.woocommerce table.shop_table td{padding:20px; border-top:1px solid var(--vw-line); vertical-align:middle}
/* Hello Elementor's own reset stripes every odd table row grey -- harmless
   as one flat tint across a full desktop row, but it turns into a patchwork
   of separate blotches once the mobile cart lays cells out on a grid. */
.woocommerce table.shop_table tbody tr td,
.woocommerce table.shop_table tbody tr th{background-color:transparent}
.woocommerce table.shop_table tr:first-child td{border-top:0}
.woocommerce table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item{transition:background-color .15s ease}
.woocommerce table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item:hover{background:var(--vw-surface-2)}
.woocommerce table.shop_table img{
  width:96px!important; max-width:96px!important; aspect-ratio:1/1; object-fit:contain; border-radius:14px;
  background:var(--vw-surface-2); border:1px solid var(--vw-line); padding:8px;
}
.woocommerce table.shop_table .product-name a{font-family:var(--vw-display); font-weight:600; font-size:16px; color:var(--vw-ink)}
.woocommerce table.shop_table .product-name a:hover{color:var(--vw-navy)}
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal{
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.woocommerce table.shop_table .product-subtotal{font-family:var(--vw-display); font-weight:700; color:var(--vw-ink)}
.woocommerce table.shop_table .product-quantity{text-align:center}
.woocommerce a.remove{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1.5px solid var(--vw-line-strong); color:var(--vw-faint)!important; font-weight:400;
  font-size:20px; line-height:1; border-radius:50%; transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.woocommerce a.remove:hover{background:#C6413B; border-color:#C6413B; color:#fff!important}
.woocommerce .cart-collaterals .cart_totals{width:100%; float:none}
.woocommerce .cart-collaterals{display:grid; grid-template-columns:1fr; gap:24px; margin-top:34px}
.woocommerce .cart_totals h2{font-size:22px; margin-bottom:16px}
.woocommerce .cart_totals table.shop_table td,.woocommerce .cart_totals table.shop_table th{font-size:15px}
.woocommerce .cart_totals .order-total .amount{font-family:var(--vw-display); font-weight:700; font-size:20px; color:var(--vw-navy)}
.woocommerce .coupon{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.woocommerce .coupon #coupon_code{
  padding:12px 18px; border-radius:100px; border:1.5px solid var(--vw-line-strong);
  background:var(--vw-surface); font-family:var(--vw-body); font-size:15px; width:auto; min-width:190px;
}
.wc-proceed-to-checkout a.checkout-button{display:block; text-align:center; font-size:16px; padding:16px 26px}

/* ---------- checkout ---------- */
.woocommerce form .form-row{padding:0; margin-bottom:16px}
.woocommerce form .form-row label{
  font-family:var(--vw-display); font-weight:600; font-size:14px; color:var(--vw-ink); margin-bottom:6px; display:block;
}
.woocommerce form .form-row .required{color:#C6413B; text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--vw-line-strong);
  background:var(--vw-surface); color:var(--vw-ink); font-family:var(--vw-body); font-size:15.5px;
  height:auto; line-height:1.4;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:2px solid var(--vw-sky); outline-offset:1px; border-color:var(--vw-sky)}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.4; padding-left:0; color:var(--vw-ink)}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%; right:10px}
.woocommerce-checkout h3{font-size:23px; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--vw-line)}
#customer_details{margin-bottom:38px}
.woocommerce-checkout #order_review_heading{margin-top:0}
.woocommerce-checkout #order_review{
  background:var(--vw-surface); border:1px solid var(--vw-line); border-radius:var(--vw-radius-lg); padding:clamp(20px,3vw,30px);
}
.woocommerce-checkout #order_review table.shop_table{border:0; background:transparent}
.woocommerce-checkout #order_review table.shop_table th{background:transparent; border-bottom:1px solid var(--vw-line)}
#payment{background:transparent!important; border-radius:0}
#payment ul.payment_methods{border:0; padding:0; margin:0 0 18px}
#payment ul.payment_methods li{
  border:1.5px solid var(--vw-line-strong); border-radius:var(--vw-radius); padding:16px 18px; margin-bottom:12px; list-style:none;
}
#payment ul.payment_methods li label{font-family:var(--vw-display); font-weight:600; font-size:15.5px; display:inline}
#payment div.payment_box{
  background:var(--vw-sky-tint)!important; color:var(--vw-muted); border-radius:12px;
  font-size:14.5px; margin-top:12px; padding:14px 16px;
}
#payment div.payment_box::before{display:none}
#payment .place-order{padding:0; margin-top:8px}
#payment #place_order{width:100%; font-size:16.5px; padding:17px 26px}
.woocommerce-terms-and-conditions-wrapper{font-size:14px; color:var(--vw-muted); margin-bottom:16px}

/* order received */
.woocommerce .woocommerce-order{max-width:820px}
.vw-order-success{
  display:flex; gap:16px; align-items:flex-start; margin-bottom:26px; padding:20px 22px;
  background:#EAF7EE; border:1px solid #CDEAD8; border-radius:var(--vw-radius-lg);
}
.vw-order-success__icon{flex:none; width:26px; height:26px; margin-top:2px; color:#1F9254}
.vw-order-success strong{font-family:var(--vw-display); font-size:18px; color:#155C36; display:block; margin-bottom:4px}
.vw-order-success p{margin:0; color:#1F4531; font-size:15px; line-height:1.55}
.woocommerce-notice--success.woocommerce-thankyou-order-received{display:none}
.woocommerce ul.order_details{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; margin:0 0 34px; padding:0;
  border:1px solid var(--vw-line); border-radius:var(--vw-radius-lg); overflow:hidden; background:var(--vw-surface);
}
.woocommerce ul.order_details li{
  border:0; border-left:1px solid var(--vw-line); margin:0; padding:18px 20px; float:none;
  font-family:var(--vw-display); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--vw-muted);
}
.woocommerce ul.order_details li:first-child{border-left:0}
.woocommerce ul.order_details li strong{display:block; font-size:16px; letter-spacing:0; text-transform:none; color:var(--vw-ink); margin-top:5px}

/* my account */
.woocommerce-account .woocommerce-MyAccount-navigation{width:26%; float:left}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:12px 16px; border-radius:10px; font-family:var(--vw-display);
  font-weight:600; font-size:15px; color:var(--vw-muted);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--vw-surface-2); color:var(--vw-navy)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--vw-navy); color:#fff}
.woocommerce-account .woocommerce-MyAccount-content{width:70%; float:right}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register{
  border:1px solid var(--vw-line); border-radius:var(--vw-radius-lg); padding:clamp(22px,3vw,32px); background:var(--vw-surface);
}

/* breadcrumb + result count + ordering */
.woocommerce .woocommerce-breadcrumb{font-size:13.5px; color:var(--vw-faint); margin-bottom:20px}
.woocommerce .woocommerce-breadcrumb a{color:var(--vw-navy)}
.woocommerce .woocommerce-result-count{color:var(--vw-muted); font-size:14px}
.woocommerce .woocommerce-ordering select{
  padding:10px 14px; border-radius:100px; border:1.5px solid var(--vw-line-strong);
  background:var(--vw-surface); font-family:var(--vw-display); font-weight:500; font-size:14px;
}

/* mix-case picker: align the client's plugin with the design system */
.vw-mix-picker,.vw-mix-case{font-family:var(--vw-body)}
.vw-mix-picker .vw-mix-counter,.vw-mix-case .vw-mix-counter{font-family:var(--vw-display); font-weight:700}

@media (max-width:1000px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
  .woocommerce div.product{grid-template-columns:1fr}
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary,
  .woocommerce div.product .woocommerce-tabs{grid-column:1; grid-row:auto}
  .woocommerce div.product div.images img{max-height:320px}
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{width:100%; float:none}
  .woocommerce-account .woocommerce-MyAccount-content{margin-top:26px}
}
@media (max-width:560px){
  .woocommerce ul.products{grid-template-columns:1fr}
  .woocommerce table.shop_table thead{display:none}
  .woocommerce table.shop_table tr{display:block; border-top:1px solid var(--vw-line); padding:14px 4px}
  .woocommerce table.shop_table tr:first-child{padding-top:4px}
  .woocommerce table.shop_table td{display:flex; justify-content:space-between; align-items:center; gap:14px; border-top:0; padding:6px 16px}
  .woocommerce table.shop_table td::before{content:attr(data-title); font-family:var(--vw-display); font-weight:600; color:var(--vw-muted)}
  .woocommerce table.shop_table td.product-remove::before,.woocommerce table.shop_table td.product-thumbnail::before{display:none}
  .woocommerce table.shop_table td.product-name::before{display:none}

  /* The cart's line items get their own card layout: remove button, then
     photo, both on the left as a fixed-width rail; name, taste, price,
     quantity and total stack in a column to their right.

     The desktop rules pin explicit px widths on the remove/thumbnail cells
     for the fixed table layout there; those widths don't apply to a grid
     item's track size, so left unset here they simply overflow their much
     narrower mobile columns and visually spill into the next one. Every
     cell's width, padding and border are reset here for that reason, not
     just the two that showed it. */
  .woocommerce table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item{
    display:grid; grid-template-columns:32px 68px 1fr; column-gap:12px; row-gap:8px;
    align-items:start; padding:18px 16px;
  }
  .woocommerce table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item td{
    width:auto; min-width:0; padding:0; border:0;
  }
  .woocommerce table.shop_table.cart td.product-remove{grid-column:1; grid-row:1; justify-content:flex-start}
  .woocommerce table.shop_table.cart td.product-thumbnail{grid-column:2; grid-row:1/4; display:block!important}
  .woocommerce table.shop_table.cart .product-thumbnail img{width:68px!important; max-width:68px!important}
  .woocommerce table.shop_table.cart td.product-name{
    grid-column:3; grid-row:1; display:block; font-family:var(--vw-display); font-weight:600; font-size:16px;
  }
  .woocommerce table.shop_table.cart td.product-name .vw-loop-taste,
  .woocommerce table.shop_table.cart td.product-name .woocommerce-item-meta{font-family:var(--vw-body); font-weight:400}
  .woocommerce table.shop_table.cart td.product-price{grid-column:3; grid-row:2; justify-content:flex-start; gap:8px}
  .woocommerce table.shop_table.cart td.product-quantity{grid-column:3; grid-row:3; padding-top:4px; justify-content:flex-start; gap:8px}
  .woocommerce table.shop_table.cart td.product-subtotal{
    grid-column:1/4; grid-row:4; border-top:1px solid var(--vw-line)!important;
    margin-top:4px; padding-top:12px!important; justify-content:space-between;
  }
  .woocommerce table.shop_table.cart td.product-name dl.variation{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; margin:4px 0 0; font-size:14px; color:var(--vw-muted);
  }
  .woocommerce table.shop_table.cart td.product-name dl.variation dt,
  .woocommerce table.shop_table.cart td.product-name dl.variation dd{margin:0; padding:0; font-weight:400}
  .woocommerce table.shop_table.cart td.product-name dl.variation p{margin:0}

  .vw-cart-actions{flex-direction:column; align-items:stretch}
  .vw-cart-actions>.button{width:100%}
}

/* ==========================================================================
   Cart layout
   WooCommerce's stylesheet floats the cart form at 68% and the totals at 30%.
   This design stacks them full width instead, so both floats are undone.
   ========================================================================== */
.woocommerce .woocommerce-cart-form,
.woocommerce .cart-collaterals,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals{width:100%!important; float:none!important; margin:0}
.woocommerce .cart-collaterals::after{content:""; display:table; clear:both}
.woocommerce table.shop_table.cart{width:100%}

/* the thumbnail column's heading is a screen-reader label, not a visible one */
.woocommerce table.shop_table th.product-thumbnail,
.woocommerce table.shop_table th.product-remove{font-size:0}
/* Fixed layout, with every column's width pinned explicitly -- auto layout
   let a colspanning row (the coupon/update-cart bar) drag the narrow remove
   column far wider than its 34px button ever needed. */
.woocommerce table.shop_table.cart{table-layout:fixed}
.woocommerce table.shop_table td.product-remove,
.woocommerce table.shop_table th.product-remove{width:52px; padding-left:12px; padding-right:12px}
.woocommerce table.shop_table td.product-thumbnail,
.woocommerce table.shop_table th.product-thumbnail{width:128px}
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart th.product-price,
.woocommerce table.shop_table.cart td.product-subtotal,
.woocommerce table.shop_table.cart th.product-subtotal{width:110px}
.woocommerce table.shop_table.cart td.product-quantity,
.woocommerce table.shop_table.cart th.product-quantity{width:130px}

/* cart actions -- coupon + update cart, in their own panel below the table
   rather than as a row inside it (see woocommerce/cart/cart.php). */
.vw-cart-actions{
  margin-top:16px; padding:18px 20px; border:1px solid var(--vw-line); border-radius:var(--vw-radius-lg);
  background:var(--vw-surface); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
}
.vw-cart-actions .coupon{float:none; display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0}
.vw-cart-actions>.button{float:none; margin:0}

/* A disabled control must still be readable — WooCommerce ships the update
   button disabled until a quantity changes, and a grey pill with invisible
   text just looks broken. */
.woocommerce .button:disabled,
.woocommerce .button[disabled],
.woocommerce button.button:disabled,
.woocommerce input.button:disabled{
  background:var(--vw-surface-2)!important; color:var(--vw-faint)!important;
  border-color:var(--vw-line-strong)!important; box-shadow:none!important;
  cursor:not-allowed; opacity:1;
}
.woocommerce .button:disabled:hover{background:var(--vw-surface-2)!important; color:var(--vw-faint)!important}

/* ---------- Mix Case: picker, and the breakdown under a cart line ---------- */
.vw-mix-flavours{
  list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px;
  /* One row per flavour, full width. The plugin's own stylesheet sets
     grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) on this
     element, which we never previously overrode -- that squeezed each row
     into a ~250px card, leaving almost no width for the name column and
     wrapping it one character per line. */
  grid-template-columns:1fr;
}
.vw-mix-flavour{
  display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:14px;
  background:var(--vw-surface); border:1px solid var(--vw-line); border-radius:var(--vw-radius);
  padding:10px 14px; transition:border-color .18s;
}
.vw-mix-flavour:hover{border-color:var(--vw-line-strong)}
.vw-mix-flavour__image img{width:56px; height:56px; object-fit:contain; background:var(--vw-surface-2); border-radius:9px; padding:4px}
.vw-mix-flavour__name{font-family:var(--vw-display); font-weight:600; font-size:15.5px; color:var(--vw-ink); text-decoration:none}
.vw-mix-flavour__taste{font-size:13.5px; color:var(--vw-faint)}
.vw-mix-flavour__stock{display:block; font-size:12.5px; color:var(--vw-faint); margin-top:2px}
.vw-mix-flavour__stock--oos{color:#C6413B}
.vw-mix-flavour--oos{opacity:.55}

.vw-mix-stepper{display:flex; align-items:center; gap:6px}
.vw-mix-stepper__btn{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--vw-line-strong);
  background:var(--vw-surface); color:var(--vw-ink); font-size:17px; line-height:1;
  cursor:pointer; display:grid; place-items:center; padding:0;
  transition:background .16s,border-color .16s,color .16s;
}
.vw-mix-stepper__btn:hover:not(:disabled){background:var(--vw-navy); border-color:var(--vw-navy); color:#fff}
.vw-mix-stepper__btn:disabled{opacity:.4; cursor:not-allowed}
.vw-mix-stepper__btn:focus-visible{outline:3px solid var(--vw-sky); outline-offset:2px}
.vw-mix-stepper__input{
  width:56px; text-align:center; padding:8px 4px; border-radius:9px;
  border:1.5px solid var(--vw-line-strong); background:var(--vw-surface);
  font-family:var(--vw-display); font-weight:700; font-size:15px; color:var(--vw-ink);
  -moz-appearance:textfield;
}
.vw-mix-stepper__input::-webkit-outer-spin-button,
.vw-mix-stepper__input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

.vw-mix-intro{font-family:var(--vw-display); font-weight:600; color:var(--vw-navy); margin-bottom:14px}
.vw-mix-summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--vw-sky-tint); border-radius:var(--vw-radius); padding:16px 18px; margin-bottom:16px;
}
.vw-mix-summary__count{font-family:var(--vw-display); font-weight:700; font-size:16px; color:var(--vw-navy)}
.vw-mix-summary__count--complete{color:#1a7f37}
.vw-mix-summary__count--over{color:#C6413B}
.vw-mix-summary__price{font-family:var(--vw-display); font-weight:700; font-size:19px; color:var(--vw-ink)}
.vw-mix-summary__errors{flex-basis:100%; color:#C6413B; font-size:14px}
.woocommerce div.product form.cart.vw-mix-picker{display:block}
.vw-mix-submit{width:100%}

/* Breakdown list under a cart / order / email line.
   It sits inside a table cell, so it stays a simple stacked list — a
   space-between row just squeezes each flavour name onto three lines. */
.vw-mix-contents{list-style:none; margin:6px 0 0; padding:0}
.vw-mix-contents__item{
  display:block; font-size:13px; line-height:1.5; color:var(--vw-muted); white-space:nowrap;
}
.vw-mix-contents__qty{font-family:var(--vw-display); font-weight:700; color:var(--vw-ink); margin-left:2px}
/* WordPress runs cart item data through wpautop, which turns the newline
   between the two spans in the plugin's template into a literal <br>. */
.vw-mix-contents__item br{display:none}

/* Every other column now has a pinned width (see the fixed-layout rules
   above); product-name is left unset so it absorbs whatever's left. */
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal{white-space:nowrap}