@charset "UTF-8";
/* ==========================================================================
   ELYX AMINOS - STORE UX LAYER
   Implements the Intruxt Marketing "Website Improvements" report (Aug 2026).
   Loaded by wp-content/novamira-sandbox/elyx-store-ux.php
   --------------------------------------------------------------------------
   00  Design tokens
   01  Header                    (Report issue 01)
   02  Product cards             (Report issue 02)
   03  Category tiles            (Report issue 03)
   04  Shop toolbar / filters    (Report issue 04)
   05  Product page - desktop    (Report issue 05)
   06  Product page - mobile     (Report issue 06)
   07  Side cart                 (Report issue 07)
   08  Cart page                 (Report issue 08)
   09  Checkout                  (Report issue 09)
   ========================================================================== */

/* ==========================================================================
   00  DESIGN TOKENS - one spacing scale, one button system, one card geometry
   ========================================================================== */
.elyx-ux {
  /* Brand (unchanged - taken from the Elementor global kit) */
  --elyx-primary:      #164882;
  --elyx-primary-700:  #10375f;
  --elyx-primary-600:  #1e5aa8;
  --elyx-cyan:         #48dfe4;
  --elyx-accent:       #ffa929;

  /* Neutrals */
  --elyx-text:         #292e35;
  --elyx-text-dim:     #6b7280;
  --elyx-text-faint:   #9aa1ad;
  --elyx-border:       #e4e8ef;
  --elyx-border-soft:  #eef1f6;
  --elyx-surface:      #ffffff;
  --elyx-surface-soft: #f7f9fc;
  --elyx-success:      #16a34a;
  --elyx-danger:       #dc2626;

  /* One spacing scale */
  --elyx-s1: 4px;
  --elyx-s2: 8px;
  --elyx-s3: 12px;
  --elyx-s4: 16px;
  --elyx-s5: 20px;
  --elyx-s6: 24px;
  --elyx-s7: 32px;
  --elyx-s8: 40px;
  --elyx-s9: 56px;
  --elyx-s10: 72px;

  /* Radii */
  --elyx-r-sm: 8px;
  --elyx-r-md: 12px;
  --elyx-r-lg: 16px;
  --elyx-r-pill: 999px;

  /* Elevation */
  --elyx-shadow-sm: 0 1px 2px rgba(16, 34, 58, .05);
  --elyx-shadow-md: 0 2px 10px rgba(16, 34, 58, .06);
  --elyx-shadow-lg: 0 8px 28px rgba(16, 34, 58, .10);

  /* Controls - every interactive control resolves to one of these heights */
  --elyx-control-h: 46px;
  --elyx-control-h-sm: 38px;

  /* Page rhythm */
  --elyx-gutter: 20px;
  --elyx-max: 1240px;
}

/* Brand gradient used by the primary buttons across the store */
.elyx-ux {
  --elyx-grad: linear-gradient(135deg, var(--elyx-primary) 0%, var(--elyx-primary-600) 55%, #2e86c8 100%);
  --elyx-grad-cyan: linear-gradient(135deg, var(--elyx-primary) 0%, var(--elyx-cyan) 140%);
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */
.elyx-ux .elyx-btn,
.elyx-ux .elyx-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--elyx-s2);
  min-height: var(--elyx-control-h);
  padding: 0 var(--elyx-s6);
  border: 0;
  border-radius: var(--elyx-r-pill);
  background: var(--elyx-grad);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, opacity .18s ease;
  box-shadow: 0 3px 12px rgba(22, 72, 130, .22);
}
.elyx-ux .elyx-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 72, 130, .30);
  color: #fff;
}
.elyx-ux .elyx-btn:active { transform: translateY(0); }
.elyx-ux .elyx-btn:focus-visible {
  outline: 3px solid rgba(22, 72, 130, .35);
  outline-offset: 2px;
}
.elyx-ux .elyx-btn--ghost {
  background: #fff;
  color: var(--elyx-primary);
  border: 1.5px solid var(--elyx-border);
  box-shadow: none;
}
.elyx-ux .elyx-btn--ghost:hover {
  color: var(--elyx-primary);
  border-color: var(--elyx-primary);
  box-shadow: var(--elyx-shadow-sm);
}

.elyx-ux .elyx-card {
  background: var(--elyx-surface);
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-lg);
  box-shadow: var(--elyx-shadow-sm);
}

/* Consistent form control geometry store-wide */
.elyx-ux .woocommerce input.input-text,
.elyx-ux .woocommerce textarea,
.elyx-ux .woocommerce select,
.elyx-ux .select2-container .select2-selection--single {
  min-height: var(--elyx-control-h);
  border: 1.5px solid var(--elyx-border);
  border-radius: var(--elyx-r-md);
  background: #fff;
  color: var(--elyx-text);
  font-size: 15px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.elyx-ux .woocommerce input.input-text:focus,
.elyx-ux .woocommerce textarea:focus,
.elyx-ux .woocommerce select:focus {
  border-color: var(--elyx-primary);
  box-shadow: 0 0 0 3px rgba(22, 72, 130, .12);
  outline: none;
}

/* Kill horizontal overflow without breaking position:sticky.
   `clip` does not create a scroll container the way `hidden` does, so the
   sticky order summary on checkout keeps working. */
:root:has(body.elyx-ux) { overflow-x: clip; }
.elyx-ux { overflow-x: clip; }

/* The reCAPTCHA badge renders a 256px logo iframe that sticks out past the
   viewport and creates a horizontal scrollbar on every page. */
.elyx-ux .grecaptcha-badge { overflow: hidden; }
.elyx-ux .grecaptcha-logo { max-width: 100%; }

/* ==========================================================================
   09  CHECKOUT  (Report issue 09 - CRITICAL)
   The previous implementation applied its two-column grid to
   `.woocommerce > #order_review`, but WooCommerce renders #order_review
   INSIDE form.checkout - so the grid never matched and checkout collapsed
   into one long narrow column. This section grids the form itself.
   ========================================================================== */

/* ---- Page shell -------------------------------------------------------- */
.elyx-checkout .woocommerce {
  max-width: var(--elyx-max);
  margin: 0 auto;
  padding: 0 var(--elyx-gutter);
}

/* Trust header above the form */
.elyx-checkout .elyx-checkout-header {
  max-width: var(--elyx-max);
  margin: var(--elyx-s3) auto var(--elyx-s6);
  padding: 0 var(--elyx-gutter);
  text-align: center;
}
.elyx-checkout .elyx-checkout-header h1 {
  margin: 0 0 var(--elyx-s2);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--elyx-primary);
}
.elyx-checkout .elyx-checkout-header p {
  margin: 0;
  color: var(--elyx-text-dim);
  font-size: 15px;
}
.elyx-checkout .elyx-checkout-header .badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--elyx-s3) var(--elyx-s6);
  margin-top: var(--elyx-s4);
}
.elyx-checkout .elyx-checkout-header .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--elyx-s1);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--elyx-text-dim);
}
.elyx-checkout .elyx-checkout-header .badge svg {
  width: 15px; height: 15px;
  fill: var(--elyx-success);
  flex: 0 0 auto;
}

/* ---- Step indicator ---------------------------------------------------- */
.elyx-ux .elyx-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--elyx-s2);
  max-width: var(--elyx-max);
  margin: 0 auto var(--elyx-s7);
  padding: 0 var(--elyx-gutter);
  list-style: none;
}
.elyx-ux .elyx-steps li {
  display: flex;
  align-items: center;
  gap: var(--elyx-s2);
  font-size: 14px;
  font-weight: 600;
  color: var(--elyx-text-faint);
  white-space: nowrap;
}
.elyx-ux .elyx-steps li::before {
  content: attr(data-step);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--elyx-r-pill);
  border: 1.5px solid var(--elyx-border);
  background: #fff;
  font-size: 13px;
  color: var(--elyx-text-faint);
}
.elyx-ux .elyx-steps li + li::after {
  content: "";
  order: -1;
  width: clamp(16px, 6vw, 64px);
  height: 2px;
  background: var(--elyx-border);
  border-radius: 2px;
}
.elyx-ux .elyx-steps li.is-done { color: var(--elyx-primary); }
.elyx-ux .elyx-steps li.is-done::before {
  background: var(--elyx-primary);
  border-color: var(--elyx-primary);
  color: #fff;
  content: "\2713";
}
.elyx-ux .elyx-steps li.is-current { color: var(--elyx-primary); }
.elyx-ux .elyx-steps li.is-current::before {
  background: var(--elyx-primary);
  border-color: var(--elyx-primary);
  color: #fff;
}

