/* ==========================================================================
   11-WOOCOMMERCE-BRIDGE.CSS — Al Aliyah Supermarket

   WHY THIS FILE EXISTS (added 2026-09-02, not part of the original kit).

   Every other stylesheet in this kit is built on its own `.aly-*` class
   names — `.aly-btn`, `.aly-input`, `.aly-product-card` and so on — and
   contains ZERO WooCommerce selectors. That is fine for a standalone
   component library, but WooCommerce renders its own markup with its own
   classes (`.woocommerce .button`, `ul.products li.product`, `.quantity`,
   `.woocommerce-message`, …), and nothing in the kit ever reached any of
   it. The result on the live site was a correctly-styled header sitting on
   top of an entirely unstyled cart, checkout, account and product loop.

   This file is the bridge: it maps WooCommerce's real markup onto the
   kit's tokens and component treatments. It defines NO new colours, sizes
   or fonts — every value here is a var() from 00-tokens.css. If a value
   needs to change, change it in 00-tokens.css, never here.

   Load order: after every other kit file, so it can rely on the tokens and
   deliberately override WooCommerce's own late-loading defaults. Selector
   specificity is kept as low as the job allows; `.woocommerce` prefixes are
   present because WooCommerce's own rules carry them and would otherwise win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS — WooCommerce, Elementor and the block cart/checkout
   -------------------------------------------------------------------------- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  /* PRIMARY = brand gold with an ink label.
     `05-components.md` §Buttons is unambiguous: Primary is --gold-500 filled
     with a --night-900 label, and 00-tokens.css encodes the same pairing as
     --color-brand-surface / --color-brand-surface-label ("a gold button ALWAYS
     takes the near-black ink label"). The prototype's add-to-cart is that
     button.

     This file previously painted every WooCommerce button gold-800 on white
     and reserved brand gold for the Buy Now plugin, on the reasoning that two
     gold buttons on one card compete. That reasoning is sound but it inverts
     the system: Add to cart is the action the design system specifies as
     primary, and Buy Now is a plugin addition the design system does not
     describe at all. So the primary treatment goes to the primary action, and
     Buy Now steps down to Tertiary below — one loud button per card, and it
     is the one the spec names. */
  background: var(--color-brand-surface);
  color: var(--color-brand-surface-label);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--gold-400);
  color: var(--color-brand-surface-label);
}

.woocommerce .button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wc-block-components-button:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.wc-block-components-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Secondary / quieter actions: "Return to shop", "Continue shopping",
   "Update cart" — outlined rather than solid, so one primary action reads
   per view. */
.woocommerce .wc-backward,
.woocommerce .return-to-shop .button,
.woocommerce button[name="update_cart"],
.woocommerce a.button.wc-backward {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.woocommerce .wc-backward:hover,
.woocommerce .return-to-shop .button:hover,
.woocommerce button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover {
  background: var(--color-surface-sunk);
  border-color: var(--color-link);
  color: var(--color-link);
}

/* Buy Now, from the active wpc-buy-now-button plugin. It skips the cart and
   goes straight to checkout — which fires the mandatory OTP popup.

   It takes the kit's TERTIARY treatment: transparent, 1px gold-800 border,
   gold-800 label (`05-components.md` §Buttons). It used to be the gold one
   and Add to cart the quiet one; that is now the other way round, because
   Add to cart is the action the design system names as primary and Buy Now is
   a plugin the design system does not cover. Tertiary keeps it clearly
   available without two loud buttons stacked on one card.

   The !important flags are the plugin's own doing — it ships inline styles —
   and are why they were here before this change too. */
.woocommerce .wpcbn-btn,
.wpcbn-btn-single,
a.wpcbn-btn {
  background: transparent !important;
  color: var(--gold-text-on-cream) !important;
  border: 1px solid var(--gold-text-on-cream) !important;
}

.woocommerce .wpcbn-btn:hover,
.wpcbn-btn-single:hover,
a.wpcbn-btn:hover {
  background: var(--gold-50) !important;
  color: var(--gold-text-on-cream) !important;
}

/* --------------------------------------------------------------------------
   2. PRODUCT LOOP — archive and any [products] shortcode
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: auto !important;
  margin: 0 !important;
  padding: var(--space-3);
  float: none !important;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

/* Product titles are machine-imported: ALL-CAPS, embedded pack sizes and
   model numbers, some past 200 characters. Normalisation per
   05-components.md — cap the visual shout with a small-caps-ish treatment
   and clamp to three lines so a 200-character title cannot blow out the
   grid row. The full title stays in the DOM for screen readers and SEO. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  text-transform: none;
  word-break: break-word;
  hyphens: auto;
}

.woocommerce ul.products li.product .price {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.875rem;
  margin-inline-end: var(--space-2);
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--color-error-strong);
}

.woocommerce ul.products li.product .button {
  margin-top: auto;
  width: 100%;
}

/* Sale flash — amber surface with a dark label, never a white-on-gold fill. */
.woocommerce span.onsale {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: var(--space-3);
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-brand-surface);
  color: var(--color-brand-surface-label);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.woocommerce ul.products li.product { position: relative; }

/* --------------------------------------------------------------------------
   3. CATEGORY TILES on the shop root
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product-category > a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
}

.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.woocommerce ul.products li.product-category .count {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunk);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. SINGLE PRODUCT
   -------------------------------------------------------------------------- */
.woocommerce div.product .product_title {
  font-family: var(--font-sans);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  text-transform: none;
  word-break: break-word;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.woocommerce div.product p.price del { color: var(--color-text-muted); font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--color-error-strong); }

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-body);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  border-bottom-color: var(--color-link);
  color: var(--color-link);
  font-weight: 600;
}

