/* WooCommerce, in the site's own clothes.
 *
 * WHY THIS FILE EXISTS
 *   `fracktal-theme-chrome.php` already gives the shop, cart and account pages
 *   the site's real header and footer. It cannot do more than that, and by
 *   design: every rule in chrome.css is scoped to `.fw-` precisely so that it
 *   CANNOT reach into WooCommerce's markup and restyle a cart by accident.
 *   The result was a correct header, a correct footer, and stock WooCommerce
 *   between them — grey buttons, WooCommerce's default purple on the one
 *   button that matters, and type that is not the site's.
 *
 *   So this is the opposite file: it does nothing but reach into WooCommerce,
 *   and it is scoped to `body.woocommerce`/`body.woocommerce-page` so it can
 *   reach nothing else. The mu-plugin loads it only where those classes are.
 *
 * WHAT IT IS NOT ALLOWED TO DO
 *   Touch layout that WooCommerce's own JavaScript depends on, hide anything
 *   functional, or use `!important` except where it has to beat a stock rule
 *   that already uses it. A shop that looks right and cannot take an order is
 *   worse than a plain one.
 *
 * THE TOKENS ARE THE SITE'S, NOT COPIES
 *   chrome.css is loaded on these pages and declares the `--fw-*` custom
 *   properties on :root. Reading them here rather than restating the hexes
 *   means a brand change lands in one place. The two local names below are the
 *   only additions, and both are derived from the same palette.
 */

