/* ==========================================================================
   Alevectis Commerce theme - the store's pages: the shop and category listings, the product
   page, the cart, the checkout, the thank-you page and the account.
   WooCommerce's own stylesheets are off (inc/woocommerce.php); this file styles
   WooCommerce's default markup with the theme's tokens, type and controls.
   The listing is the theme's own shop layout; the other pages keep
   WooCommerce's structure, restyled.
   Nothing here re-declares a component: the card, the buttons, the fields and
   the badges are components.css.
   Load order: tokens -> base -> components -> page.css -> store.css

   @package Alevectis Commerce
   @author Alevectis <https://alevectis.co.il>
   @copyright 2026 Alevectis
   @license GPL-2.0-or-later
   ========================================================================== */

/* ==================================================== 0. SHARED CONTROLS ==
   WooCommerce's buttons, fields and quantity take the theme's controls.  A
   ".alt" button (proceed to checkout, place order, add to cart) is the primary
   action; every other WooCommerce button is the secondary one. */

.k-store .button,
.k-wc .button,
.k-wc :where(button[type="submit"]:not(.k-search__b)),
.single_add_to_cart_button {
  --btn-bg: transparent;
  --btn-fg: var(--k-text);
  --btn-bd: var(--k-line-control);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-s-4);
  min-height: 48px;
  padding-inline: var(--k-s-8);
  border: 1px solid var(--btn-bd);
  border-radius: var(--k-r-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-strong);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--k-dur-state) var(--k-ease-state),
              border-color var(--k-dur-state) var(--k-ease-state),
              color var(--k-dur-state) var(--k-ease-state),
              transform var(--k-dur-feedback) var(--k-ease-state);
}
.k-store .button:hover,
.k-wc .button:hover,
.k-wc :where(button[type="submit"]:not(.k-search__b)):hover { --btn-bg: var(--k-bg-sub); --btn-bd: var(--k-text); }
:is(.k-store, .k-wc) .button:active,
.k-wc :where(button[type="submit"]:not(.k-search__b)):active { transform: translateY(1px); }

/* the primary action of a page */
:is(.k-store, .k-wc) .button.alt,
.single_add_to_cart_button,
.k-wc #place_order,
.k-wc .checkout-button,
.k-wc :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-ResetPassword .button, button[name="save_account_details"], button[name="save_address"]) {
  --btn-bg: var(--k-action);
  --btn-fg: var(--k-text-on-action);
  --btn-bd: var(--k-action);
}
:is(.k-store, .k-wc) .button.alt:hover,
.single_add_to_cart_button:hover,
.k-wc #place_order:hover,
.k-wc .checkout-button:hover,
.k-wc :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-ResetPassword .button, button[name="save_account_details"], button[name="save_address"]):hover { --btn-bg: var(--k-action-hover); --btn-bd: var(--k-action-hover); }
:is(.k-store, .k-wc) .button.alt:active,
.single_add_to_cart_button:active { --btn-bg: var(--k-action-active); }

/* disabled with the attribute, so the reason stays reachable */
:is(.k-store, .k-wc) .button:is(:disabled, .disabled, [aria-disabled="true"]),
.single_add_to_cart_button:is(:disabled, .disabled) {
  --btn-bg: var(--k-c-ink-050);
  --btn-fg: var(--k-c-ink-600);
  --btn-bd: var(--k-line);
  cursor: not-allowed;
  transform: none;
}
:is(.k-store, .k-wc) .button.loading { cursor: progress; opacity: .7; }

/* ---- fields ------------------------------------------------------------ */

:is(.k-store, .k-wc) :is(input.input-text, input.qty, select:not(.k-sort__select), textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"]):not(.k-field__i):not(.k-search__i) {
  width: 100%;
  min-height: 48px;
  padding: var(--k-s-4) var(--k-s-5);
  border: 1px solid var(--k-line-control);
  border-radius: var(--k-r-control);
  background: var(--k-bg-page);
  color: var(--k-text);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  line-height: 1.5;
  transition: border-color var(--k-dur-state) var(--k-ease-state), box-shadow var(--k-dur-state) var(--k-ease-state);
}
:is(.k-store, .k-wc) :is(input.input-text, select, textarea):hover { border-color: var(--k-c-ink-600); }
:is(.k-store, .k-wc) :is(input.input-text, input.qty, select, textarea):focus { border-color: var(--k-accent-edge); box-shadow: inset 0 0 0 1px var(--k-accent-edge); outline: none; }
:is(.k-store, .k-wc) :is(input.input-text, input.qty, select, textarea):focus-visible { outline: 3px solid var(--k-focus); outline-offset: 2px; }
:is(.k-store, .k-wc) textarea { min-height: 120px; resize: vertical; }
:is(.k-store, .k-wc) input[type="checkbox"], :is(.k-store, .k-wc) input[type="radio"] {
  width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--k-accent); cursor: pointer; vertical-align: -6px;
}

/* one field row: label over field */
.k-wc .form-row { display: grid; gap: var(--k-s-3); margin: 0; padding: 0; }
.k-wc .form-row > label, .k-wc fieldset legend { font-size: var(--k-fs-label); font-weight: var(--k-w-strong); line-height: 1.4; }
.k-wc .form-row .required { color: var(--k-sale); text-decoration: none; border: 0; }
.k-wc .form-row .optional { color: var(--k-text-secondary); font-weight: 400; }
.k-wc .form-row .woocommerce-input-wrapper { display: grid; gap: var(--k-s-3); }
.k-wc .form-row.woocommerce-invalid :is(input.input-text, select) { border-color: var(--k-sale); }
.k-wc .form-row .woocommerce-error, .k-wc .checkout-inline-error-message { font-size: var(--k-fs-small); color: var(--k-sale); font-weight: var(--k-w-strong); }
.k-wc .form-row label.checkbox,
.k-wc .woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-4);
  min-height: var(--k-tap);
  font-size: var(--k-fs-ui);
  font-weight: 400;
  cursor: pointer;
}
.k-wc fieldset { border: 0; margin: 0; padding: 0; }
.k-wc .description, .k-wc .woocommerce-privacy-policy-text { font-size: var(--k-fs-small); color: var(--k-text-secondary); line-height: 1.6; }
.k-wc .woocommerce-privacy-policy-text a, .k-wc .woocommerce-terms-and-conditions-link, .k-wc .lost_password a { color: var(--k-accent); text-underline-offset: 3px; }

/* select2 / selectWoo (WooCommerce's country and state pickers) */
.k-wc .select2-container .select2-selection--single {
  height: 48px;
  border: 1px solid var(--k-line-control);
  border-radius: var(--k-r-control);
  background: var(--k-bg-page);
}
.k-wc .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-inline: var(--k-s-5) 32px; color: var(--k-text); }
.k-wc .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }
.select2-dropdown { border-color: var(--k-line-control); border-radius: var(--k-r-control); font-family: var(--k-font-text); }
.select2-results__option--highlighted[aria-selected], .select2-results__option--highlighted[data-selected] { background: var(--k-accent) !important; }

