/* ============================================================================
   Swami Aditya - shop.css
   Money-page styling: themed WooCommerce checkout, single-product (service
   booking), product archive, service cards, trust rows. Mobile-first, saffron.
   Reuses site.css tokens (--bg, --ink, --gold, --night, spacing scale, etc.).
   NO countdowns / scarcity styling (guru-image + SATYA).
   Owner stamp: v1.3.0 | Claude Opus 4.8 (1M context) - effort:high | 2026-06-14 15:38 UTC+3
   (v1.3.0: adopt mattresscenter commerce design system - confident serif
    price-signal treatment, clean surface cards w/ lift+gold-border hover,
    dark-accent secondary button, harmonized trust rows/stats. Mapped onto
    swamiaditya tokens (--night/--ink-soft/--line/--f-display/--sh-*); AA-safe
    gold text uses --gold-ink #7A5C1A on white, never bright --gold.)
   (v1.2.0: themed always-visible -/+ quantity stepper (cart + product) matching
    body typography; wider coupon field; mobile cart table stacks into rows)
   (v1.1.0: Om-tile fallback for image-less cart/mini-cart lines, no grey placeholder)
   ========================================================================== */

/* ---------- shop shell (stripped WC wrapper replacement) ---------- */
.shop-shell{ width:100%; }

/* shared trust pill row ----------------------------------------------------- */
.checkout-trust-row,
.co__trust,
.sp__trust,
.shop__trust,
.sp__assure{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  font-family:var(--f-body); font-size:var(--step--1); color:var(--ink-soft);
}
.checkout-trust-row li,
.co__trust li,
.sp__trust li,
.shop__trust span,
.sp__assure li{
  display:inline-flex; align-items:center; gap:.5em;
}
.checkout-trust-row__ic,
.co__trust-ic{ font-size:1.05em; line-height:1; color:var(--gold-deep); }

/* ============================================================================
   SINGLE PRODUCT (service booking page)
   ========================================================================== */
.sp__crumb{ font-size:var(--step--1); color:var(--ink-soft); margin-bottom:var(--s5); }
.sp__crumb a{ color:var(--indigo); text-decoration:underline; text-underline-offset:2px; }

.sp__grid{
  display:grid; grid-template-columns:1fr; gap:var(--s7);
  align-items:start;
}
.sp__media{ display:flex; flex-direction:column; gap:var(--s5); }
.sp__img{
  width:100%; border-radius:var(--radius-lg);
  box-shadow:var(--sh-3); object-fit:cover; object-position:50% 22%; aspect-ratio:4/3; background:var(--bg-warm);
  /* 50% 22% (NOT center): product photos are portraits with the face high in frame;
     4/3 cover-crop with default center cuts the head. */
}
.sp__img--placeholder{
  display:flex; align-items:center; justify-content:center;
  font-size:5rem; color:var(--gold-soft);
  background:linear-gradient(160deg,var(--night),var(--night-2));
}
.sp__assure{ flex-direction:column; gap:var(--s3); }

.sp__summary{ display:flex; flex-direction:column; }
.sp__title{ font-size:var(--step-3); margin:0 0 var(--s4); }
.sp__lede{ margin-bottom:var(--s5); }

.sp__price-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6em var(--s4);
  padding:var(--s5) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:var(--s5);
}
.sp__price{ font-family:var(--f-display); font-size:var(--step-3); font-weight:600; color:var(--night); }
.sp__price .woocommerce-Price-amount{ font-family:var(--f-display); }
.sp__price-note{ font-size:var(--step--1); color:var(--ink-soft); }

.sp__book{ width:100%; justify-content:center; padding:var(--s4) var(--s6); font-size:var(--step-1); }
.sp__book.loading{ opacity:.7; pointer-events:none; }

.sp__reassure-line{
  display:flex; align-items:center; gap:.5em;
  margin:var(--s4) 0 var(--s6); font-size:var(--step--1); color:var(--ink-soft);
}
.sp__reassure-line span{ color:var(--gold-deep); font-weight:700; }