.woocommerce,
.woocommerce-page {
  --wc-ink: var(--fw-ink, #3c3c3c);
  --wc-dark: var(--fw-dark, #111111);
  --wc-muted: var(--fw-muted, #5a5a5a);
  --wc-hair: var(--fw-hair, #e6e6e6);
  --wc-soft: var(--fw-soft, #f7f7f7);
  /* The pressed shade, not the salmon. White 15px type on #f25e50 measures
     3.2:1; on #cc4139 it clears 4.5:1. The rest of the site made this same
     swap for exactly this reason — see landing.css's note on .btn-primary. */
  --wc-red: var(--fw-red-dark, #cc4139);
  --wc-red-hover: #b0362f;
  --wc-radius: 6px;
  font-family: var(--fw-font, 'Montserrat', system-ui, sans-serif);
  color: var(--wc-ink);
}

/* ── the measure ──────────────────────────────────────────────────────────
   The rest of the site sets its content in a 1120px column (`.wrap` in
   landing.css). hello-elementor gives WooCommerce the full window, so a shop
   page opened next to a product page looked like a different site at a
   different width. Same column, same gutters. */
.woocommerce-page .site-main,
.woocommerce .site-main {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
  padding-block: clamp(28px, 4vw, 48px);
}
.woocommerce-page .page-header { padding-inline: 0; }

/* ── type ─────────────────────────────────────────────────────────────────
   Weight and tracking to match h1/h2/h3 in landing.css. */
.woocommerce-page h1, .woocommerce h1,
.woocommerce-page h2, .woocommerce h2,
.woocommerce-page h3, .woocommerce h3 {
  font-family: var(--fw-font, 'Montserrat', system-ui, sans-serif);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--wc-dark);
}
.woocommerce-page .entry-title,
.woocommerce .entry-title { font-size: clamp(28px, 3.6vw, 40px); }
.woocommerce-page .site-main p { color: var(--wc-ink); line-height: 1.6; }

/* ── EVERY BUTTON ─────────────────────────────────────────────────────────
   WooCommerce ships four different button classes and the block cart/checkout
   add two more; Razorpay's own "Proceed to checkout" is a seventh. They were
   variously grey and WooCommerce's default purple (#7f54b3), which is the one
   colour on these pages that read as "somebody else's software".

   `!important` is used here and it is deliberate: the stock rules for
   `.wc-block-components-button` set their background with `!important`, and
   this is the file that has to win. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce .wp-element-button,
.woocommerce-page .wp-element-button,
.woocommerce a.checkout-button,
.woocommerce-page a.checkout-button,
.rzp-checkout-button,
.woocommerce .wc-block-components-button,
.woocommerce-page .wc-block-components-button {
  background-color: var(--wc-red) !important;
  color: #fff !important;
  border: 1px solid transparent;
  border-radius: var(--wc-radius);
  font-family: var(--fw-font, 'Montserrat', system-ui, sans-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  padding: 13px 24px;
  text-decoration: none;
  text-transform: none;
  transition: background-color .12s ease, color .12s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.woocommerce .wp-element-button:hover,
.woocommerce-page .wp-element-button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce-page a.checkout-button:hover,
.rzp-checkout-button:hover,
.woocommerce .wc-block-components-button:hover,
.woocommerce-page .wc-block-components-button:hover {
  background-color: var(--wc-red-hover) !important;
  color: #fff !important;
}
/* "Update cart" is the one button here that is not a call to action, and it
   must not compete with Proceed to checkout — but it MUST be visible.
   Measured 2026-09-15: it was hidden by the theme's Customizer CSS, and
   because the classic cart applies a quantity change only when this button is
   pressed, a customer could type 3, proceed, and be charged for 1. Secondary
   styling, full visibility. */
.woocommerce .actions .button[name="update_cart"],
.woocommerce-page .actions .button[name="update_cart"] {
  background: transparent !important;
  color: var(--wc-ink) !important;
  border: 1px solid var(--wc-hair);
  font-weight: 600;
}
.woocommerce .actions .button[name="update_cart"]:hover:not(:disabled),
.woocommerce-page .actions .button[name="update_cart"]:hover:not(:disabled) {
  background: var(--wc-soft) !important;
  color: var(--wc-dark) !important;
  border-color: #d2d2d2;
}
.woocommerce a.button.alt.disabled,
.woocommerce button.button:disabled,
.woocommerce-page button.button:disabled { opacity: .5; }

/* Keyboard focus must stay visible on a payment flow. */
.woocommerce .button:focus-visible,
.woocommerce-page .button:focus-visible,
.woocommerce-page .wc-block-components-button:focus-visible {
  outline: 3px solid var(--wc-red);
  outline-offset: 2px;
}

/* ── the shop grid ────────────────────────────────────────────────────────
   Stock WooCommerce floats the products and lets the picture sit on the page
   with nothing around it. The site's own product cards (`.product-card` in
   landing.css) are a bordered panel with the picture on a soft ground, so
   these become the same object. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--wc-hair);
  border-radius: var(--wc-radius);
  overflow: hidden;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: #d2d2d2;
  box-shadow: 0 6px 22px rgba(17, 17, 17, .07);
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  margin: 0;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--wc-soft);
  padding: 14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wc-dark);
  padding: 14px 14px 0;
  margin: 0;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  padding: 6px 14px 0;
  margin: 0;
  color: var(--wc-ink);
  font-size: 15px;
  font-weight: 700;
}
/* The button sits at the bottom of every card whatever the title does, so a
   row of cards has one button line rather than a ragged one. */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  margin: auto 14px 14px;
  text-align: center;
}
.woocommerce ul.products li.product .added_to_cart { margin: 0 14px 14px; font-size: 13px; }

/* prices: the strike-through and the live figure, in the site's colours */
.woocommerce .price del,
.woocommerce-page .price del { color: var(--wc-muted); font-weight: 500; opacity: 1; }
.woocommerce .price ins,
.woocommerce-page .price ins { text-decoration: none; color: var(--wc-dark); }
.woocommerce .woocommerce-Price-currencySymbol { font-weight: 700; }

/* the sale flash: WooCommerce's green circle becomes the brand's chip */
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  background: var(--wc-red);
  color: #fff;
  border-radius: 3px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  top: 10px;
  left: 10px;
  right: auto;
  margin: 0;
}

/* the sort control and the result count */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce select,
.woocommerce textarea,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"],
.woocommerce-page select,
.woocommerce-page textarea {
  font-family: var(--fw-font, 'Montserrat', system-ui, sans-serif);
  font-size: 14px;
  color: var(--wc-ink);
  background: #fff;
  border: 1px solid var(--wc-hair);
  border-radius: var(--wc-radius);
  padding: 11px 12px;
  line-height: 1.3;
}
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-page input:focus,
.woocommerce-page select:focus,
.woocommerce-page textarea:focus {
  outline: none;
  border-color: var(--wc-red);
  box-shadow: 0 0 0 3px rgba(204, 65, 57, .15);
}
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count { color: var(--wc-muted); font-size: 13px; }

/* ── the single product ───────────────────────────────────────────────── */
.woocommerce div.product .product_title {
  font-size: clamp(24px, 3vw, 34px);
  margin-bottom: 10px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--wc-dark);
  font-size: 26px;
  font-weight: 700;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--wc-ink);
  line-height: 1.6;
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 68px;
  text-align: center;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--wc-hair);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--wc-muted);
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--wc-dark);
  border-bottom-color: var(--wc-red);
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 20px; margin-bottom: 12px; }
.woocommerce .related > h2,
.woocommerce .up-sells > h2,
.woocommerce .cross-sells > h2 { font-size: 22px; margin-bottom: 18px; }