/* ---- quantity ---------------------------------------------------------- */

:is(.k-store, .k-wc) .quantity { display: inline-flex; }
:is(.k-store, .k-wc) .quantity input.qty.input-text {
  width: 5.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding-inline: var(--k-s-3);
  -moz-appearance: textfield;
}

/* ---- tables WooCommerce draws (cart, totals, order review, orders) ------ */

.k-wc table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--k-fs-ui);
  line-height: 1.5;
}
.k-wc table.shop_table :is(th, td) {
  padding: var(--k-s-6) var(--k-s-5);
  border-block-end: 1px solid var(--k-line);
  text-align: start;
  vertical-align: middle;
}
.k-wc table.shop_table thead th {
  padding-block: var(--k-s-5);
  border-block-end: 1px solid var(--k-line-strong);
  font-size: var(--k-fs-small);
  font-weight: var(--k-w-strong);
  color: var(--k-text-secondary);
}
.k-wc table.shop_table :is(th, td):first-child { padding-inline-start: 0; }
.k-wc table.shop_table :is(th, td):last-child { padding-inline-end: 0; }
.k-wc table.shop_table tfoot :is(th, td) { font-weight: 400; }
.k-wc table.shop_table .order-total :is(th, td) { font-family: var(--k-font-display); font-size: var(--k-fs-h3); font-weight: var(--k-w-heading); border-block-end: 0; }
.k-wc .woocommerce-Price-amount { font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.k-wc .includes_tax, .k-wc small.tax_label { display: block; font-size: var(--k-fs-small); color: var(--k-text-secondary); font-weight: 400; }

/* A table becomes labelled rows on a phone: WooCommerce prints each cell's
   column name in data-title, and the cell shows it on its reading-start side. */
@media (max-width: 767px) {
  .k-wc table.shop_table_responsive thead { display: none; }
  .k-wc table.shop_table_responsive :is(tbody, tr, td, tbody th) { display: block; }
  .k-wc table.shop_table_responsive tr { border-block-end: 1px solid var(--k-line); padding-block: var(--k-s-4); }
  .k-wc table.shop_table_responsive :is(td, tbody th) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--k-s-6);
    padding: var(--k-s-3) 0;
    border: 0;
    text-align: end;
  }
  .k-wc table.shop_table_responsive td[data-title]::before {
    content: attr(data-title);
    font-weight: var(--k-w-strong);
    font-size: var(--k-fs-small);
    color: var(--k-text-secondary);
    text-align: start;
  }
  .k-wc table.shop_table_responsive tfoot tr { display: flex; justify-content: space-between; }
}

/* ============================================================ 1. LISTING ==
   The shop, a category, a product search.  The layout: a head on
   the sub ground with the count raised on its edge, a control rail on the
   band's boundary, the filters beside the grid.                            */

.k-store__notices .woocommerce-notices-wrapper:not(:empty) { padding-block-start: var(--k-s-6); }

/* ---- head ---- */
.k-shead { padding-block-end: calc(var(--k-pad-block) + 34px); }
.k-shead__in { display: grid; gap: var(--k-s-9); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) {
  .k-shead__in { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: var(--k-s-12); }
}
.k-shead__t { margin-block-start: var(--k-s-6); max-width: 18ch; }
.k-shead__lead { margin-block-start: var(--k-s-6); max-width: 58ch; }
.k-shead__lead > * + * { margin-block-start: var(--k-s-4); }
.k-shead__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-s-4) var(--k-s-7);
  margin-block-start: var(--k-s-8);
  padding-block-start: var(--k-s-6);
  border-block-start: 1px solid var(--k-line-strong);
  font-size: var(--k-fs-small);
  color: var(--k-text-secondary);
}
.k-shead__trust b { color: var(--k-text); font-weight: var(--k-w-strong); }
/* the one raised object: how many products this listing holds */
.k-shead__count {
  display: grid;
  justify-items: start;
  gap: var(--k-s-3);
  background: var(--k-bg-raised);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-3);
  box-shadow: var(--k-shadow-1);
  padding: var(--k-s-7) var(--k-s-8) var(--k-s-8);
}
.k-shead__n { color: var(--k-text); }
.k-shead__lab { font-size: var(--k-fs-lead); font-weight: var(--k-w-ui); }
.k-shead__range { color: var(--k-text-secondary); }
@media (max-width: 899px) {
  .k-shead__count { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--k-s-6); padding: var(--k-s-6) var(--k-s-7); }
  .k-shead__count .k-num { font-size: var(--k-fs-display); grid-row: span 2; }
}

/* ---- the control rail: on the head band's lower edge, stuck under the header */
.k-sbar {
  position: sticky;
  inset-block-start: calc(var(--k-header-h) + var(--k-s-4));
  z-index: 40;
  margin-block-start: -34px;
}
.k-sbar__in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--k-s-4) var(--k-s-6);
  min-height: 68px;
  padding-block: var(--k-s-4);
  background: var(--k-bg-page);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-3);
  box-shadow: var(--k-shadow-1);
}
/* on a phone the rail is a plain row under the head, not a raised strip that
   would run into the screen's edges */
@media (max-width: 767px) {
  .k-sbar { position: relative; inset-block-start: auto; margin-block-start: 0; }
  .k-sbar__in { border: 0; border-block-end: 1px solid var(--k-line); border-radius: 0; box-shadow: none; padding-block: var(--k-s-5); }
  .k-shead { padding-block-end: var(--k-pad-block); }
}
.k-sbar .woocommerce-result-count { margin: 0; font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.k-sbar__on {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: var(--k-s-3);
  border-radius: var(--k-r-pill);
  background: var(--k-accent-fill);
  color: var(--k-on-accent-fill);
  font-size: var(--k-fs-badge);
  font-variant-numeric: tabular-nums;
}

/* the sort form (Alevectis Commerce Core): a label, the select, an explicit button */
.k-sort { display: flex; align-items: center; flex-wrap: wrap; gap: var(--k-s-4); margin-inline-start: auto; }
.k-sort__label { font-size: var(--k-fs-label); font-weight: var(--k-w-strong); }
.k-sort__select {
  min-height: var(--k-tap);
  max-width: 100%;
  padding-inline: var(--k-s-5) var(--k-s-9);
  border: 1px solid var(--k-line-control);
  border-radius: var(--k-r-control);
  background: var(--k-bg-page);
  color: var(--k-text);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  cursor: pointer;
  transition: border-color var(--k-dur-state) var(--k-ease-state);
}
.k-sort__select:hover { border-color: var(--k-text); }
.k-sort__submit {
  appearance: none;
  min-height: var(--k-tap);
  padding-inline: var(--k-s-6);
  border: 1px solid var(--k-line-control);
  border-radius: var(--k-r-control);
  background: var(--k-bg-page);
  color: var(--k-text);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-strong);
  cursor: pointer;
  transition: background var(--k-dur-state) var(--k-ease-state), border-color var(--k-dur-state) var(--k-ease-state);
}
.k-sort__submit:hover { background: var(--k-bg-sub); border-color: var(--k-text); }
.k-sort__submit:active { background: var(--k-c-ink-100); }
@media (max-width: 559px) {
  .k-sort { margin-inline-start: 0; width: 100%; }
  .k-sort__select { flex: 1 1 auto; min-width: 0; }
}