/* what happens after you book */
.sp__after{
  background:var(--bg-warm); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s5) var(--s5) var(--s4);
  margin-bottom:var(--s5);
}
.sp__after-head{ font-size:var(--step-1); margin:0 0 var(--s4); }
.sp__steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s4); }
.sp__steps li{ display:flex; align-items:flex-start; gap:var(--s4); }
.sp__step-n{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold); color:#1c1407; font-weight:700; font-size:var(--step--1);
}
.sp__step-t{ font-size:var(--step-0); color:var(--ink); line-height:1.5; }

.sp__trust{ padding-top:var(--s5); border-top:1px solid var(--line); }

.sp__about{ margin-top:var(--s8); padding-top:var(--s7); border-top:1px solid var(--line); }
.sp__about-head{ font-size:var(--step-2); margin-bottom:var(--s5); }
.sp__about-body{ max-width:var(--readw); }

/* ============================================================================
   SHOP / ARCHIVE
   ========================================================================== */
.shop__head{ margin-bottom:var(--s7); }
.shop__title{ font-size:var(--step-3); margin:0 0 var(--s4); }
.shop__lede{ max-width:62ch; margin-inline:auto; }

.shop__empty{ text-align:center; color:var(--ink-soft); padding:var(--s8) 0; }

.shop__trust{
  justify-content:center; gap:var(--s4) var(--s6);
  margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid var(--line);
}

/* WooCommerce loop grid (theme owns it) */
ul.products,
.shop ul.products{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:var(--s5);
}
/* the per-card <li> wrapper exists only to keep <ul class="products"> valid (a11y: ul>li);
   display:contents removes its box so the <article class="svc-card"> stays the grid item. */
.svc-card-li{ display:contents; }

/* ============================================================================
   SERVICE CARD
   ========================================================================== */
.svc-card{
  display:flex; flex-direction:column;
  background:var(--bg-warm); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--sh-1); transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.svc-card:hover{ box-shadow:var(--sh-3); transform:translateY(-2px); }
.svc-card__media{
  display:block; aspect-ratio:4/3; background:linear-gradient(160deg,var(--night),var(--night-2));
  position:relative; overflow:hidden;
}
/* 50% 22% (NOT center): service-card photos are portraits, face high in frame;
   4/3 cover-crop with default center cuts the head. */
.svc-card__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.svc-card__media-ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:3.4rem; color:var(--gold-soft);
}
.svc-card__body{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5); flex:1 1 auto; }
.svc-card__name{
  font-family:var(--f-display); font-size:var(--step-1); font-weight:600;
  color:var(--night); line-height:1.2;
}
.svc-card__name:hover{ color:var(--gold-deep); }
.svc-card__desc{ font-size:var(--step--1); color:var(--ink-soft); margin:0; line-height:1.5; }
.svc-card__price{
  font-family:var(--f-display); font-size:var(--step-1); font-weight:600; color:var(--night);
  margin-top:auto; padding-top:var(--s3);
}
.svc-card__price .woocommerce-Price-amount{ font-family:var(--f-display); }
.svc-card__actions{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s3); }
.svc-card__book{ flex:1 1 auto; justify-content:center; }
.svc-card__book.loading{ opacity:.7; pointer-events:none; }
.svc-card__details{ font-size:var(--step--1); color:var(--indigo); white-space:nowrap; }

/* WC "added" tick that cart.js / fragments may inject */
.svc-card__book.added::after,
.sp__book.added::after{ content:""; }

/* ============================================================================
   CHECKOUT
   ========================================================================== */
.co{ width:100%; max-width:760px; margin:0 auto; }
.co__head{ text-align:center; margin-bottom:var(--s7); }
.co__title{ font-size:var(--step-2); margin:0 0 var(--s4); }
.co__trust{ justify-content:center; }

.co__form{ display:flex; flex-direction:column; gap:var(--s6); }

/* single-column details (mobile-first; billing then shipping stack) */
.co__details{ display:flex; flex-direction:column; gap:var(--s5); }
.co__col{ width:100%; }