/* ── cart ─────────────────────────────────────────────────────────────── */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  border: 1px solid var(--wc-hair);
  border-radius: var(--wc-radius);
  border-collapse: separate;
  border-spacing: 0;
}
.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th {
  background: var(--wc-soft);
  color: var(--wc-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 12px;
}
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td {
  padding: 16px 12px;
  border-top: 1px solid var(--wc-hair);
  vertical-align: middle;
}
.woocommerce table.shop_table .product-thumbnail img { width: 60px; border-radius: 4px; }
.woocommerce table.shop_table td.product-name a { color: var(--wc-dark); font-weight: 600; }
.woocommerce table.shop_table td.product-name a:hover { color: var(--wc-red); }
.woocommerce a.remove {
  color: var(--wc-muted) !important;
  font-weight: 400;
  line-height: 1;
}
.woocommerce a.remove:hover { background: var(--wc-red) !important; color: #fff !important; }
.woocommerce .cart_totals h2 { font-size: 20px; margin-bottom: 14px; }
.woocommerce .cart_totals table.shop_table { width: 100%; }
.woocommerce .cart-collaterals .cart_totals tr.order-total .amount { font-size: 20px; }

/* The coupon line at the top of the cart is an <h2> in the page content, so it
   set at heading size and shouted louder than "Cart" itself. It is a notice,
   not a section title: same words, the weight of an offer. */
.woocommerce-cart .page-content > h2:first-child {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--wc-ink);
  background: var(--wc-soft);
  border-left: 3px solid var(--wc-red);
  border-radius: var(--wc-radius);
  padding: 13px 16px;
  margin-bottom: 22px;
}

/* ── my account ───────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid var(--wc-hair);
  border-radius: var(--wc-radius);
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--wc-hair); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  color: var(--wc-ink);
  font-weight: 600;
  font-size: 14px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--wc-soft);
  color: var(--wc-red);
}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-page form.login,
.woocommerce-page form.register {
  border: 1px solid var(--wc-hair);
  border-radius: var(--wc-radius);
  padding: clamp(20px, 3vw, 32px);
  max-width: 460px;
}
.woocommerce form .form-row label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }

/* ── notices ──────────────────────────────────────────────────────────────
   These were hidden outright by the Customizer CSS —
   `.woocommerce-notices-wrapper{display:none !important}` — which took the
   "added to cart" confirmation away and every error with it: a declined
   coupon, an out-of-stock line, a failed payment, all silent. A shopper who
   presses a button and sees nothing happen presses it again or leaves. The
   hide is gone; this is what they look like now. */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-notices-wrapper { margin-bottom: 18px; }

/* Stock WooCommerce lays a notice out by hand: `padding-left: 3.5em` to clear
   an icon it then drops in `position: absolute; left: 1.5em`. Restyling the
   padding without moving the icon — which is what the first pass did — left
   the glyph sitting ON the first letter of the message, so the confirmation
   read "(tick)rintStick Plus has been added to your cart." A flex row makes
   the icon a real item with real width, and the geometry stops being two
   numbers that have to agree. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  border-top: 0;
  border-left: 3px solid var(--wc-red);
  background: var(--wc-soft);
  border-radius: var(--wc-radius);
  color: var(--wc-ink);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 14px;
  padding: 13px 16px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  position: static;
  top: auto;
  left: auto;
  flex: none;
  font-size: 17px;
  line-height: 1;
  color: var(--wc-red);
}
/* The "Continue shopping" link is FIRST in the markup and floated right by
   stock CSS. Floats do nothing inside a flex row, so it is ordered last and
   pushed over instead — and sized as the secondary action it is, rather than
   the 200px slab it had become next to a one-line message. */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  float: none !important;
  order: 2;
  margin: 0 0 0 auto !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
}