/* ---- filters + grid ---- */
.k-shop { padding-block-start: var(--k-s-10); }
.k-shop__in { display: grid; gap: var(--k-s-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .k-shop__in { grid-template-columns: 248px minmax(0, 1fr); gap: var(--k-s-11); }
}
@media (min-width: 1280px) {
  .k-shop__in { grid-template-columns: 272px minmax(0, 1fr); }
}

/* the panel: a disclosure below 1024, an open sidebar from 1024 (store.js) */
.k-spanel { min-width: 0; }
.k-spanel__sum { list-style: none; width: max-content; }
.k-spanel__sum::-webkit-details-marker { display: none; }
.k-spanel[open] .k-spanel__sum { margin-block-end: var(--k-s-6); }
.k-spanel__form { display: grid; }
.k-spanel__t {
  font-size: var(--k-fs-h3);
  padding-block-end: var(--k-s-5);
  border-block-end: 1px solid var(--k-line);
  margin-block-end: var(--k-s-6);
}
.k-spanel__sumt { font: inherit; letter-spacing: 0; margin: 0; }
@media (max-width: 1023px) {
  .k-spanel__t { display: none; }
  .k-spanel[open] .k-spanel__form { padding: var(--k-s-6) var(--k-s-7); border: 1px solid var(--k-line-strong); border-radius: var(--k-r-3); }
}
@media (min-width: 1024px) {
  /* store.js opens the panel from 1024; with no script it stays a closed
     disclosure, and then its button must show at every width */
  .k-spanel[open] .k-spanel__sum { display: none; }
  .k-spanel { border-inline-end: 1px solid var(--k-line); padding-inline-end: var(--k-s-8); }
}

.k-fgroup { border: 0; margin: 0; padding: var(--k-s-6) 0 var(--k-s-7); border-block-start: 1px solid var(--k-line); min-width: 0; }
.k-spanel__t + .k-fgroup, .k-spanel__form > input[type="hidden"] + .k-fgroup { border-block-start: 0; padding-block-start: 0; }
/* a floated legend is not drawn into the fieldset's top rule, so the rule runs
   whole; width 100% keeps it on its own line in either direction */
.k-fgroup__l { float: left; width: 100%; padding: 0; margin-block-end: var(--k-s-4); font-family: var(--k-font-display); font-size: var(--k-fs-ui); font-weight: var(--k-w-strong); }
.k-fgroup > :not(legend) { clear: both; }
.k-fgroup__list { display: grid; }
/* an attribute group folds: its summary is a full-width row with a chevron */
.k-fgroup--fold { padding-block: 0; }
.k-fgroup__s {
  display: flex;
  align-items: center;
  gap: var(--k-s-4);
  min-height: 52px;
  font-family: var(--k-font-display);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-strong);
  list-style: none;
  cursor: pointer;
  transition: color var(--k-dur-state) var(--k-ease-state);
}
.k-fgroup__s::-webkit-details-marker { display: none; }
.k-fgroup__s:hover { color: var(--k-accent); }
/* the chevron is drawn by CSS, so the summary's text is only its words */
.k-fgroup__s::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  margin-inline-start: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--k-dur-state) var(--k-ease-state);
}
.k-fgroup--fold[open] .k-fgroup__s::after { transform: rotate(180deg); }
.k-fgroup__fs { border: 0; margin: 0; padding: 0 0 var(--k-s-6); min-width: 0; }

/* one option row: the whole row is the target */
.k-opt {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--k-s-5);
  min-height: var(--k-tap);
  border-radius: var(--k-r-2);
  transition: background var(--k-dur-state) var(--k-ease-state);
}
.k-opt:hover { background: var(--k-bg-sub); }
.k-opt input { margin: 0; accent-color: var(--k-accent); cursor: pointer; border-radius: var(--k-r-1); transition: box-shadow var(--k-dur-state) var(--k-ease-state); }
/* the box answers the pointer on the row, before it is pressed */
.k-opt:hover input, .k-opt input:hover { box-shadow: 0 0 0 4px var(--k-accent-soft); }
.k-opt input:active { box-shadow: 0 0 0 6px var(--k-accent-soft); }
.k-opt label { font-size: var(--k-fs-ui); line-height: 1.4; cursor: pointer; padding-block: var(--k-s-4); }
.k-opt label::after { content: ""; position: absolute; inset: 0; }
.k-opt__n { font-size: var(--k-fs-small); color: var(--k-text-faint); font-variant-numeric: tabular-nums; padding-inline-end: var(--k-s-3); }
.k-opt input:checked ~ label { font-weight: var(--k-w-strong); }
/* a category is a link to its page, not a box to tick */
.k-opt--link { grid-template-columns: minmax(0, 1fr) auto; padding-inline-start: var(--k-s-3); font-size: var(--k-fs-ui); text-decoration: none; }
.k-opt--link[aria-current="page"] { font-weight: var(--k-w-strong); background: var(--k-bg-sub); box-shadow: inset -3px 0 0 var(--k-accent-edge); }
[dir="ltr"] .k-opt--link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--k-accent-edge); }
.k-opt--up { grid-template-columns: 16px minmax(0, 1fr); color: var(--k-accent); }
.k-opt__up { transform: scaleX(-1); }

.k-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-s-5); }
.k-range__f { display: grid; gap: var(--k-s-3); }
.k-spanel__foot { display: grid; gap: var(--k-s-4); justify-items: start; padding-block-start: var(--k-s-6); border-block-start: 1px solid var(--k-line); }

/* ---- the results column ---- */
.k-sres { min-width: 0; }
.k-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-s-4);
  margin-block-end: var(--k-s-8);
  padding-block-end: var(--k-s-6);
  border-block-end: 1px solid var(--k-line);
}
.k-chips__t { font-family: var(--k-font-text); font-size: var(--k-fs-label); font-weight: var(--k-w-strong); }
.k-chips__l { display: flex; flex-wrap: wrap; gap: var(--k-s-4); }
.k-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-4);
  min-height: var(--k-tap);
  padding-inline: var(--k-s-6);
  border: 1px solid var(--k-line-control);
  border-radius: var(--k-r-pill);
  background: var(--k-bg-page);
  color: var(--k-text);
  font-size: var(--k-fs-small);
  text-decoration: none;
  transition: background var(--k-dur-state) var(--k-ease-state), border-color var(--k-dur-state) var(--k-ease-state);
}
.k-chip svg { width: 12px; height: 12px; flex: none; }
.k-chip:hover { background: var(--k-bg-sub); border-color: var(--k-text); }
.k-chips__clear {
  display: inline-flex;
  align-items: center;
  min-height: var(--k-tap);
  padding-inline: var(--k-s-4);
  color: var(--k-accent);
  font-size: var(--k-fs-small);
  text-underline-offset: 3px;
  transition: color var(--k-dur-state) var(--k-ease-state);
}
.k-chips .k-chips__clear { margin-inline-start: auto; }
.k-chips__clear:hover { color: var(--k-accent-hover); }

