/* WooCommerce pages, wearing the brand.
   ==========================================================================
   /cart/, /checkout/ and /my-account/ render through WooCommerce's CLASSIC
   shortcodes — [woocommerce_cart] and friends — not the newer cart blocks.
   Classic markup has stable, published class names, so these pages can be
   restyled precisely without overriding a single PHP template.

   WHY CSS AND NOT TEMPLATE OVERRIDES
       A copied template in flatsome-child/woocommerce/ carries the WooCommerce
       version it was copied from and goes stale the moment WooCommerce ships a
       new one — that is what the "outdated templates" warning in System Status
       is, and every override becomes a file somebody must re-diff at each
       update, forever. CSS never rots that way, so structure stays
       WooCommerce's and only appearance is ours.

   THREE THINGS THIS SHEET IS MOSTLY UNDOING
       1. site.bundle.css sets a bare `table { width:100%; min-width:560px }`
          (blocks.css). On the static site every table sits inside a
          `.table-wrap` that scrolls, so that minimum is deliberate. There is
          no such wrapper here, so it forced the cart totals to 560px inside a
          318px sidebar and pushed every rupee amount out of sight. Measured,
          not guessed.
       2. The same sheet centres `th, td`. Correct for the site's rate cards,
          wrong for a cart where names read left and figures read right.
       3. Flatsome paints `.button.primary` dark green over dark green text, so
          "Continue shopping" rendered invisible — same colour, both properties.

   Loaded ONLY on WordPress-served pages, by chrome-bridge.php. Deliberately
   not folded into site.bundle.css: none of these selectors match anything on
   the 80 static pages. */

/* ── undo the leaked element rules ──────────────────────────────────────── */
.woocommerce table,
.woocommerce table.shop_table,
.woocommerce table.shop_table_responsive,
.woocommerce .shipping__table {
  min-width: 0;
  width: 100%;
  border-collapse: collapse;
}
.woocommerce th,
.woocommerce td {
  text-align: left;
}
/* Figures read right and line up as a column. */
.woocommerce .product-price,
.woocommerce .product-subtotal,
.woocommerce .cart_totals td,
.woocommerce .order-total td,
.woocommerce-checkout #order_review td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── page shell ─────────────────────────────────────────────────────────── */
.woocommerce,
.woocommerce-account,
.cart-container,
.account-container {
  font-family: var(--font-body);
  color: var(--fg);
}
.woocommerce-account h1,
.checkout-page-title h1,
.my-account-header h1 {
  font-family: var(--font-display);
  letter-spacing: 0;
}

/* ── cart: line items ───────────────────────────────────────────────────── */
/* The wide table scrolls inside its own wrapper rather than pushing the page
   sideways — the contract `.table-wrap` enforces on the static site. */
.woocommerce .cart-wrapper { overflow-x: auto; }

.woocommerce table.shop_table th {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--awe-tracking-data);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.woocommerce table.shop_table td {
  padding: var(--space-4);
  border-top: 1px solid var(--border-soft);
  border-bottom: 0;
  vertical-align: middle;
}
.woocommerce table.shop_table .product-name a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
}
.woocommerce table.shop_table .product-name a:hover { color: var(--accent); }
.woocommerce table.shop_table .product-thumbnail img {
  width: 64px;
  height: auto;
  display: block;
}
.woocommerce .cart_item .product-remove a { color: var(--muted); }
.woocommerce .cart_item .product-remove a:hover { color: var(--danger); }

/* The actions row is a row of controls. It must stay a TABLE CELL: making it
   a flex container took it out of the table's column model and the browser
   then recomputed every column width around a 162px cell, which is what threw
   the product name onto three lines. Spacing comes from the buttons instead. */