.woocommerce div.product .stock.in-stock { color: var(--color-success-deep); font-weight: 500; }
.woocommerce div.product .stock.out-of-stock { color: var(--color-error-strong); font-weight: 500; }

/* --------------------------------------------------------------------------
   5. QUANTITY STEPPER
   -------------------------------------------------------------------------- */
.woocommerce .quantity input.qty {
  width: 4.5rem;
  min-height: 44px;
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.woocommerce .quantity input.qty:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 1px;
  border-color: var(--color-link);
}

/* --------------------------------------------------------------------------
   6. FORMS — checkout, account, address, login
   -------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container .select2-selection--single,
.wc-block-components-text-input input {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.wc-block-components-text-input input:focus {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 1px;
  border-color: var(--color-link);
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
}

.woocommerce form .form-row .required { color: var(--color-error-strong); text-decoration: none; }

.woocommerce form.login,
.woocommerce form.register,
.woocommerce-EditAccountForm,
.woocommerce form.checkout_coupon {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* --------------------------------------------------------------------------
   7. NOTICES — the semantic trio
   -------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid transparent;
  border-inline-start-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-info-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

.woocommerce-message { background: var(--color-success-bg); border-inline-start-color: var(--color-success-deep); }
.woocommerce-info    { background: var(--color-info-bg);    border-inline-start-color: var(--color-info); }
.woocommerce-error   { background: var(--color-error-bg);   border-inline-start-color: var(--color-error-strong); }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { margin-inline-start: auto; }

/* --------------------------------------------------------------------------
   8. CART AND ORDER TABLES
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table,
.woocommerce table.cart,
.woocommerce-orders-table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

.woocommerce table.shop_table th {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunk);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: start;
}

.woocommerce table.shop_table td {
  padding: var(--space-4);
  border-top: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-body);
  vertical-align: middle;
}

.woocommerce table.shop_table tr:last-child td { border-bottom: none; }

.woocommerce table.shop_table .product-name a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover { color: var(--color-link); }

.woocommerce table.shop_table td.product-total,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table .amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text);
}

.woocommerce .cart_totals table.shop_table,
.woocommerce-checkout-review-order-table { font-size: 0.9375rem; }

.woocommerce .cart-collaterals .cart_totals h2,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Remove-from-cart control: a real 44px target, not a bare glyph. */
.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--color-surface-sunk);
  color: var(--color-text-muted) !important;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}

.woocommerce a.remove:hover {
  background: var(--color-error-bg);
  color: var(--color-error-strong) !important;
}

/* --------------------------------------------------------------------------
   9. MY ACCOUNT
   -------------------------------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-text-body);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover { background: var(--color-surface-sunk); color: var(--color-link); }

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--gold-100);
  color: var(--color-link);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   10. BREADCRUMBS, PAGINATION, SORTING, RESULT COUNT
   -------------------------------------------------------------------------- */