/* the grid: two up on a phone, three beside the sidebar, four from 1280 */
.k-sgrid {
  display: grid;
  gap: calc(var(--k-gap-grid) + 8px) var(--k-gap-grid);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
@media (min-width: 768px) { .k-sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .k-store--archive .k-sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* rows of four outside the listing (related, upsells, cross-sells) */
@media (min-width: 1100px) { :is(.related, .upsells, .cross-sells) .k-sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- empty ---- */
.k-sempty {
  display: grid;
  gap: var(--k-s-8);
  grid-template-columns: 1fr;
  align-items: start;
  background: var(--k-bg-sub);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-3);
  padding: var(--k-s-10) var(--k-s-8);
}
@media (min-width: 620px) { .k-sempty { grid-template-columns: 120px minmax(0, 1fr); gap: var(--k-s-10); padding: var(--k-s-12) var(--k-s-11); } }
.k-sempty__img { width: 96px; height: auto; color: var(--k-text-secondary); }
.k-sempty__b { display: grid; gap: var(--k-s-6); justify-items: start; }
.k-sempty__cta { margin-block-start: var(--k-s-3); }

/* ---- pagination ---- */
.woocommerce-pagination { margin-block-start: var(--k-s-11); padding-block-start: var(--k-s-9); border-block-start: 1px solid var(--k-line); }
.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--k-s-3); list-style: none; margin: 0; padding: 0; }
.woocommerce-pagination .page-numbers :is(a, span) {
  display: inline-grid;
  place-items: center;
  min-width: var(--k-tap);
  min-height: var(--k-tap);
  padding-inline: var(--k-s-4);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-control);
  color: var(--k-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--k-dur-state) var(--k-ease-state), border-color var(--k-dur-state) var(--k-ease-state);
}
.woocommerce-pagination .page-numbers a:hover { background: var(--k-bg-sub); border-color: var(--k-text); }
.woocommerce-pagination .page-numbers .current { background: var(--k-action); border-color: var(--k-action); color: var(--k-text-on-action); }

/* ======================================================= 2. PRODUCT PAGE ==
   WooCommerce's default product, restyled: the gallery on the reading-start
   side, the summary beside it and stuck while the gallery scrolls, then the
   tabs, then the related row of cards.                                     */

.k-store--product { padding-block: var(--k-s-7) var(--k-pad-block); }
.k-store--product > .k-crumbs { margin-block-end: var(--k-s-7); }
.k-store--product div.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--k-s-9); position: relative; }
@media (min-width: 900px) {
  .k-store--product div.product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(32px, 4.5vw, 72px); row-gap: var(--k-s-12); }
  .k-store--product div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
  .k-store--product div.product > .summary { grid-column: 2; grid-row: 1; align-self: start; position: sticky; inset-block-start: calc(var(--k-header-h) + var(--k-s-8)); }
}
.k-store--product > :is(.woocommerce-tabs, .related, .upsells) { margin-block-start: var(--k-s-12); }
.k-store--product div.product > .onsale { position: absolute; inset-block-start: var(--k-s-5); inset-inline-start: var(--k-s-5); z-index: 5; }

/* ---- gallery (WooCommerce's slider and lightbox) ---- */
.woocommerce-product-gallery { position: relative; min-width: 0; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image { border-radius: var(--k-r-2); overflow: hidden; background: var(--k-bg-sub); }
.woocommerce-product-gallery__image a { display: block; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* before the slider starts (and with no script), every image after the first
   waits below it as a thumbnail row; without :has() they stack, full width */
@supports selector(:has(*)) {
  .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k-s-4); }
  .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; }
}
.woocommerce-product-gallery .flex-viewport { border-radius: var(--k-r-2); }
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--k-s-4);
  margin: var(--k-s-5) 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-2);
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--k-dur-state) var(--k-ease-state), border-color var(--k-dur-state) var(--k-ease-state);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--k-text); }
.woocommerce-product-gallery__trigger {
  position: absolute;
  inset-block-start: var(--k-s-5);
  inset-inline-end: var(--k-s-5);
  z-index: 9;
  display: grid;
  place-items: center;
  width: var(--k-tap);
  height: var(--k-tap);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-pill);
  background: var(--k-bg-page);
  color: var(--k-text);
  font-size: 0;
  text-decoration: none;
  transition: border-color var(--k-dur-state) var(--k-ease-state);
}
.woocommerce-product-gallery__trigger:hover { border-color: var(--k-text); }
.woocommerce-product-gallery__trigger::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; margin: -3px 0 0 -3px; }
.woocommerce-product-gallery__trigger::after { content: ""; position: absolute; width: 2px; height: 7px; background: currentColor; transform: translate(6px, 7px) rotate(-45deg); border-radius: 1px; }
.woocommerce-product-gallery__trigger img { display: none !important; }

/* ---- summary ---- */
.k-store--product .summary { display: grid; gap: var(--k-s-6); align-content: start; min-width: 0; }
.k-store--product .summary > * { margin: 0; }
.k-store--product .product_title { font-size: var(--k-fs-h1); font-weight: var(--k-w-display); letter-spacing: var(--k-ls-display); line-height: 1.14; }
.k-store--product .summary > .price,
.k-store--product .woocommerce-variation-price .price { font-size: var(--k-fs-price-l); font-weight: var(--k-w-strong); color: var(--k-text); }
.k-store--product .price del { color: var(--k-text-secondary); font-size: var(--k-fs-ui); font-weight: 400; }
.k-store--product .price ins { text-decoration: none; color: var(--k-sale); }
.k-store--product .woocommerce-product-details__short-description { color: var(--k-text-secondary); font-size: var(--k-fs-body); line-height: var(--k-lh-body); }
.k-store--product .woocommerce-product-details__short-description > * + * { margin-block-start: var(--k-s-4); }
.k-store--product .stock { font-size: var(--k-fs-small); font-weight: var(--k-w-strong); color: var(--k-accent); }
.k-store--product .stock.out-of-stock { color: var(--k-oos); }
.k-notice--made-to-order { padding: var(--k-s-5) var(--k-s-6); border: 1px solid var(--k-line-control); border-inline-start: 3px solid var(--k-accent-edge); border-radius: var(--k-r-2); background: var(--k-accent-soft); font-size: var(--k-fs-small); line-height: 1.6; }

