/* ==========================================================================
   Cart page

   The bag as two columns: the lines on the left in one card, a sticky order
   summary on the right. Replaces a `shop_table` that read as a spreadsheet
   dropped into an editorial site.

   Loaded after account.css, which still dresses notices and the account
   screens. Every class here is new, so nothing in this file is competing with
   that one — the old `.ms-carttable` rules simply no longer match anything.
   ========================================================================== */

.ms-bag{padding-block:clamp(20px,2.4vw,34px) clamp(48px,6vw,88px);}

/* ---------------------------------------------------------------- Heading */
.ms-bag__head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:clamp(22px,2.6vw,34px);
  padding-bottom:clamp(18px,2vw,26px);
  border-bottom:var(--ms-hairline);
}
.ms-bag__title{margin:0;}

/* ----------------------------------------------------------------- Layout */
.ms-bag__layout{
  display:grid;grid-template-columns:1fr;
  gap:clamp(24px,3vw,40px);
  align-items:start;
}
@media (min-width:1000px){
  .ms-bag__layout{grid-template-columns:minmax(0,1fr) 380px;}
  /* The summary follows the customer down a long bag rather than being left
     at the top of the page with the first line. */
  .ms-bag__aside{position:sticky;top:calc(var(--ms-header-h-compact) + 24px);}
}
.ms-bag__main{min-width:0;}

/* ------------------------------------------------------------------ Lines */
.ms-bag__list{
  background:var(--ms-surface);
  border:var(--ms-hairline);
  border-radius:var(--ms-radius-media);
  overflow:hidden;
}
.ms-bag__line{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto 34px;
  gap:clamp(14px,1.6vw,22px);
  align-items:center;
  padding:clamp(16px,1.8vw,22px);
}
.ms-bag__line + .ms-bag__line{border-top:var(--ms-hairline);}

.ms-bag__media{
  width:96px;aspect-ratio:4/5;
  border-radius:calc(var(--ms-radius-media) - 6px);
  overflow:hidden;background:var(--ms-sand);
}
/* Top anchored, same reason as .ms-cartline__media img in base.css: the
   thumbnail is the 3:4 ms-product-card crop and this box is 4:5, so cover
   trims the hem rather than the head. */
.ms-bag__media a,
.ms-bag__media img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center top;
}

.ms-bag__body{min-width:0;display:flex;flex-direction:column;gap:4px;}
.ms-bag__kicker{
  margin:0;max-width:none;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ms-muted);
}
.ms-bag__name{
  margin:0;
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-sm);font-weight:400;line-height:1.45;
  letter-spacing:0;color:var(--ms-ink);
}
.ms-bag__name a{color:inherit;}
.ms-bag__name a:hover{color:var(--ms-gold-ink);}
.ms-bag__meta,
.ms-bag__unit{
  margin:0;max-width:none;
  font-size:var(--ms-fs-xs);color:var(--ms-muted);
}
.ms-bag__unit .amount{font-variant-numeric:tabular-nums;}
.ms-bag__backorder{
  margin:2px 0 0;max-width:none;
  font-size:var(--ms-fs-xs);color:var(--ms-earth);
}

/* ------------------------------------------------------- Quantity + total */
.ms-bag__controls{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);
}

/*
 * The pill. Its buttons take their height from the flex line rather than from
 * base.css's fixed 32px square — a fixed cross size defeats `align-items:
 * stretch` and leaves the icons floating above the number.
 */
.ms-bag__qty{
  display:flex;align-items:stretch;
  height:44px;
  border:1px solid var(--ms-border);
  border-radius:var(--ms-radius-buy);
  overflow:hidden;
  transition:border-color var(--ms-t) var(--ms-ease);
}
.ms-bag__qty:focus-within{border-color:var(--ms-ink);}
.ms-bag__qty .ms-qty__btn{
  width:36px;height:auto;align-self:stretch;
  padding:0;border:0;background:transparent;cursor:pointer;color:var(--ms-ink);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--ms-t) var(--ms-ease);
}
.ms-bag__qty .ms-qty__btn:hover{background:var(--ms-cream);}

/* WooCommerce's own wrapper sits between the two buttons and brings a border,
   a width and a margin of its own; it is a plain box here. */