.woocommerce .woocommerce-breadcrumb {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

.woocommerce .woocommerce-breadcrumb a { color: var(--color-text-body); text-decoration: none; }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--color-link); text-decoration: underline; }

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  border: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0; overflow: visible; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-body);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--color-link);
  color: var(--color-link);
  background: var(--color-surface);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-link);
  border-color: var(--color-link);
  color: var(--color-text-on-dark);
  font-weight: 600;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.woocommerce .woocommerce-ordering select {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   11. YITH AJAX FILTERS — style the plugin's output, never rebuild it
   -------------------------------------------------------------------------- */
.yith-wcan-filters {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-family: var(--font-sans);
}

.yith-wcan-filters .filter-title,
.yith-wcan-filters h3 {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.yith-wcan-filters .filter-item a,
.yith-wcan-filters label {
  color: var(--color-text-body);
  font-size: 0.9375rem;
}

.yith-wcan-active-filters .active-filter,
.yith-wcan-filters .yith-wcan-filter-item.active {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  color: var(--gold-800);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   12. EMPTY STATES
   -------------------------------------------------------------------------- */
.woocommerce .cart-empty,
.woocommerce-info.cart-empty,
.woocommerce .woocommerce-no-products-found {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  font-size: 1.0625rem;
  color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   13. RTL — logical properties do most of the work above; these are the
   few places WooCommerce hardcodes a physical direction.
   -------------------------------------------------------------------------- */
[dir="rtl"] .woocommerce table.shop_table th,
[dir="rtl"] .woocommerce table.shop_table td { text-align: start; }

[dir="rtl"] .woocommerce .quantity input.qty { direction: ltr; }

/* Prices and phone numbers stay LTR even in an RTL document. */
[dir="rtl"] .woocommerce .price,
[dir="rtl"] .woocommerce .amount { direction: ltr; display: inline-block; }

/* --------------------------------------------------------------------------
   14. NORMALISED PRODUCT TITLE — the three slots inc/product-title.php emits
   (05-components.md § Product title normalisation and truncation).
   -------------------------------------------------------------------------- */
.aly-card-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block: var(--space-2) var(--space-1);
}

.aly-card-brand {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  /* Manufacturer logotypes are legitimately capitalised — never re-case here. */
  text-transform: none;
}

.woocommerce ul.products li.product .aly-card-title,
.aly-card-title {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0;
  /* Two-line clamp; the PHP filter already applied the ~120 character cap, so
     this is the visual half of the pair, not the whole rule. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Never blanket-capitalize: on a fully-uppercase string it does nothing. */
  text-transform: none;
}

.aly-card-unit {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Cart line items get a third line — more horizontal room, per the spec. */
.woocommerce-cart .aly-card-title,
.woocommerce-checkout .aly-card-title {
  -webkit-line-clamp: 3;
}

/* Single product <h1> is never clamped: it wraps in full. */
.woocommerce div.product .product_title {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
  text-transform: none;
}

/* The product gallery must not run away with the page. */
.woocommerce div.product div.images img,
.elementor-widget-woocommerce-product-images img {
  max-block-size: 520px;
  inline-size: auto;
  margin-inline: auto;
  object-fit: contain;
}

/* YITH renders an empty shell when a category has no configured filters —
   collapse it rather than leaving a blank pill holding open the layout. */
.elementor-widget-yith_wcan_filters:has(.yith-wcan-filters:empty),
.yith-wcan-filters:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   15. THE SERIF LEAK — Elementor's product widgets bind titles, prices and
   section headings to the PRIMARY global typography, which this design system
   sets to Cormorant Garamond (a display serif). elementor-globals.md section 6
   names this the single most likely thing to go wrong in the migration, and it
   is item 1 on the QA checklist: every heading in a shopping-flow template
   must be Inter.

   WHY THE `.elementor-kit-4271` PREFIX. Elementor writes these rules into its
   own per-template file (uploads/elementor/css/post-24702.css and friends) at
   EXACTLY the specificity used below minus this prefix, and that file is
   enqueued after the theme's. Identical specificity plus later source order
   means Elementor wins, so an unprefixed override here silently does nothing.
   The kit class sits on <body>, is stable for the life of kit 4271, and buys
   exactly one class of specificity — enough to win without !important, so a
   deliberate, more specific rule later can still override this.

   These files are regenerated whenever a template is saved, and they come back
   at the same specificity, so this override keeps working across regeneration.
   If the kit id ever changes, update the prefix here.

   Cormorant stays available for genuine brand-display moments through
   .aly-display and --font-display. It must never reach a product title, price,
   button, label or nav item.
   -------------------------------------------------------------------------- */
.elementor-kit-4271 .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title,
.elementor-kit-4271 .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .aly-card-title,
.elementor-kit-4271 .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .aly-card-brand,
.elementor-kit-4271 .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .aly-card-unit,
.elementor-kit-4271 .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title,
.elementor-kit-4271 .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title,
.elementor-kit-4271 .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .aly-card-title {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
}

.elementor-kit-4271 .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .aly-card-brand {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.elementor-kit-4271 .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .aly-card-unit {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.elementor-kit-4271 .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price,
.elementor-kit-4271 .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del,
.elementor-kit-4271 .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins,
.elementor-kit-4271 .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

.elementor-kit-4271 .elementor-widget-wc-archive-products.products-heading-show .upsells > h2,
.elementor-kit-4271 .elementor-widget-wc-archive-products.products-heading-show .cross-sells > h2,
.elementor-kit-4271 .elementor-widget-woocommerce-product-related .related > h2,
.elementor-kit-4271 .elementor-widget-woocommerce-product-upsell .upsells > h2 {
  font-family: var(--font-sans);
  font-weight: 600;
}

.elementor-kit-4271 .elementor-widget-woocommerce-product-title .product_title,
.elementor-kit-4271 .elementor-widget-woocommerce-product-price .price,
.elementor-kit-4271 .elementor-widget-woocommerce-product-price .price ins,
.elementor-kit-4271 .elementor-widget-woocommerce-product-price .price del,
.elementor-kit-4271 .elementor-widget-woocommerce-product-add-to-cart .cart button,
.elementor-kit-4271 .elementor-widget-woocommerce-product-data-tabs .woocommerce-tabs li a {
  font-family: var(--font-sans);
}
/* --------------------------------------------------------------------------
   16. MINI-CART (header side cart) — Elementor Pro's menu-cart drawer.

   Out of the box it bound product names, prices, buttons and the empty
   message to the PRIMARY global (Cormorant Garamond, large, gold, uppercase),
   left the quantity/price line at Elementor's #d5d8dc (unreadable on white)
   and drew View cart / Checkout as flat grey squares side by side, so
   "View cart" wrapped. This restyles it to the kit: Inter 14 two-line names,
   an ink price line, a label-left/amount-right subtotal, and the kit's
   buttons stacked full width — Checkout (primary gold) first, View cart
   (tertiary outline), then the theme's own "Continue shopping" (ghost),
   printed by inc/mini-cart.php and wired by js/mini-cart.js.

   Every selector carries the kit prefix: Elementor's widget stylesheet, the
   kit (`.elementor-kit-4271 a`, `.elementor-kit-4271 .elementor-button`,
   `.elementor-kit-4271 button`) and the header template's per-widget rules
   all sit at two or three classes. The remove-button variables are declared
   on the remove element itself because the header template sets them on the
   widget at three-class specificity.
   -------------------------------------------------------------------------- */
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button,
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
  font-family: var(--font-sans);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
  width: min(400px, 100vw);
  padding: var(--space-4) var(--space-5) var(--space-5);
  background-color: var(--color-surface);
  color: var(--color-text-body);
}

/* Items scroll; subtotal and buttons stay pinned at the bottom of the drawer.
   Elementor's fixed max-height (100vh - 250px) assumed two short buttons. */
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .widget_shopping_cart_content {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__products {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* ---- One item: 64px thumbnail | name over price, × top right ---- */
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product {
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  padding-block: var(--space-4);
  padding-inline-end: 40px;
  border-bottom: var(--border-width) solid var(--color-border);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product:last-child {
  border-bottom: 0;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  padding: var(--space-1);
  background-color: var(--surface-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name,
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price {
  grid-column: 2;
  margin: 0;
  padding: 0;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name {
  grid-row: 1;
  align-self: start;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
  text-decoration: none;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price {
  grid-row: 2;
  align-self: start;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price .amount {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove {
  --remove-item-button-size: 28px;
  --remove-item-button-color: var(--ink-600);
  --remove-item-button-hover-color: var(--color-error-strong);
  top: var(--space-4);
  bottom: auto;
  inset-inline-end: 0;
  border-color: var(--cream-500);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:hover {
  border-color: var(--color-error-strong);
}

/* ---- Subtotal: label left, amount right ---- */
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex: none;
  margin: 0;
  padding-block: var(--space-4);
  border-width: var(--border-width) 0 0;
  border-color: var(--color-border-strong);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-align: start;
  color: var(--color-text);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal strong {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text-body);
}

/* ---- Buttons: stacked, full width; Checkout first ---- */
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: none;
  padding-top: 0;
  margin: 0;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  height: auto;
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout {
  order: -1;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-label);
  box-shadow: var(--shadow-sm);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover {
  background-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-label);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart {
  background-color: transparent;
  border-color: var(--btn-tertiary-border);
  color: var(--btn-tertiary-label);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover {
  background-color: var(--color-surface-sunk);
  color: var(--btn-tertiary-label);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button .elementor-button-text {
  color: inherit;
  font: inherit;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .aly-mini-cart__continue-wrap {
  flex: none;
  padding-top: var(--space-1);
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .aly-mini-cart__continue,
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .aly-mini-cart__continue:hover,
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .aly-mini-cart__continue:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-target-min);
  margin: 0;
  padding: var(--space-2) var(--space-5);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--btn-ghost-label);
  cursor: pointer;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .aly-mini-cart__continue:hover {
  background-color: var(--color-surface-sunk);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button:focus-visible,
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .aly-mini-cart__continue:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

/* One class past Elementor's own `.elementor-menu-cart__main .widget_shopping_cart_content …` rule. */
.elementor-kit-4271 .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
  padding-block: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  text-align: center;
  color: var(--color-text-body);
}

/* --------------------------------------------------------------------------
   17. EMPTY FILTER RAIL — neither YITH preset has any filters configured, so
   the widget renders a 316-byte shell with no visible content that still holds
   open ~64px of blank layout above the grid. The earlier :empty rule missed it
   because the shell contains whitespace and wrapper nodes, not nothing.

   This hides the widget only while it genuinely has no filter inside it. The
   moment someone configures filters in YITH the selector stops matching and
   the rail appears on its own — no CSS change needed.
   -------------------------------------------------------------------------- */
.elementor-widget-yith_wcan_filters:not(:has(.yith-wcan-filter)):not(:has(.aly-filters)),
.elementor-widget-yith_wcan_filters:not(:has(.yith-wcan-filters__content)):not(:has(.aly-filters)) {
  display: none;
}

/* --------------------------------------------------------------------------
   18. THE DISPLAY SERIF — letting `.aly-display` through Elementor's pin

   Section 15 records why h1–h6 are pinned to Inter in Elementor's Theme
   Style: Elementor writes typography into its own per-template file, bound to
   the PRIMARY global, and that file loads after the theme's. Pinning the
   headings to Inter is what stops product titles and prices rendering in
   Cormorant Garamond.

   That pin is right for headings in general — `00-tokens.css` sets
   `--font-heading: var(--font-sans)` deliberately, and `03-typography.md` §1
   gives Inter "100% of the shopping UI". But the same pin also caught
   `.aly-display`, which is the ONE gate the kit provides to the brand serif
   and is exactly what the hero headline, category-hero titles and homepage
   section openers are specified to use (`03-typography.md` §1). With the pin
   winning, `.aly-display` silently did nothing: the hero rendered in Inter,
   in the Theme Style's ink colour, on the night ground it was supposed to sit
   light on.

   Prefixing with the kit's body class buys exactly one class of specificity —
   the same trick, for the same reason, as section 15 — so the deliberate
   serif wins while the accidental one stays gone. Elementor regenerates its
   file at the same specificity on every save, so this survives regeneration.
   IF THE KIT ID EVER CHANGES, UPDATE THIS PREFIX (and section 15's).
   -------------------------------------------------------------------------- */
.elementor-kit-4271 .aly-display,
.elementor-kit-4271 h1.aly-display,
.elementor-kit-4271 h2.aly-display,
.elementor-kit-4271 h3.aly-display,
.elementor-kit-4271 h4.aly-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: 0.005em;
}

/* `[dir="rtl"]` / Arabic sibling: Amiri, per 02-typography.css's own rule. */
.elementor-kit-4271 .aly-display[lang="ar"],
[dir="rtl"] .elementor-kit-4271 .aly-display {
  font-family: var(--font-ar-display);
}

/* Colour is a separate battle from family: Elementor's Theme Style sets an
   ink colour on h1–h6, which is correct on a light ground and unreadable on
   the hero's night one. Only the components that own a dark ground opt out. */
.elementor-kit-4271 .aly-hero__title,
.elementor-kit-4271 .aly-whatsapp-strip__title {
  color: var(--cream-50);
}

.elementor-kit-4271 .aly-hero__title em { color: var(--gold-500); }
.elementor-kit-4271 .aly-hero__title-ar { color: var(--gold-500); }

/* --------------------------------------------------------------------------
   19. THE CATEGORY / SHOP HERO TITLE — the one heading in the shopping flow
   that IS specified as the display serif.

   `03-typography.md` §2 works the number out explicitly: "The category-page
   hero title plays the same visual role as an Inter H1 (32px bold). In
   Cormorant it is set at 38px (32 x 1.20 ≈ 38.4) at weight 600." The archive
   template's hero already renders at 38px — but in Inter, because it is an
   Elementor heading widget and the Theme Style pins h1–h6 to Inter (see
   section 18).

   This is the deliberate exception to that pin, and it is narrow on purpose:
   the archive hero H1 only, on product-archive body classes only. It cannot
   reach a product title, a price, a button or a nav item — the four things
   §1 of that document says Cormorant must never touch — because none of them
   is an `h1.elementor-heading-title` on these pages.

   Weight 600 is the floor `03-typography.md` §2 sets for the 32–47px band.
   -------------------------------------------------------------------------- */
.elementor-kit-4271.post-type-archive-product .elementor-element h1.elementor-heading-title,
.elementor-kit-4271.tax-product_cat .elementor-element h1.elementor-heading-title,
.elementor-kit-4271.tax-product_tag .elementor-element h1.elementor-heading-title,
.elementor-kit-4271.search-results .elementor-element h1.elementor-heading-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: 0.005em;
  line-height: var(--lh-tight);
}

[dir="rtl"] .elementor-kit-4271.post-type-archive-product .elementor-element h1.elementor-heading-title,
[dir="rtl"] .elementor-kit-4271.tax-product_cat .elementor-element h1.elementor-heading-title {
  font-family: var(--font-ar-display);
}

/* --------------------------------------------------------------------------
   17b. SUPERSEDES SECTION 17.

   Section 17 hid the YITH filter widget while it had no filter inside it, on
   the reading that the presets were unconfigured. They are not: preset 1085
   carries three filters under the `_filters` meta key (the earlier check
   looked at `filters`). What is actually wrong is that YITH free renders
   PLACEHOLDER rows — `.filter-placeholder`, disabled checkboxes, empty
   `.item-placeholder` spans — and fills them over AJAX, and that fill never
   completes on this install. So the rail was a permanent skeleton, not an
   empty widget.

   inc/filter-rail.php now replaces that widget's output entirely (Department
   and Price, server-rendered, real URLs), so section 17's rule can no longer
   match anything the visitor sees. It is left in place, inert, rather than
   deleted: if the render_content filter is ever removed to bring YITH back,
   that rule is the thing that keeps a broken skeleton from returning with it.

   YITH's own lazy-render failure is worth diagnosing separately — it is a
   plugin bug or a blocked wc-ajax route, not a styling problem.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   20. THE TWO-COLUMN ROWS THAT NEVER GOT THEIR COLUMN WIDTHS

   Both net-new Theme Builder templates were built with the right structure and
   an incomplete one: the container holding gallery + summary (Single Product,
   24700), and the one holding filter rail + grid (Product Archive, 24702), are
   each already `flex-direction: row` with two children — but neither child was
   given a width. Two flex children at their default `flex: 0 1 auto` with
   `width: 100%` from Elementor's container CSS resolve to full width each, the
   row wraps, and the "two-column" layout renders as a stack.

   On the archive that was invisible while the filter widget rendered nothing.
   On the product page it was not invisible at all: the gallery took the whole
   1140px content column, so a 30g sachet of cocoa opened at close to a metre
   wide, with the price and add-to-cart pushed below the fold.

   `06-pages.md` §4 specifies gallery + summary side by side above tablet and
   stacked below; §2 specifies the archive's sticky aside. The archive half
   lives in 13-filters.css beside the rest of the rail; this is the product
   half. Ratio from the same source: gallery slightly the wider of the two.

   Selected via :has() on the widget each column contains rather than by
   Elementor element id, so re-saving the template cannot silently detach it.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .elementor-location-single .e-con-inner > .e-con:has(> .elementor-widget-woocommerce-product-images) {
    flex: 1 1 0;
    min-width: 0;
  }

  .elementor-location-single .e-con-inner > .e-con:has(.elementor-widget-woocommerce-product-title) {
    flex: 0.94 1 0;
    min-width: 0;
  }
}

/* The gallery image is the one thing that must not outgrow its column, in
   either layout — WooCommerce's own gallery CSS assumes a theme sidebar it
   does not have here. */
.woocommerce div.product div.images img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   21. THE PRODUCT GRID DID NOT LINE UP

   Measured on /product-category/grocery/: within a single row, the unit line,
   price, Add to cart and Buy now sat at four different heights. A one-line
   title left them at 241/263/287/337px from the card top; a two-line title
   pushed the same four to 261/283/307/357; a card with no brand line pulled
   them 19px the other way. Card heights were equal — the grid stretches them —
   so every misalignment was internal.

   Three causes, all fixed here.

   1. THE CARD WAS NEVER A FLEX COLUMN. Section 2 sets `display: flex` on
      `li.product`, and Elementor's grid overrides it at
      `.elementor-products-grid ul.products.elementor-grid li.product` with
      `display: var(--button-align-display)`, which resolves to `block`. That
      selector weighs (0,4,1) against section 2's (0,2,1), so it won, and with
      no flex context nothing could be bottom-aligned at all.

   2. THE TITLE CLAMP RESERVED NO SPACE. Section 14 clamps the title to two
      lines, which caps the maximum and does nothing for the minimum, so a
      one-line title is 20px shorter than its neighbour and drags everything
      below it up. `05-components.md` §Product card specifies a two-line clamp
      as the card's fixed title slot; the prototype implements it as a fixed
      two-line height, which is what a minimum here restores.

   3. THE BRAND LINE IS OPTIONAL. inc/product-title.php deliberately declines
      to guess a brand out of an all-caps title, so roughly one card in eight
      has no brand line and starts 17px higher than the rest of its row. The
      slot is now always rendered and always occupies its line, empty or not.

   The price sits INSIDE the card's loop link, not beside it, so the bottom
   anchor goes on that link: it grows to fill the card, and the price rides its
   lower edge. Add to cart and Buy now are siblings of the link — correctly so,
   per the spec's rule against nesting interactive elements inside the card
   link — and therefore follow it down.
   -------------------------------------------------------------------------- */
.woocommerce .elementor-products-grid ul.products.elementor-grid li.product {
  display: flex;
  flex-direction: column;
  /* Section 2's `padding: var(--space-3)` lost to the same Elementor selector,
     which sets `padding: 0` — so every card's text and buttons sat flush
     against the card border. It is restored here, but NOT as uniform padding:
     the prototype runs the product image full-bleed to the card edge and pads
     only the body beneath it. So the padding goes on the contents, and the
     card keeps a bottom inset. `overflow: hidden` makes the card's own radius
     clip the image's top corners. */
  padding: 0 0 var(--space-3);
  overflow: hidden;
}

.woocommerce ul.products li.product .aly-card-title-block,
.woocommerce ul.products li.product .price {
  padding-inline: var(--space-3);
}

/* The buttons are flex children of the card, so they take their inset from a
   margin rather than the card's padding. `width: auto` is required with it:
   Elementor sizes them to 100% of the card, and 100% PLUS two margins
   overhangs the card edge by exactly one margin's width on the end side.
   `align-self: stretch` then fills what is left between the two margins. */
.woocommerce .elementor-products-grid ul.products li.product > .button,
.woocommerce .elementor-products-grid ul.products li.product > .wpcbn-btn {
  inline-size: auto;
  align-self: stretch;
  margin-inline: var(--space-3);
}

/* Full-bleed: the card's radius does the clipping, so the image carries none
   of its own — a 12px radius inside a 16px one reads as a mistake. */
.woocommerce .elementor-products-grid ul.products li.product a img {
  border-radius: 0;
}

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.woocommerce ul.products li.product .price {
  margin-block-start: auto;
  padding-block-start: var(--space-1);
}

/* Two lines, always — the clamp is the ceiling, this is the floor. */
.woocommerce ul.products li.product .aly-card-title {
  min-block-size: calc(1.35em * 2);
}

/* The brand slot holds its line even when there is no brand to put in it. */
.woocommerce ul.products li.product .aly-card-brand {
  display: block;
  min-block-size: 1.5em;
}

/* --------------------------------------------------------------------------
   22. THE ARCHIVE HERO RAN 10px PAST THE VIEWPORT

   The Product Archive template's boxed containers are laid out as
   `width: 100%` PLUS a 20px horizontal margin, inside a parent that already
   carries 10px of padding. 100% resolves against the parent's content box, so
   the margins are added on top of a box that is already full width and each
   band overhangs by 20px — 10px of it past the viewport edge, which is why the
   category hero's rounded panel appeared to be sliced off on the right.

   It was invisible as a scrollbar only because `body` carries
   `overflow-x: clip`, which hides the symptom and not the cause.

   `width: auto` lets a flex child fill the line MINUS its margins, which is
   what `width: 100%` was reaching for. Scoped to the two WooCommerce Theme
   Builder locations so no other template's containers are touched.
   -------------------------------------------------------------------------- */
.elementor-location-archive .e-con-full > .e-con-boxed,
.elementor-location-single .e-con-full > .e-con-boxed {
  inline-size: auto;
}

/* --------------------------------------------------------------------------
   23. THE PAGE-TITLE BAND ON CART, CHECKOUT AND MY ACCOUNT

   hello-elementor prints `<h1 class="entry-title">` in a full-width band above
   the content on every page. On the three transactional pages that produced a
   large "Cart", "Checkout" or "My account" slab above the thing the shopper
   actually came to use. Removed on the owner's instruction, and consistent
   with the specs: `06-pages.md` §5, §6 and §8 draw none of the three with a
   title band, and `prototype.html` puts each screen's heading inside its
   content column instead.

   HIDDEN, NOT DELETED. The band carries the page's only H1, so suppressing it
   in PHP would leave these pages with no heading for a screen-reader user to
   orient by — and each would then need a hidden one printed back somewhere
   else (the cart needs two, because its empty state renders through a template
   that fires no WooCommerce actions). This is the same clip treatment
   `.aly-sr-only` uses: no visual footprint, no layout, heading intact.

   Home is NOT in this list. There the band is suppressed in PHP instead
   (aly_suppress_page_title), which is correct because the hero supplies its
   own H1 and two would be one too many.
   -------------------------------------------------------------------------- */
.woocommerce-cart .page-header,
.woocommerce-checkout .page-header,
.woocommerce-account .page-header {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   §2b  PRODUCT CARD REVISION (2026-09-25, spec §6.2a). Loads after §2 and
   wins on order at equal specificity; the kit prefix keeps specificity level.
   -------------------------------------------------------------------------- */
.elementor-kit-4271 ul.products li.product {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface-white); border-radius: 10px; box-shadow: var(--elevation-hairline); padding: var(--space-3);
}
.elementor-kit-4271 ul.products li.product .woocommerce-LoopProduct-link img {
  inline-size: 100%; aspect-ratio: 1; object-fit: contain; background: var(--cream-50); border-radius: var(--radius-sm); mix-blend-mode: multiply;
}
.elementor-kit-4271 ul.products li.product span.onsale { display: none; }
.elementor-kit-4271 ul.products li.product .aly-card-brand { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); min-block-size: 14px; }
.elementor-kit-4271 ul.products li.product .aly-card-title { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.35; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-block-size: calc(2 * 1.35 * var(--fs-sm)); }
.elementor-kit-4271 ul.products li.product .aly-card-unit { font-size: var(--fs-xs); color: var(--color-text-muted); }
.elementor-kit-4271 ul.products li.product .price { font-family: var(--font-sans); font-size: 17px; font-weight: var(--fw-bold); color: var(--color-text); font-variant-numeric: tabular-nums; margin: 0; }
.elementor-kit-4271 ul.products li.product .price .woocommerce-Price-currencySymbol { font-size: 0.6em; vertical-align: super; margin-inline-end: 2px; }
.elementor-kit-4271 ul.products li.product .price del { color: var(--color-text-muted); font-weight: var(--fw-regular); font-size: var(--fs-sm); margin-inline-end: 4px; }
.elementor-kit-4271 ul.products li.product .price ins { text-decoration: none; }
.elementor-kit-4271 ul.products li.product a.add_to_cart_button,
.elementor-kit-4271 ul.products li.product .aly-stepper--card { margin-block-start: auto; }
.elementor-kit-4271 ul.products li.product a.add_to_cart_button { inline-size: 100%; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .elementor-kit-4271 ul.products li.product { transition: transform var(--duration-fast) var(--ease-brand), box-shadow var(--duration-fast) var(--ease-brand); }
  .elementor-kit-4271 ul.products li.product:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--elevation-hairline); }
}

/* §2c The card stepper takes the Add to cart button's box: same inset, full width, same
   height. It was a 128×44 block flush against the card's left edge, and the kit's button
   padding (12px 22px) made each − / + 51px tall inside it, so the glyphs sat low.
   WooCommerce's "View cart" link after an add is hidden: the stepper shows the quantity and
   the "Added to basket · View" toast (js/mobile-bar.js) carries the cart link. */
.woocommerce .elementor-products-grid ul.products li.product > .aly-stepper--card {
  align-self: stretch; inline-size: auto; margin-inline: var(--space-3);
  block-size: 50px; grid-template-columns: 50px 1fr 50px; border-radius: 12px;
}
.elementor-kit-4271 ul.products li.product .aly-stepper--card .aly-stepper__btn {
  display: grid; place-items: center; padding: 0; min-block-size: 0; line-height: 1; border-radius: 12px;
}
.elementor-kit-4271 ul.products li.product .added_to_cart { display: none; }
@media (max-width: 767px) {
  /* Two cards a row leave ~120px per button: "Add to cart" wrapped to two lines (74px tall). */
  .woocommerce .elementor-products-grid ul.products li.product > .button,
  .woocommerce .elementor-products-grid ul.products li.product > .wpcbn-btn { padding-inline: var(--space-2); white-space: nowrap; }
}

/* §24 EDITORIAL PAGES (tools/elementor/editorial-pages.php) */
.aly-editorial__body .elementor-widget-text-editor { font-size: 15px; line-height: 1.6; color: var(--color-text-body); }
.aly-editorial__body h2 { font-family: var(--font-sans); font-size: 18px; font-weight: var(--fw-semibold); color: var(--color-text); margin: var(--space-6) 0 var(--space-2); }
.aly-editorial__body h2:first-child { margin-block-start: 0; }
.aly-editorial__body p.lede { font-size: 17px; color: var(--color-text); }
.aly-editorial__body ul { padding-inline-start: 20px; }
.aly-editorial__body table { inline-size: 100%; border-collapse: collapse; background: var(--surface-white); box-shadow: var(--elevation-hairline); border-radius: var(--radius-md); overflow: hidden; }
.aly-editorial__body th { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; background: var(--cream-50); color: var(--color-text-muted); text-align: start; padding: var(--space-2) var(--space-3); }
.aly-editorial__body td { padding: var(--space-2) var(--space-3); border-block-start: 1px solid var(--cream-150); }
.aly-editorial__body details { background: var(--surface-white); border-radius: var(--radius-md); box-shadow: var(--elevation-hairline); margin-block-end: var(--space-2); }
.aly-editorial__body summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; font-weight: var(--fw-medium); color: var(--color-text); position: relative; }
.aly-editorial__body summary::-webkit-details-marker { display: none; }
.aly-editorial__body summary::after { content: "+"; position: absolute; inset-inline-end: 16px; inset-block-start: 10px; font-size: 20px; color: var(--gold-text-on-white); }
.aly-editorial__body details[open] summary { color: var(--gold-text-on-cream); }
.aly-editorial__body details[open] summary::after { content: "−"; }
.aly-editorial__body details > p { margin: 0; padding: 0 16px 14px; }
.aly-editorial__body summary:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; border-radius: var(--radius-md); }
.aly-editorial__help .elementor-button { border-radius: var(--radius-sm); }
.aly-editorial__body .wpcf7 .wpcf7-form-control:not(.wpcf7-submit) { inline-size: 100%; block-size: 48px; border: 0; border-radius: var(--radius-sm); box-shadow: var(--elevation-hairline); background: var(--surface-white); padding-inline: 12px; }
.aly-editorial__body .wpcf7 textarea.wpcf7-form-control { block-size: auto; min-block-size: 120px; padding: 12px; }
.aly-editorial__body .wpcf7 .wpcf7-submit { block-size: 48px; border: 0; border-radius: var(--radius-sm); background: var(--gold-500); color: var(--ink-900); font-weight: var(--fw-semibold); padding-inline: 24px; cursor: pointer; }
@media (max-width: 1023px) { .aly-editorial__body, .aly-editorial__help { inline-size: 100% !important; } }