/* the add-to-cart form */
.k-store--product form.cart { display: grid; gap: var(--k-s-6); padding-block: var(--k-s-6); border-block: 1px solid var(--k-line); }
.k-store--product form.cart:not(.variations_form),
.k-store--product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--k-s-4); }
.k-store--product .single_add_to_cart_button { flex: 1 1 12rem; min-height: 52px; }
.k-store--product form.cart .quantity input.qty { min-height: 52px; }
.k-store--product table.variations { width: 100%; border-collapse: collapse; }
.k-store--product table.variations :is(th, td) { display: block; padding: 0; text-align: start; }
.k-store--product table.variations tr + tr :is(th) { padding-block-start: var(--k-s-6); }
.k-store--product table.variations th.label { padding-block-end: var(--k-s-3); }
.k-store--product table.variations label { font-size: var(--k-fs-label); font-weight: var(--k-w-strong); }
.k-store--product table.variations td.value { display: grid; gap: var(--k-s-3); justify-items: start; }
.k-store--product .reset_variations { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--k-fs-small); color: var(--k-accent); text-underline-offset: 3px; }
.k-store--product .single_variation_wrap { display: grid; gap: var(--k-s-5); }
.k-store--product .woocommerce-variation:empty { display: none; }
.k-store--product .woocommerce-variation { display: grid; gap: var(--k-s-3); }
.k-store--product .woocommerce-variation-description { font-size: var(--k-fs-small); color: var(--k-text-secondary); }

.k-store--product .product_meta { display: grid; gap: var(--k-s-3); font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.k-store--product .product_meta a { display: inline-block; padding-block: 3px; color: var(--k-accent); text-underline-offset: 3px; }
.k-store--product .product_meta .sku { direction: ltr; unicode-bidi: isolate; }

/* ---- tabs: a ruled row of tabs, the panel under it at a reading measure ---- */
.woocommerce-tabs { border-block-start: 1px solid var(--k-line); padding-block-start: var(--k-s-9); }
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--k-s-8);
  margin: 0 0 var(--k-s-9);
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--k-line);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-block-end: -1px;
  border-block-end: 2px solid transparent;
  font-family: var(--k-font-display);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-heading);
  color: var(--k-text-secondary);
  text-decoration: none;
  transition: color var(--k-dur-state) var(--k-ease-state), border-color var(--k-dur-state) var(--k-ease-state);
}
.woocommerce-tabs ul.tabs a:hover { color: var(--k-text); }
.woocommerce-tabs ul.tabs li.active a { color: var(--k-text); border-block-end-color: var(--k-accent-edge); }
.woocommerce-Tabs-panel { max-width: 72ch; font-size: var(--k-fs-body); line-height: var(--k-lh-body); }
.woocommerce-Tabs-panel > * + * { margin-block-start: var(--k-s-6); }
.woocommerce-Tabs-panel h2 { font-size: var(--k-fs-h2); }
.woocommerce-Tabs-panel h3 { font-size: var(--k-fs-h3); margin-block-start: var(--k-s-8); }
.woocommerce-Tabs-panel :is(ul, ol) { padding-inline-start: 1.4em; }
.woocommerce-Tabs-panel ul { list-style: disc; }
.woocommerce-Tabs-panel ol { list-style: decimal; }
.woocommerce-Tabs-panel li + li { margin-block-start: var(--k-s-3); }
.woocommerce-Tabs-panel table { width: 100%; border-collapse: collapse; font-size: var(--k-fs-ui); }
.woocommerce-Tabs-panel table :is(th, td) { padding: var(--k-s-5) var(--k-s-5); border-block-end: 1px solid var(--k-line); text-align: start; vertical-align: top; }
.woocommerce-Tabs-panel table :is(th, td):first-child { padding-inline-start: 0; }
.woocommerce-Tabs-panel table th { font-weight: var(--k-w-strong); width: 34%; }
.woocommerce-Tabs-panel table p { margin: 0; }

/* reviews */
#reviews .commentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-s-7); }
#reviews .comment_container { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--k-s-5); }
#reviews .avatar { border-radius: 50%; }
#reviews .meta { font-size: var(--k-fs-small); color: var(--k-text-secondary); }
#reviews .woocommerce-noreviews { color: var(--k-text-secondary); }
#review_form_wrapper { margin-block-start: var(--k-s-9); padding-block-start: var(--k-s-8); border-block-start: 1px solid var(--k-line); }
#review_form .comment-reply-title { display: block; font-family: var(--k-font-display); font-size: var(--k-fs-h3); font-weight: var(--k-w-heading); margin-block-end: var(--k-s-6); }
#review_form form { display: grid; gap: var(--k-s-6); max-width: 560px; }
#review_form form > p { display: grid; gap: var(--k-s-3); margin: 0; }
#review_form label { font-size: var(--k-fs-label); font-weight: var(--k-w-strong); }
#review_form :is(input[type="text"], input[type="email"], textarea, select) {
  width: 100%; min-height: 48px; padding: var(--k-s-4) var(--k-s-5);
  border: 1px solid var(--k-line-control); border-radius: var(--k-r-control);
  background: var(--k-bg-page); color: var(--k-text); font-family: var(--k-font-text); font-size: var(--k-fs-ui);
}
#review_form .comment-form-cookies-consent { display: flex; gap: var(--k-s-4); align-items: center; }
#review_form .comment-form-cookies-consent label { font-weight: 400; font-size: var(--k-fs-small); }
#review_form .stars a { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; color: var(--k-accent); }
#review_form .form-submit input[type="submit"] {
  justify-self: start; min-height: 48px; padding-inline: var(--k-s-9);
  border: 1px solid var(--k-action); border-radius: var(--k-r-control);
  background: var(--k-action); color: var(--k-text-on-action);
  font-family: var(--k-font-text); font-size: var(--k-fs-ui); font-weight: var(--k-w-strong); cursor: pointer;
  transition: background var(--k-dur-state) var(--k-ease-state);
}
#review_form .form-submit input[type="submit"]:hover { background: var(--k-action-hover); }

/* related and upsells: a section head and THE card */
:is(.related, .upsells, .cross-sells) > h2 {
  font-size: var(--k-fs-h2);
  margin-block-end: var(--k-s-8);
  padding-block-end: var(--k-s-5);
  border-block-end: 1px solid var(--k-line);
}

/* ================================================================ 3. CART ==
   The lines on the reading-start side, the totals beside them and stuck;
   the cross-sells under both as a row of cards.                            */

.k-wc { padding-block: var(--k-s-4) var(--k-pad-block); }
.k-wc > .woocommerce { min-width: 0; }
.woocommerce-cart .k-wc > .woocommerce { display: grid; gap: var(--k-s-10); grid-template-columns: minmax(0, 1fr); align-items: start; }
/* two columns only when there is a cart (an empty cart is one message); a
   browser without :has() keeps one column, totals under the lines */