/* ── pagination ───────────────────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 1px solid var(--wc-hair);
  border-radius: var(--wc-radius);
  padding: 8px 14px;
  font-weight: 600;
  color: var(--wc-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--wc-red);
  border-color: var(--wc-red);
  color: #fff;
}

/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 13.5px; padding: 12px 11px 0; }
  .woocommerce ul.products li.product .price { font-size: 13.5px; padding: 5px 11px 0; }
  .woocommerce ul.products li.product .button { margin: auto 11px 11px; padding: 11px 10px; font-size: 12.5px; }
  .woocommerce ul.products li.product a img { padding: 10px; }
  .woocommerce table.shop_table td { padding: 12px 8px; }
}


/* ══ THE CART, FINISHED ═══════════════════════════════════════════════════
   Everything above dressed WooCommerce in the site's clothes. This section
   changes what the cart page IS.

   What it was: one table, one totals box, and — squeezed into the space beside
   the totals — two cross-sells out of a range of seven. The table ran the full
   window while the totals sat under a heading two thirds of the way down, so
   the one button that takes the money was below the fold on a laptop.

   What it is now: the table and a totals card side by side, the card sticky so
   the total and the button follow the reader; the rest of the range in a row
   that scrolls; and under both, the four things a buyer wants to know before
   paying. The markup for that band comes from muplugins/fracktal-cart.php —
   this file only decides how it looks.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── the two-column cart ─────────────────────────────────────────────────
   `.cart-collaterals` is WooCommerce's wrapper around the cross-sells AND the
   totals, which is exactly the pairing this layout has to break: the totals
   belong beside the table, the cross-sells belong under it, full width.
   `display: contents` dissolves the wrapper into the grid so both can be
   placed independently, without overriding a single template. */
@media (min-width: 900px) {
  .woocommerce-cart .page-content > .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: clamp(24px, 3vw, 40px);
    align-items: start;
  }
  .woocommerce-cart .page-content > .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .woocommerce-cart .page-content > .woocommerce > form.woocommerce-cart-form {
    grid-column: 1;
    grid-row: 2;
  }
  .woocommerce-cart .cart-collaterals { display: contents; }
  /* NOT sticky, and the reason is worth keeping. `display: contents` above
     dissolves .cart-collaterals out of the box tree, which also removes the
     containing block a sticky child would have been constrained by — so the
     card's constraint became the whole grid, and it slid 300px down the page
     and sat ON TOP of the cross-sell row, swallowing clicks on the scroller's
     arrows. Measured: the arrows were painted and visible, and
     elementsFromPoint at their centre returned .cart_totals.

     A sticky totals card earns its keep on a cart of twenty lines. This one
     holds one to three. */
  .woocommerce-cart .cart-collaterals .cart_totals {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    float: none;
  }
  .woocommerce-cart .cart-collaterals .cross-sells {
    grid-column: 1 / -1;
    grid-row: 3;
    width: auto;
    float: none;
  }
  .woocommerce-cart .page-content > .woocommerce > .fw-wc-trust {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

/* ── the totals, as a card ───────────────────────────────────────────────
   The generic `table.shop_table` rules above give every cell a border and
   every header a filled grey band. On a six-row totals table that reads as a
   second dataset competing with the cart itself. Inside the card the table is
   stripped back to what it is: a list of figures, and one that matters. */
.woocommerce-cart .cart_totals {
  background: #fff;
  border: 1px solid var(--wc-hair);
  border-radius: 10px;
  padding: clamp(18px, 2vw, 22px);
}
.woocommerce-cart .cart_totals h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wc-muted);
  margin: 0 0 14px;
}
.woocommerce-cart .cart_totals table.shop_table {
  border: 0;
  margin: 0;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--wc-hair);
  padding: 12px 0;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td { border-top: 0; }
.woocommerce-cart .cart_totals table.shop_table th {
  color: var(--wc-muted);
  font-weight: 600;
  width: 42%;
}
.woocommerce-cart .cart_totals table.shop_table td {
  color: var(--wc-dark);
  font-weight: 600;
  text-align: right;
}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
  border-top: 1px solid var(--wc-dark);
  padding-top: 14px;
}
.woocommerce-cart .cart_totals tr.order-total th { color: var(--wc-dark); font-weight: 700; }
.woocommerce-cart .cart-collaterals .cart_totals tr.order-total .amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--wc-dark);
}
/* "(includes GST)" is the reassurance, not an asterisk — so it is a line of
   its own under the figure rather than a trailing whisper beside it. */
.woocommerce-cart .cart_totals .includes_tax {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wc-muted);
}
.woocommerce-cart .cart_totals .includes_tax .amount { font-size: 12px; font-weight: 600; }

/* The shipping calculator inherits `text-align: right` from the totals cell it
   sits in, which pushed every label, every select and the Update button to the
   right edge and left the dropdown arrow sitting on top of "India". */
.woocommerce-cart .cart_totals .shipping-calculator-form,
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals ul#shipping_method { text-align: left; }
.woocommerce-cart .cart_totals ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .form-row { margin: 0 0 10px; padding: 0; }
.woocommerce-cart .cart_totals .shipping-calculator-form select,
.woocommerce-cart .cart_totals .shipping-calculator-form input,
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container { width: 100%; }
.woocommerce-cart .cart_totals .shipping-calculator-button {
  font-size: 13px;
  color: var(--wc-red);
}
.woocommerce-cart .cart_totals .shipping-calculator-form .button {
  width: 100%;
  margin-top: 2px;
}