.woocommerce td.actions { padding: var(--space-4); }
.woocommerce td.actions .button { margin: 0 var(--space-3) 0 0; }
.woocommerce td.actions .button:last-child { margin-right: 0; }
/* The line-item table reads better when the name has room to sit on one line.
   Above phone widths only: at 390px a 11rem minimum plus the thumbnail and
   remove columns made the table 419px inside a 360px wrapper, so the quantity
   stepper was cut in half at rest. */
@media (min-width: 550px) {
  .woocommerce table.cart td.product-name { min-width: 11rem; }
  .woocommerce table.cart td.product-remove { width: 2.5rem; }
  .woocommerce table.cart td.product-thumbnail { width: 5rem; }
}

/* Someone added `min-height: 70vh` to the cart page in wp-admin's custom CSS.
   The intent is right — it stops the footer riding up under an empty cart —
   but 70vh is 840px on a laptop, so a cart with something in it got a whole
   blank screen between the totals and the footer. Kept, and retuned: 40vh is
   enough to hold the footer down when the cart is empty and never reaches far
   enough to add space when it is not.
   Their rule lives in an inline <style> that WordPress prints AFTER enqueued
   stylesheets, so matching their specificity was not enough — later source
   won. The body class raises this one class higher, which is the smallest
   honest way past it. */
body.woocommerce-cart .cart-container.container.page-wrapper.page-checkout,
body.woocommerce-checkout .cart-container.container.page-wrapper.page-checkout {
  min-height: 40vh;
}

/* Flatsome renders the "Cart totals" caption as a <th class="product-name">
   inside a header-only table, not as a heading — which is why styling h2 did
   nothing. It is the panel's label, so it gets the same uppercase data-font
   eyebrow as COUPON below it. */
.woocommerce .cart_totals th.product-name,
.woocommerce .cart-sidebar th.product-name {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--awe-tracking-data);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0 0 var(--space-4);
  border-bottom: 0;
}

/* ── cart: the totals panel ─────────────────────────────────────────────── */
/* ONE box, not two. `.cart-sidebar` is the panel; `.cart_totals` sits inside
   it and previously drew a second border and a second padding inside the
   first, which is what read as a box inside a box. */
.woocommerce .cart-sidebar {
  border: 1px solid var(--border);
  padding: var(--space-6);
  background: transparent;
}
.woocommerce .cart_totals {
  border: 0;
  padding: 0;
  background: transparent;
}
/* Doubled up on .cart-sidebar because Flatsome's own h2 rule was winning and
   leaving this in sentence case while every other panel label on the site is
   an uppercase data-font eyebrow. */
.woocommerce .cart-sidebar .cart_totals h2,
.woocommerce .cart_totals h2 {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--awe-tracking-data);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 var(--space-4);
}
/* An empty after-cart region was still holding its padding, leaving a long
   blank stretch between the cart and the footer. */
.woocommerce .cart-footer-content:empty,
.woocommerce .after-cart-content:empty { display: none; }
.woocommerce .cart_totals table th {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 400;
  padding: var(--space-3) 0;
  border-bottom: 0;
  white-space: nowrap;
}
.woocommerce .cart_totals table td {
  padding: var(--space-3) 0;
  border-top: 0;
  font-size: var(--text-sm);
}
.woocommerce .cart_totals tr { border-bottom: 1px solid var(--border-soft); }
.woocommerce .cart_totals tr:last-child { border-bottom: 0; }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--fg);
  padding-top: var(--space-4);
}
/* WooCommerce nests a table inside the shipping row; it must not inherit the
   outer table's rules or it draws a grid inside a row. */
.woocommerce .cart_totals table.shipping__table th,
.woocommerce .cart_totals table.shipping__table td,
.woocommerce .shipping__table th,
.woocommerce .shipping__table td { padding: 0; border: 0; }
.woocommerce .woocommerce-shipping-destination { display: none; }
.woocommerce .wc-proceed-to-checkout { margin-top: var(--space-5); padding: 0; }