@supports selector(:has(*)) {
  @media (min-width: 1024px) {
    .woocommerce-cart .k-wc > .woocommerce:has(> .woocommerce-cart-form) { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); column-gap: var(--k-s-11); }
    .woocommerce-cart .k-wc > .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
    .woocommerce-cart .k-wc > .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-cart-form { grid-column: 1; }
    .woocommerce-cart .k-wc > .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals { grid-column: 2; grid-row: span 2; position: sticky; inset-block-start: calc(var(--k-header-h) + var(--k-s-8)); }
    .woocommerce-cart .k-wc > .woocommerce:has(> .woocommerce-cart-form) > .cross-sells { grid-column: 1; }
  }
}

.woocommerce-cart-form .product-thumbnail { width: 96px; }
.woocommerce-cart-form .product-thumbnail img { width: 80px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--k-r-2); border: 1px solid var(--k-line); }
.woocommerce-cart-form .product-name a { font-weight: var(--k-w-ui); text-decoration: none; }
.woocommerce-cart-form .product-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-cart-form .product-name .variation { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 0 var(--k-s-4); margin: var(--k-s-3) 0 0; font-size: var(--k-fs-small); color: var(--k-text-secondary); }
@media (max-width: 479px) { .woocommerce-cart-form .product-name .variation { grid-template-columns: minmax(0, 1fr); } }
.woocommerce-cart-form .product-name .variation :is(dt, dd) { margin: 0; }
.woocommerce-cart-form .product-name .variation dd p { margin: 0; }
.woocommerce-cart-form .product-remove { width: 48px; }
.woocommerce-cart-form a.remove {
  display: inline-grid;
  place-items: center;
  width: var(--k-tap);
  height: var(--k-tap);
  border: 1px solid transparent;
  border-radius: var(--k-r-pill);
  color: var(--k-text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  transition: background var(--k-dur-state) var(--k-ease-state), color var(--k-dur-state) var(--k-ease-state), border-color var(--k-dur-state) var(--k-ease-state);
}
.woocommerce-cart-form a.remove:hover { background: var(--k-sale-soft); color: var(--k-sale); border-color: currentColor; }
.woocommerce-cart-form .product-subtotal { font-weight: var(--k-w-strong); }
/* the actions cell stays a table cell (a flex cell loses its colspan): the
   coupon is one row inside it, the update button under it */
.woocommerce-cart-form td.actions { padding-block: var(--k-s-7) 0; border-block-end: 0; }
.woocommerce-cart-form .coupon { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--k-s-4); max-width: 460px; margin-block-end: var(--k-s-5); }
.woocommerce-cart-form .coupon input.input-text { flex: 1 1 10rem; width: auto; }
.woocommerce-cart-form .coupon .button { flex: none; }
@media (max-width: 767px) {
  /* a line: the picture on the reading-start side, the name, price, quantity
     and subtotal beside it, the remove control in the far corner */
  .k-wc table.shop_table_responsive tr.cart_item { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: var(--k-s-6); padding-block: var(--k-s-6); }
  .k-wc table.shop_table_responsive tr.cart_item > td { grid-column: 2; }
  .k-wc table.shop_table_responsive tr.cart_item > td.product-thumbnail { grid-column: 1; grid-row: 1 / span 5; display: block; width: auto; padding: 0; }
  .k-wc table.shop_table_responsive tr.cart_item > td.product-thumbnail::before { display: none; }
  .k-wc table.shop_table_responsive tr.cart_item > td.product-remove { position: absolute; inset-block-start: var(--k-s-4); inset-inline-end: 0; width: auto; padding: 0; }
  .k-wc table.shop_table_responsive tr.cart_item > td.product-remove::before { display: none; }
  .k-wc table.shop_table_responsive tr.cart_item > td.product-name { display: block; padding-inline-end: var(--k-s-11); text-align: start; }
  .k-wc table.shop_table_responsive tr.cart_item > td.product-name::before { display: none; }
  .k-wc table.shop_table_responsive td.actions { display: block; padding-block-start: var(--k-s-6); }
  .k-wc table.shop_table_responsive td.actions::before { display: none; }
  .woocommerce-cart-form .coupon { max-width: none; }
}

.cart_totals {
  padding: var(--k-s-8);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-3);
  background: var(--k-bg-sub);
}
.cart_totals > h2 { font-size: var(--k-fs-h3); margin-block-end: var(--k-s-5); }
.cart_totals table.shop_table { font-size: var(--k-fs-ui); }
.cart_totals table.shop_table :is(th, td) { padding-block: var(--k-s-5); vertical-align: top; }
.cart_totals table.shop_table th { font-weight: var(--k-w-ui); width: 38%; }
.cart_totals table.shop_table td { text-align: end; }
@media (max-width: 767px) {
  /* .k-wc in front: these must beat the generic labelled-rows rule above */
  .k-wc .cart_totals table.shop_table_responsive tr { display: flex; justify-content: space-between; gap: var(--k-s-5); }
  .k-wc .cart_totals table.shop_table_responsive :is(td, th) { display: block; padding: var(--k-s-3) 0; }
  .k-wc .cart_totals table.shop_table_responsive td::before { display: none; }
  .k-wc .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals { display: grid; gap: var(--k-s-3); }
  .k-wc .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td { text-align: start; }
  .k-wc .cart_totals tr.woocommerce-shipping-totals ul#shipping_method { justify-items: start; }
}
.wc-proceed-to-checkout { padding-block-start: var(--k-s-6); }
.wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 52px; font-size: var(--k-fs-body); }