.ms-bag__qty .quantity{
  display:flex;align-items:stretch;
  margin:0;border:0;background:none;
}
.ms-bag__qty .qty,
.ms-bag__qty input.qty{
  width:40px;min-width:0;min-height:0;height:auto;align-self:stretch;
  padding:0;margin:0;text-align:center;
  border:0;background:transparent;
  font-size:var(--ms-fs-sm);color:var(--ms-ink);
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield;
}
.ms-bag__qty .qty:focus{outline:none;}
.ms-bag__qty .qty::-webkit-outer-spin-button,
.ms-bag__qty .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.ms-bag__total{
  margin:0;max-width:none;min-width:88px;text-align:right;
  font-size:1.0625rem;font-weight:600;color:var(--ms-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ----------------------------------------------------------------- Remove */
.ms-bag__remove{justify-self:end;}

/*
 * WooCommerce styles this at `.woocommerce a.remove` — (0,2,1), heavier than a
 * two-class rule because of the `a` — as a 1em glyph at font-size 1.5em, and
 * paints it `color:red !important`. Sizing is settled at (0,3,1); the colour
 * is settled by giving the mark an explicit `stroke` instead of letting it
 * inherit through `currentColor`, which is the one route `!important` on
 * `color` does not block.
 */
.ms-bag .ms-bag__remove a.remove{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  font-size:0;line-height:1;text-decoration:none;
  background:none;border:0;
  transition:background var(--ms-t) var(--ms-ease);
}
.ms-bag .ms-bag__remove a.remove svg{
  stroke:var(--ms-muted);
  transition:stroke var(--ms-t) var(--ms-ease);
}
.ms-bag .ms-bag__remove a.remove:hover{background:var(--ms-cream);}
.ms-bag .ms-bag__remove a.remove:hover svg{stroke:var(--ms-sale);}

/* ---------------------------------------------------------------- Actions */
.ms-bag__actions{margin-top:clamp(18px,2vw,26px);}
.ms-bag__coupon{
  background:var(--ms-surface);
  border:var(--ms-hairline);
  border-radius:var(--ms-radius-media);
  padding:clamp(16px,1.8vw,22px);
}
.ms-bag__coupon .ms-label{display:block;margin:0 0 10px;}
.ms-bag__coupon-row{display:flex;gap:10px;flex-wrap:wrap;}
.ms-bag__coupon-row input{
  flex:1 1 180px;min-width:0;min-height:48px;
  border-radius:var(--ms-radius-buy);
}
.ms-bag__coupon-row .ms-btn{
  flex:0 0 auto;min-height:48px;
  border-radius:var(--ms-radius-buy);
}
/* WooCommerce prints its coupon error inside the .coupon wrapper. */
.ms-bag__coupon .coupon-error-notice{
  margin:10px 0 0;max-width:none;
  font-size:var(--ms-fs-xs);color:var(--ms-sale);
}

.ms-bag__actions-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:18px;
}
.ms-bag__back{display:inline-flex;align-items:center;gap:8px;}
.ms-bag__update{min-height:48px;border-radius:var(--ms-radius-buy);}
/*
 * The steppers commit their own changes, so with scripting on this button has
 * nothing left to do but be clicked by the script. It stays in the markup for
 * the no-script path, where it is the only way to commit a quantity.
 */
.js .ms-bag__update{display:none;}

/* ==========================================================================
   Order summary
   ========================================================================== */
/*
 * WooCommerce still lays the collaterals out as its old two-column footer:
 * `woocommerce-layout.css` sets `.woocommerce .cart-collaterals .cart_totals`
 * to `float:right; width:48%` at (0,3,0), which squeezed a 380px summary card
 * down to 182px. It hides itself well, because woocommerce-smallscreen.css
 * clears the same rule under 768px — so the card looks right on a phone and
 * broken on a desktop. Cleared at (0,4,0) rather than with !important.
 */
.ms-bag .ms-bag__aside .cart-collaterals,
.ms-bag .ms-bag__aside .cart-collaterals .cart_totals{
  float:none;width:auto;margin:0;
}

.ms-sum{
  background:var(--ms-surface);
  border:var(--ms-hairline);
  border-radius:var(--ms-radius-media);
  padding:clamp(20px,2.2vw,28px);
}
.ms-sum__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 16px;
}
.ms-sum__title{
  margin:0;
  font-family:var(--ms-font-heading);
  font-size:1.25rem;font-weight:500;color:var(--ms-ink);
}
.ms-sum__count{
  flex:0 0 auto;
  font-size:var(--ms-fs-xs);color:var(--ms-muted);
  font-variant-numeric:tabular-nums;
}
.ms-sum__rows{display:flex;flex-direction:column;}
.ms-sum__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;
  font-size:var(--ms-fs-sm);color:var(--ms-muted);
  border-bottom:var(--ms-hairline);
}
.ms-sum__row:first-child{padding-top:0;}
.ms-sum__val{
  color:var(--ms-ink);text-align:right;
  font-variant-numeric:tabular-nums;
}
.ms-sum__val--quiet{color:var(--ms-muted);font-size:var(--ms-fs-xs);}
.ms-sum__row--coupon .ms-sum__val{color:var(--ms-earth);}
.ms-sum__row--coupon a{color:var(--ms-muted);text-decoration:underline;text-underline-offset:.2em;}
.ms-sum__row--coupon a:hover{color:var(--ms-sale);}