/* ── coupon ─────────────────────────────────────────────────────────────── */
.woocommerce .ux-cart-coupon { margin-top: var(--space-5); }
/* The heading is NOT a flex item beside the field — it belongs above it. */
.woocommerce .coupon .widget-title,
.woocommerce .coupon h3 {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--awe-tracking-data);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 var(--space-3);
  text-align: left;
}
/* The button carries Flatsome's `.expand`, which is
   `padding: 0 !important; width: 100% !important` — so its label had nothing
   but the 92px it needed to set "Apply coupon", and read as cramped. Rather
   than answer !important with !important, the COLUMN gets the width: `expand`
   then fills it, which is what the class is for. */
.woocommerce .coupon {
  display: grid;
  grid-template-columns: 1fr minmax(8.5rem, auto);
  gap: var(--space-3);
  align-items: center;
}
.woocommerce .coupon .widget-title,
.woocommerce .coupon h3,
.woocommerce .coupon label { grid-column: 1 / -1; }
.woocommerce .coupon .input-text { width: 100%; margin: 0; }
/* Flatsome's .widget-title carries a 3px bottom border. In a panel that
   already rules between its rows, that read as a stray line under the word
   COUPON rather than as a heading. */
.woocommerce .coupon .widget-title,
.woocommerce .coupon h3 { border-bottom: 0; padding-bottom: 0; }

/* ── buttons ────────────────────────────────────────────────────────────── */
/* Height, not just radius, is what made these read as ovals: a 9999px radius
   on a 73px-tall, 106px-wide button is an ellipse. Fixing the height fixes
   the shape, and the pill then matches the buttons on the rest of the site. */
/* `:not(.is-outline)` matters. Flatsome marks "Continue shopping" as
   .is-outline — an outline button by its own convention, and the theme's own
   CSS colours its TEXT the same dark green as this rule was painting its
   BACKGROUND. The result was dark green on dark green: a button with an
   invisible label. Excluding outline buttons here fixes it by agreeing with
   the theme rather than out-specifying it. */
.woocommerce .button:not(.is-outline),
.woocommerce a.button:not(.is-outline),
.woocommerce button.button:not(.is-outline),
.woocommerce input.button:not(.is-outline),
.woocommerce .woocommerce-Button:not(.is-outline),
.woocommerce-account .button:not(.is-outline) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  height: auto;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--fg);
  background: var(--fg);
  /* Flatsome paints .button.primary's text the same green as its background,
     so this is stated at matching specificity rather than left to inherit. */
  color: var(--bg);
  transition: opacity var(--motion-fast) var(--ease-standard);
}
.woocommerce .button.primary:not(.is-outline),
.woocommerce a.button.primary:not(.is-outline),
.woocommerce button.button.primary:not(.is-outline) {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
/* Outline buttons keep the theme's shape and colour, and take only the
   geometry that makes every button on these pages the same height. */
.woocommerce .button.is-outline,
.woocommerce a.button.is-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  border-radius: var(--radius-pill);
  background: transparent;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .woocommerce-Button:hover { opacity: 0.85; color: var(--bg); }

/* A secondary action should not compete with the primary one beside it. */
.woocommerce .button-continue-shopping,
.woocommerce a.button-continue-shopping,
.woocommerce button[name="update_cart"] {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.woocommerce .button-continue-shopping:hover,
.woocommerce a.button-continue-shopping:hover,
.woocommerce button[name="update_cart"]:hover {
  color: var(--fg);
  border-color: var(--fg);
  opacity: 1;
}
/* "Apply coupon" is a secondary action and must be stated HERE, after the
   generic button rules rather than up in the coupon section: `.coupon .button`
   and `.woocommerce button.button:not(.is-outline)` are close enough in
   specificity that source order decides, and the generic rule was winning —
   which is why the button stayed solid dark green, competing with the one
   orange button the page exists for. `.is-form` also zeroes its horizontal
   padding, squeezing the label into 92px. */
.woocommerce .coupon .button,
.woocommerce .coupon button.button,
.woocommerce form.ux-cart-coupon button.button {
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.woocommerce .coupon .button:hover,
.woocommerce .coupon button.button:hover,
.woocommerce form.ux-cart-coupon button.button:hover {
  color: var(--fg);
  border-color: var(--fg);
  background: transparent;
  opacity: 1;
}

/* WooCommerce disables Update cart until a quantity changes. It looked
   identical to an enabled button, which is a control that lies. */
.woocommerce button[name="update_cart"]:disabled,
.woocommerce button.button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The one button on the page that is the point of the page. */
.woocommerce .checkout-button,
.woocommerce a.checkout-button,
.woocommerce #place_order,
.woocommerce button#place_order {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  width: 100%;
  min-height: 52px;
  font-size: var(--text-base);
  font-weight: 600;
}
.woocommerce .checkout-button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
  opacity: 1;
}

/* ── form fields ────────────────────────────────────────────────────────── */
.woocommerce .woocommerce-Input,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.woocommerce .input-text {
  width: 100%;
  min-height: 46px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg);
  /* A field must read as a field. On the cream ground a cream fill with a
     faint border read as a solid block, not something you can type into. */
  background: var(--awe-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  box-shadow: none;
  margin: 0;
}
.woocommerce .woocommerce-Input:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.woocommerce .form-row,
.woocommerce-account .form-row { margin: 0 0 var(--space-5); }
.woocommerce .form-row label,
.woocommerce-account label {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--awe-tracking-data);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 var(--space-2);
  display: block;
  text-align: left;
}
.woocommerce .required { color: var(--danger); border: 0; }
/* Checkbox labels sit beside their box, not above it. */
.woocommerce .woocommerce-form-login__rememberme,
.woocommerce label.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* ── my account ─────────────────────────────────────────────────────────── */
/* Two panels side by side must be the same height, or the page looks like it
   was assembled rather than designed. */
