/* ==========================================================================
   WOOCOMMERCE — cart, checkout, account
   Split out of woocommerce.css: these rules can only ever match on cart, checkout and account pages,
   and the homepage was carrying all of them. See inc/enqueue.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cart page
   ------------------------------------------------------------------------ */
.woocommerce-cart .shop_table { border: var(--g1-border); border-radius: var(--g1-radius-sm); }
.woocommerce table.shop_table th {
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  letter-spacing: var(--g1-tracking-wider);
  text-transform: uppercase;
  color: var(--g1-text-subtle);
  padding: var(--g1-space-4);
  border-bottom: var(--g1-border);
  text-align: left;
}
.woocommerce table.shop_table td { padding: var(--g1-space-4); border-bottom: var(--g1-border); }
.woocommerce table.shop_table .product-thumbnail img { width: 72px; border-radius: var(--g1-radius-sm); }
.woocommerce .cart_totals { background: var(--g1-surface); border: var(--g1-border); border-radius: var(--g1-radius-sm); padding: var(--g1-space-5); }

/* --------------------------------------------------------------------------
   Checkout
   ------------------------------------------------------------------------ */
.woocommerce form .form-row { display: grid; gap: var(--g1-space-2); margin-bottom: var(--g1-space-4); }
.woocommerce form .form-row label {
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-semibold);
  letter-spacing: var(--g1-tracking-wide);
  text-transform: uppercase;
  color: var(--g1-text-muted);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
  width: 100%;
  min-height: 50px;
  padding: var(--g1-space-3) var(--g1-space-4);
  background: var(--g1-bg);
  border: var(--g1-border-strong);
  border-radius: var(--g1-radius-sm);
  color: var(--g1-text);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--g1-text); line-height: 26px; }
.select2-dropdown { background: var(--g1-bg); border: var(--g1-border-strong); color: var(--g1-text); }
.select2-container--default .select2-results__option--highlighted { background: var(--g1-red); }

#order_review, .woocommerce-checkout-review-order {
  background: var(--g1-surface-2);
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
  padding: var(--g1-space-5);
}
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: var(--g1-border); padding: 0 0 var(--g1-space-4); }
.woocommerce-checkout #payment div.payment_box { background: var(--g1-bg); border: var(--g1-border); border-radius: var(--g1-radius-sm); font-size: var(--g1-text-body-s); color: var(--g1-text-muted); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Checkboxes and radios.
   WooCommerce ships these at the browser default 13x13, which is far below a
   usable touch target — the "Remember me" box on the login form was the worst
   offender. The control itself is scaled up and its label is given enough
   height that the whole row is tappable. */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"],
.g1-field input[type="checkbox"],
.g1-field input[type="radio"] {
  appearance: auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--g1-red);
  cursor: pointer;
}

.woocommerce label.woocommerce-form__label-for-checkbox,
.woocommerce .woocommerce-form__label-for-checkbox,
.woocommerce-form-login__rememberme,
.woocommerce p.form-row label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--g1-space-3);
  min-height: 44px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--g1-font-body);
  font-size: var(--g1-text-body-s);
  color: var(--g1-text-muted);
}

/* --------------------------------------------------------------------------
   Account
   ------------------------------------------------------------------------ */
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid; gap: var(--g1-space-1); }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--g1-space-3) var(--g1-space-4);
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-semibold);
  letter-spacing: var(--g1-tracking-wide);
  text-transform: uppercase;
  color: var(--g1-text-muted);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--g1-text);
  border-color: var(--g1-text);
  color: var(--g1-text-invert);
}

/* Grid, not floats.
   WooCommerce's own layout floats these two columns and relies on a clearfix
   that only exists in its stylesheet — which this theme dequeues. The parent
   collapsed to zero height and the footer rendered straight over the account
   menu. A grid has no such dependency. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0;
}

@media (min-width: 900px) {
  /* Only the wrapper that directly contains the two columns. Declaring the grid
     on .g1-app as well put its single child — the .woocommerce div — into the
     240px track, collapsing the content column to zero width. */
  .woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--g1-space-8);
    align-items: start;
  }
}

/* The account nav is a control list, never a bulleted one. Stated here as well
   as in base.css because WooCommerce's markup can land inside a prose wrapper. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding-left: 0;
}

/* --------------------------------------------------------------------------
   Payment methods at checkout
   ------------------------------------------------------------------------ */
.woocommerce-checkout #payment ul.payment_methods li {
  list-style: none;
  padding-block: var(--g1-space-2);
}

.woocommerce-checkout #payment ul.payment_methods li > label {
  display: inline-flex;
  align-items: center;
  gap: var(--g1-space-3);
  min-height: 44px;
  font-family: var(--g1-font-ui);
  font-size: 1rem;
  font-weight: var(--g1-weight-semibold);
  letter-spacing: var(--g1-tracking-wide);
  text-transform: uppercase;
  color: var(--g1-text);
  cursor: pointer;
}