/* ── the button that takes the money ─────────────────────────────────────
   Razorpay's Magic Checkout button and WooCommerce's own both land here; the
   gateway hides whichever it is not using. Either way it is the widest, last
   thing in the card. */
.woocommerce-cart .wc-proceed-to-checkout { padding: 16px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout button.checkout-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px 18px;
  font-size: 15px;
  letter-spacing: .02em;
}
.fw-wc-paynote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wc-muted);
}
.fw-wc-paynote .fw-wc-ico { width: 15px; height: 15px; margin-top: 2px; color: var(--wc-muted); }

/* ── the cart table itself ───────────────────────────────────────────────── */
.woocommerce-cart table.cart td.product-name a { font-size: 15px; }
.woocommerce-cart table.cart td.actions {
  background: var(--wc-soft);
  text-align: right;
}
.woocommerce-cart table.cart .quantity input.qty {
  width: 62px;
  padding: 9px 6px;
  text-align: center;
  border: 1px solid var(--wc-hair);
  border-radius: var(--wc-radius);
}
/* Empty cart: stock leaves a lone sentence on a white page. */
.woocommerce-cart .cart-empty {
  font-size: 16px;
  padding: 18px 20px;
}
.woocommerce-cart .return-to-shop { margin-top: 4px; }

/* ── the rest of the kit, in a row that scrolls ──────────────────────────
   Six accessories will not sit in the 1120px column as a grid without either
   shrinking to thumbnails or wrapping into a second row that pushes the trust
   band off the page. A scroller keeps the cards at a size where the picture
   still reads, and puts the decision — "is there more?" — one flick away.
   The arrows come from assets/woo.js; without JavaScript the row still
   scrolls, which is why they are added rather than relied on. */
.woocommerce-cart .cross-sells {
  position: relative;
  margin-top: clamp(30px, 4vw, 46px);
}
.woocommerce-cart .cross-sells > h2 {
  font-size: 20px;
  margin: 0 0 16px;
  padding-right: 96px;
}
.woocommerce-cart .cross-sells ul.products {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  margin: 0;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: #d4d4d4 transparent;
}
.woocommerce-cart .cross-sells ul.products::-webkit-scrollbar { height: 6px; }
.woocommerce-cart .cross-sells ul.products::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 3px;
}
.woocommerce-cart .cross-sells ul.products li.product {
  flex: 0 0 min(228px, 64vw);
  scroll-snap-align: start;
}
.woocommerce-cart .cross-sells ul.products li.product a img { padding: 16px; }
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  min-height: 2.6em;
}
.fw-wc-nav {
  position: absolute;
  top: -4px;
  right: 0;
  display: flex;
  gap: 8px;
}
.fw-wc-nav button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  background: #fff;
  border: 1px solid var(--wc-hair);
  border-radius: 50%;
  color: var(--wc-dark);
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, opacity .14s ease;
}
.fw-wc-nav button:hover:not(:disabled) { border-color: var(--wc-red); color: var(--wc-red); }
.fw-wc-nav button:disabled { opacity: .3; cursor: default; }
.fw-wc-nav svg { width: 15px; height: 15px; }

/* ── the assurances ──────────────────────────────────────────────────────
   Four facts, each traceable to something already published. The band is
   deliberately quiet: no boxes, no badges, no colour but the icons. A cart
   that shouts its guarantees reads like a cart that needs to. */
.fw-wc-trust {
  margin-top: clamp(34px, 5vw, 56px);
  border-top: 1px solid var(--wc-hair);
  padding-top: clamp(26px, 4vw, 38px);
}
.fw-wc-assure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 20px clamp(20px, 3vw, 34px);
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding: 0;
}
/* The chip beside the text cost each of the four columns 50px of measure, and
   at a quarter of a 1120px column that is the difference between a readable
   line and a stack of three words. Above the text instead: the chip still
   marks the item, and the words get the whole column. */
.fw-wc-assure li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
/* A bare 21px stroke icon floating beside a heading reads as a stray glyph.
   Padding plus border-box turns the SVG itself into the chip — no extra
   wrapper in the markup, and the four line up as a set whatever the headings
   below them do. */