.woocommerce-account .col2-set.row { align-items: stretch; }
.woocommerce-account .col2-set > .col { display: flex; }
.woocommerce-account .account-login-inner,
.woocommerce-account .account-register-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  padding: var(--space-6);
  /* Forms read left. Centring labels and fields made a login page look like a
     landing page, and made every label float away from the box it belongs to. */
  text-align: left;
}
.woocommerce-account .account-login-inner h3,
.woocommerce-account .account-register-inner h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  margin: 0 0 var(--space-5);
}
/* Everything in these panels reads from the left. Flatsome centres the form
   rows, which left the submit button and the lost-password link floating in
   the middle while every label above them started at the left edge — the
   inconsistency read as unfinished rather than as a choice.
   `__submit` is a class on the BUTTON, not on its wrapping <p>, so aligning
   it means aligning the row's text, not the button's flex box. */
.woocommerce-account .woocommerce-form,
.woocommerce-account .woocommerce-form .form-row,
.woocommerce-account .woocommerce-form p { text-align: left; }
.woocommerce-account .woocommerce-LostPassword {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  text-align: left;
}
.woocommerce-account .woocommerce-LostPassword a { color: var(--accent); }
.woocommerce-account .woocommerce-privacy-policy-text {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.woocommerce-account .woocommerce-privacy-policy-text p { margin: 0; }

/* The logged-in dashboard's side nav: a list of destinations, so it reads as
   one rather than as a run of underlined links. */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
}
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border-soft); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--fg);
  text-decoration: none;
  font-size: var(--text-sm);
}
.woocommerce-MyAccount-navigation li a:hover { color: var(--accent); }
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--accent);
  font-weight: 600;
}

/* ── the logged-in dashboard ────────────────────────────────────────────── */
/* Flatsome ships this as a centred greeting over three plain #ddd rectangles
   with centred labels — the only page on the site that centres its body text,
   and the only one whose cards are drawn in a grey that appears nowhere else
   in the brand. Everything below puts it back on the site's own axis, type
   and palette. */