.ms-sum__row--total{
  border-bottom:0;
  padding-top:16px;
  font-size:1rem;color:var(--ms-ink);
}
.ms-sum__row--total .ms-sum__val{
  font-family:var(--ms-font-body);
  font-size:1.3125rem;font-weight:600;
}

/*
 * Shipping.
 *
 * woocommerce/cart/cart-shipping.php re-emits WooCommerce's `<tr>` as the same
 * `.ms-sum__row` every other line in this card uses, so the rate sits on the
 * label's baseline like Subtotal and Total do. The old rules here addressed
 * `th` and `td`, which never existed: a `<tr>` outside a table is thrown away
 * by the HTML parser before CSS ever sees it.
 */
.ms-sum__row--shipping{align-items:flex-start;}
.ms-sum__val--shipping{
  color:var(--ms-ink);text-align:right;
  /* The rate carries a currency figure, so it wants the same lining numerals
     as the rows above rather than inheriting the label's. */
  font-variant-numeric:tabular-nums;
}
.ms-sum__rows ul#shipping_method{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
}
.ms-sum__rows ul#shipping_method li{
  margin:0;display:flex;align-items:center;justify-content:flex-end;gap:9px;
}
.ms-sum__rows ul#shipping_method label{
  margin:0;cursor:pointer;
  font-size:var(--ms-fs-sm);color:var(--ms-ink);
  text-align:right;text-transform:none;letter-spacing:0;
}
.ms-sum__rows ul#shipping_method input[type='radio']{
  flex:0 0 auto;width:15px;height:15px;min-height:0;margin:0;
  accent-color:var(--ms-gold-ink);cursor:pointer;
}

/*
 * The destination and the calculator, on a line of their own under the rate.
 * Inside WooCommerce's value cell a long address ("Near Jagapati Theatre,
 * Srinivas Rao apartment 1st floor pedana, Pedana 521366, Andhra Pradesh")
 * wrapped to four lines and dragged the rate up off its baseline.
 */
.ms-sum__shipmeta{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:10px 14px;
  padding:0 0 14px;margin:0;
  border-bottom:var(--ms-hairline);
}
/*
 * One block, one rule. The shipping row carries the same bottom hairline as
 * every other summary line, which drew a divider between the rate and the
 * address underneath it and left the address looking like an orphaned row
 * (client's note, 2026-09-18). Where the meta follows, the rate gives up its
 * rule and the group closes on the meta's instead.
 */
.ms-sum__row--shipping:has(+ .ms-sum__shipmeta){
  border-bottom:0;padding-bottom:9px;
}
.ms-sum__shipmeta p{
  margin:0;max-width:none;flex:1 1 200px;
  font-size:var(--ms-fs-xs);color:var(--ms-muted);line-height:1.6;
}
.ms-sum__shipmeta .woocommerce-shipping-destination strong{font-weight:500;color:var(--ms-ink);}
/*
 * The calculator is a <form>, so it is a block by default and dropped the
 * link onto its own line below the address. It is the trigger for a panel,
 * not a field, so it sits inline beside the address until it is opened.
 */
.ms-sum__shipmeta .woocommerce-shipping-calculator{
  flex:0 0 auto;margin:0;
}
.ms-sum__shipmeta .shipping-calculator-button{
  display:inline-block;
  font-size:var(--ms-fs-xs);color:var(--ms-muted);
  text-decoration:underline;text-underline-offset:.2em;
  text-decoration-color:var(--ms-gold-line);
}
.ms-sum__shipmeta .shipping-calculator-button:hover,
.ms-sum__shipmeta .shipping-calculator-button:focus-visible{color:var(--ms-ink);}
/*
 * The stray square beside "Change address" in the client's screenshots of
 * 2026-09-18. WooCommerce paints a chevron after this link out of its own icon
 * font (`content:"\e019"; font-family:WooCommerce` in woocommerce.css), and
 * that font is not loaded on this site, so the glyph rendered as tofu. Matched
 * at (0,3,0) because WooCommerce's own selector is three classes deep.
 */