.fw-wc-assure .fw-wc-ico {
  box-sizing: border-box;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 9px;
  margin-top: 1px;
  border-radius: 10px;
  background: var(--wc-soft);
  color: var(--wc-red);
}
.fw-wc-assure strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wc-dark);
}
.fw-wc-assure p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wc-muted);
}
.fw-wc-assure a {
  color: var(--wc-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fw-wc-assure a:hover { color: var(--wc-red-hover); }

/* ── the reviews ─────────────────────────────────────────────────────────
   Three real Google reviews, named. The heading says they are reviews of the
   company rather than of the adhesive, because they are.

   The first pass set them as three columns of text inside one flat grey slab,
   and they read as three unrelated fragments rather than three reviews: no
   edge between them, the attributions floating at different depths, and
   "GOOGLE REVIEW" stamped under each name saying what the heading had already
   said. They are cards now — the same white-on-soft panel as the product
   cards — each carrying its own rating, which the source data had all along
   and the first pass threw away. */
.fw-wc-reviews {
  background: var(--wc-soft);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 30px);
}
.fw-wc-reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: clamp(16px, 2vw, 22px);
}
.fw-wc-reviews-head h2 {
  font-size: clamp(16px, 1.6vw, 18px);
  margin: 0;
}
.fw-wc-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: var(--wc-muted);
  white-space: nowrap;
}
.fw-wc-score strong { color: var(--wc-dark); font-size: 15px; font-weight: 800; }
.fw-wc-rating a {
  color: var(--wc-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fw-wc-rating a:hover { color: var(--wc-red-hover); }

/* One star colour, one star size, wherever stars appear. The unfilled ones
   are dimmed rather than dropped so four-of-five and five-of-five occupy the
   same width and the row does not jump. */
.fw-wc-stars {
  color: #e8a33d;
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 1;
}
.fw-wc-stars .fw-wc-dim { color: #d8d0c4; }

.fw-wc-reviews ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fw-wc-reviews li {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--wc-hair);
  border-radius: 10px;
  padding: clamp(16px, 2vw, 20px);
}
.fw-wc-reviews li .fw-wc-stars { margin-bottom: 10px; }
.fw-wc-reviews blockquote {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wc-ink);
  quotes: "\201C" "\201D";
}
.fw-wc-reviews blockquote::before { content: open-quote; }
.fw-wc-reviews blockquote::after { content: close-quote; }
/* The quotes are three different lengths; the names line up at the foot of
   the card rather than trailing whatever the text happened to do. */
.fw-wc-reviews cite {
  display: block;
  margin-top: auto;
  padding-top: 2px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--wc-dark);
}

/* ── the thank-you page ──────────────────────────────────────────────────
   Reached after Razorpay captures the payment, and until now a receipt and
   nothing else: an order number, a table, two addresses. The only sentence
   addressed to the customer was the gateway's own. The markup for what sits
   above that receipt comes from muplugins/fracktal-cart.php.

   Note the headings here are the same `h2` as everywhere else on the page and
   were landing at 34px — "Order details" shouting louder than the fact that
   the payment worked. */
.woocommerce-order .woocommerce-notice--success {
  font-size: 16px;
  line-height: 1.6;
  color: var(--wc-ink);
  margin-bottom: 20px;
}
.woocommerce-order h2 { font-size: 22px; margin: 34px 0 14px; }

/* The order summary: five facts WooCommerce sets as a bare <ul>. */
.woocommerce-order ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 3vw, 38px);
  margin: 0 0 8px;
  padding: 16px clamp(16px, 2vw, 22px);
  background: var(--wc-soft);
  border-radius: 10px;
  border: 0;
  list-style: none;
}
.woocommerce-order ul.woocommerce-order-overview li {
  border: 0;
  margin: 0;
  padding: 0;
  float: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--wc-muted);
}
.woocommerce-order ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wc-dark);
}

.fw-wc-next { margin: 24px 0 8px; }
.fw-wc-next h2 { margin-top: 0; }
.fw-wc-next ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px clamp(20px, 3vw, 34px);
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  counter-reset: none;
}
.fw-wc-next ol li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.fw-wc-step {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wc-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.fw-wc-next ol strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wc-dark);
}
.fw-wc-next ol p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wc-muted);
}
.fw-wc-next a {
  color: var(--wc-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fw-wc-help {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  background: var(--wc-soft);
  border-left: 3px solid var(--wc-red);
  border-radius: var(--wc-radius);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wc-ink);
}
.fw-wc-help .fw-wc-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--wc-red); }

/* ── the fallback checkout ───────────────────────────────────────────────
   No customer is routed through this page — the cart hands off to Razorpay
   Magic Checkout — but it is reachable, and if the gateway is ever down it is
   the only way left to take an order. It was still wearing WooCommerce's
   default lilac on the payment panel, which is the one colour on these pages
   that reads as somebody else's software. */