/* The greeting read as a banner: 20px, centred, over a left-aligned nav. */
.woocommerce-account .woocommerce-MyAccount-content > p {
  text-align: left;
  font-size: var(--text-base);
  max-width: var(--awe-measure);
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

/* The three destinations. A grid rather than floats with a 10px right margin,
   so they stay equal and the gap is stated once; auto-fit means they drop to
   one column on a phone without a second rule. */
.woocommerce ul.dashboard-links,
.woocommerce-account ul.dashboard-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
/* The grid gave each card a 279px track and the theme still sized the items
   to their text — 93px cards sitting at the left edge of three wide columns,
   with "Account details" wrapping inside its own box. Stated rather than
   inherited, so the card is the cell. */
.woocommerce-account ul.dashboard-links li {
  margin: 0;
  width: 100%;
  max-width: none;
  float: none;
  justify-self: stretch;
}
.woocommerce-account ul.dashboard-links li a {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-align: left;
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.woocommerce-account ul.dashboard-links li a:hover {
  border-color: var(--fg);
  color: var(--accent);
}

/* The side nav's links were painted rgba(18,18,18,0.85) — a near-black that
   belongs to no part of this palette. Measured, not guessed. */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  color: var(--fg);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: var(--awe-tracking-data);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--accent);
  font-weight: 600;
}

/* The account holder, beside their name rather than floating above it. */
.woocommerce-account .account-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
  margin: 0 0 var(--space-4);
}
.woocommerce-account .account-user img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0;
  flex: none;
}

/* Flatsome's `.col-border` draws a grey border-right down the nav column at
   x=415 — one pixel from the nav list's own brand border at x=414. Two rules
   in two different greys, a pixel apart, reading as a rendering fault. The
   nav's border does the job. */
.woocommerce-account .col-border { border-right: 0; }
.woocommerce-account .row-divided > .col + .col,
.woocommerce-account .row.row-divided > .col + .col { border-left: 0; }

/* ── after paying: the pay page and the thank-you page ──────────────────── */
/* Both render WooCommerce's `ul.order_details` — Order number, Date, Total,
   Payment method — and both were showing it as a bulleted list with the
   markers stranded at the far left while the text sat centred 700px away,
   because the theme centres body text on these templates. Reported by the
   client, 2026-09-03: "make sure all the text is aligned properly and it
   doesn't look so crap."
   These are the two pages a customer sees immediately after handing over
   money, so they are worth getting right. Same panel as the cart totals. */
body.woocommerce-order-pay .woocommerce,
body.woocommerce-order-received .woocommerce,
body.woocommerce-checkout .woocommerce-order { text-align: left; }

/* The confirmation letterhead: the lockup, then what the order pays for.
   Emitted by wordpress/order-confirmation.php above everything WooCommerce
   prints. Asked for by the client, 2026-09-03. The rule under it is the seam
   between what the brand says and what the transaction says. The charge
   notice and the order figures follow it. */
/* Centred to the page, on the client's instruction of 2026-09-03. The blocks
   below it stay left-aligned: this reads as a letterhead above a document,
   which is why the rule sits between them. */
.awe-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--awe-measure);
  margin: 0 auto var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
/* Width-led, because this is the full lockup and its tagline is the first
   thing to become unreadable when the artwork shrinks: give it every pixel
   available and cap it, rather than fixing a height. 1200x566 artwork, so
   420px wide is 198px tall, which is what the element's attributes say.
   No smaller cut at phone widths on purpose. Shrinking it further is what
   kills the tagline, so it takes the full column instead. */
.awe-confirm-mark {
  display: block;
  width: min(420px, 100%);
  height: auto;
}
/* text-align is stated here, on the paragraph itself, rather than left to
   inheritance from .awe-confirm. site.css carries a sitewide
   `* { text-align: center }`, and a rule matching an element directly beats
   an inherited value however specific the ancestor's selector is, so an
   ancestor cannot be trusted to set this either way. */