/* ---- The two-column grid ---------------------------------------------- */
.elyx-checkout form.checkout.woocommerce-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  /* Row 1 hugs the summary heading; without this the left column's height is
     shared across both rows and opens a large gap under the heading. */
  grid-template-rows: min-content auto;
  align-items: start;
  gap: var(--elyx-s3) var(--elyx-s8);
}
/* Every direct child defaults to the left column ... */
.elyx-checkout form.checkout > * {
  grid-column: 1;
  min-width: 0;
  width: 100%;
  float: none;
}
/* ... except the order summary, which owns the right column. */
.elyx-checkout form.checkout > #order_review_heading {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 var(--elyx-s3);
}
.elyx-checkout form.checkout > #order_review {
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: var(--elyx-s5);
  align-self: start;
}
.elyx-checkout form.checkout > #customer_details { grid-row: 1 / span 2; }

@media (max-width: 1024px) {
  .elyx-checkout form.checkout.woocommerce-checkout {
    grid-template-columns: 1fr;
    gap: var(--elyx-s6);
  }
  .elyx-checkout form.checkout > *,
  .elyx-checkout form.checkout > #order_review_heading,
  .elyx-checkout form.checkout > #order_review,
  .elyx-checkout form.checkout > #customer_details {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* ---- Left column: sectioned cards -------------------------------------- */
.elyx-checkout #customer_details.col2-set,
.elyx-checkout #customer_details .col-1,
.elyx-checkout #customer_details .col-2 {
  display: block;
  width: 100%;
  max-width: 100%;
  float: none;
  padding: 0;
  margin: 0;
}
.elyx-checkout .woocommerce-billing-fields,
.elyx-checkout .woocommerce-shipping-fields,
.elyx-checkout .woocommerce-additional-fields {
  background: var(--elyx-surface);
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-lg);
  padding: var(--elyx-s6);
  margin: 0 0 var(--elyx-s5);
  box-shadow: var(--elyx-shadow-sm);
}
.elyx-checkout .woocommerce-billing-fields > h3,
.elyx-checkout .woocommerce-shipping-fields > h3,
.elyx-checkout .woocommerce-additional-fields > h3,
.elyx-checkout #order_review_heading {
  display: flex;
  align-items: center;
  gap: var(--elyx-s3);
  margin: 0 0 var(--elyx-s5);
  padding: 0 0 var(--elyx-s3);
  border-bottom: 1px solid var(--elyx-border-soft);
  font-size: 18px;
  font-weight: 700;
  color: var(--elyx-text);
  letter-spacing: -.2px;
}
.elyx-checkout .woocommerce-billing-fields > h3::before,
.elyx-checkout .woocommerce-additional-fields > h3::before,
.elyx-checkout #order_review_heading::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 4px;
  background: var(--elyx-primary);
  flex: 0 0 auto;
}
.elyx-checkout #order_review_heading {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Field grid - two per row, full-width for the wide ones */
.elyx-checkout .woocommerce-billing-fields__field-wrapper,
.elyx-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--elyx-s4);
}
.elyx-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.elyx-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  float: none;
}
/* WooCommerce tags country, state, city and postcode as `form-row-wide`, which
   stacked nine fields into one tall column - the "very long and narrow form"
   in the report. Only the fields that genuinely need the full width span it;
   the rest pair up, roughly halving the height of the form. */
.elyx-checkout .woocommerce-billing-fields__field-wrapper > #billing_address_1_field,
.elyx-checkout .woocommerce-billing-fields__field-wrapper > #billing_address_2_field,
.elyx-checkout .woocommerce-billing-fields__field-wrapper > #billing_company_field,
.elyx-checkout .woocommerce-billing-fields__field-wrapper > .notes,
.elyx-checkout .woocommerce-shipping-fields__field-wrapper > #shipping_address_1_field,
.elyx-checkout .woocommerce-shipping-fields__field-wrapper > #shipping_address_2_field,
.elyx-checkout .woocommerce-shipping-fields__field-wrapper > #shipping_company_field {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .elyx-checkout .woocommerce-billing-fields__field-wrapper,
  .elyx-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}

.elyx-checkout .form-row label {
  display: block;
  margin-bottom: var(--elyx-s1);
  font-size: 13px;
  font-weight: 600;
  color: var(--elyx-text);
  letter-spacing: 0;
  text-transform: none;
}
.elyx-checkout .form-row label .required {
  color: var(--elyx-accent);
  text-decoration: none;
}
.elyx-checkout .form-row .woocommerce-input-wrapper,
.elyx-checkout .form-row .select2,
.elyx-checkout .form-row .iti {
  width: 100%;
  min-width: 0;
}
.elyx-checkout .form-row input.input-text,
.elyx-checkout .form-row textarea,
.elyx-checkout .form-row select,
.elyx-checkout .select2-container .select2-selection--single {
  width: 100%;
  height: var(--elyx-control-h);
  padding: 10px 14px;
  box-sizing: border-box;
}
.elyx-checkout .form-row textarea { height: 96px; padding-top: 12px; resize: vertical; }
.elyx-checkout .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 43px;
  padding-left: 14px;
  color: var(--elyx-text);
}
.elyx-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; }

/* Untouched required fields must not read as errors */
.elyx-checkout .form-row.woocommerce-invalid-required-field input.input-text,
.elyx-checkout .form-row.woocommerce-invalid-required-field select,
.elyx-checkout .form-row.woocommerce-invalid-required-field .select2-selection {
  border-color: var(--elyx-border);
}
.elyx-checkout .form-row.woocommerce-invalid.woocommerce-invalid-email input.input-text,
.elyx-checkout .form-row.woocommerce-invalid.woocommerce-invalid-phone input.input-text {
  border-color: var(--elyx-danger);
}
.elyx-checkout .form-row.woocommerce-validated input.input-text { border-color: var(--elyx-border); }

/* ---- Coupon ------------------------------------------------------------ */
.elyx-checkout .woocommerce-form-coupon-toggle { margin-bottom: var(--elyx-s5); }
.elyx-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.elyx-checkout .woocommerce-info {
  display: flex;
  align-items: center;
  gap: var(--elyx-s3);
  padding: 14px 18px;
  border: 1px solid var(--elyx-border);
  border-left: 3px solid var(--elyx-primary);
  border-radius: var(--elyx-r-md);
  background: rgba(22, 72, 130, .04);
  color: var(--elyx-text);
  font-size: 14px;
  line-height: 1.5;
}
.elyx-checkout .woocommerce-info::before {
  position: static;
  padding: 0;
  margin: 0;
  color: var(--elyx-primary);
  font-size: 16px;
}
.elyx-checkout .woocommerce-info a { color: var(--elyx-primary); font-weight: 600; }
.elyx-checkout .checkout_coupon {
  display: flex;
  gap: var(--elyx-s3);
  align-items: stretch;
  margin: var(--elyx-s3) 0 var(--elyx-s5);
  padding: var(--elyx-s4);
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-md);
  background: var(--elyx-surface-soft);
}
.elyx-checkout .checkout_coupon .form-row { flex: 1 1 auto; margin: 0; padding: 0; width: auto; max-width: none; }
.elyx-checkout .checkout_coupon .form-row-last { flex: 0 0 auto; }
.elyx-checkout .checkout_coupon input[type="text"] { height: var(--elyx-control-h); width: 100%; }
.elyx-checkout .checkout_coupon button {
  height: var(--elyx-control-h);
  padding: 0 var(--elyx-s6);
  border: 0;
  border-radius: var(--elyx-r-md);
  background: var(--elyx-primary);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
@media (max-width: 520px) {
  .elyx-checkout .checkout_coupon { flex-direction: column; }
}

/* ---- Right column: order summary -------------------------------------- */
.elyx-checkout #order_review {
  background: var(--elyx-surface);
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-lg);
  padding: var(--elyx-s6);
  box-shadow: var(--elyx-shadow-md);
  overflow: visible;
  box-sizing: border-box;
}
.elyx-checkout #order_review table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: transparent;
}
.elyx-checkout #order_review table.shop_table thead { display: none; }
/* Same responsive-table override as the cart: keep real th/td columns. */
.elyx-checkout #order_review table.shop_table tbody tr > th,
.elyx-checkout #order_review table.shop_table tfoot tr > th { display: block !important; }
.elyx-checkout #order_review table.shop_table td::before,
.elyx-checkout #order_review table.shop_table th::before { content: none !important; display: none !important; }
.elyx-checkout #order_review table.shop_table td { width: auto !important; }
.elyx-checkout #order_review table.shop_table tbody tr,
.elyx-checkout #order_review table.shop_table tfoot tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--elyx-s4);
  padding: var(--elyx-s3) 0;
  border-bottom: 1px solid var(--elyx-border-soft);
}
.elyx-checkout #order_review table.shop_table tbody tr:last-child { border-bottom: 1px solid var(--elyx-border); }
.elyx-checkout #order_review table.shop_table td,
.elyx-checkout #order_review table.shop_table th {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--elyx-text);
}
.elyx-checkout #order_review .product-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  text-align: left;
}
.elyx-checkout #order_review .product-name .product-quantity {
  display: inline-block;
  margin-left: var(--elyx-s2);
  padding: 1px 9px;
  border-radius: var(--elyx-r-pill);
  background: var(--elyx-primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  vertical-align: 1px;
}
.elyx-checkout #order_review .product-total,
.elyx-checkout #order_review .cart-subtotal td,
.elyx-checkout #order_review .shipping td,
.elyx-checkout #order_review tfoot td {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.elyx-checkout #order_review tfoot th {
  flex: 1 1 auto;
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  color: var(--elyx-text-dim);
  text-transform: none;
  letter-spacing: 0;
}
/* Discount rows read as credits */
.elyx-checkout #order_review tfoot tr[class*="discount"] td,
.elyx-checkout #order_review tfoot tr[class*="discount"] td .amount,
.elyx-checkout #order_review tfoot tr[class*="discount"] td bdi,
.elyx-checkout #order_review tfoot tr.cart-discount td {
  color: var(--elyx-success) !important;
}