/* Razorpay injects its logo at full size; keep it in proportion. */
.woocommerce-checkout #payment ul.payment_methods li img {
  max-height: 26px;
  width: auto;
  margin-left: var(--g1-space-2);
}

.woocommerce-checkout #payment .payment_box p:last-child { margin-bottom: 0; }

/* The place-order button is the most important control on the site. */
.woocommerce-checkout #place_order {
  width: 100%;
  height: 60px;
  font-size: 1rem;
  margin-top: var(--g1-space-4);
}

/* Order review table. */
.woocommerce-checkout-review-order-table { width: 100%; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: var(--g1-space-3) 0;
  border-bottom: var(--g1-border);
  text-align: left;
  font-size: var(--g1-text-body-s);
}
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child { text-align: right; }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-h4);
  font-weight: var(--g1-weight-bold);
  border-bottom: 0;
}

/* Thank-you page. */
.woocommerce-order-overview {
  display: grid;
  gap: var(--g1-space-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: var(--g1-space-5);
  margin-block: var(--g1-space-6);
  background: var(--g1-surface);
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
  list-style: none;
}
.woocommerce-order-overview li {
  display: grid;
  gap: var(--g1-space-1);
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  letter-spacing: var(--g1-tracking-wider);
  text-transform: uppercase;
  color: var(--g1-text-subtle);
}
.woocommerce-order-overview li strong {
  font-size: var(--g1-text-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--g1-text);
}

/* --------------------------------------------------------------------------
   Account — login / register

   A single centred column, matching the reference. WooCommerce's own template
   renders the two forms as side-by-side columns; the override in
   woocommerce/myaccount/form-login.php replaces that with two stacked panels
   and shows one at a time.

   The swap is driven by :target first and a class second, so it works with
   JavaScript disabled — main.js only upgrades it to happen without navigating.
   ------------------------------------------------------------------------ */
.g1-auth {
  max-width: 420px;
  margin-inline: auto;
  padding-block: var(--g1-space-6) var(--g1-space-9);
}

.g1-auth__panel--register { display: none; }

/* :target — the no-JS path. */
.g1-auth__panel--register:target { display: block; }
.g1-auth__panel--register:target ~ .g1-auth__panel--login,
.g1-auth:has(.g1-auth__panel--register:target) .g1-auth__panel--login { display: none; }

/* .is-register — the JS path, and the server-side default after a failed
   registration so the customer keeps looking at the form they submitted. */
.g1-auth.is-register .g1-auth__panel--login    { display: none; }
.g1-auth.is-register .g1-auth__panel--register { display: block; }

.g1-auth__title {
  margin: 0 0 var(--g1-space-6);
  text-align: center;
  font-size: var(--g1-text-display-m);
  line-height: 1;
}

.g1-auth__form { display: grid; gap: var(--g1-space-4); }
.g1-auth__form .form-row,
.g1-auth__form .woocommerce-form-row { margin: 0; padding: 0; }

.g1-auth__form label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-semibold);
  letter-spacing: var(--g1-tracking-wide);
  text-transform: uppercase;
}
.g1-auth__form input[type="text"],
.g1-auth__form input[type="email"],
.g1-auth__form input[type="password"] { width: 100%; }

/* Password field with its reveal control. */
.g1-auth__password { position: relative; display: block; }
.g1-auth__password input { padding-right: 52px; }

.g1-auth__reveal {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--g1-text-muted);
  cursor: pointer;
}
.g1-auth__reveal:hover,
.g1-auth__reveal.is-shown { color: var(--g1-text); }
.g1-auth__reveal:focus-visible { outline: var(--g1-focus-ring); outline-offset: -2px; border-radius: var(--g1-radius-sm); }