.awe-confirm-note {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--fg);
  text-align: center;
  /* Centred copy shows a ragged last line badly; balance evens the rag out. */
  text-wrap: balance;
}
@media (max-width: 549px) {
  .awe-confirm-note { font-size: var(--text-base); }
}

.woocommerce ul.order_details,
.woocommerce ul.woocommerce-order-overview {
  list-style: none;
  max-width: 32rem;
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border);
  text-align: left;
}
.woocommerce ul.order_details li,
.woocommerce ul.woocommerce-order-overview li {
  /* label left, value right — the shape every other figure on the site takes */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm);
  color: var(--muted);
  text-transform: none;
}
.woocommerce ul.order_details li:first-child { padding-top: 0; }
.woocommerce ul.order_details li:last-child,
.woocommerce ul.woocommerce-order-overview li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.woocommerce ul.order_details li strong,
.woocommerce ul.woocommerce-order-overview li strong {
  color: var(--fg);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Razorpay emits `<button id="btn-razorpay">Pay Now</button>` and
   `<button id="btn-razorpay-cancel">Cancel</button>` — bare buttons carrying
   NO class at all (woo-razorpay.php:~1740), which is why every `.button` rule
   on the site missed them and they rendered as two words of plain text at the
   moment of payment. Addressed by id, which is what the plugin gives us. */
#btn-razorpay,
#btn-razorpay-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}
#btn-razorpay {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-on);
}
#btn-razorpay:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-on);
}
#btn-razorpay-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  margin-left: var(--space-3);
}
#btn-razorpay-cancel:hover { border-color: var(--fg); color: var(--fg); }

/* Section headings on the thank-you page. */
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title,
.woocommerce .woocommerce-order-details h2,
.woocommerce .woocommerce-customer-details h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  margin: var(--space-8) 0 var(--space-4);
}
.woocommerce .woocommerce-thankyou-order-received,
.woocommerce .woocommerce-notice--success {
  font-size: var(--text-lg);
  color: var(--fg);
  text-align: left;
  max-width: var(--awe-measure);
  margin: 0 0 var(--space-5);
}
.woocommerce .woocommerce-customer-details address {
  text-align: left;
  border: 1px solid var(--border);
  padding: var(--space-5);
  font-style: normal;
  max-width: 32rem;
  line-height: var(--leading-body);
}

/* ── the forest confirmation page: what must NOT invert ─────────────────── */
/* `body.woocommerce-order-received` now carries the forest surface tokens
   (see variables.css), so every rule in this sheet re-colours itself for the
   dark ground. Two things must not follow it: a field keeps a light fill, so
   its text has to stay dark, and the price figures should read as brightly as
   the labels beside them. */
body.woocommerce-order-received .input-text,
body.woocommerce-order-received input[type="text"],
body.woocommerce-order-received input[type="email"],
body.woocommerce-order-received input[type="tel"],
body.woocommerce-order-received textarea,
body.woocommerce-order-received select { color: var(--awe-forest); }
body.woocommerce-order-received .woocommerce-Price-amount,
body.woocommerce-order-received .woocs_price_code { color: var(--fg); }

/* ── notices ────────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: transparent;
  color: var(--fg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
}
.woocommerce-error { border-left-color: var(--danger); }

/* ── the two columns read as a pair ─────────────────────────────────────── */
/* The line items sat as a bare table beside a bordered sidebar: one column
   framed, the other not. That asymmetry is most of why the page looked
   assembled rather than laid out. Same border, same padding, so they read as
   two panels. */
.woocommerce .woocommerce-cart-form {
  border: 1px solid var(--border);
  padding: var(--space-6);
}
/* The panel's padding is now the page's left margin for this table, so the
   outer cells must not add a second inset on top of it — otherwise the
   PRODUCT column starts 16px further in than the panel edge it sits under. */