/* Keep money at row scale in the summary panel. */
.elyx-checkout #order_review table.shop_table td .amount,
.elyx-checkout #order_review table.shop_table td bdi,
.elyx-checkout #order_review table.shop_table td .woocommerce-Price-currencySymbol {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.elyx-checkout #order_review table.shop_table tfoot tr.order-total td .amount,
.elyx-checkout #order_review table.shop_table tfoot tr.order-total td bdi,
.elyx-checkout #order_review table.shop_table tfoot tr.order-total td .woocommerce-Price-currencySymbol {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--elyx-primary) !important;
}
/* Shipping row: same wrapping treatment as the cart summary. */
.elyx-checkout #order_review table.shop_table tfoot tr.shipping,
.elyx-checkout #order_review table.shop_table tfoot tr.woocommerce-shipping-totals { flex-wrap: wrap; }
.elyx-checkout #order_review table.shop_table tfoot tr.shipping > th { flex: 1 1 100%; margin-bottom: var(--elyx-s2); }
.elyx-checkout #order_review table.shop_table tfoot tr.shipping > td {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: right;
  overflow-wrap: anywhere;
}
.elyx-checkout #order_review .shipping td label { white-space: normal; font-weight: 500; }

/* Shipping options list */
.elyx-checkout #order_review .shipping td ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.elyx-checkout #order_review .shipping td ul#shipping_method li {
  padding: 3px 0;
  font-size: 13.5px;
  font-weight: 500;
}
.elyx-checkout #order_review .shipping td ul#shipping_method li input { margin-right: var(--elyx-s1); }
.elyx-checkout #order_review .woocommerce-shipping-destination {
  margin: var(--elyx-s2) 0 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--elyx-text-dim);
  text-align: right;
}
/* Total - the strongest line in the panel */
.elyx-checkout #order_review tfoot tr.order-total {
  align-items: center;
  margin-top: var(--elyx-s2);
  padding: var(--elyx-s5) 0 var(--elyx-s2);
  border-top: 2px solid var(--elyx-primary);
  border-bottom: 0;
}
.elyx-checkout #order_review tfoot tr.order-total th {
  font-size: 15px;
  font-weight: 700;
  color: var(--elyx-text);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.elyx-checkout #order_review tfoot tr.order-total td,
.elyx-checkout #order_review tfoot tr.order-total td .amount {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--elyx-primary);
}

/* ---- Payment ----------------------------------------------------------- */
.elyx-checkout #payment {
  margin-top: var(--elyx-s5);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.elyx-checkout #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  list-style: none;
}
.elyx-checkout #payment ul.payment_methods > li {
  margin: 0 0 var(--elyx-s2);
  padding: var(--elyx-s3) var(--elyx-s4);
  border: 1.5px solid var(--elyx-border);
  border-radius: var(--elyx-r-md);
  background: #fff;
  list-style: none;
  transition: border-color .15s ease, background .15s ease;
}
.elyx-checkout #payment ul.payment_methods > li:has(input:checked) {
  border-color: var(--elyx-primary);
  background: rgba(22, 72, 130, .03);
}
.elyx-checkout #payment ul.payment_methods > li > label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--elyx-s2);
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--elyx-text);
  cursor: pointer;
}
.elyx-checkout #payment ul.payment_methods > li img {
  max-height: 22px;
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}
.elyx-checkout #payment .payment_box {
  margin: var(--elyx-s3) 0 0;
  padding: var(--elyx-s3) var(--elyx-s4);
  border: 1px solid var(--elyx-border-soft);
  border-radius: var(--elyx-r-sm);
  background: var(--elyx-surface-soft);
  color: var(--elyx-text-dim);
  font-size: 13px;
  line-height: 1.5;
}
.elyx-checkout #payment .payment_box::before { display: none; }

.elyx-checkout #payment .place-order {
  margin: var(--elyx-s5) 0 0;
  padding: 0;
  background: transparent;
}
.elyx-checkout #place_order,
.elyx-checkout button[name="woocommerce_checkout_place_order"] {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--elyx-r-md);
  background: var(--elyx-grad);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(22, 72, 130, .28);
  transition: transform .12s ease, box-shadow .18s ease;
}
.elyx-checkout #place_order:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(22, 72, 130, .36);
}
.elyx-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: var(--elyx-s3);
  font-size: 13px;
  color: var(--elyx-text-dim);
}

/* Security reassurance directly under the purchase action */
.elyx-ux .elyx-secure-note {
  display: flex;
  align-items: flex-start;
  gap: var(--elyx-s2);
  margin-top: var(--elyx-s4);
  padding: var(--elyx-s3) var(--elyx-s4);
  border: 1px solid #d8ecdd;
  border-radius: var(--elyx-r-md);
  background: #f4faf5;
  font-size: 12.5px;
  line-height: 1.5;
  color: #3f6b4a;
}
.elyx-ux .elyx-secure-note svg { width: 16px; height: 16px; fill: var(--elyx-success); flex: 0 0 auto; margin-top: 1px; }

/* ---- USD banner -------------------------------------------------------- */
.elyx-checkout #elyx-usd-banner {
  margin: 0 auto var(--elyx-s6);
  padding: var(--elyx-s4) var(--elyx-s5);
  border-radius: var(--elyx-r-md);
  background: var(--elyx-grad);
  color: #fff;
  text-align: center;
  box-shadow: var(--elyx-shadow-md);
}
.elyx-checkout #elyx-usd-banner .elyx-usd-title { font-size: 15px; font-weight: 700; margin-bottom: var(--elyx-s1); }
.elyx-checkout #elyx-usd-banner .elyx-usd-sub { font-size: 13.5px; opacity: .92; }
.elyx-checkout #elyx-usd-banner .elyx-usd-equiv { margin-top: var(--elyx-s2); font-size: 13.5px; opacity: .96; }

/* ---- WhatsApp fallback ------------------------------------------------- */
.elyx-checkout .elyx-checkout-whatsapp {
  max-width: var(--elyx-max);
  margin: var(--elyx-s7) auto var(--elyx-s6);
  padding: 0 var(--elyx-gutter);
}
.elyx-checkout .elyx-wa-card {
  padding: var(--elyx-s5);
  border: 1px solid #cfe8d2;
  border-radius: var(--elyx-r-lg);
  background: #f7faf7;
  text-align: center;
}
.elyx-checkout .elyx-wa-title { margin: 0 0 var(--elyx-s3); font-size: 15px; color: var(--elyx-text); }
.elyx-checkout .elyx-wa-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--elyx-control-h);
  padding: 0 var(--elyx-s7);
  border-radius: var(--elyx-r-pill);
  background: #25d366;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.elyx-checkout .elyx-wa-note { margin: var(--elyx-s3) 0 0; font-size: 12px; color: var(--elyx-text-faint); }

/* ---- Mobile checkout --------------------------------------------------- */
@media (max-width: 1024px) {
  .elyx-checkout #order_review { box-shadow: var(--elyx-shadow-sm); }
  .elyx-checkout .woocommerce-billing-fields,
  .elyx-checkout .woocommerce-shipping-fields,
  .elyx-checkout .woocommerce-additional-fields {
    padding: var(--elyx-s5) var(--elyx-s4);
  }
}
@media (max-width: 480px) {
  .elyx-checkout .woocommerce { padding: 0 var(--elyx-s4); }
  .elyx-checkout .elyx-checkout-header .badges { gap: var(--elyx-s2) var(--elyx-s4); }
  .elyx-checkout #order_review tfoot tr.order-total td,
  .elyx-checkout #order_review tfoot tr.order-total td .amount { font-size: 21px; }
}

/* ==========================================================================
   07  SIDE CART  (Report issue 07)
   The J-Cart drawer ships at a fixed 800px, which is >50% of a 1440px
   viewport. Target 30-35% with sensible bounds, and only go full-bleed on
   small screens where a drawer is naturally the primary view.
   ========================================================================== */