/* WooCommerce form fields - saffron skin */
.co .woocommerce-billing-fields h3,
.co .woocommerce-additional-fields h3,
.co .woocommerce-shipping-fields h3,
.co__order-head{
  font-family:var(--f-display); font-size:var(--step-1); color:var(--night);
  margin:0 0 var(--s4);
}
.co .form-row{ margin:0 0 var(--s4); display:flex; flex-direction:column; }
.co .form-row label{ font-size:var(--step--1); color:var(--ink-soft); margin-bottom:var(--s2); font-weight:500; }
.co .form-row .required{ color:var(--indigo); text-decoration:none; }
.co input.input-text,
.co textarea,
.co select,
.co .select2-selection{
  width:100%; padding:.7em .85em; font-family:var(--f-body); font-size:var(--step-0);
  color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); line-height:1.4;
}
.co input.input-text:focus,
.co textarea:focus,
.co select:focus{ outline:3px solid var(--gold); outline-offset:2px; border-color:var(--gold); }

/* order review box */
.co__order{
  background:var(--bg-warm); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s5);
}
.co .woocommerce-checkout-review-order-table{
  width:100%; border-collapse:collapse; table-layout:fixed; margin-bottom:var(--s5);
}
.co .woocommerce-checkout-review-order-table th,
.co .woocommerce-checkout-review-order-table td{
  padding:var(--s3) var(--s2); text-align:left; font-size:var(--step-0);
  border-bottom:1px solid var(--line); word-break:break-word; overflow-wrap:anywhere;
}
.co .woocommerce-checkout-review-order-table td.product-total,
.co .woocommerce-checkout-review-order-table .amount{ text-align:right; font-weight:600; color:var(--night); }
.co .woocommerce-checkout-review-order-table tfoot th{ font-weight:600; }
.co .order-total .amount{ font-family:var(--f-display); font-size:var(--step-1); }

/* payment methods */
.co #payment{ background:transparent; }
.co #payment ul.payment_methods{
  list-style:none; margin:0 0 var(--s5); padding:0;
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
}
.co #payment ul.payment_methods li{ padding:var(--s4); border-bottom:1px solid var(--line); }
.co #payment ul.payment_methods li:last-child{ border-bottom:0; }
.co #payment .payment_box{
  background:var(--bg); border-radius:var(--radius-sm); padding:var(--s4);
  margin-top:var(--s3); font-size:var(--step--1); color:var(--ink-soft);
}
.co #payment .place-order{ padding:0; }

/* place order button -> gold */
.co #place_order,
.co button#place_order{
  width:100%; padding:var(--s4) var(--s6);
  font-family:var(--f-body); font-weight:600; font-size:var(--step-1);
  background:var(--gold); color:#1c1407; border:0; border-radius:var(--radius-pill);
  cursor:pointer; box-shadow:var(--sh-2); transition:background .15s var(--ease), box-shadow .15s var(--ease);
}
.co #place_order:hover{ background:var(--gold-deep); box-shadow:var(--sh-3); }

/* trust row under submit */
.checkout-trust-row{ justify-content:center; margin-top:var(--s4); }
/* payment + no-hidden-cost reassurance under the pills - counters the two
   biggest documented abandonment causes (Baymard: hidden costs 39%, card
   distrust 19%). Honest static copy; no scarcity. */
.checkout-trust-note{ max-width:48ch; margin:var(--s3) auto 0; text-align:center;
  font-size:var(--step--1); line-height:1.5; color:var(--ink-soft); }
/* "what happens next" reassurance before the payment methods */
.checkout-next-steps{ margin:0 0 var(--s4); padding:var(--s3) var(--s4);
  background:rgba(184,146,58,.08); border-left:3px solid var(--gold);
  border-radius:6px; font-size:var(--step--1); line-height:1.5; color:var(--ink-soft); }

/* payment-brand + security strip at the pay step (Baymard: card-distrust 19%).
   Honest CSS wordmark badges of the methods Paysera actually processes - no
   hotlinked trademark image files. Recognizable, accessible, AA contrast. */