/* shipping: WooCommerce's method list, as options */
ul#shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-s-3); justify-items: end; }
ul#shipping_method li { display: flex; align-items: center; gap: var(--k-s-4); margin: 0; }
ul#shipping_method li label { cursor: pointer; }
.woocommerce-shipping-destination, .woocommerce-shipping-contents { margin-block-start: var(--k-s-3); font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.woocommerce-shipping-calculator { margin-block-start: var(--k-s-3); text-align: start; }
.shipping-calculator-button { display: inline-flex; align-items: center; min-height: 32px; color: var(--k-accent); font-size: var(--k-fs-small); text-underline-offset: 3px; }
.shipping-calculator-form { display: grid; gap: var(--k-s-4); margin-block-start: var(--k-s-4); }

.cross-sells { margin-block-start: var(--k-s-6); }

/* the empty cart */
.woocommerce-cart .cart-empty.woocommerce-info { font-size: var(--k-fs-lead); }
.woocommerce-cart .return-to-shop { margin-block-start: var(--k-s-6); }

/* ============================================================ 4. CHECKOUT ==
   The buyer's details on the reading-start side; the order and the payment
   beside them, stuck while the details are filled.                         */

.woocommerce-checkout .k-wc > .woocommerce > .woocommerce-form-coupon-toggle,
.woocommerce-checkout .k-wc > .woocommerce > .woocommerce-form-login-toggle { margin-block-end: var(--k-s-4); }
.woocommerce-checkout .k-wc form.checkout_coupon,
.woocommerce-checkout .k-wc form.woocommerce-form-login {
  display: grid;
  gap: var(--k-s-5);
  max-width: 560px;
  margin-block-end: var(--k-s-8);
  padding: var(--k-s-7);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-3);
}
.woocommerce-checkout form.checkout_coupon { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.woocommerce-checkout form.checkout_coupon > p:first-child { grid-column: 1 / -1; font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.woocommerce-checkout .showcoupon, .woocommerce-checkout .showlogin { color: var(--k-accent); text-underline-offset: 3px; }

form.woocommerce-checkout { display: grid; gap: var(--k-s-10); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  form.woocommerce-checkout { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); column-gap: var(--k-s-11); row-gap: 0; }
  form.woocommerce-checkout > #customer_details { grid-column: 1; grid-row: 1 / span 3; }
  form.woocommerce-checkout > .k-co__t--order { grid-column: 2; grid-row: 1; }
  /* not sticky: with the payment methods open it is taller than a laptop
     screen, and a stuck panel would keep its own button below the fold */
  form.woocommerce-checkout > #order_review { grid-column: 2; grid-row: 2; }
  form.woocommerce-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
}
#customer_details { display: grid; gap: var(--k-s-10); }
#customer_details :is(.col-1, .col-2) { min-width: 0; }
/* the page's two h2s; WooCommerce's "Your order" h3 is replaced by the second */
.k-co__t { font-size: var(--k-fs-h2); margin-block-end: var(--k-s-7); }
#order_review_heading { display: none; }
#customer_details h3 { font-size: var(--k-fs-h3); margin-block-end: var(--k-s-6); }
#customer_details h3 { padding-block-end: var(--k-s-4); border-block-end: 1px solid var(--k-line); }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper,
.woocommerce-EditAccountForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--k-s-6) var(--k-s-5);
}
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > .form-row { grid-column: 1 / -1; }
:is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > :is(.form-row-first, .form-row-last) { grid-column: auto; }
@media (max-width: 559px) {
  :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > :is(.form-row-first, .form-row-last) { grid-column: 1 / -1; }
}
#ship-to-different-address { font-size: var(--k-fs-ui); font-family: var(--k-font-text); border: 0; padding: 0; }
.woocommerce-additional-fields { margin-block-start: var(--k-s-8); }
.woocommerce-additional-fields h3 { display: none; }

#order_review {
  padding: var(--k-s-8);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-3);
  background: var(--k-bg-sub);
  display: grid;
  gap: var(--k-s-7);
}
.woocommerce-checkout-review-order-table .product-name { font-weight: var(--k-w-ui); }
.woocommerce-checkout-review-order-table .product-quantity { font-weight: var(--k-w-strong); color: var(--k-text-secondary); }
.woocommerce-checkout-review-order-table .variation { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--k-s-4); margin: var(--k-s-2) 0 0; font-size: var(--k-fs-small); color: var(--k-text-secondary); font-weight: 400; }
.woocommerce-checkout-review-order-table .variation :is(dt, dd, dd p) { margin: 0; }
.woocommerce-checkout-review-order-table :is(.product-total, tfoot td) { text-align: end; }
.woocommerce-checkout-review-order-table tfoot th { font-weight: var(--k-w-ui); }

/* payment: the methods as a ruled list of options, the chosen one opened */
#payment { display: grid; gap: var(--k-s-6); }
#payment ul.payment_methods { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--k-line); }
#payment ul.payment_methods > li { padding-block: var(--k-s-5); border-block-end: 1px solid var(--k-line); }
#payment ul.payment_methods > li > label { display: inline-flex; align-items: center; gap: var(--k-s-4); min-height: 32px; font-weight: var(--k-w-strong); cursor: pointer; }
#payment ul.payment_methods > li > input { margin-inline-end: var(--k-s-4); }
#payment ul.payment_methods > li img { display: inline-block; max-height: 24px; width: auto; background: none; margin-inline-start: var(--k-s-3); }
#payment .payment_box { margin-block-start: var(--k-s-4); padding: var(--k-s-5) var(--k-s-6); background: var(--k-bg-page); border: 1px solid var(--k-line); border-radius: var(--k-r-2); font-size: var(--k-fs-small); color: var(--k-text-secondary); line-height: 1.6; }
#payment .payment_box p { margin: 0; }
#payment .place-order { display: grid; gap: var(--k-s-6); }
#payment .woocommerce-terms-and-conditions-wrapper { display: grid; gap: var(--k-s-4); }
#payment .woocommerce-terms-and-conditions { max-height: 240px; overflow: auto; padding: var(--k-s-5); border: 1px solid var(--k-line); border-radius: var(--k-r-2); background: var(--k-bg-page); font-size: var(--k-fs-small); }
#payment #place_order { width: 100%; min-height: 56px; font-size: var(--k-fs-body); }
.blockUI.blockOverlay { background: var(--k-bg-page) !important; opacity: .6 !important; }

/* ====================================================== 5. ORDER RECEIVED ==*/