.wc-timeline-modal-cover-container {
  width: clamp(360px, 33vw, 470px) !important;
  max-width: 100% !important;
  box-shadow: -18px 0 48px rgba(16, 34, 58, .16);
}
.wc-timeline-modal-cover-container.small { width: clamp(360px, 33vw, 470px) !important; }

@media (max-width: 1024px) {
  .wc-timeline-modal-cover-container,
  .wc-timeline-modal-cover-container.small { width: min(420px, 92vw) !important; }
}
@media (max-width: 600px) {
  .wc-timeline-modal-cover-container,
  .wc-timeline-modal-cover-container.small { width: 100vw !important; }
}

/* Header + rows: tighter, so the panel is proportionate to its content */
.wc-timeline-container-shop-header {
  padding: 0 var(--elyx-s5, 20px);
  border-bottom: 1px solid #eef1f6;
}
.wc-timeline-cart-products { padding: 4px 0; }
.wc-timeline-inner-container .wc-timeline-product {
  padding: 12px 20px;
  margin: 0;
  border-bottom: 1px solid #f2f4f8;
  box-shadow: none;
}
.wc-timeline-inner-container .wc-timeline-product .image { width: 56px; }
.wc-timeline-inner-container .wc-timeline-product .image img { border-radius: 8px; }

/* Footer stays anchored, subtotal and CTA read as one block */
.wc-timeline-modal-cover-container .footer-buttons {
  gap: 10px;
  padding: 0;
}
.wc-timeline-modal-cover-container .footer-buttons a { margin: 0; }
.wc-timeline-modal-cover-container .wc-upsellator-footer-button.cart {
  margin-right: 0;
  max-width: 40%;
  flex: 0 0 40%;
}
.wc-timeline-modal-cover-container .wc-upsellator-footer-button.checkout { flex: 1 1 auto; }
.wc-timeline-modal-cover-container .wc-timeline-button {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* ==========================================================================
   08  CART PAGE  (Report issue 08)
   ========================================================================== */
.elyx-cart .e-cart__container {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
  align-items: start;
  gap: var(--elyx-s7);
  max-width: var(--elyx-max);
  margin: 0 auto;
}
.elyx-cart .e-cart__column { min-width: 0; width: 100%; }

@media (max-width: 1024px) {
  .elyx-cart .e-cart__container { grid-template-columns: 1fr; gap: var(--elyx-s6); }
  .elyx-cart .e-cart__column-inner.e-sticky-right-column { position: static; }
}

/* ---- Items table ------------------------------------------------------- */
.elyx-cart .e-shop-table,
.elyx-cart .woocommerce-cart-form .e-cart-section {
  background: var(--elyx-surface);
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-lg);
  box-shadow: var(--elyx-shadow-sm);
  overflow: hidden;
}
.elyx-cart table.shop_table.cart {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
}
.elyx-cart table.shop_table.cart thead th {
  padding: var(--elyx-s4) var(--elyx-s4);
  border: 0;
  border-bottom: 1px solid var(--elyx-border);
  background: var(--elyx-surface-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--elyx-text-dim);
  text-align: left;
}
.elyx-cart table.shop_table.cart thead th.product-price,
.elyx-cart table.shop_table.cart thead th.product-quantity,
.elyx-cart table.shop_table.cart thead th.product-subtotal { text-align: right; }
.elyx-cart table.shop_table.cart td {
  padding: var(--elyx-s4);
  border: 0;
  border-bottom: 1px solid var(--elyx-border-soft);
  vertical-align: middle;
  font-size: 15px;
  color: var(--elyx-text);
}
.elyx-cart table.shop_table.cart tbody tr:last-child td { border-bottom: 1px solid var(--elyx-border); }

/* Aligned monetary columns */
.elyx-cart table.shop_table.cart td.product-price,
.elyx-cart table.shop_table.cart td.product-subtotal {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.elyx-cart table.shop_table.cart td.product-subtotal { font-weight: 700; }
.elyx-cart table.shop_table.cart td.product-quantity { text-align: right; }

/* Thumbnails: one fixed geometry for every row */
.elyx-cart table.shop_table.cart td.product-thumbnail { width: 88px; padding-right: 0; }
.elyx-cart table.shop_table.cart td.product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  object-position: center;
  display: block;
  border: 1px solid var(--elyx-border-soft);
  border-radius: var(--elyx-r-sm);
  background: var(--elyx-surface-soft);
  padding: 4px;
}
.elyx-cart table.shop_table.cart td.product-name a {
  color: var(--elyx-text);
  font-weight: 600;
  text-decoration: none;
}
.elyx-cart table.shop_table.cart td.product-name a:hover { color: var(--elyx-primary); }

/* Remove control */
.elyx-cart table.shop_table.cart td.product-remove { width: 46px; }
.elyx-cart table.shop_table.cart td.product-remove a.remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--elyx-r-pill);
  background: var(--elyx-surface-soft);
  color: var(--elyx-text-faint) !important;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.elyx-cart table.shop_table.cart td.product-remove a.remove:hover {
  background: #fdeceb;
  color: var(--elyx-danger) !important;
}

/* Quantity */
.elyx-cart .quantity { display: inline-flex; }
.elyx-cart .quantity input.qty {
  width: 74px;
  height: var(--elyx-control-h-sm);
  padding: 0 6px;
  border: 1.5px solid var(--elyx-border);
  border-radius: var(--elyx-r-sm);
  text-align: center;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Coupon + update row */
.elyx-cart .e-apply-coupon,
.elyx-cart td.actions .coupon { }
.elyx-cart .e-coupon-box,
.elyx-cart td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--elyx-s3);
  padding: var(--elyx-s4);
  border-top: 0;
  background: var(--elyx-surface-soft);
}
.elyx-cart .coupon-col-start { flex: 1 1 220px; min-width: 0; }
.elyx-cart .coupon-col-end { flex: 0 0 auto; }
.elyx-cart input#coupon_code,
.elyx-cart input[name="coupon_code"] {
  width: 100%;
  height: var(--elyx-control-h);
  padding: 0 14px;
  border: 1.5px solid var(--elyx-border);
  border-radius: var(--elyx-r-md);
  background: #fff;
  font-size: 15px;
}
.elyx-cart button.e-apply-coupon,
.elyx-cart button[name="apply_coupon"],
.elyx-cart button[name="update_cart"] {
  height: var(--elyx-control-h);
  padding: 0 var(--elyx-s6);
  border: 1.5px solid var(--elyx-border);
  border-radius: var(--elyx-r-md);
  background: #fff;
  color: var(--elyx-primary);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.elyx-cart button.e-apply-coupon:hover,
.elyx-cart button[name="apply_coupon"]:hover { border-color: var(--elyx-primary); box-shadow: var(--elyx-shadow-sm); }
.elyx-cart button[name="update_cart"][disabled] { opacity: .45; cursor: default; }

/* ---- Order summary panel ---------------------------------------------- */
.elyx-cart .e-cart-totals,
.elyx-cart .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}
.elyx-cart .e-cart-totals {
  background: var(--elyx-surface);
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-lg);
  padding: var(--elyx-s6);
  box-shadow: var(--elyx-shadow-md);
}
.elyx-cart .cart_totals > h2,
.elyx-cart .e-cart-totals h2 {
  display: flex;
  align-items: center;
  gap: var(--elyx-s3);
  margin: 0 0 var(--elyx-s5);
  padding: 0 0 var(--elyx-s3);
  border-bottom: 1px solid var(--elyx-border-soft);
  font-size: 18px;
  font-weight: 700;
  color: var(--elyx-text);
  letter-spacing: -.2px;
}
.elyx-cart .cart_totals > h2::before {
  content: "";
  width: 4px; height: 18px;
  border-radius: 4px;
  background: var(--elyx-primary);
  flex: 0 0 auto;
}
.elyx-cart .cart_totals table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.elyx-cart .cart_totals table.shop_table tr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--elyx-s4);
  padding: var(--elyx-s3) 0;
  border-bottom: 1px solid var(--elyx-border-soft);
}
/* WooCommerce's responsive-table styles hide every <th> and re-inject the
   label through td::before - a mobile pattern that was also running on
   desktop, which is what made the summary read as one dense column.
   Restore the real two-column row. */