/* Remember-me and the forgot link share a row, as in the reference. */
.g1-auth__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g1-space-3);
}
.g1-auth__row label {
  display: flex;
  align-items: center;
  gap: var(--g1-space-2);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--g1-text-body-s);
  font-weight: var(--g1-weight-regular);
}
.g1-auth__lost {
  font-size: var(--g1-text-body-s);
  color: var(--g1-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.g1-auth__lost:hover { color: var(--g1-text); }

.g1-auth__actions { margin: 0; }
.g1-auth__actions .g1-btn { width: 100%; }

.g1-auth__hint { font-size: var(--g1-text-body-s); color: var(--g1-text-muted); margin: 0; }

/* The switch between the two panels. */
.g1-auth__switch {
  margin-top: var(--g1-space-6);
  padding-top: var(--g1-space-6);
  border-top: var(--g1-border);
  text-align: center;
}
.g1-auth__switch-note {
  margin: 0 0 var(--g1-space-3);
  font-size: var(--g1-text-body-s);
  color: var(--g1-text-muted);
}
.g1-auth__switch .g1-btn { width: 100%; }

/* Once signed in, the account screen is the dashboard, not this form. */
.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: var(--g1-space-6); }

/* --------------------------------------------------------------------------
   Account — screen chrome

   WooCommerce's account screens ship as bare markup: headings at whatever the
   theme gives h2, "Add address" as a plain text link, and the password change
   wrapped in a raw <fieldset> with a browser-default border. Against a light
   theme with 48px display headings that read as broken rather than minimal.
   ------------------------------------------------------------------------ */

/* The content column is a panel, not loose text on white. */
.woocommerce-account .woocommerce-MyAccount-content {
  padding: var(--g1-space-6);
  background: var(--g1-surface);
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
}

/* Section headings inside the account are UI labels, not page titles. The base
   h2 rule puts them at 48px display type, which dwarfed the form under them. */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-h4);
  font-weight: var(--g1-weight-bold);
  letter-spacing: var(--g1-tracking-wide);
  line-height: var(--g1-leading-tight);
  text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  margin-bottom: var(--g1-space-6);
  color: var(--g1-text-muted);
}

/* ---- Addresses ---- */
.woocommerce-account .u-columns.addresses,
.woocommerce-account .woocommerce-Addresses {
  display: grid;
  gap: var(--g1-space-5);
}

@media (min-width: 700px) {
  .woocommerce-account .u-columns.addresses,
  .woocommerce-account .woocommerce-Addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.woocommerce-account .woocommerce-Address {
  display: flex;
  flex-direction: column;
  gap: var(--g1-space-3);
  padding: var(--g1-space-5);
  background: var(--g1-surface-2);
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
}

.woocommerce-account .woocommerce-Address-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g1-space-3);
}

/* "Add address" / "Edit" arrive as bare <a> with no button class of their own,
   which is why they rendered as body text next to a 48px heading. */
.woocommerce-account .woocommerce-Address-title a,
.woocommerce-account .addresses .title a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-inline: var(--g1-space-4);
  background: var(--g1-text);
  color: var(--g1-text-invert);
  border-radius: var(--g1-radius-sm);
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-bold);
  letter-spacing: var(--g1-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--g1-duration-fast) var(--g1-ease-out);
}
.woocommerce-account .woocommerce-Address-title a:hover,
.woocommerce-account .addresses .title a:hover { background: var(--g1-text-strong); }

.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  line-height: var(--g1-leading-body);
  color: var(--g1-text-muted);
}

/* The "not set up yet" line is an empty state, not an aside. */
.woocommerce-account .woocommerce-Address p,
.woocommerce-account .addresses address:empty::before {
  font-style: normal;
  color: var(--g1-text-subtle);
  font-size: var(--g1-text-body-s);
}

/* ---- Account details ---- */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
  margin-top: var(--g1-space-6);
  padding: var(--g1-space-5);
  background: var(--g1-surface-2);
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
}

/* Floated so it sits inside the box as a heading rather than straddling the
   top border, which is the browser default and looks like a rendering fault. */
.woocommerce-account .woocommerce-EditAccountForm legend {
  float: left;
  width: 100%;
  margin-bottom: var(--g1-space-4);
  padding-inline: 0;
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-bold);
  letter-spacing: var(--g1-tracking-wider);
  text-transform: uppercase;
}

/* Given names sit side by side; they are short and always filled together.
   A grid on the form rather than inline-block widths — WooCommerce interleaves
   `<div class="clear">` elements between the rows, which a float/inline-block
   layout has to work around and a grid simply ignores. */
@media (min-width: 640px) {
  .woocommerce-account .woocommerce-EditAccountForm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--g1-space-4);
  }
  .woocommerce-account .woocommerce-EditAccountForm > * { grid-column: 1 / -1; }
  .woocommerce-account .woocommerce-EditAccountForm > .form-row-first { grid-column: 1; }
  .woocommerce-account .woocommerce-EditAccountForm > .form-row-last  { grid-column: 2; }
  .woocommerce-account .woocommerce-EditAccountForm > .clear { display: none; }
}

.woocommerce-account .woocommerce-EditAccountForm .form-row { margin-bottom: var(--g1-space-4); }

/* WooCommerce renders its field hints as <span class="description"> in italics,
   which reads as an error next to a required marker. */
.woocommerce-account .woocommerce-MyAccount-content span.description,
.woocommerce-account #account_display_name_description,
.woocommerce-account #account_display_name_description em,
.g1-field-hint {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: var(--g1-text-body-s);
  color: var(--g1-text-subtle);
}

/* ---- Empty states ---- */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-Message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g1-space-4);
}