.woocommerce-checkout #payment {
  background: var(--wc-soft);
  border-radius: 10px;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--wc-hair);
  padding: 16px 18px;
}
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; }
.woocommerce-checkout #payment div.payment_box {
  background: #fff;
  border: 1px solid var(--wc-hair);
  border-radius: var(--wc-radius);
  color: var(--wc-ink);
  font-size: 13.5px;
  line-height: 1.55;
}
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: #fff;
}
.woocommerce-checkout #payment div.form-row { padding: 16px 18px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 13.5px; }
.woocommerce-checkout #payment #place_order { float: none; width: 100%; }
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3 { font-size: 22px; }

/* Below the two-column breakpoint the grid is gone and source order decides,
   and source order puts the cross-sells BETWEEN the cart and its total — so a
   phone showed the table, then six things to buy, and only then the figure and
   the button. The totals come straight after the table; the shelf comes after
   the decision, not in front of it. */
@media (max-width: 899px) {
  .woocommerce-cart .cart-collaterals {
    display: flex;
    flex-direction: column;
  }
  .woocommerce-cart .cart-collaterals .cart_totals {
    order: 1;
    width: 100%;
    float: none;
  }
  .woocommerce-cart .cart-collaterals .cross-sells {
    order: 2;
    width: 100%;
    float: none;
  }
}
@media (max-width: 560px) {
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error { font-size: 13.5px; padding: 12px 14px; }
  .woocommerce-message .button { margin-left: 0 !important; }
  .woocommerce-cart .cross-sells > h2 { font-size: 18px; padding-right: 0; }
  .fw-wc-nav { display: none; }
  /* The cards carry their own edges now, so a phone stacks them as cards —
     the hairline this used to draw between stacked quotes would sit right on
     top of the border below it. */
  .fw-wc-reviews ul { grid-template-columns: 1fr; gap: 12px; }
  .fw-wc-reviews-head h2 { font-size: 16px; }
  .fw-wc-rating { white-space: normal; }
}

/* ── the product page ────────────────────────────────────────────────────
   The markup order comes from muplugins/fracktal-product.php; this is how it
   looks. What it had to fix: a gallery column a third the width of the text
   beside it, two identically-red buy buttons, an unstyled courier widget
   wedged under the price, and a specification table WooCommerce prints as a
   bare two-column list. */
.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px) clamp(28px, 4vw, 56px);
}
@media (min-width: 860px) {
  .woocommerce div.product {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    align-items: start;
  }
  /* NOT sticky — the second time that has bitten on this site today. Sticky
     offset the gallery 92px below the summary inside the same grid row, so the
     row was sized from the summary while the gallery hung past it and its
     thumbnail strip was drawn ON TOP of the tab bar. Measured: gallery
     250..794, tabs starting at 736. A product page is short enough that a
     sticky image buys nothing anyway. */
  .woocommerce div.product .woocommerce-product-gallery {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }
  .woocommerce div.product .summary {
    grid-column: 2;
    grid-row: 1;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
  }
  /* Everything below the fold spans both columns: the tabs, the shelf, and
     anything a plugin hangs off the same hooks. */
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .up-sells,
  .woocommerce div.product .related,
  .woocommerce div.product .fw-wc-trust { grid-column: 1 / -1; }
}

/* the gallery: a bordered panel like every other picture on the site */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
  border: 1px solid var(--wc-hair);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.woocommerce div.product .woocommerce-product-gallery img { width: 100%; }
.woocommerce div.product .flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product .flex-control-thumbs li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  flex: 0 0 72px;
}
.woocommerce div.product .flex-control-thumbs img {
  border: 1px solid var(--wc-hair);
  border-radius: 8px;
  opacity: 1;
  transition: border-color .14s ease;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
  border-color: var(--wc-red);
}
.woocommerce div.product .woocommerce-product-gallery__trigger {
  border: 1px solid var(--wc-hair);
  background: #fff;
  border-radius: 50%;
}

/* the summary */
.woocommerce div.product .product_title {
  font-size: clamp(24px, 2.8vw, 33px);
  margin: 0 0 10px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 26px;
  font-weight: 800;
  color: var(--wc-dark);
  margin: 0 0 16px;
}
.woocommerce div.product p.price del { font-size: 18px; font-weight: 600; }
.woocommerce div.product p.price ins { font-weight: 800; }
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.6;
}
.woocommerce div.product .woocommerce-product-details__short-description ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product .woocommerce-product-details__short-description li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.5;
}
.woocommerce div.product .woocommerce-product-details__short-description li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wc-red);
}