.elyx-cart .cart_totals table.shop_table tr > th { display: block !important; }
.elyx-cart .cart_totals table.shop_table td::before,
.elyx-cart .cart_totals table.shop_table th::before { content: none !important; display: none !important; }
.elyx-cart .cart_totals table.shop_table td { width: auto !important; }
.elyx-cart .cart_totals table.shop_table th,
.elyx-cart .cart_totals table.shop_table td {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14.5px;
  line-height: 1.45;
}
.elyx-cart .cart_totals table.shop_table th {
  flex: 1 1 auto;
  text-align: left;
  font-weight: 500;
  color: var(--elyx-text-dim);
}
.elyx-cart .cart_totals table.shop_table td {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 600;
  color: var(--elyx-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The Elementor cart widget styles every .amount with the global heading
   typography (22px), which is why the summary values were larger than their
   labels and wrapped onto their own lines. Money reads at row scale. */
.elyx-cart .cart_totals table.shop_table td .amount,
.elyx-cart .cart_totals table.shop_table td bdi,
.elyx-cart .cart_totals table.shop_table td .woocommerce-Price-currencySymbol {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: inherit !important;
}
.elyx-cart .cart_totals table.shop_table tr.order-total td .amount,
.elyx-cart .cart_totals table.shop_table tr.order-total td bdi,
.elyx-cart .cart_totals table.shop_table tr.order-total td .woocommerce-Price-currencySymbol {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--elyx-primary) !important;
}
.elyx-cart .cart_totals table.shop_table tr.shipping td .amount,
.elyx-cart .cart_totals table.shop_table tr.shipping td bdi {
  font-size: 14px !important;
  font-weight: 600 !important;
}
.elyx-cart .cart_totals table.shop_table tr.shipping td label { font-size: 13.5px !important; }

/* Discount lines read as credits, not as another charge */
.elyx-cart .cart_totals table.shop_table tr[class*="discount"] td,
.elyx-cart .cart_totals table.shop_table tr[class*="discount"] td .amount,
.elyx-cart .cart_totals table.shop_table tr[class*="discount"] td bdi,
.elyx-cart .cart_totals table.shop_table tr.cart-discount td { color: var(--elyx-success) !important; }
.elyx-cart .cart_totals table.shop_table tr[class*="discount"] th { color: var(--elyx-text-dim); }

/* Shipping block.
   Shipping labels here are long ("Envío internacional USA (~$15 USD)"), so the
   value cell must be allowed to wrap onto its own full-width line - as a
   nowrap flex item it forced the summary panel 200px+ past the viewport. */
.elyx-cart .cart_totals table.shop_table tr.shipping,
.elyx-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals { flex-wrap: wrap; }
.elyx-cart .cart_totals table.shop_table tr.shipping > th { flex: 1 1 100%; margin-bottom: var(--elyx-s2); }
.elyx-cart .cart_totals table.shop_table tr.shipping > td {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: right;
  overflow-wrap: anywhere;
}
.elyx-cart .cart_totals tr.shipping td label { white-space: normal; }
.elyx-cart .cart_totals .woocommerce-shipping-calculator,
.elyx-cart .cart_totals .shipping-calculator-form { width: 100%; max-width: 100%; }
.elyx-cart .cart_totals ul#shipping_method {
  margin: 0; padding: 0; list-style: none; text-align: right;
}
.elyx-cart .cart_totals ul#shipping_method li { padding: 3px 0; font-size: 13.5px; font-weight: 500; }
.elyx-cart .cart_totals .woocommerce-shipping-destination {
  margin: var(--elyx-s2) 0 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--elyx-text-dim);
  text-align: right;
}
.elyx-cart .cart_totals .shipping-calculator-button {
  display: inline-block;
  margin-top: var(--elyx-s2);
  color: var(--elyx-primary);
  font-size: 13px;
  font-weight: 600;
}
.elyx-cart .shipping-calculator-form { margin-top: var(--elyx-s3); text-align: left; }
.elyx-cart .shipping-calculator-form .form-row { margin-bottom: var(--elyx-s3); }
.elyx-cart .shipping-calculator-form select,
.elyx-cart .shipping-calculator-form input.input-text {
  width: 100%;
  height: var(--elyx-control-h);
  border: 1.5px solid var(--elyx-border);
  border-radius: var(--elyx-r-md);
  padding: 0 12px;
}

/* Total - the single strongest line */
.elyx-cart .cart_totals table.shop_table tr.order-total {
  align-items: center;
  margin-top: var(--elyx-s2);
  padding: var(--elyx-s5) 0 var(--elyx-s2);
  border-top: 2px solid var(--elyx-primary);
  border-bottom: 0;
}
.elyx-cart .cart_totals table.shop_table tr.order-total th {
  font-size: 15px;
  font-weight: 700;
  color: var(--elyx-text);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.elyx-cart .cart_totals table.shop_table tr.order-total td,
.elyx-cart .cart_totals table.shop_table tr.order-total td strong,
.elyx-cart .cart_totals table.shop_table tr.order-total td .amount {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--elyx-primary);
}

/* One prominent checkout CTA */
.elyx-cart .wc-proceed-to-checkout { padding: 0; margin-top: var(--elyx-s5); }
.elyx-cart .wc-proceed-to-checkout a.checkout-button,
.elyx-cart a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 0 var(--elyx-s6);
  border: 0;
  border-radius: var(--elyx-r-md);
  background: var(--elyx-grad);
  color: #fff;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: .2px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(22, 72, 130, .26);
  transition: transform .12s ease, box-shadow .18s ease;
}
.elyx-cart .wc-proceed-to-checkout a.checkout-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(22, 72, 130, .34);
  color: #fff;
}

/* ---- Cart on mobile: items first, summary second, no compression ------- */
@media (max-width: 768px) {
  .elyx-cart table.shop_table.cart thead { display: none; }
  .elyx-cart table.shop_table.cart,
  .elyx-cart table.shop_table.cart tbody,
  .elyx-cart table.shop_table.cart tr { display: block; width: 100%; }
  .elyx-cart table.shop_table.cart tbody tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "thumb name"
      "thumb price"
      "qty   subtotal";
    column-gap: var(--elyx-s4);
    row-gap: var(--elyx-s2);
    padding: var(--elyx-s4);
    border-bottom: 1px solid var(--elyx-border-soft);
  }
  .elyx-cart table.shop_table.cart tbody tr.cart_item td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .elyx-cart table.shop_table.cart td.product-thumbnail { grid-area: thumb; width: auto; }
  .elyx-cart table.shop_table.cart td.product-name { grid-area: name; padding-right: 32px; }
  .elyx-cart table.shop_table.cart td.product-price { grid-area: price; text-align: left; color: var(--elyx-text-dim); font-size: 14px; }
  .elyx-cart table.shop_table.cart td.product-quantity { grid-area: qty; text-align: left; }
  .elyx-cart table.shop_table.cart td.product-subtotal { grid-area: subtotal; text-align: right; align-self: center; }
  .elyx-cart table.shop_table.cart td.product-remove {
    position: absolute;
    top: var(--elyx-s3);
    right: var(--elyx-s3);
    width: auto;
  }
  /* WooCommerce's responsive table injects labels - suppress the duplicates */
  .elyx-cart table.shop_table.cart tbody tr.cart_item td::before { display: none; }
  .elyx-cart .e-cart-totals { padding: var(--elyx-s5) var(--elyx-s4); }
  .elyx-cart .e-coupon-box,
  .elyx-cart td.actions { flex-direction: column; align-items: stretch; }
  .elyx-cart .coupon-col-end button { width: 100%; }
}

/* ==========================================================================
   02  PRODUCT CARDS  (Report issue 02)
   One card geometry for the whole catalogue: equal height, image container
   of a fixed ratio, and the action area pinned to the bottom so buttons
   line up across every row regardless of title length or stock state.
   ========================================================================== */
.elyx-ux ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--elyx-s6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.elyx-ux ul.products::before,
.elyx-ux ul.products::after { display: none; }

@media (max-width: 1024px) { .elyx-ux ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--elyx-s5); } }
@media (max-width: 800px)  { .elyx-ux ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--elyx-s4); } }
@media (max-width: 420px)  { .elyx-ux ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--elyx-s3); } }

.elyx-ux ul.products li.product {
  display: flex;
  flex-direction: column;
  width: auto !important;
  min-height: 100%;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  clear: none !important;
  background: var(--elyx-surface);
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-lg);
  overflow: hidden;
  text-align: center;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.elyx-ux ul.products li.product:hover {
  border-color: #d3dcea;
  box-shadow: var(--elyx-shadow-lg);
  transform: translateY(-2px);
}

/* The whole upper block is one link; make it the flexible part of the card */
.elyx-ux ul.products li.product > a.woocommerce-loop-product__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 0 0 var(--elyx-s3);
  color: inherit;
  text-decoration: none;
}

/* Identical image container on every card */
.elyx-ux ul.products li.product img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 0 var(--elyx-s4);
  object-fit: contain;
  object-position: center;
  background: var(--elyx-surface-soft);
  border-radius: 0;
}

.elyx-ux ul.products li.product .woocommerce-loop-product__title {
  padding: 0 var(--elyx-s4);
  margin: 0 0 var(--elyx-s2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--elyx-text);
}
.elyx-ux ul.products li.product .price {
  display: block;
  padding: 0 var(--elyx-s4);
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--elyx-primary);
  font-variant-numeric: tabular-nums;
}
.elyx-ux ul.products li.product .price del { color: var(--elyx-text-faint); font-weight: 500; font-size: 14px; }
.elyx-ux ul.products li.product .price ins { text-decoration: none; }