.checkout-paymarks{ list-style:none; margin:var(--s3) auto 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5em; justify-content:center; align-items:center; }
.checkout-paymarks .paymark{ display:inline-flex; align-items:center; gap:.3em;
  min-height:28px; padding:.25em .6em; border-radius:5px; font-size:.8rem;
  font-weight:700; letter-spacing:.02em; border:1px solid rgba(20,20,30,.14);
  background:#fff; color:#1c2330; line-height:1; }
.paymark--lock{ color:#2e7d32; border-color:rgba(46,125,50,.4); font-weight:600; }
.paymark--paysera{ color:#fff; background:#0a8f3c; border-color:#0a8f3c; }
.paymark--visa{ color:#1a1f71; border-color:rgba(26,31,113,.35);
  font-style:italic; font-family:Georgia,'Times New Roman',serif; }
.paymark--mc{ color:#1c2330; }
.paymark--mc .mc-dots{ width:30px; height:18px; position:relative; display:inline-block; }
.paymark--mc .mc-dots::before,.paymark--mc .mc-dots::after{ content:""; position:absolute;
  top:0; width:18px; height:18px; border-radius:50%; }
.paymark--mc .mc-dots::before{ left:0; background:#eb001b; }
.paymark--mc .mc-dots::after{ left:12px; background:#f79e1b; mix-blend-mode:multiply; }

/* post-purchase passwordless account offer on the order-received page.
   Optional, after payment - never a pre-purchase wall (Baymard: forced
   accounts cost 19%). Calm, opt-in, skippable. */
.ml-account-offer{ margin:var(--s6) 0 0; padding:var(--s5);
  background:var(--bg-warm,#faf6ee); border:1px solid rgba(20,20,30,.1);
  border-left:4px solid var(--gold); border-radius:var(--radius,10px); }
.ml-account-offer__h{ margin:0 0 var(--s2); font-size:var(--step-1); color:var(--ink); }
.ml-account-offer__p{ margin:0 0 var(--s4); font-size:var(--step--1);
  line-height:1.55; color:var(--ink-soft); max-width:60ch; }
.ml-account-offer__form{ margin:0; }
.ml-account-offer__form .btn{ min-height:44px; }
.ml-account-offer__done{ margin:0; display:flex; align-items:center; gap:.5em;
  font-size:var(--step--1); color:#2e7d32; font-weight:600; }

/* coupon / login toggles - keep calm */
.co .woocommerce-form-coupon-toggle,
.co .woocommerce-form-login-toggle{ margin-bottom:var(--s5); }

/* WCAG 2.2 SC 2.5.8 (target-size): WooCommerce's show-password eye toggle ships at 22x22px on the
   login form - under the 24px minimum. Enlarge the clickable target to >=24px and keep the eye
   glyph vertically centred in the password field (the ::after icon stays its natural size). */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  top:50%; transform:translateY(-50%); right:.4em;
}
.co .woocommerce-info,
.co .woocommerce-error,
.co .woocommerce-message{
  background:var(--bg-warm); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--radius-sm); padding:var(--s4); font-size:var(--step--1); list-style:none; margin:0 0 var(--s5);
}

/* ============================================================================
   CART (light skin so it does not look raw)
   ========================================================================== */
.woocommerce-cart .shop-shell .woocommerce{ max-width:900px; margin:0 auto; }
.woocommerce-cart table.cart{ width:100%; border-collapse:collapse; table-layout:fixed; }
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td{
  padding:var(--s3) var(--s2); border-bottom:1px solid var(--line);
  word-break:break-word; overflow-wrap:anywhere; font-size:var(--step-0);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--s4) var(--s6); background:var(--gold); color:#1c1407;
  border-radius:var(--radius-pill); font-weight:600; box-shadow:var(--sh-2);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{ background:var(--gold-deep); }

/* Om tile fallback (cart page) - replaces the grey WC placeholder for
   image-less services. Matches the saffron tile used in the mini-cart drawer
   and the single-product / archive Om fallback. */
.sa-mini-thumb--ph{
  display:inline-flex; align-items:center; justify-content:center;
  width:72px; height:72px; border-radius:var(--radius-sm);
  border:1px solid var(--line); color:var(--gold-deep); font-size:2.4rem; line-height:1;
  background:linear-gradient(160deg,#FBEFD2,#F3E3BC);
}
.woocommerce-cart td.product-thumbnail .sa-mini-thumb--ph{ width:64px; height:64px; }

/* ============================================================================
   QUANTITY STEPPER (cart page + single product) - themed, always-visible -/+
   qty-stepper.js wraps the native WC .quantity > input.qty with the - / + buttons
   and adds .sa-stepper. Typography matches the body text around it (Inter,
   --step-0). Buttons are real, always visible (not browser spinner arrows).
   ========================================================================== */
/* Pre-JS: kill the raw number spinners + match font so there is no ugly flash. */
.woocommerce-cart .quantity input.qty,
.sp__buy .quantity input.qty{
  font-family:var(--f-body); font-size:var(--step-0); color:var(--ink);
  -moz-appearance:textfield;
}
.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
.sp__buy .quantity input.qty::-webkit-outer-spin-button,
.sp__buy .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.quantity.sa-stepper{
  display:inline-flex; align-items:stretch; vertical-align:middle; max-width:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); overflow:hidden;
}
.quantity.sa-stepper .sa-step{
  flex:0 0 auto; width:44px; min-height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--f-body); font-size:var(--step-1); font-weight:600; line-height:1; color:var(--night);
  -webkit-appearance:none; appearance:none;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.quantity.sa-stepper .sa-step:hover{ background:var(--gold); color:#1c1407; }
.quantity.sa-stepper .sa-step:disabled{ opacity:.32; cursor:not-allowed; }
.quantity.sa-stepper input.qty{
  flex:0 1 3em; width:3em; min-width:2.2em; text-align:center;
  border:0; border-left:1px solid var(--line); border-right:1px solid var(--line);
  background:transparent; color:var(--ink);
  font-family:var(--f-body); font-size:var(--step-0); font-weight:600; line-height:1;
}
.quantity.sa-stepper input.qty:focus{ outline:2px solid var(--gold); outline-offset:-2px; }

/* ---------- cart actions: coupon (wide) + update cart ---------- */
.woocommerce-cart td.actions{ padding:var(--s5) var(--s2); }
.woocommerce-cart td.actions .coupon{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-bottom:var(--s4);
}
.woocommerce-cart td.actions .coupon label{
  flex:0 0 auto; font-size:var(--step--1); color:var(--ink-soft); font-weight:500;
}
.woocommerce-cart td.actions .coupon input#coupon_code,
.woocommerce-cart td.actions .coupon .input-text{
  flex:1 1 240px; min-width:0; width:auto; max-width:none;
  padding:.75em .9em; font-family:var(--f-body); font-size:var(--step-0); color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); line-height:1.4;
}
.woocommerce-cart td.actions .coupon input#coupon_code:focus,
.woocommerce-cart td.actions .coupon .input-text:focus{ outline:3px solid var(--gold); outline-offset:2px; border-color:var(--gold); }
.woocommerce-cart td.actions .button,
.woocommerce-cart td.actions button[name="apply_coupon"],
.woocommerce-cart td.actions button[name="update_cart"]{
  flex:0 0 auto; padding:.75em var(--s5);
  font-family:var(--f-body); font-weight:600; font-size:var(--step-0);
  background:var(--gold); color:#1c1407; border:0; border-radius:var(--radius-pill); cursor:pointer;
  transition:background .15s var(--ease);
}
.woocommerce-cart td.actions .button:hover,
.woocommerce-cart td.actions button[name="apply_coupon"]:hover,
.woocommerce-cart td.actions button[name="update_cart"]:hover{ background:var(--gold-deep); }
.woocommerce-cart td.actions button[name="update_cart"][disabled]{ opacity:.5; cursor:default; }

/* ---------- single-product buy row: qty stepper beside Book button ---------- */
.sp__buy{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s4); margin-bottom:var(--s4); }
.sp__buy .sp__book{ flex:1 1 220px; width:auto; }
.sp__qty-label{ flex:0 0 auto; font-size:var(--step--1); color:var(--ink-soft); font-weight:500; }

/* ============================================================================
   RESPONSIVE (>= 760px: two-column where it earns it)
   ========================================================================== */
@media (min-width:760px){
  .sp__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--s8); }
  ul.products,
  .shop ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); }
  .checkout-trust-row,
  .co__trust,
  .shop__trust{ gap:var(--s4) var(--s6); }
}

@media (min-width:1024px){
  ul.products,
  .shop ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ============================================================================
   MOBILE CART (<= 600px): stack the wide cart table into labelled rows so
   nothing overflows on a phone (>90% of visitors). WC cart.php td's carry
   data-title, so each cell shows its column label. The actions/coupon go
   full-width. The qty stepper stays compact.
   ========================================================================== */
@media (max-width:600px){
  .woocommerce-cart table.cart{ display:block; border:0; }
  .woocommerce-cart table.cart thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .woocommerce-cart table.cart tbody{ display:block; }
  .woocommerce-cart table.cart tbody tr.cart_item{
    display:block; padding:var(--s4) 0; border-bottom:1px solid var(--line);
  }
  .woocommerce-cart table.cart tbody tr.cart_item td{
    display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
    padding:var(--s2) 0; border:0; text-align:right;
  }
  .woocommerce-cart table.cart tbody tr.cart_item td::before{
    content:attr(data-title); flex:0 0 auto; font-size:var(--step--1);
    color:var(--ink-soft); font-weight:500; text-align:left;
  }
  .woocommerce-cart table.cart td.product-remove,
  .woocommerce-cart table.cart td.product-thumbnail{ justify-content:flex-start; }
  .woocommerce-cart table.cart td.product-remove::before,
  .woocommerce-cart table.cart td.product-thumbnail::before{ content:""; }
  .woocommerce-cart table.cart td.product-thumbnail img,
  .woocommerce-cart table.cart td.product-thumbnail .sa-mini-thumb--ph{ width:64px; height:64px; }
  /* the qty cell: label left, stepper right */
  .woocommerce-cart table.cart td.product-quantity .quantity.sa-stepper{ flex:0 0 auto; }
  /* actions row: full-width coupon + update, stacked */
  .woocommerce-cart table.cart td.actions{ display:block; text-align:left; padding-top:var(--s5); }
  .woocommerce-cart td.actions .coupon{ flex-wrap:wrap; }
  .woocommerce-cart td.actions .coupon input#coupon_code,
  .woocommerce-cart td.actions .coupon .input-text{ flex:1 1 100%; }
  .woocommerce-cart td.actions .coupon .button,
  .woocommerce-cart td.actions .coupon button[name="apply_coupon"]{ flex:1 1 100%; }
  .woocommerce-cart td.actions button[name="update_cart"]{ width:100%; margin-top:var(--s3); }
}

/* ============================================================================
   MATTRESSCENTER COMMERCE DESIGN SYSTEM (v1.3.0)
   Adopts mattresscenter's proven shopping-UI patterns - confident serif
   "price-signal" treatment, clean white surface cards with a lift + gold-border
   hover, a dark-accent secondary button, and harmonized trust rows/stats -
   mapped onto swamiaditya's OWN tokens (no second palette, no new fonts).
   Mapping: mc --text->--night, --muted->--ink-soft, --border->--line,
   --surface->#fff, --gold-border->--line-gold, --font-head->--f-display,
   mc soft-shadow 0 8px 32px rgba(28,23,20,.12)->--sh-3.
   AA-safe gold TEXT on white = --gold-ink #7A5C1A (6.23:1); never bright --gold
   (#B8923A is only 2.91:1 on white = fails AA for small text).
   ========================================================================== */
.shop-shell,
.sp__summary,
.co{ --gold-ink:#7A5C1A; }

/* ---- 1. PRICE-SIGNAL: serif, larger, confident (mc .price-signal__amount /
   .price-main / .product-price-section). Tighter tracking + line-height:1 for
   that solid "confident number" feel. Applies to single-product, service-card
   and checkout order-total prices for one consistent price voice. ---------- */
.sp__price,
.sp__price .woocommerce-Price-amount,
.svc-card__price,
.svc-card__price .woocommerce-Price-amount,
.co .order-total .amount{
  font-family:var(--f-display);
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1;
  color:var(--night);
}
.sp__price{ font-size:var(--step-3); }
.svc-card__price{ font-size:var(--step-2); }
/* "from" eyebrow above a price (mc .price-from): small, uppercase, muted. */
.sp__price-from,
.svc-card__price-from{
  display:block;
  font-family:var(--f-body); font-weight:600;
  font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); line-height:1.2; margin-bottom:2px;
}

/* ---- 2. SURFACE CARDS: clean white card, warm hairline border, soft shadow,
   generous padding, serif title; subtle lift + gold-border on hover
   (mc .product-card / .intent-card). Service card upgraded to the white surface
   so prices and CTAs read as crisply as mattresscenter's listing cards. ----- */
.svc-card{
  background:#fff;
  border-color:var(--line);
  border-radius:var(--radius);
}
.svc-card:hover{
  box-shadow:var(--sh-3);
  transform:translateY(-4px);
  border-color:var(--line-gold);
}
.svc-card__body{ gap:var(--s3); padding:var(--s5) var(--s5) var(--s5); }
.svc-card__name{ letter-spacing:.004em; }
/* price block sits at the card foot with a top hairline (mc .product-price-block:
   margin-top:auto pins it; the border separates it from the description). */
.svc-card__price{
  border-top:1px solid var(--line);
  margin-top:auto; padding-top:var(--s4);
}

/* ---- 3. SECONDARY (dark-accent) BUTTON: where a second action sits beside the
   gold primary (mc dark .add-to-cart-btn on var(--text)). Use the site's
   --night surface so the pair reads primary(gold) + secondary(dark) like
   mattresscenter, without inventing a new colour. Apply with class
   .btn-accent (template-owned markup may add it; harmless if unused). -------- */
.btn-accent,
.svc-card__details.btn-accent{
  background:var(--night); color:#F4EEDF;
  border:1.5px solid var(--night); box-shadow:var(--sh-1);
}
.btn-accent:hover{
  background:var(--night-2); color:#F7F1E2;
  border-color:var(--night-2); box-shadow:var(--sh-2);
  transform:translateY(-1px);
}

/* ---- 4. TRUST ROWS / STATS: calm, confident (mc .trust-strip / .trust-stat).
   Harmonize the icon colour to the AA-safe gold-ink and give the trust rows a
   touch more breathing room + a faint top rule so they read as a reassurance
   band, not stray text. -------------------------------------------------- */
.checkout-trust-row__ic,
.co__trust-ic,
.sp__trust .sp__assure-ic,
.shop__trust .shop__trust-ic{ color:var(--gold-ink,#7A5C1A); }
.sp__trust,
.shop__trust,
.co__trust{ line-height:1.5; }
/* optional stat band (mc .trust-stats) - serif number, uppercase label.
   Template may emit .sa-trust-stats > .sa-trust-stat; styled here so it matches
   if/when used. */
.sa-trust-stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s6) var(--s8);
  background:var(--bg-warm); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:var(--s6) 0; margin-top:var(--s7);
}
.sa-trust-stat{ text-align:center; }
.sa-trust-stat__n{
  font-family:var(--f-display); font-size:var(--step-2); font-weight:600;
  color:var(--night); line-height:1;
}
.sa-trust-stat__l{
  font-size:var(--step--1); letter-spacing:.06em; color:var(--ink-soft);
  margin-top:4px;
}

/* ---- 5. PRICE-ROW polish on single product: keep the bordered band but lift
   the price visually above the note (mc .product-price-section rhythm). ----- */
.sp__price-row{ align-items:baseline; }
.sp__price-note{ line-height:1.4; }

/* ---- 6. MINI-CART DRAWER: clean surface + serif total to match the shop.
   The slide-out mini-cart markup (sa-mini-cart) is theme-owned; these rules
   only restyle its surfaces/typography to the mattresscenter card voice. ---- */
.sa-mini-cart__total .woocommerce-Price-amount,
.sa-mini-cart__total .amount,
.sa-mini-cart__subtotal .amount{
  font-family:var(--f-display); font-weight:600; color:var(--night);
  letter-spacing:-0.01em;
}
.sa-mini-cart__checkout,
.sa-mini-cart__view-cart{ border-radius:var(--radius-pill); }
.sa-mini-cart__checkout{
  background:var(--gold); color:#1c1407; box-shadow:var(--sh-2);
}
.sa-mini-cart__checkout:hover{ background:var(--gold-deep); box-shadow:var(--sh-3); }
.sa-mini-cart__view-cart{
  background:transparent; color:var(--indigo); border:1.5px solid var(--line);
}
.sa-mini-cart__view-cart:hover{ border-color:var(--gold); color:var(--gold-deep); }

/* desktop: a slightly larger price-signal earns its weight on wide screens. */
@media (min-width:760px){
  .sp__price{ font-size:var(--step-4); }
  .svc-card__price{ font-size:var(--step-2); }
}