.woocommerce table.shop_table th:first-child,
.woocommerce table.shop_table td:first-child { padding-left: 0; }
.woocommerce table.shop_table th:last-child,
.woocommerce table.shop_table td:last-child { padding-right: 0; }
.woocommerce table.shop_table thead th { padding-top: 0; }
/* The actions row is the panel's last element: its top rule divides the items
   from the controls, and nothing should sit below it inside the frame. */
.woocommerce td.actions { padding: var(--space-5) 0 0; text-align: left; }

/* Flatsome draws its own divider between the grid columns. Measured at
   x=824 against the sidebar's border at x=855 — two parallel verticals 31px
   apart, which reads as a mistake rather than as structure. The panel edges
   do this job now. */
.woocommerce.row.row-divided > .col + .col,
.woocommerce .row.row-divided > .col + .col { border-left: 0; }

/* ── the quantity stepper ───────────────────────────────────────────────── */
/* Flatsome marks the − and + as `input.button.is-form`, so the button rules
   above caught them and painted two solid pills: a 145×66 block that was the
   loudest thing on the page — louder than "Proceed to checkout", which is the
   one button that matters. A stepper is a quiet control. One bordered
   capsule, three parts, the same 46px height as every other control here. */
.woocommerce .quantity {
  display: inline-flex;
  /* Centred against stated heights, not stretched. `align-items: stretch` left
     the − at 39px and the number at 24px inside a 46px capsule: the parts are
     inputs, and their intrinsic height won. */
  align-items: center;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--awe-white);
}
.woocommerce .quantity input.button,
.woocommerce .quantity .button,
.woocommerce .quantity .ux-quantity__button {
  width: 40px;
  min-width: 40px;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-size: var(--text-base);
  line-height: 1;
}
.woocommerce .quantity input.button:hover,
.woocommerce .quantity .button:hover {
  background: var(--surface);
  color: var(--accent);
  opacity: 1;
}
.woocommerce .quantity input.qty {
  width: 46px;
  min-width: 46px;
  height: 44px;
  min-height: 44px;
  line-height: 44px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}
/* The capsule already has an outline; a focus ring drawn on a cell that only
   has two borders paints an L, not a ring. Focus lands on the capsule. */
.woocommerce .quantity input.qty:focus {
  border-color: var(--border);
  box-shadow: none;
}
.woocommerce .quantity:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* ── undoing a stray !important from the site's own custom CSS ──────────── */
/* Two rules in the theme's custom CSS read, in effect:
 *
 *     #wpcf7-f1633-p1634-o1 input[type="email"],
 *     input[type="number"],        <- not scoped to anything
 *     input[type="text"], input[type="tel"], … textarea
 *         { margin-bottom: 20px !important }
 *
 * A comma restarts the selector, so only the first entry is scoped to that
 * contact form. Every other one is global: every text field, number field and
 * textarea on the site carries a 20px bottom margin it never asked for.
 *
 * On the quantity stepper that was visible. `align-items: center` centres a
 * flex item including its margins, so a 20px bottom margin lifted the number
 * box by exactly 10px — measured at centre_y 280.7 against 290.7 for the
 * − and + beside it, and overflowing the top of the capsule. Reported by the
 * client, 2026-09-03: "the quantity box seems a little lopsided".
 *
 * !important is answered with !important here because there is no other way
 * past it, and it is confined to the three WooCommerce pages this sheet loads
 * on — the client's rule is left standing everywhere else, since other pages
 * may lean on it. The real fix is to scope those two selectors properly in
 * wp-admin, which is the client's own CSS to change. */
.woocommerce .quantity input.qty,
.woocommerce .quantity input[type="number"] {
  margin: 0 !important;
}
/* The same leak was adding 20px under the coupon field and under every
   checkout field, where the row's own margin already does the spacing. */
.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea {
  margin-bottom: 0 !important;
}