/* Out-of-stock badge keeps the same card geometry */
.elyx-ux ul.products li.product .ast-shop-product-out-of-stock,
.elyx-ux ul.products li.product .badge-text {
  display: block;
  order: -1;
  padding: 0 var(--elyx-s4);
  margin: 0 0 var(--elyx-s1);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #c2410c;
}

/* Action area: constant height, constant padding, pinned to the bottom */
.elyx-ux ul.products li.product .woocommerce-loop-product__buttons,
.elyx-ux ul.products li.product > a.button,
.elyx-ux ul.products li.product > .button {
  margin-top: auto;
}
/* Elementor's "automatically align buttons" option pins this wrapper to a
   fixed 32px height, so a 40px+ button overflows and gets clipped by the
   card. Let the wrapper size to its content instead. */
.elyx-ux ul.products li.product .woocommerce-loop-product__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
  min-height: 0 !important;
  padding: var(--elyx-s3) var(--elyx-s4) var(--elyx-s5) !important;
}
.elyx-ux ul.products li.product a.button,
.elyx-ux ul.products li.product .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 190px;
  height: auto !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 var(--elyx-s4) !important;
  border: 0;
  border-radius: var(--elyx-r-pill);
  background: var(--elyx-grad-cyan);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(22, 72, 130, .20);
  transition: transform .12s ease, box-shadow .18s ease;
}
.elyx-ux ul.products li.product a.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(22, 72, 130, .28);
  color: #fff;
}
/* "Read more" (out of stock) is secondary but keeps identical geometry.
   Elementor's global button colour is white, which on a white outline button
   made the label invisible - so the colour has to be forced here. */
.elyx-ux ul.products li.product.outofstock a.button,
.elyx-ux ul.products li.product.outofstock .button {
  background: #fff !important;
  background-image: none !important;
  color: var(--elyx-primary) !important;
  border: 1.5px solid #c9d4e4 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.elyx-ux ul.products li.product.outofstock a.button:hover,
.elyx-ux ul.products li.product.outofstock .button:hover {
  background: var(--elyx-surface-soft) !important;
  border-color: var(--elyx-primary) !important;
  color: var(--elyx-primary) !important;
  box-shadow: var(--elyx-shadow-sm) !important;
}
.elyx-ux ul.products li.product a.added_to_cart {
  display: none;
}
.elyx-ux ul.products li.product .star-rating { margin: 0 auto var(--elyx-s2); }

/* ==========================================================================
   03  CATEGORY TILES  (Report issue 03)
   Fixed container ratio + identical object-fit so a small vial and a large
   vial occupy the same optical space.
   ========================================================================== */
.elyx-ux ul.products li.product-category {
  display: flex;
  flex-direction: column;
  background: var(--elyx-surface);
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-lg);
  overflow: hidden;
  text-align: center;
}
.elyx-ux ul.products li.product-category > a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.elyx-ux ul.products li.product-category img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0;
  padding: 0;
  /* The source shots already carry their own light-grey backdrop, so the tile
     should be full-bleed - contain + padding left white gutters around the
     backdrop and made the grid look patched together. */
  object-fit: cover;
  object-position: center;
  background: var(--elyx-surface-soft);
  box-sizing: border-box;
}
.elyx-ux ul.products li.product-category .woocommerce-loop-category__title {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--elyx-s1);
  min-height: 56px;
  margin: 0;
  padding: var(--elyx-s3) var(--elyx-s4);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--elyx-text);
}
.elyx-ux ul.products li.product-category .woocommerce-loop-category__title .count {
  background: transparent;
  color: var(--elyx-text-faint);
  font-size: 13px;
  font-weight: 500;
  padding: 0;
}

/* ==========================================================================
   05  PRODUCT PAGE - DESKTOP  (Report issue 05)
   ========================================================================== */
.elyx-product .elementor-element-2cc6b49 {
  align-items: flex-start;
  gap: var(--elyx-s8);
  max-width: var(--elyx-max);
  margin-inline: auto;
}
.elyx-product .elementor-element-a065c72 { flex: 0 0 36%; }
.elyx-product .elementor-element-80a723c { flex: 1 1 auto; }
.elyx-product .elementor-element-dd39a43 { flex: 0 0 240px; }

/* Gallery */
.elyx-product .woocommerce-product-gallery {
  margin: 0;
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-lg);
  overflow: hidden;
  background: var(--elyx-surface-soft);
}
.elyx-product .woocommerce-product-gallery__wrapper { margin: 0; }
.elyx-product .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
}
/* Even thumbnail spacing */
.elyx-product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--elyx-s2);
  margin: 0;
  padding: var(--elyx-s3);
  background: var(--elyx-surface);
  border-top: 1px solid var(--elyx-border);
  list-style: none;
}
.elyx-product .flex-control-thumbs li {
  width: auto !important;
  margin: 0 !important;
  padding: 0;
  float: none !important;
  list-style: none;
}
.elyx-product .flex-control-thumbs li img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  border: 1.5px solid var(--elyx-border-soft);
  border-radius: var(--elyx-r-sm);
  background: var(--elyx-surface-soft);
  opacity: 1;
  cursor: pointer;
  transition: border-color .15s ease;
}
.elyx-product .flex-control-thumbs li img.flex-active,
.elyx-product .flex-control-thumbs li img:hover { border-color: var(--elyx-primary); }

/* Summary column - one vertical rhythm */
.elyx-product .elementor-element-80a723c > .elementor-element { margin-bottom: var(--elyx-s4); }
.elyx-product .elementor-widget-woocommerce-product-title h1,
.elyx-product .product_title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.4px;
  color: var(--elyx-text);
}
.elyx-product .elementor-widget-woocommerce-product-price .price {
  font-size: 26px;
  font-weight: 700;
  color: var(--elyx-primary);
  font-variant-numeric: tabular-nums;
}
.elyx-product .woocommerce-product-details__short-description {
  color: var(--elyx-text);
  font-size: 15px;
  line-height: 1.65;
}
.elyx-product .woocommerce-product-details__short-description ul {
  margin: 0 0 var(--elyx-s5);
  padding-left: 1.15em;
  text-align: left;
}
.elyx-product .woocommerce-product-details__short-description li {
  margin-bottom: var(--elyx-s2);
  text-align: left;
}

/* Certificate buttons - equal size, equal spacing, aligned with the column */
.elyx-ux .elyx-cert-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--elyx-s3);
  margin: var(--elyx-s5) 0 0;
}
.elyx-ux .elyx-cert-buttons a { display: block; text-decoration: none; }
/* The injected markup separates the two links with a <br>, which becomes a
   grid item of its own and pushed the second certificate onto a new row. */
.elyx-ux .elyx-cert-buttons br { display: none; }
.elyx-ux .elyx-cert-buttons a button,
.elyx-ux .elyx-cert-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--elyx-control-h);
  padding: 0 var(--elyx-s4);
  border: 0;
  border-radius: var(--elyx-r-pill);
  background: var(--elyx-grad-cyan);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(22, 72, 130, .20);
  transition: transform .12s ease, box-shadow .18s ease;
}
.elyx-ux .elyx-cert-buttons a:hover button { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(22, 72, 130, .28); }

/* Purchase row - quantity and add-to-cart read as one control group */
.elyx-product .elementor-add-to-cart form.cart,
.elyx-product form.cart {
  display: flex;
  align-items: stretch;
  gap: var(--elyx-s3);
  margin: 0;
  flex-wrap: wrap;
}
.elyx-product .elementor-add-to-cart .quantity,
.elyx-product form.cart .quantity {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
}
.elyx-product form.cart .quantity input.qty {
  width: 84px;
  height: 52px;
  padding: 0 8px;
  border: 1.5px solid var(--elyx-border);
  border-radius: var(--elyx-r-md);
  background: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--elyx-text);
  font-variant-numeric: tabular-nums;
}
.elyx-product form.cart button.single_add_to_cart_button {
  flex: 1 1 200px;
  min-height: 52px;
  padding: 0 var(--elyx-s7);
  border: 0;
  border-radius: var(--elyx-r-md);
  background: var(--elyx-grad);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 5px 18px rgba(22, 72, 130, .26);
  transition: transform .12s ease, box-shadow .18s ease;
}
.elyx-product form.cart button.single_add_to_cart_button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 24px rgba(22, 72, 130, .34);
}
.elyx-product .elementor-add-to-cart p.stock {
  margin: 0 0 var(--elyx-s3);
  font-size: 13.5px;
  font-weight: 600;
}
.elyx-product .elementor-add-to-cart p.stock.in-stock { color: var(--elyx-success); }
.elyx-product .elementor-add-to-cart p.stock.out-of-stock { color: #c2410c; }

/* Compact trust / payment sidebar */
.elyx-product .elementor-element-dd39a43 {
  background: var(--elyx-surface-soft);
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-lg);
  padding: var(--elyx-s5) var(--elyx-s3);
}
.elyx-product .elementor-element-dd39a43 img { margin-inline: auto; }