/* the order on the reading-start side, the addresses beside it */
.woocommerce-order { display: grid; gap: var(--k-s-9); grid-template-columns: minmax(0, 1fr); align-items: start; }
.woocommerce-order > * { margin: 0; min-width: 0; }
@media (min-width: 1024px) {
  .woocommerce-order { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); column-gap: var(--k-s-12); }
  .woocommerce-order > * { grid-column: 1; }
  .woocommerce-order > .woocommerce-customer-details { grid-column: 2; grid-row: 1 / span 6; }
}
.woocommerce-thankyou-order-received {
  font-family: var(--k-font-display);
  font-size: var(--k-fs-h2);
  font-weight: var(--k-w-heading);
  line-height: var(--k-lh-heading);
  padding: var(--k-s-7) var(--k-s-8);
  border: 1px solid var(--k-line-control);
  border-inline-start: 4px solid var(--k-accent-edge);
  border-radius: var(--k-r-2);
  background: var(--k-accent-soft);
}
ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--k-line-strong);
}
ul.woocommerce-order-overview li { display: grid; gap: var(--k-s-2); align-content: start; padding-block: var(--k-s-6); padding-inline: 0 var(--k-s-6); font-size: var(--k-fs-small); color: var(--k-text-secondary); }
ul.woocommerce-order-overview li strong { font-family: var(--k-font-display); font-size: var(--k-fs-h3); font-weight: var(--k-w-heading); color: var(--k-text); overflow-wrap: anywhere; }
ul.woocommerce-order-overview .woocommerce-order-overview__email strong { font-family: var(--k-font-text); font-size: var(--k-fs-ui); direction: ltr; unicode-bidi: isolate; text-align: end; }
.woocommerce-order .woocommerce-bacs-bank-details, .wc-bacs-bank-details { display: grid; gap: var(--k-s-5); }
.wc-bacs-bank-details-heading, .woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details h2 { font-size: var(--k-fs-h3); }
ul.wc-bacs-bank-details { list-style: none; margin: 0; padding: var(--k-s-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--k-s-5); border: 1px solid var(--k-line-strong); border-radius: var(--k-r-3); background: var(--k-bg-sub); }
ul.wc-bacs-bank-details li { display: grid; gap: var(--k-s-2); font-size: var(--k-fs-small); color: var(--k-text-secondary); }
ul.wc-bacs-bank-details li strong { color: var(--k-text); font-size: var(--k-fs-ui); direction: ltr; unicode-bidi: isolate; }
.woocommerce-order-details { display: grid; gap: var(--k-s-6); }
.woocommerce-table--order-details .product-total, .woocommerce-table--order-details tfoot td { text-align: end; }
.woocommerce-table--order-details .wc-item-meta { list-style: none; margin: var(--k-s-2) 0 0; padding: 0; font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.woocommerce-table--order-details .wc-item-meta :is(li, p) { margin: 0; display: inline; }
.woocommerce-table--order-details .product-quantity { color: var(--k-text-secondary); font-weight: var(--k-w-strong); }
.woocommerce-customer-details .woocommerce-columns { display: grid; gap: var(--k-s-8); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.woocommerce-order .woocommerce-customer-details .woocommerce-columns { grid-template-columns: minmax(0, 1fr); }
.woocommerce-customer-details address {
  font-style: normal;
  line-height: 1.8;
  margin-block-start: var(--k-s-5);
  padding: var(--k-s-6) var(--k-s-7);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-2);
}
.woocommerce-customer-details :is(.woocommerce-customer-details--phone, .woocommerce-customer-details--email) { margin: var(--k-s-3) 0 0; direction: ltr; unicode-bidi: isolate; text-align: end; }
.woocommerce-order-details .order-again { margin-block-start: var(--k-s-5); }

/* ============================================================= 6. ACCOUNT ==*/

/* signed out: sign in beside register */
#customer_login { display: grid; gap: var(--k-s-10); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { #customer_login { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-s-12); } }
#customer_login > div { min-width: 0; }
#customer_login h2, .woocommerce-ResetPassword + h2 { font-size: var(--k-fs-h2); margin-block-end: var(--k-s-6); }
.k-wc :is(form.woocommerce-form-login, form.woocommerce-form-register, form.woocommerce-ResetPassword, form.lost_reset_password) {
  display: grid;
  gap: var(--k-s-6);
  max-width: 480px;
}
.k-wc :is(form.woocommerce-form-login, form.woocommerce-form-register) > p:not(.form-row-wide) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-s-5); }
#customer_login .u-column2 { padding-block-start: var(--k-s-10); border-block-start: 1px solid var(--k-line); }
@media (min-width: 900px) { #customer_login .u-column2 { padding-block-start: 0; border-block-start: 0; padding-inline-start: var(--k-s-12); border-inline-start: 1px solid var(--k-line); } }

/* signed in: the account's sections beside its content */
.logged-in.woocommerce-account .k-wc > .woocommerce { display: grid; gap: var(--k-s-9); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .logged-in.woocommerce-account .k-wc > .woocommerce { grid-template-columns: 240px minmax(0, 1fr); gap: var(--k-s-12); }
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; border-block-start: 1px solid var(--k-line); }
.woocommerce-MyAccount-navigation li { border-block-end: 1px solid var(--k-line); }
.woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--k-s-4);
  color: var(--k-text);
  font-size: var(--k-fs-ui);
  text-decoration: none;
  transition: background var(--k-dur-state) var(--k-ease-state), color var(--k-dur-state) var(--k-ease-state);
}
.woocommerce-MyAccount-navigation a:hover { background: var(--k-bg-sub); color: var(--k-accent); }
.woocommerce-MyAccount-navigation li.is-active a { font-weight: var(--k-w-strong); background: var(--k-bg-sub); box-shadow: inset -3px 0 0 var(--k-accent-edge); }
[dir="ltr"] .woocommerce-MyAccount-navigation li.is-active a { box-shadow: inset 3px 0 0 var(--k-accent-edge); }
@media (max-width: 899px) {
  .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: var(--k-s-3); border: 0; }
  .woocommerce-MyAccount-navigation li { border: 0; }
  .woocommerce-MyAccount-navigation a { min-height: var(--k-tap); padding-inline: var(--k-s-6); border: 1px solid var(--k-line-control); border-radius: var(--k-r-pill); font-size: var(--k-fs-small); }
  .woocommerce-MyAccount-navigation li.is-active a { box-shadow: none; background: var(--k-action); color: var(--k-text-on-action); border-color: var(--k-action); }
}
.woocommerce-MyAccount-content { min-width: 0; display: grid; gap: var(--k-s-6); align-content: start; }
.woocommerce-MyAccount-content > * { margin: 0; }
.woocommerce-MyAccount-content a:not(.button) { color: var(--k-accent); text-underline-offset: 3px; }
.woocommerce-MyAccount-content mark { background: none; color: var(--k-text); font-weight: var(--k-w-strong); }
.woocommerce-orders-table .button { min-height: var(--k-tap); padding-inline: var(--k-s-6); }
.woocommerce-orders-table__cell-order-actions { display: flex; flex-wrap: wrap; gap: var(--k-s-3); }
.woocommerce-Addresses { display: grid; gap: var(--k-s-8); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--k-s-4); }
.woocommerce-Address-title h2 { font-size: var(--k-fs-h3); }
.woocommerce-Address address { font-style: normal; line-height: 1.8; margin-block-start: var(--k-s-4); }
.woocommerce-EditAccountForm > :is(.form-row-wide, fieldset, p:not(.form-row-first):not(.form-row-last), .clear) { grid-column: 1 / -1; }
.woocommerce-EditAccountForm fieldset { display: grid; gap: var(--k-s-6); padding-block-start: var(--k-s-6); border-block-start: 1px solid var(--k-line); }
.woocommerce-EditAccountForm em { font-size: var(--k-fs-small); color: var(--k-text-secondary); font-style: normal; }
.clear { display: none; }

/* WooCommerce's show-password button (added by its script inside the field) */
.k-wc .password-input { position: relative; display: block; }
.k-wc .password-input input { padding-inline-end: 52px; }
.k-wc .show-password-input {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 2px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: var(--k-tap);
  height: var(--k-tap);
  padding: 0;
  border: 0;
  border-radius: var(--k-r-2);
  background: transparent;
  color: var(--k-text-secondary);
  cursor: pointer;
  transition: background var(--k-dur-state) var(--k-ease-state), color var(--k-dur-state) var(--k-ease-state);
}
.k-wc .show-password-input:hover { background: var(--k-bg-sub); color: var(--k-text); }
.k-wc .show-password-input::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.k-wc .show-password-input.display-password::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E");
}

/* the terms checkbox: the box, the sentence, the required mark, on one line */
.k-wc .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: var(--k-s-4); line-height: 1.6; }
.k-wc .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox input { margin-block-start: 3px; }
.k-wc abbr.required { text-decoration: none; border: 0; color: var(--k-sale); }