/* ── the shipment row ───────────────────────────────────────────────────── */
/* The row's <td> is right-aligned, but WooCommerce nests the chosen method in
   a <ul> that Flatsome centres — so "Free shipping" floated at x=1051 while
   every other figure in the panel sat flush at x=1290. The same list's
   margins made the row 88px tall against 43px for its neighbours. */
.woocommerce .cart_totals .shipping__list,
.woocommerce .cart_totals .shipping__list li,
.woocommerce .cart_totals .shipping__list label,
.woocommerce .cart_totals .shipping__table td {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
/* Shipping is fixed — India, free — so the rate calculator has nothing to
   calculate and renders as an empty form. It was still spending a 7px top
   margin inside the row. */
.woocommerce .cart_totals .woocommerce-shipping-calculator { display: none; }
/* And the method sets on a 28px line inside a panel whose every other row sets
   on 19px — the last of the shipment row's extra height. */
.woocommerce .cart_totals .shipping__list li { line-height: var(--leading-body); }

/* ── the empty cart ─────────────────────────────────────────────────────── */
/* WooCommerce renders "Your cart is currently empty" as a NOTICE — the same
   component as a declined payment — and Flatsome lets it run the full 1190px
   with an accent rule down its left edge. "Return to shop" then centres
   itself inside a 688px paragraph beneath it, so the message sat on one axis
   and the button on another, 250px apart, under what read as an alarm.
   An empty cart is a state, not a warning. One centred column, both on the
   same axis, with room around it — this is the only thing on the page. */
body.woocommerce-cart .wc-empty-cart-message,
body.woocommerce-cart .woocommerce p.return-to-shop {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
body.woocommerce-cart .wc-empty-cart-message .woocommerce-info,
body.woocommerce-cart .wc-empty-cart-message .message-container {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-lg);
  text-align: center;
}
body.woocommerce-cart .woocommerce p.return-to-shop {
  margin-top: var(--space-6);
  margin-bottom: 0;
}
body.woocommerce-cart .woocommerce > .text-center {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

/* ── narrow screens ─────────────────────────────────────────────────────── */
@media (max-width: 849px) {
  .woocommerce-account .col2-set > .col { display: block; }
  .woocommerce-account .account-register-inner { margin-top: var(--space-5); }
  .woocommerce .cart-sidebar { margin-top: var(--space-6); }
  .woocommerce td.actions .button { flex: 1 1 auto; }
}
@media (max-width: 549px) {
  /* At 390px the row divided as 12 / 74 / 80 / 152: the stepper took nearly
     half the width and the product name was left with 80px, which broke
     "Chota Bheem - A4" across three lines. The name is the thing being
     bought, so it gets the slack — `width: 100%` on one cell of a table is
     how you say "absorb what the others don't need" — and the stepper gives
     some back. */
  .woocommerce table.cart td.product-name { width: 100%; }
  .woocommerce table.cart td.product-name a,
  .woocommerce table.cart td.product-name .show-for-small {
    display: block;
    text-align: left;
  }
  .woocommerce table.cart td.product-thumbnail {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .woocommerce .quantity { height: 44px; }
  .woocommerce .quantity input.button,
  .woocommerce .quantity .button,
  .woocommerce .quantity .ux-quantity__button {
    width: 34px;
    min-width: 34px;
    height: 42px;
    min-height: 42px;
  }
  .woocommerce .quantity input.qty {
    width: 38px;
    min-width: 38px;
    height: 42px;
    min-height: 42px;
    line-height: 42px;
  }
  .woocommerce .coupon { grid-template-columns: 1fr; }
  .woocommerce .coupon .button { width: 100%; }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td { padding: var(--space-3); }
  .woocommerce .cart-sidebar,
  .woocommerce .woocommerce-cart-form,
  .woocommerce-account .account-login-inner,
  .woocommerce-account .account-register-inner { padding: var(--space-5); }
}