/* ==========================================================================
   06  PRODUCT PAGE - MOBILE  (Report issue 06)
   Simple vertical flow, consistent gutters, left-aligned copy, and a
   purchase row with room to tap.
   ========================================================================== */
@media (max-width: 1024px) {
  .elyx-product .elementor-element-2cc6b49 { gap: var(--elyx-s6); }
  .elyx-product .elementor-element-dd39a43 { flex: 1 1 100%; }
}

@media (max-width: 767px) {
  .elyx-product .elementor-element-2cc6b49 {
    flex-direction: column;
    gap: var(--elyx-s6);
    padding-inline: var(--elyx-s4) !important;
  }
  .elyx-product .elementor-element-a065c72,
  .elyx-product .elementor-element-80a723c,
  .elyx-product .elementor-element-dd39a43 {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100%;
    padding-inline: 0 !important;
  }

  /* Left-align everything in the summary - the screenshot showed centred
     bullets and copy, which is the main scanability problem on mobile. */
  .elyx-product .elementor-element-80a723c,
  .elyx-product .elementor-element-80a723c .elementor-widget-container,
  .elyx-product .woocommerce-product-details__short-description,
  .elyx-product .woocommerce-product-details__short-description p,
  .elyx-product .woocommerce-product-details__short-description ul,
  .elyx-product .woocommerce-product-details__short-description li,
  .elyx-product .product_title,
  .elyx-product .elementor-widget-woocommerce-product-title,
  .elyx-product .elementor-widget-woocommerce-product-price {
    text-align: left !important;
  }
  .elyx-product .woocommerce-product-details__short-description ul {
    padding-left: 1.1em;
    margin-bottom: var(--elyx-s5);
  }
  .elyx-product .woocommerce-product-details__short-description li {
    margin-bottom: var(--elyx-s3);
    line-height: 1.6;
  }

  /* Predictable vertical spacing between blocks */
  .elyx-product .elementor-element-80a723c > .elementor-element { margin-bottom: var(--elyx-s5); }
  .elyx-product .elementor-element-80a723c > .elementor-element:last-child { margin-bottom: 0; }

  /* Certificate buttons: equal width, full-width pair */
  .elyx-ux .elyx-cert-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--elyx-s3);
    margin-top: var(--elyx-s5);
  }
  .elyx-ux .elyx-cert-buttons a button { min-height: 48px; font-size: 14px; }

  /* Purchase row: full-width button, comfortable tap targets */
  .elyx-product form.cart { gap: var(--elyx-s3); }
  .elyx-product form.cart .quantity input.qty { width: 76px; height: 54px; }
  .elyx-product form.cart button.single_add_to_cart_button {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 54px;
    font-size: 16px;
  }

  .elyx-product .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--elyx-s2); }
  .elyx-product .elementor-element-dd39a43 { padding: var(--elyx-s5) var(--elyx-s4); }
}

@media (max-width: 400px) {
  .elyx-product .elementor-element-2cc6b49 { padding-inline: var(--elyx-s4) !important; }
  .elyx-ux .elyx-cert-buttons { grid-template-columns: 1fr; }
}

/* ==========================================================================
   04  SHOP TOOLBAR + FILTERS  (Report issue 04)
   Desktop: a compact filter bar that never steals width from the grid.
   Mobile: an off-canvas panel behind a "Filtrar" button.
   ========================================================================== */
.elyx-ux .elyx-shopbar {
  margin: 0 auto var(--elyx-s6);
  max-width: var(--elyx-max);
}
.elyx-ux .elyx-shopbar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--elyx-s3);
  padding: var(--elyx-s3) 0;
  border-bottom: 1px solid var(--elyx-border);
}
.elyx-ux .elyx-shopbar__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--elyx-s2);
  height: var(--elyx-control-h-sm);
  padding: 0 var(--elyx-s5);
  border: 1.5px solid var(--elyx-border);
  border-radius: var(--elyx-r-pill);
  background: #fff;
  color: var(--elyx-text);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.elyx-ux .elyx-shopbar__toggle:hover { border-color: var(--elyx-primary); box-shadow: var(--elyx-shadow-sm); }
.elyx-ux .elyx-shopbar__toggle svg { width: 16px; height: 16px; fill: var(--elyx-primary); }
.elyx-ux .elyx-shopbar__count {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--elyx-r-pill);
  background: var(--elyx-primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.elyx-ux .elyx-shopbar__sort {
  display: flex;
  align-items: center;
  gap: var(--elyx-s2);
  margin: 0;
}
.elyx-ux .elyx-shopbar__sort label {
  font-size: 13px;
  font-weight: 600;
  color: var(--elyx-text-dim);
  white-space: nowrap;
}
.elyx-ux .elyx-shopbar__sort select,
.elyx-ux .elyx-filter-group select,
.elyx-ux .elyx-price-row input {
  height: var(--elyx-control-h-sm);
  padding: 0 30px 0 12px;
  border: 1.5px solid var(--elyx-border);
  border-radius: var(--elyx-r-sm);
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  color: var(--elyx-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.elyx-ux .elyx-price-row input {
  background-image: none;
  padding: 0 10px;
  text-align: left;
  cursor: text;
}

/* Active filter chips */
.elyx-ux .elyx-shopbar__active {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--elyx-s2);
  padding: var(--elyx-s3) 0 0;
}
.elyx-ux .elyx-shopbar__active-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--elyx-text-dim);
}
.elyx-ux .elyx-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--elyx-s2);
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(22, 72, 130, .25);
  border-radius: var(--elyx-r-pill);
  background: rgba(22, 72, 130, .06);
  color: var(--elyx-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease;
}
.elyx-ux .elyx-chip:hover { background: rgba(22, 72, 130, .12); color: var(--elyx-primary); }
.elyx-ux .elyx-chip span[aria-hidden] { font-size: 15px; line-height: 1; opacity: .7; }
.elyx-ux .elyx-chip--clear {
  border-style: dashed;
  background: transparent;
  color: var(--elyx-text-dim);
}

/* ---- Panel: desktop (inline, collapsible) ------------------------------ */
.elyx-ux .elyx-filter-panel {
  display: none;
  margin: var(--elyx-s4) 0 0;
  padding: var(--elyx-s5);
  border: 1px solid var(--elyx-border);
  border-radius: var(--elyx-r-lg);
  background: var(--elyx-surface);
  box-shadow: var(--elyx-shadow-sm);
}
.elyx-ux .elyx-shopbar.is-open .elyx-filter-panel { display: block; }
.elyx-ux .elyx-filter-panel__head { display: none; }
.elyx-ux .elyx-filter-panel__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--elyx-s5);
}
.elyx-ux .elyx-filter-group { display: flex; flex-direction: column; gap: var(--elyx-s2); min-width: 0; }
.elyx-ux .elyx-filter-group > label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--elyx-text-dim);
}
.elyx-ux .elyx-filter-group .elyx-cur { font-weight: 500; letter-spacing: 0; text-transform: none; }
.elyx-ux .elyx-price-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--elyx-s2);
}
.elyx-ux .elyx-price-row input { width: 100%; min-width: 0; }
.elyx-ux .elyx-price-row span { color: var(--elyx-text-faint); }