/* ONE primary button. Razorpay's BUY NOW is the faster path and stays red;
   "Add to cart" becomes the secondary it actually is — the two were the same
   colour, the same size and side by side, which is no hierarchy at all. */
.woocommerce div.product form.cart { margin: 18px 0 0; }
.woocommerce div.product form.cart .button[name="add-to-cart"],
.woocommerce div.product form.cart button.single_add_to_cart_button {
  background: #fff !important;
  color: var(--wc-red) !important;
  border: 1.5px solid var(--wc-red);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
  background: var(--wc-soft) !important;
  color: var(--wc-red-hover) !important;
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 66px;
  padding: 12px 6px;
  text-align: center;
  border: 1px solid var(--wc-hair);
  border-radius: var(--wc-radius);
}

/* the three assurances under the buttons */
.fw-wc-psnote {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--wc-hair);
}
.fw-wc-psnote li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--wc-muted);
}
.fw-wc-psnote li:last-child { margin-bottom: 0; }
.fw-wc-psnote strong { color: var(--wc-dark); font-weight: 700; }
.fw-wc-psnote a { color: var(--wc-red); text-decoration: underline; text-underline-offset: 2px; }
.fw-wc-psnote .fw-wc-ico {
  box-sizing: border-box;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--wc-red);
}

/* The SKU and category line ran straight on from the last assurance with no
   space at all, so "Price includes 18% GST" and "SKU: PS-STD-50" read as one
   run-on sentence. It is metadata; it looks like metadata now. */
.woocommerce div.product .product_meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--wc-hair);
  font-size: 12.5px;
  color: var(--wc-muted);
}
.woocommerce div.product .product_meta a { color: var(--wc-muted); text-decoration: underline; }
.woocommerce div.product .product_meta a:hover { color: var(--wc-red); }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 4px; }

/* Shiprocket's pincode check, now sitting under the buy button where the
   question occurs to somebody, and dressed like the rest of the page. */
.woocommerce div.product .summary input[id*="pincode"],
.woocommerce div.product .summary input[name*="pincode"],
.woocommerce div.product .summary input[placeholder*="Pincode"],
.woocommerce div.product .summary input[placeholder*="PIN"] {
  max-width: 220px;
  padding: 11px 13px;
  border: 1px solid var(--wc-hair);
  border-radius: var(--wc-radius);
  font-size: 14px;
}
.woocommerce div.product .summary button[id*="pincode"],
.woocommerce div.product .summary button[class*="pincode"],
.woocommerce div.product .summary a[class*="pincode"] {
  background: transparent !important;
  color: var(--wc-red) !important;
  border: 1px solid var(--wc-hair);
  font-size: 13px !important;
  padding: 11px 16px !important;
}

/* the specification table */
.woocommerce div.product .woocommerce-product-attributes {
  width: 100%;
  border: 1px solid var(--wc-hair);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes td {
  padding: 13px 16px;
  border: 0;
  border-top: 1px solid var(--wc-hair);
  font-size: 14px;
  text-align: left;
}
.woocommerce div.product .woocommerce-product-attributes tr:first-child th,
.woocommerce div.product .woocommerce-product-attributes tr:first-child td { border-top: 0; }
.woocommerce div.product .woocommerce-product-attributes th {
  width: 38%;
  background: var(--wc-soft);
  color: var(--wc-muted);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.woocommerce div.product .woocommerce-product-attributes td { color: var(--wc-dark); font-weight: 600; }
.woocommerce div.product .woocommerce-product-attributes td p { margin: 0; }

/* the shelf, as a scroller — same object as the cart's */
.woocommerce div.product .up-sells { position: relative; margin-top: clamp(28px, 4vw, 44px); }
.woocommerce div.product .up-sells > h2 { font-size: 20px; margin: 0 0 16px; padding-right: 96px; }
.woocommerce div.product .up-sells ul.products {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  margin: 0;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: #d4d4d4 transparent;
}
.woocommerce div.product .up-sells ul.products::-webkit-scrollbar { height: 6px; }
.woocommerce div.product .up-sells ul.products::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 3px;
}
.woocommerce div.product .up-sells ul.products li.product {
  flex: 0 0 min(228px, 64vw);
  scroll-snap-align: start;
}
.woocommerce div.product .up-sells ul.products li.product a img { padding: 16px; }
.woocommerce div.product .up-sells ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  min-height: 2.6em;
}
.woocommerce div.product .up-sells .fw-wc-nav { top: -4px; }

@media (max-width: 560px) {
  .woocommerce div.product .up-sells > h2 { font-size: 18px; padding-right: 0; }
  .woocommerce div.product .flex-control-thumbs li { flex: 0 0 58px; }
}