.ms-sum__shipmeta .woocommerce-shipping-calculator .shipping-calculator-button::after{
  display:none;content:none;
}
/* Opened, the panel takes the whole width of the card rather than the sliver
   the link left beside the address. */
.ms-sum__shipmeta .woocommerce-shipping-calculator:has(.shipping-calculator-form[style*='block']){flex:1 1 100%;}
.ms-sum__shipmeta .shipping-calculator-form{margin-top:12px;}
.ms-sum__shipmeta .shipping-calculator-form .form-row{margin:0 0 10px;}
.ms-sum__shipmeta .shipping-calculator-form label{
  display:block;margin:0 0 5px;
  font-size:var(--ms-fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ms-muted);
}
.ms-sum__shipmeta .shipping-calculator-form input,
.ms-sum__shipmeta .shipping-calculator-form select{
  width:100%;min-height:44px;
  border-radius:var(--ms-radius-buy);
  font-size:var(--ms-fs-sm);
}
.ms-sum__shipmeta .shipping-calculator-form .button{
  min-height:44px;border-radius:var(--ms-radius-buy);
}

.ms-sum__go{margin-top:20px;}

/*
 * The checkout button, restated in full.
 *
 * WooCommerce paints `.woocommerce:where(body:not(…)) a.button.alt` at (0,3,1)
 * — the `:where()` adds nothing but `a` still counts — and that outweighs both
 * `.ms-btn` (0,1,0) and the old `.ms-cartpage__aside .checkout-button` (0,2,0),
 * so the most important button on the page rendered in WooCommerce purple.
 *
 * Adding `.ms-btn` in the template override does not fix that on its own: a
 * class only helps if the rule targeting it wins. This one is (0,4,1), which
 * beats WooCommerce outright rather than relying on load order to break a tie.
 */
.ms-bag .ms-sum a.checkout-button.ms-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:56px;padding:0 28px;
  font-family:var(--ms-font-body);
  font-size:.75rem;font-weight:500;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  border:1px solid var(--ms-ink);border-radius:var(--ms-radius-buy);
  background:var(--ms-ink);color:var(--ms-cream);
  text-align:center;text-decoration:none;
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease);
}
.ms-bag .ms-sum a.checkout-button.ms-btn:hover{
  background:var(--ms-ink-hover);border-color:var(--ms-ink-hover);color:var(--ms-cream);
}

.ms-sum__notes{
  list-style:none;margin:18px 0 0;padding:18px 0 0;
  border-top:var(--ms-hairline);
  display:flex;flex-direction:column;gap:10px;
}
.ms-sum__notes li{
  display:flex;align-items:center;gap:9px;
  font-size:var(--ms-fs-xs);color:var(--ms-muted);
}
.ms-sum__notes svg{flex:0 0 auto;color:var(--ms-earth);}

/* ------------------------------------------------------------------- Help */
.ms-bag__help{
  margin-top:16px;
  background:var(--ms-sand);
  border-radius:var(--ms-radius-media);
  padding:clamp(20px,2.2vw,28px);
}
.ms-bag__help .ms-label{display:block;margin:0 0 8px;}
.ms-bag__help-text{
  margin:0 0 14px;max-width:none;
  font-size:var(--ms-fs-xs);color:var(--ms-muted);line-height:1.6;
}
.ms-bag__help .ms-btn{min-height:46px;border-radius:var(--ms-radius-buy);background:var(--ms-surface);}
.ms-bag__hours{
  margin:12px 0 0;max-width:none;
  font-size:var(--ms-fs-micro);color:var(--ms-muted);
}

/* ==========================================================================
   Narrow screens

   Below 720px the line becomes two columns: the photograph beside the name,
   with the stepper and the line total on their own row underneath. Keeping
   four columns at this width squeezed the name to two words a line.
   ========================================================================== */
@media (max-width:720px){
  .ms-bag__line{
    grid-template-columns:80px minmax(0,1fr) 34px;
    grid-template-areas:
      'media body remove'
      'media controls controls';
    align-items:start;
    row-gap:14px;
  }
  .ms-bag__media{grid-area:media;width:80px;}
  .ms-bag__body{grid-area:body;}
  .ms-bag__remove{grid-area:remove;}
  .ms-bag__controls{grid-area:controls;justify-content:space-between;}
  .ms-bag__total{min-width:0;}
}

@media (max-width:420px){
  .ms-bag__line{
    grid-template-columns:68px minmax(0,1fr) 30px;
    padding:14px;
  }
  .ms-bag__media{width:68px;}
  .ms-bag__coupon-row .ms-btn{flex:1 1 100%;}
}