.elyx-ux .elyx-filter-panel__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--elyx-s4);
  margin-top: var(--elyx-s5);
  padding-top: var(--elyx-s4);
  border-top: 1px solid var(--elyx-border-soft);
}
.elyx-ux .elyx-filter-reset {
  color: var(--elyx-text-dim);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.elyx-ux .elyx-filter-reset:hover { color: var(--elyx-primary); }
.elyx-ux .elyx-filter-apply {
  height: var(--elyx-control-h);
  padding: 0 var(--elyx-s7);
  border: 0;
  border-radius: var(--elyx-r-pill);
  background: var(--elyx-grad);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(22, 72, 130, .22);
}

.elyx-ux .elyx-filter-scrim {
  position: fixed;
  inset: 0;
  z-index: 19990;
  background: rgba(16, 34, 58, .45);
}
.elyx-ux .elyx-filter-scrim[hidden] { display: none; }

/* ---- Panel: mobile (off-canvas, grid keeps full width) ----------------- */
@media (max-width: 900px) {
  .elyx-ux .elyx-shopbar__sort label { display: none; }
  .elyx-ux .elyx-filter-panel {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 19991;
    display: block;
    max-height: 88vh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--elyx-r-lg) var(--elyx-r-lg) 0 0;
    box-shadow: 0 -12px 40px rgba(16, 34, 58, .22);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    overflow: hidden auto;
  }
  .elyx-ux .elyx-shopbar.is-open .elyx-filter-panel { transform: translateY(0); }
  .elyx-ux .elyx-filter-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    padding: var(--elyx-s5);
    border-bottom: 1px solid var(--elyx-border);
    background: #fff;
    font-size: 16px;
  }
  .elyx-ux .elyx-filter-panel__close {
    width: 34px; height: 34px;
    border: 0;
    border-radius: var(--elyx-r-pill);
    background: var(--elyx-surface-soft);
    color: var(--elyx-text-dim);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .elyx-ux .elyx-filter-panel__body {
    grid-template-columns: 1fr;
    gap: var(--elyx-s5);
    padding: var(--elyx-s5);
  }
  .elyx-ux .elyx-filter-group select,
  .elyx-ux .elyx-price-row input { height: var(--elyx-control-h); font-size: 15px; }
  .elyx-ux .elyx-filter-panel__foot {
    position: sticky;
    bottom: 0;
    margin: 0;
    padding: var(--elyx-s4) var(--elyx-s5) calc(var(--elyx-s5) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--elyx-border);
    background: #fff;
  }
  .elyx-ux .elyx-filter-apply { flex: 1 1 auto; }
}

/* ==========================================================================
   01  HEADER  (Report issue 01)
   Was: a top bar, a logo row, a nav row and a wrapping 8-item menu across
   three stacked bands. Now: a slim utility bar and one main row of
   logo | navigation | utilities.
   ========================================================================== */

/* ---- Utility bar ------------------------------------------------------- */
/* The utility bar is an earlier sibling of the main header row, so its
   Currency / Language dropdowns painted UNDERNEATH the row's white
   background. Lift the bar above the row so submenus stay visible. */
.elementor-location-header { position: relative; z-index: 50; }
.elementor-location-header .elementor-element-9efd8ba {
  position: relative;
  z-index: 200;
  min-height: 40px;
  column-gap: 24px;
}
.elementor-location-header .elementor-element-6e7860a { position: relative; z-index: 100; }
.elementor-location-header .elementor-element-9efd8ba .elementor-heading-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}

/* Email: one compact inline line, label hidden as redundant next to the address */
.elementor-location-header .elementor-element-b668f34 {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: auto;
  flex: 0 0 auto;
}
.elementor-location-header .elementor-element-8550c26 { width: auto; flex: 0 0 auto; }
.elementor-location-header .elementor-element-2f1727a img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.elementor-location-header .elementor-element-949cc40 {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: auto;
}
.elementor-location-header .elementor-element-4a19e51 { display: none; }
.elementor-location-header .elementor-element-5d9afee .elementor-heading-title {
  font-size: 13px;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
}

/* Utility navigation (currency, language, WhatsApp) */
.elementor-location-header .elementor-element-elyxu01 {
  flex: 0 0 auto;
  width: auto;
  position: relative;
  z-index: 201;
}
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu__container,
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu > li { position: relative; }
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu > li > a.elementor-item {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, .92);
  fill: rgba(255, 255, 255, .92);
  transition: background .15s ease;
}
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu > li > a.elementor-item:hover,
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu > li > a.elementor-item:focus {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu .sub-arrow svg {
  width: 9px; height: 9px; margin-left: 3px;
}
/* Dropdowns render on a light surface for legibility */
/* The utility menu sits at the right edge, so its submenus must open
   right-aligned or they run past the viewport. */
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu > li > .elementor-nav-menu--dropdown,
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu > li > .sub-menu {
  left: auto;
  right: 0;
}
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu--dropdown {
  z-index: 202;
  min-width: 178px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 34, 58, .16);
  border: 1px solid #e4e8ef;
}
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu--dropdown a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #292e35;
}
.elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu--dropdown a:hover {
  background: #f2f6fb;
  color: #164882;
}
/* The WhatsApp item is the one call to action up here */
.elementor-location-header .elementor-element-elyxu01 li.wa-menu-cta-button > a.elementor-item {
  background: rgba(37, 211, 102, .92);
  color: #fff;
  font-weight: 600;
}
.elementor-location-header .elementor-element-elyxu01 li.wa-menu-cta-button > a.elementor-item:hover {
  background: #25d366;
}

/* ---- Main row ---------------------------------------------------------- */
.elementor-location-header .elementor-element-6e7860a {
  border-bottom: 1px solid #eef1f6;
  transition: padding .2s ease, box-shadow .2s ease;
}
.elementor-location-header .elementor-element-07f5d4b {
  align-items: center;
  column-gap: 24px;
  max-width: 1320px;
  margin-inline: auto;
}
.elementor-location-header .elementor-element-9196d20 img {
  width: 172px;
  height: auto;
  display: block;
}

/* Main navigation: one line, consistent hit areas */
.elementor-location-header .elementor-element-a5d08fe .elementor-nav-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.elementor-location-header .elementor-element-a5d08fe .elementor-nav-menu > li > a.elementor-item {
  padding: 10px 14px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #292e35;
}
.elementor-location-header .elementor-element-a5d08fe .elementor-nav-menu > li > a.elementor-item:hover,
.elementor-location-header .elementor-element-a5d08fe .elementor-item-active { color: #164882; }

/* Utilities cluster: identical icon geometry, one gap value */
.elementor-location-header .elementor-element-bc48f7b {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
}
.elementor-location-header .elementor-element-f79e857,
.elementor-location-header .elementor-element-6fa7c56,
.elementor-location-header .elementor-element-f849bdc {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  padding: 0;
}
.elementor-location-header .elementor-element-bc48f7b .elementor-icon,
.elementor-location-header .elementor-element-3f8e168 .elementor-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  transition: background .15s ease;
}
.elementor-location-header .elementor-element-bc48f7b .elementor-icon:hover { background: #f2f6fb; }
.elementor-location-header .elementor-element-bc48f7b .elementor-icon svg,
.elementor-location-header .elementor-element-bc48f7b .elementor-icon i { width: 19px; height: 19px; font-size: 19px; }

/* Cart counter badge sits on the icon rather than beside it */
.elementor-location-header .wc-timeline-button-show-cart,
.elementor-location-header .elementor-element-6fa7c56 .elementor-widget-shortcode { line-height: 0; }

/* My account button - a normal-sized control, not a banner */
.elementor-location-header .elementor-element-4fc6607 .elementor-button {
  min-height: 42px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.elementor-location-header .elementor-element-4fc6607 .elementor-button-icon svg { width: 15px; height: 15px; }

/* Compact on scroll so product content reaches the viewport sooner */
body.elyx-header-compact .elementor-location-header .elementor-element-6e7860a {
  padding-top: 4px;
  padding-bottom: 4px;
}
body.elyx-header-compact .elementor-location-header .elementor-element-9196d20 img { width: 148px; }

@media (max-width: 1200px) {
  .elementor-location-header .elementor-element-a5d08fe .elementor-nav-menu > li > a.elementor-item {
    padding: 10px 10px;
    font-size: 14.5px;
  }
  .elementor-location-header .elementor-element-4fc6607 .elementor-button { padding: 10px 14px; font-size: 14px; }
}

/* ---- Tablet + mobile --------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-element-9efd8ba { flex-wrap: wrap; row-gap: 4px; }
  .elementor-location-header .elementor-element-9196d20 img { width: 150px; }
}

@media (max-width: 767px) {
  .elementor-location-header .elementor-element-9efd8ba {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-block: 6px;
  }
  .elementor-location-header .elementor-element-9efd8ba .elementor-heading-title { font-size: 12px; text-align: center; }
  .elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }
  .elementor-location-header .elementor-element-elyxu01 .elementor-nav-menu > li > a.elementor-item {
    padding: 4px 8px;
    font-size: 11.5px;
  }

  /* Mobile bar: burger | logo | search + cart + account */
  .elementor-location-header .elementor-element-a25a634 { align-items: center; column-gap: 4px; }
  .elementor-location-header .elementor-element-77ec57e img { width: 132px; height: auto; }
  .elementor-location-header .elementor-element-fd8c4db { gap: 4px; }
  .elementor-location-header .elementor-element-4c51e13 .elementor-icon,
  .elementor-location-header .elementor-element-fd8c4db .elementor-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
  }
  .elementor-location-header .elementor-element-4c51e13 .elementor-icon svg { width: 18px; height: 18px; }
  .elementor-location-header .elementor-element-b99fe1b .elementor-button {
    min-height: 38px;
    width: 38px;
    padding: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
  }
  .elementor-location-header .elementor-element-b99fe1b .elementor-button-content-wrapper { gap: 0; }
  .elementor-location-header .elementor-element-b99fe1b .elementor-button-icon svg { width: 16px; height: 16px; }
}

/* ELYX-UX-END */