/* ==========================================================================
   Aöra — WooCommerce screens
   Built from the page-only <style> blocks of the approved mockups:
     02-listing.html  -> .aora-listing
     03 / 03b         -> .aora-producto
     05-marca.html    -> .aora-marca
     07-carrito.html  -> .aora-carrito
     08-checkout.html -> .aora-pago
   Loaded after aora.css. tokens.css / base.css / aora.css are generated;
   never edit them by hand — every shop rule belongs here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. WooCommerce's own classes, mapped onto the theme
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
  list-style: none;
  margin: var(--s-4) 0;
  padding: var(--s-4) var(--s-5);
  background: var(--c-cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-1);
}
.woocommerce-error { border-left-color: var(--c-clay); }
/* WooCommerce's icon font sits over the first letters once our padding
   replaces its 3.5em; the coloured left border already marks the notice. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

/* Mi cuenta: woocommerce-layout.css floats the menu at 30 % and the content at
   68 % inside our 220px / 1fr grid, so the menu was 66 px wide and its longer
   items ("Desistir del contrato", "Club Aöra") were cut (2026-09-22). */
.aora-cuenta .acct > .woocommerce-MyAccount-navigation,
.aora-cuenta .acct > .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info a.button { float: right; }

/* WooCommerce prints .button in a dozen places (gateways, forms, notices). */
.woocommerce .button,
a.button,
button.button,
input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: var(--s-3) var(--s-6);
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.woocommerce .button:hover, a.button:hover, button.button:hover { border-color: var(--c-ink); text-decoration: none; }
.woocommerce .button.alt,
button.button.alt,
.single_add_to_cart_button {
  background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold);
}
.woocommerce .button.alt:hover,
button.button.alt:hover,
.single_add_to_cart_button:hover { background: #BE8C4D; border-color: #BE8C4D; }

/* WooCommerce's own stylesheet ships `.woocommerce a.button.alt` (0,3,0), which
   outranks a single class. These match it, so the primary buttons stay gold. */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
body .woocommerce button.button.alt.single_add_to_cart_button,
body button.single_add_to_cart_button,
body .aora-producto form.cart button.single_add_to_cart_button {
  background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold);
  border-radius: var(--r-sm); font-family: var(--font-sans); font-weight: 600;
  min-height: 52px; padding: var(--s-4) var(--s-8); font-size: var(--fs-base);
  text-transform: none; letter-spacing: 0.01em;
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
body button.single_add_to_cart_button:hover { background: #BE8C4D; border-color: #BE8C4D; color: var(--c-ink); }

/* The express-checkout buttons the gateways print: kept, but boxed so they do
   not take over the buy block. */
.aora-producto .wc-stripe-payment-request-wrapper,
.aora-producto #wc-stripe-payment-request-wrapper,
.aora-producto .wcpay-payment-request-wrapper { max-width: 320px; margin-top: var(--s-3); }
.aora-producto .wc-stripe-payment-request-button-separator { font-size: var(--fs-xs); color: var(--text-2); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Quantity input: WooCommerce's .quantity wrapper gets the .qty look. */
.quantity {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); overflow: hidden;
}
.quantity input.qty {
  width: 56px; min-height: var(--tap); padding: 0;
  border: 0; border-inline: 1px solid var(--c-border);
  text-align: center; font-size: var(--fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; background: var(--c-white); color: var(--c-ink);
  -moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn {
  width: var(--tap); min-height: var(--tap);
  display: grid; place-items: center;
  background: var(--c-white); color: var(--c-ink); border: 0; cursor: pointer;
}
.qty-btn:hover { background: var(--c-cream); }

/* The placeholder diamond, when a product has no photo yet. */
.pcard-media img.is-placeholder,
.g-main img.is-placeholder { opacity: .5; padding: 22%; }

.pcard-link { display: block; width: 100%; height: 100%; }

/* "(IVA incluido)": WooCommerce's price suffix (a shop setting) printed after
   every price. Small and grey like the mockup's "IVA incl.", never as big as
   the price itself, and never split over two lines. */
.woocommerce-price-suffix {
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 400;
  letter-spacing: 0; color: var(--text-2); white-space: nowrap;
}
.pcard-rating { display: flex; align-items: center; gap: var(--s-2); }

/* --------------------------------------------------------------------------
   1. Listing (02-listing.html)
   -------------------------------------------------------------------------- */

.aora-listing .need-head { padding-bottom: var(--s-12); }
.aora-listing .need-head .breadcrumb { padding-top: var(--s-3); }
.aora-listing .need-grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) {
  .aora-listing .need-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s-12); }
}
.aora-listing .need-copy { max-width: 62ch; }
.aora-listing .need-media { order: -1; }
@media (min-width: 900px) { .aora-listing .need-media { order: 0; } }
.aora-listing .need-media img {
  display: block; width: 100%; max-width: 420px;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--rule);
}
@media (min-width: 900px) { .aora-listing .need-media img { aspect-ratio: 1 / 1; margin-left: auto; } }

.aora-listing .need-copy .rule-gold { margin: var(--s-8) 0; }
.aora-listing .ing-label {
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--c-slate-deep); margin-bottom: var(--s-3);
}
.aora-listing .need-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.aora-listing .need-cta .btn { transition: box-shadow .25s ease, transform .25s ease, background-color var(--dur) var(--ease); }
.aora-listing .need-cta .btn:hover,
.aora-listing .need-cta .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(205,157,95,.28), 0 10px 28px rgba(205,157,95,.35);
  transform: translateY(-1px);
}

/* "Otras necesidades": scrolls inside itself, never the page */
.aora-listing .needs-strip { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: var(--s-2); }
.aora-listing .needs-strip::-webkit-scrollbar { display: none; }
.aora-listing .needs-row { display: flex; gap: var(--s-5); min-width: max-content; }
.aora-listing .need-mini {
  flex: none; width: 104px; display: flex; flex-direction: column; align-items: center;
  gap: var(--s-2); text-align: center;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; color: var(--c-ink);
}
.aora-listing .need-mini img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule);
  transition: border-color var(--dur) var(--ease);
}
.aora-listing .need-mini:hover { text-decoration: none; color: var(--c-slate-deep); }
.aora-listing .need-mini:hover img { border-color: var(--c-gold); }

/* Two columns: filters + results */
.aora-listing .cat-layout,
.aora-marca .cat-layout { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 900px) {
  .aora-listing .cat-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-10); }
}

/* The filter column IS the mobile drawer. Above 900px it turns back into a
   plain sticky sidebar, so there is only one copy of the markup. */
.aora-listing .filters.drawer { display: none; }
.aora-listing .filters.drawer[data-open="true"] { display: block; }

@media (min-width: 900px) {
  .aora-listing .filters.drawer,
  .aora-listing .filters.drawer[data-open="false"] {
    display: block; position: sticky; inset: auto;
    top: calc(var(--header-h) + var(--s-4));
    max-height: calc(100vh - var(--header-h) - var(--s-8));
    overflow-y: auto; z-index: 1;
  }
  .aora-listing .filters .drawer-scrim,
  .aora-listing .filters .drawer-head,
  .aora-listing .filters .drawer-foot { display: none; }
  .aora-listing .filters .drawer-panel {
    position: static; width: auto; max-width: none; height: auto;
    background: none; box-shadow: none; transform: none; padding: 0;
    display: block; overflow: visible;
  }
}
@media (min-width: 1100px) {
  .aora-listing .filters.drawer,
  .aora-listing .filters.drawer[data-open="false"] {
    top: calc(var(--header-h) + 48px + var(--s-4));
    max-height: calc(100vh - var(--header-h) - 48px - var(--s-8));
  }
}

.aora-listing .filters-box {
  background: var(--c-white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-5) var(--s-3);
}
@media (max-width: 899px) {
  .aora-listing .filters .drawer-panel { padding: 0 var(--s-4) var(--s-4); }
  .aora-listing .filters .drawer-head { margin-inline: calc(var(--s-4) * -1); }
  .aora-listing .filters .drawer-foot { margin: 0 calc(var(--s-4) * -1) calc(var(--s-4) * -1); }
  .aora-listing .filters-box { border: 0; border-radius: 0; padding-inline: 0; }
}

/* Applied filter pills */
.aora-listing .applied { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.aora-listing .applied-label {
  font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--c-slate-deep); margin-bottom: var(--s-3);
}
.aora-listing .applied-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.aora-listing .pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 38px; padding: 0 var(--s-3);
  background: var(--c-slate-tint); color: var(--c-slate-deep);
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.aora-listing .pill:hover { background: var(--c-clay-tint); color: var(--c-clay); border-color: var(--c-clay); text-decoration: none; }
.aora-listing .pill .x { font-size: var(--fs-base); line-height: 1; }
.aora-listing .clear-link {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-slate-deep);
}

/* Filter groups */
.aora-listing .filter-group:last-of-type { border-bottom: 0; }
.aora-listing .filter-group .acc-body { color: var(--text-1); padding-bottom: var(--s-4); }
.aora-listing .filter-list { display: flex; flex-direction: column; gap: 0; }
.aora-listing .filter-list li { padding-left: 0; }
.aora-listing .filter-list li::before { content: none; }
.aora-listing .filter-list .check {
  align-items: center; min-height: var(--tap);
  padding-right: var(--s-1); width: 100%;
}
.aora-listing .check-text { flex: 1; min-width: 0; }
.aora-listing .check-n { color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* "Cambiar de necesidad" */
.aora-listing .need-switch { display: flex; flex-direction: column; }
.aora-listing .need-switch a {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap); font-size: var(--fs-sm); color: var(--c-ink);
}
.aora-listing .need-switch a:hover { color: var(--c-slate-deep); }
.aora-listing .need-switch .dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--c-border-strong); box-sizing: border-box; background: none;
}
.aora-listing .need-switch [aria-current="page"] { font-weight: 700; color: var(--c-slate-deep); }
.aora-listing .need-switch [aria-current="page"] .dot {
  border-color: var(--c-slate-deep);
  background: radial-gradient(circle, var(--c-slate-deep) 0 45%, rgba(255,255,255,0) 47%);
}

/* Results toolbar */
.aora-listing .toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-5); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.aora-listing .count-strong { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; color: var(--c-ink); }
.aora-listing .toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); flex: 1 1 260px; }
.aora-listing .filter-btn { flex: none; }
@media (min-width: 900px) {
  .aora-listing .filter-btn { display: none; }
  .aora-listing .toolbar-actions { flex: 0 0 auto; justify-content: flex-end; }
}
.aora-listing .filter-n {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--c-ink); color: var(--c-white);
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700; line-height: 1;
}
.aora-listing .sortbox { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 200px; }
.aora-listing .sort-label { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.aora-listing .sortbox .select { flex: 1; min-width: 9.5em; font-size: var(--fs-sm); }
@media (min-width: 900px) {
  .aora-listing .sortbox { flex: 0 0 auto; }
  .aora-listing .sortbox .select { flex: none; width: 232px; }
}

/* 2 columns up to 1100, 3 to 1280, 4 above: the sidebar eats width */
.aora-listing .results .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .aora-listing .results .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .aora-listing .results .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.aora-listing .pager-row,
.aora-marca .pager-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-4); margin-top: var(--s-10);
}
.aora-listing .perpage { display: flex; align-items: center; gap: var(--s-2); }
.aora-listing .perpage label { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.aora-listing .perpage .select { width: auto; min-width: 88px; font-size: var(--fs-sm); }
.aora-listing .pager-note { text-align: center; margin-top: var(--s-4); }

.aora-listing .analyzer-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  margin-top: var(--s-8); padding: var(--s-5);
  background: var(--c-slate-tint); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.aora-listing .analyzer-line p { flex: 1 1 260px; margin: 0; }

.aora-listing .drawer-title { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--tr-tight); color: var(--c-ink); }
.aora-listing .drawer-foot .foot-stack { display: flex; flex-direction: column; gap: var(--s-2); }

/* Search bar of the results page (04-cuenta-y-busqueda.html) */
.aora-listing .search-row { display: flex; gap: var(--s-2); }
.aora-listing .search-row .input { flex: 1; min-width: 0; }
.aora-listing .search-row .btn { flex: none; }
.aora-listing .hint { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s-2); }

.aora-listing .empty,
.aora-carrito .empty {
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-12) var(--s-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center;
}
.aora-listing .empty-title,
.aora-carrito .empty-title {
  font-family: var(--font-display); letter-spacing: var(--tr-tight); color: var(--c-ink);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, var(--fs-2xl)); line-height: var(--lh-tight);
}
.aora-listing .empty-links,
.aora-carrito .empty-links { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* ==========================================================================
   LISTINGS agent, 2026-09-23: rules to merge into assets/css/woo.css.
   Each block says the woo.css section it belongs to.
   ========================================================================== */

/* --- woo.css "Filter groups" (after .aora-listing .check-n) ---------------
   #24: "Ver todas las marcas (29)" / "Ver todos los ingredientes (37)" is a
   <button> made by woo.js (and a link under the brand list); style of the
   mockup 02-listing.html .filter-more. */
.aora-listing .filter-list li[hidden] { display: none; }
.aora-listing .filter-more {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--c-slate-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.aora-listing .filter-more:hover { color: var(--c-ink); }

/* --- woo.css "Filter groups": #53 price group of the mockup ------------- */
.aora-listing .price-range { display: flex; align-items: center; gap: var(--s-2); }
.aora-listing .price-range .input { min-width: 0; font-size: var(--fs-sm); }
.aora-listing .price-sep { color: var(--text-2); flex: none; }
.aora-listing .price-quick { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.aora-listing .price-quick .chip { min-height: 38px; font-size: var(--fs-xs); }
.aora-listing .price-quick .chip.is-active { background: var(--c-slate-deep); border-color: var(--c-slate-deep); color: var(--c-white); }
/* On phones the drawer button "Ver los N productos" applies the price too. */
@media (max-width: 899px) {
  .aora-listing .price-apply { display: none; }
}

/* --- woo.css "The filter column IS the mobile drawer" (max-width: 899px)
   #56: the panel's bottom padding left a strip under the sticky foot where
   a checkbox of the list showed through under "Borrar"; head and foot now
   also paint above the list. */
@media (max-width: 899px) {
  .aora-listing .filters .drawer-panel { padding-bottom: 0; }
  .aora-listing .filters .drawer-foot { margin-bottom: 0; z-index: 2; }
  .aora-listing .filters .drawer-head { z-index: 2; }
  .aora-listing .filters-box { padding-bottom: var(--s-4); }
}

/* --- woo.css after ".aora-listing .drawer-foot .foot-stack" --------------
   #22: the drawer button counts the products while you tick. */
.aora-listing .drawer-foot [aria-busy="true"] { opacity: .75; }


/* --------------------------------------------------------------------------
   2. Product page (03-product.html + 03b-producto-agotado.html)
   -------------------------------------------------------------------------- */

.aora-producto .pdp { display: grid; gap: var(--s-8); }
@media (min-width: 900px) {
  .aora-producto .pdp { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: var(--s-12); align-items: start; }
}

.aora-producto .gallery { display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .aora-producto .gallery { grid-template-columns: 76px minmax(0, 1fr); align-items: start; } }

.aora-producto .g-main {
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
  aspect-ratio: 1 / 1; overflow: hidden;
}
.aora-producto .g-main img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-8); }
@media (min-width: 900px) { .aora-producto .g-main { grid-column: 2; grid-row: 1; } }

.aora-producto .g-thumbs { display: flex; gap: var(--s-3); }
@media (min-width: 900px) { .aora-producto .g-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; } }
.aora-producto .g-thumb {
  width: 72px; height: 72px; flex: none; display: grid; place-items: center;
  padding: 6px; background: var(--c-white);
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  overflow: hidden; transition: border-color var(--dur) var(--ease);
}
.aora-producto .g-thumb:hover { border-color: var(--c-ink); }
.aora-producto .g-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aora-producto .g-thumb.is-sel { border: 2px solid var(--c-gold-deep); padding: 5px; }

.aora-producto .pdp-info { display: flex; flex-direction: column; gap: var(--s-4); }
.aora-producto .pdp-brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  align-self: flex-start; min-height: 32px;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep);
}
.aora-producto .pdp-brand:hover { color: var(--c-ink); text-decoration: none; }
.aora-producto .pdp-h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, var(--fs-3xl)); }
.aora-producto .pdp-size { font-size: var(--fs-sm); color: var(--text-2); }

.aora-producto .price-xl { font-size: var(--fs-2xl); line-height: 1.1; }
.aora-producto .pdp-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
.aora-producto .pdp-reviews-link { font-size: var(--fs-sm); color: var(--c-slate-deep); }

.aora-producto .stockline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  font-size: var(--fs-sm); color: var(--text-2);
}
.aora-producto .stockline > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.aora-producto .stockline svg { color: var(--c-gold-deep); flex: none; }
.aora-producto .stockline .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-stock); flex: none; }
.aora-producto .stockline .dot-out { background: var(--c-clay); }
.aora-producto .stock-yes { color: var(--c-stock); font-weight: 600; }
.aora-producto .stock-no { color: var(--c-clay); font-weight: 600; }

.aora-producto .buyrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-3); }
.aora-producto .buyrow form.cart {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-3);
  flex: 1 1 100%; margin: 0;
}
.aora-producto .buyrow form.cart .single_add_to_cart_button { flex: 1 1 200px; min-height: 52px; font-size: var(--fs-base); }
.aora-producto .buyrow .btn-dark { flex: 1 1 200px; }
@media (max-width: 479px) {
  .aora-producto .buyrow form.cart .single_add_to_cart_button { flex: 1 1 100%; }
  .aora-producto .buyrow .btn-dark { flex: 1 1 100%; }
}

/* Wishlist heart (03-product.html .wishbtn; inc/wishlist.php + js/wishlist.js).
   Inside the add-to-cart form next to the button; on its own in the sold-out row. */
.aora-producto .wishbtn {
  flex: none; width: var(--tap); min-height: var(--tap); padding: 0;
  display: grid; place-items: center;
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  font: inherit; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.aora-producto .wishbtn:hover { border-color: var(--c-ink); color: var(--c-clay); }
.aora-producto .wishbtn[aria-pressed="true"] { color: var(--c-clay); border-color: var(--c-clay); }
.aora-producto .wishbtn[aria-pressed="true"] svg { fill: currentColor; }
.aora-producto .wishbtn[aria-busy="true"] { opacity: .6; }
/* Narrow screens: quantity and heart on top, the button full width below. */
@media (max-width: 479px) {
  .aora-producto .buyrow form.cart .single_add_to_cart_button { order: 3; }
  .aora-producto .buyrow form.cart .wishbtn { order: 2; margin-left: auto; }
  .aora-producto .buyrow:has(> .wishbtn) > .btn-dark { flex: 1 1 0; }
  /* Last unit (no quantity box): button and heart share one row. */
  .aora-producto .buyrow form.cart:has(.quantity > input[type="hidden"]) .single_add_to_cart_button { flex: 1 1 0; }
  .aora-producto .buyrow form.cart:has(.quantity > input[type="hidden"]) .wishbtn { order: 4; margin-left: 0; }
}
/* With one unit left WooCommerce hides the quantity input; drop its empty box. */
.aora-producto .buyrow form.cart .quantity:has(> input[type="hidden"]) { display: none; }
/* Variable products: the attribute table above the button */
.aora-producto .variations { width: 100%; border-collapse: collapse; }
.aora-producto .variations th,
.aora-producto .variations td { padding: var(--s-2) 0; text-align: left; vertical-align: middle; }
.aora-producto .variations select { width: 100%; }

.aora-producto .pdp-sep { border: 0; border-top: 1px solid var(--rule); margin: var(--s-2) 0 0; }

.aora-producto .brandline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.aora-producto .brandline .pdp-brand { align-self: center; }
.aora-producto .brandlogo { height: 28px; width: auto; object-fit: contain; }

.aora-producto .rating-sum {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  font-size: var(--fs-sm); color: var(--text-2);
}
.aora-producto .rating-sum .stars svg { width: 16px; height: 16px; }
.aora-producto .rating-sum b { color: var(--c-ink); font-weight: 600; }

/* Sold out (03b) */
.aora-producto .oos-box {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-5);
}
.aora-producto .oos-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-1); }
.aora-producto .oos-status .badge { flex: none; }
.aora-producto .notify-form { display: flex; flex-wrap: wrap; gap: var(--s-3); width: 100%; }
.aora-producto .notify-form .field { flex: 1 1 220px; }
.aora-producto .notify-form .btn { flex: 0 1 auto; }
@media (max-width: 479px) { .aora-producto .notify-form .btn { flex: 1 1 100%; } }
.aora-producto .notify-msg:empty { display: none; }
.aora-producto .notify-msg { font-size: var(--fs-sm); color: var(--c-slate-deep); font-weight: 600; }
.aora-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Details, 3 steps, routine */
.aora-producto .acc-group { border-top: 1px solid var(--rule); }
.aora-producto .uso { display: grid; gap: var(--s-6); margin-top: var(--s-10); }
.aora-producto .uso-steps { counter-reset: paso; display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); }
.aora-producto .uso-steps li { position: relative; padding-left: 44px; font-size: var(--fs-sm); color: var(--text-2); }
.aora-producto .uso-steps li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-slate-tint); color: var(--c-slate-deep);
  font-size: var(--fs-xs); font-weight: 700;
}
.aora-producto .uso-steps b { color: var(--c-ink); font-weight: 600; display: block; }

.aora-producto .bundle { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5); }
.aora-producto .bundle h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
.aora-producto .bundle-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-5); }
.aora-producto .bundle-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--c-cream); border: 1px solid var(--rule); border-radius: var(--r-xs); padding: 4px; }
.aora-producto .bundle-steps { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.aora-producto .bundle-steps li { font-size: var(--fs-xs); color: var(--text-2); overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: space-between; }
.aora-producto .bundle-steps .price { font-size: var(--fs-xs); }
.aora-producto .bundle-foot { margin-top: auto; padding-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.aora-producto .bundle-total { font-size: var(--fs-lg); font-weight: 600; font-family: var(--font-display); letter-spacing: 0; }
.aora-producto .bundle-total .bundle-note { display: block; font-family: var(--font-sans); font-size: var(--fs-2xs); font-weight: 400; color: var(--text-2); letter-spacing: 0; }
/* The price itself is spans too (wc_price): keep "90,00 €" on one line even
   where a wider ".bundle-total span" rule turns spans into blocks. */
.aora-producto .bundle-total .woocommerce-Price-amount,
.aora-producto .bundle-total .woocommerce-Price-amount span {
  display: inline; font: inherit; color: inherit; letter-spacing: inherit; white-space: nowrap;
}
.aora-producto .bundle-save { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--c-gold-deep); font-weight: 600; }
.aora-producto .bundle-save .woocommerce-Price-amount { white-space: nowrap; }
.aora-producto .bundle-foot .link-more { font-size: var(--fs-sm); }
@media (min-width: 900px) { .aora-producto .bundle-wide { max-width: 680px; } }

/* Reviews */
.aora-producto .review { background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.aora-producto .review blockquote { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.4; letter-spacing: var(--tr-tight); }
.aora-producto .review blockquote p { margin: 0; }
.aora-producto .review figcaption { font-size: var(--fs-xs); color: var(--text-2); margin-top: auto; padding-top: var(--s-2); }
.aora-producto .review-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
@media (max-width: 899px) { .aora-producto #opiniones .grid-3 { grid-template-columns: minmax(0, 1fr); } }

.aora-producto .rv-summary { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
@media (min-width: 640px) { .aora-producto .rv-summary { grid-template-columns: 180px minmax(0, 1fr); align-items: center; } }
.aora-producto .rv-score { text-align: center; }
.aora-producto .rv-big { font-family: var(--font-display); font-size: var(--fs-4xl); line-height: 1; color: var(--c-ink); }
.aora-producto .rv-score .stars { margin-top: var(--s-2); }
.aora-producto .rv-score .stars svg { width: 18px; height: 18px; }
.aora-producto .rv-bars { display: flex; flex-direction: column; gap: var(--s-2); }
.aora-producto .rv-bars li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 34px; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--text-2); }
.aora-producto .rv-track { display: block; height: 8px; border-radius: var(--r-pill); background: var(--c-sand); overflow: hidden; }
.aora-producto .rv-fill { display: block; height: 100%; background: var(--c-gold); }
.aora-producto .rv-n { text-align: right; }

.aora-producto .rv-write { margin-top: var(--s-8); }
.aora-producto .rv-write > summary { list-style: none; width: fit-content; cursor: pointer; }
.aora-producto .rv-write > summary::-webkit-details-marker { display: none; }
.aora-producto .rv-form,
.aora-producto #review_form form {
  display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5);
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-6);
}
.aora-producto .rv-form .btn-primary,
.aora-producto #review_form .submit { align-self: flex-start; }
.aora-producto .rv-rate { border: 0; padding: 0; margin: 0; }
.aora-producto .rv-rate legend { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); padding: 0; margin-bottom: var(--s-3); }
.aora-producto .rv-stars { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.aora-producto .rv-stars label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.aora-producto .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-xs); color: var(--text-2); }
/* "Publicar la opinión": WooCommerce greys `.woocommerce #respond input#submit`
   (1,1,1); these outrank it so the button keeps the theme's primary look. */
.woocommerce .aora-producto #respond input#submit,
body.aora-producto #respond input#submit.btn-primary {
  background: var(--c-gold); color: var(--c-ink); border: 1px solid var(--c-gold);
  border-radius: var(--r-sm); min-height: var(--tap); padding: var(--s-3) var(--s-6);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2;
  letter-spacing: 0.01em; text-transform: none; cursor: pointer;
}
.woocommerce .aora-producto #respond input#submit:hover,
body.aora-producto #respond input#submit.btn-primary:hover { background: #BE8C4D; border-color: #BE8C4D; color: var(--c-ink); }
.aora-producto .rv-pending { margin-top: var(--s-6); scroll-margin-top: calc(var(--header-h) + var(--s-6)); }

/* Phone buy bar (03-product.html). The bar itself is .sticky-buy in base.css
   (hidden from 900 px); these are the page-only rules of the mockup. */
.aora-producto .sticky-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aora-producto .sticky-name strong {
  display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aora-producto .sticky-name .price { font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aora-producto .sticky-name .price del { font-size: var(--fs-xs); }
.aora-producto .sticky-name .woocommerce-price-suffix { display: none; }
.aora-producto .sticky-form { flex: none; margin: 0; }
.aora-producto .sticky-buy .btn { flex: none; }
/* Room for the bar: it must never cover the last line of the footer or the
   WhatsApp bubble. */
@media (max-width: 899px) {
  body.aora-producto:has(.sticky-buy) { padding-bottom: 76px; }
  body.aora-producto:has(.sticky-buy) .wa { bottom: calc(var(--s-4) + 76px); }
}

/* --------------------------------------------------------------------------
   3. Brand page (05-marca.html)
   -------------------------------------------------------------------------- */

.aora-marca .mhero { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) { .aora-marca .mhero { grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s-12); } }
.aora-marca .mhero-copy { max-width: 66ch; }
.aora-marca .mhero-tag { font-size: var(--fs-lg); color: var(--c-slate-deep); margin-top: var(--s-3); }
.aora-marca .mhero-text { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); color: var(--text-1); }
.aora-marca .mhero-media img {
  display: block; width: 100%; max-width: 420px; margin-inline: auto;
  border-radius: var(--r-md); border: 1px solid var(--rule); object-fit: cover;
}
.aora-marca .mhero-media img.mhero-logo {
  background: var(--c-white); object-fit: contain; padding: var(--s-8); aspect-ratio: 4 / 3;
}
.aora-marca .facts { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-10); margin-top: var(--s-8); }
.aora-marca .facts dt { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep); }
.aora-marca .facts dd { font-size: var(--fs-base); font-weight: 600; color: var(--c-ink); margin-top: var(--s-1); }
.aora-marca .mhero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

.aora-marca .why { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
@media (min-width: 900px) { .aora-marca .why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aora-marca .why article { background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-6); }
.aora-marca .why svg { color: var(--c-gold-deep); }
.aora-marca .why h3 { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; margin-top: var(--s-3); }
.aora-marca .why p { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--s-2); }

.aora-marca .ing-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-8); }
.aora-marca .ing-line > span { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep); }

.aora-marca .marca-logo-sm { height: 30px; width: auto; object-fit: contain; flex: none; }

.aora-marca .skincols { display: grid; gap: var(--s-8); margin-top: var(--s-8); }
@media (min-width: 720px) { .aora-marca .skincols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aora-marca .skincols h3 { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; margin-bottom: var(--s-3); }

.aora-marca .upsell {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  margin-top: var(--s-10); padding: var(--s-5);
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.aora-marca .upsell p { flex: 1 1 280px; margin: 0; font-size: var(--fs-sm); }

.aora-marca .acc-group { border-top: 1px solid var(--rule); margin-top: var(--s-8); }

.aora-marca .brandstrip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5); align-items: center; margin-top: var(--s-8);
}
@media (min-width: 720px) { .aora-marca .brandstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.aora-marca .brandstrip a {
  display: grid; place-items: center; min-height: 72px; padding: var(--s-3);
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.aora-marca .brandstrip a:hover { border-color: var(--c-slate); }
/* the logos are the normalised 600x240 set: one box, one contract, like the home strip */
.aora-marca .brandstrip img { width: 100%; max-width: 136px; height: auto; object-fit: contain; }
.aora-marca .brandstrip-text { font-size: var(--fs-xs); font-weight: 600; color: var(--c-slate-deep); text-align: center; }

/* --------------------------------------------------------------------------
   4. Cart (07-carrito.html)
   -------------------------------------------------------------------------- */

.aora-carrito .cpasos,
.aora-pago .cpasos { padding-block: var(--s-6) 0; }
.aora-carrito .cpasos ol,
.aora-pago .cpasos ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); font-size: var(--fs-xs); color: var(--text-2); }
.aora-carrito .cpasos li,
.aora-pago .cpasos li { display: inline-flex; align-items: center; gap: var(--s-2); }
.aora-carrito .cpasos [aria-current="step"],
.aora-pago .cpasos [aria-current="step"] { color: var(--c-ink); font-weight: 600; }
.aora-carrito .cpasos .step-n,
.aora-pago .cpasos .n {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--c-sand); color: var(--c-ink);
  font-size: 11px; font-weight: 700;
}
.aora-carrito .cpasos [aria-current="step"] .step-n,
.aora-pago .cpasos [aria-current="step"] .n { background: var(--c-slate); color: var(--c-white); }
.aora-pago .cpasos .sep { color: var(--c-border-strong); }

.aora-carrito .cart-layout { display: grid; gap: var(--s-8); align-items: start; padding-block: var(--s-8); }
@media (min-width: 900px) { .aora-carrito .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-10); } }
.aora-carrito .cart-h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, var(--fs-2xl)); }
/* Notices now sit in the cart column, above the heading (was edge to edge). */
.aora-carrito .cart-layout .woocommerce-notices-wrapper:not(:empty) { margin-bottom: var(--s-4); }
.aora-carrito .cart-layout .woocommerce-notices-wrapper > :first-child,
.aora-carrito .section .woocommerce-notices-wrapper > :first-child { margin-top: 0; }
.aora-carrito .empty.wc-empty-cart-message { margin-top: var(--s-4); }
/* div.cart_totals: the block cart.js swaps after ajax; it keeps the column
   rhythm of the summary card. */
/* woocommerce-layout.css floats it at 48 % (`.woocommerce .cart-collaterals .cart_totals`). */
.aora-carrito .summary.cart-collaterals .cart_totals {
  display: flex; flex-direction: column; gap: var(--s-5); float: none; width: auto;
}

.aora-carrito .shipbar {
  margin-top: var(--s-6); padding: var(--s-4) var(--s-5);
  background: var(--c-gold-tint); border: 1px solid var(--c-gold); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--c-ink);
}
.aora-carrito .shipbar .track {
  display: block; height: 8px; margin-top: var(--s-3);
  background: rgba(255,255,255,.7); border-radius: var(--r-pill); overflow: hidden;
}
.aora-carrito .shipbar .track > span { display: block; height: 100%; background: var(--c-gold-deep); }

.aora-carrito .citems { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-6); }
.aora-carrito .citem {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-4);
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule);
}
@media (min-width: 640px) { .aora-carrito .citem { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-5); } }
.aora-carrito .citem-media { background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-sm); aspect-ratio: 1 / 1; overflow: hidden; }
.aora-carrito .citem-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-2); }
.aora-carrito .citem-body { display: flex; flex-direction: column; gap: var(--s-2); }
.aora-carrito .citem-brand { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep); }
.aora-carrito .citem-name { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.aora-carrito .citem-name a { color: inherit; }
.aora-carrito .citem-meta { font-size: var(--fs-xs); color: var(--text-2); }
.aora-carrito .citem-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.aora-carrito .citem-total { font-size: var(--fs-base); font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.aora-carrito .citem-links { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.aora-carrito .btn-text {
  display: inline-flex; align-items: center; min-height: 32px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); text-decoration: underline;
}
.aora-carrito .btn-text:hover { color: var(--c-clay); }

.aora-carrito .coupon { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); margin-top: var(--s-6); }
.aora-carrito .coupon .field { flex: 1 1 220px; }
.aora-carrito .cart-update { margin-top: var(--s-4); }
.aora-carrito .cart-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-8); }

.aora-carrito .summary,
.aora-pago .sum {
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5);
}
@media (min-width: 900px) {
  .aora-carrito .summary { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}
.aora-carrito .sum-h,
.aora-pago .sum-h { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--tr-tight); }
.aora-carrito .sum-rows,
.aora-pago .sum-tot { display: flex; flex-direction: column; gap: var(--s-3); }
.aora-carrito .sum-row,
.aora-pago .sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-sm); color: var(--text-1); }
.aora-carrito .sum-row b,
.aora-pago .sum-row b { color: var(--c-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.aora-carrito .sum-total { padding-top: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--fs-base); }
.aora-carrito .sum-note,
.aora-pago .sum-note { font-size: var(--fs-2xs); color: var(--text-2); line-height: 1.5; }
.aora-carrito .woocommerce-shipping-totals th,
.aora-pago .woocommerce-shipping-totals th { text-align: left; font-weight: 400; font-size: var(--fs-sm); color: var(--text-1); }
.aora-carrito .woocommerce-shipping-methods,
.aora-pago .woocommerce-shipping-methods { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
.aora-carrito .woocommerce-shipping-methods label,
.aora-pago .woocommerce-shipping-methods label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; }

/* --------------------------------------------------------------------------
   5. Checkout (08-checkout.html)
   -------------------------------------------------------------------------- */

.aora-pago .co { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 900px) { .aora-pago .co { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-10); } }
/* WooCommerce puts the error box of a failed submit first inside form.checkout: full width, above both columns. */
.aora-pago .co > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.aora-pago .co-form { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
@media (min-width: 900px) { .aora-pago .co-side { position: sticky; top: calc(var(--header-h) + var(--s-4)); } }

.aora-pago .fs { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--c-white); padding: 0; margin: 0; }
.aora-pago .fs > legend {
  font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; color: var(--c-ink);
  padding: 0 var(--s-3); margin-left: var(--s-4);
}
.aora-pago .fs-body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5) var(--s-6) var(--s-6); }
.aora-pago .col2 { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .aora-pago .col2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aora-pago .fs-body h3,
.aora-pago .fs-body .block-title {
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep);
}
.aora-pago .form-row { display: flex; flex-direction: column; gap: var(--s-2); }
.aora-pago .form-row-first,
.aora-pago .form-row-last { flex: 1 1 200px; }
.aora-pago .label,
.aora-pago label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.aora-pago .hint,
.aora-pago .description { font-size: var(--fs-xs); color: var(--text-2); }
.aora-pago .required { color: var(--c-clay); }
.aora-pago .select2-container--default .select2-selection--single {
  height: var(--tap); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  display: flex; align-items: center; padding-inline: var(--s-3);
}

/* The payment list: WooCommerce's own markup, drawn as radio cards. */
.aora-pago .payment_methods { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-4) 0 0; padding: 0; }
.aora-pago .payment_methods > li {
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  background: var(--c-white); overflow: hidden; padding: 0;
}
.aora-pago .payment_methods > li::before { content: none; }
.aora-pago .payment_methods > li > label {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap); padding: var(--s-4) var(--s-5); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
}
.aora-pago .payment_methods > li > input[type="radio"] { margin-left: var(--s-5); accent-color: var(--c-slate-deep); }
.aora-pago .payment_methods > li > input[type="radio"]:checked + label { color: var(--c-slate-deep); }
.aora-pago .payment_methods > li:has(input[type="radio"]:checked) { border-color: var(--c-slate); box-shadow: 0 0 0 1px var(--c-slate); }
.aora-pago .payment_methods .payment_box {
  padding: 0 var(--s-5) var(--s-5); margin: 0;
  font-size: var(--fs-sm); color: var(--text-2); background: none;
}
.aora-pago .payment_methods img { max-height: 24px; width: auto; margin-left: auto; }

/* Radio and label on one line: each card is a two-column grid (radio, label),
   the gateway's description box spans both. The #payment selectors outrank
   WooCommerce's own `.woocommerce-checkout #payment ...` rules, which put a
   1em margin on the radio, a grey panel behind the list and a lilac box with
   an arrow under the chosen method. */
.aora-pago #payment { background: none; border-radius: 0; }
.aora-pago #payment ul.payment_methods { border: 0; padding: 0; }
.aora-pago #payment ul.payment_methods > li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  line-height: 1.4; margin: 0;
}
.aora-pago #payment ul.payment_methods > li > input[type="radio"] {
  grid-column: 1; margin: 0 0 0 var(--s-5); width: 18px; height: 18px; vertical-align: middle;
}
.aora-pago #payment ul.payment_methods > li > label {
  grid-column: 2; margin: 0; padding: var(--s-4) var(--s-5) var(--s-4) var(--s-3);
}
.aora-pago #payment ul.payment_methods > li > .payment_box {
  grid-column: 1 / -1; margin: 0; padding: 0 var(--s-5) var(--s-5);
  background: none; color: var(--text-2); font-size: var(--fs-sm);
}
.aora-pago #payment ul.payment_methods > li > .payment_box::before { content: none; display: none; }
.aora-pago #payment ul.payment_methods > li img { margin: 0 0 0 var(--s-2); vertical-align: middle; }
.aora-pago #payment div.form-row { padding: 0; }

/* Notices, login box and coupon box above the form, inside the page column. */
.aora-pago .co-notices { margin-top: var(--s-6); }
.aora-pago .co-notices:empty,
.aora-pago .co-notices .woocommerce-notices-wrapper:empty { display: none; }
.aora-pago .co-notices .woocommerce-form-login-toggle > :first-child,
.aora-pago .co-notices .woocommerce-form-coupon-toggle > :first-child { margin-top: 0; }
.aora-pago .co-notices form.login,
.aora-pago .co-notices form.checkout_coupon {
  margin: 0 0 var(--s-4); padding: var(--s-5);
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
}

/* The theme's Términos y condiciones, opened under the "términos" link. */
.aora-pago .aora-terms-inline {
  margin: var(--s-3) 0; padding: var(--s-4) var(--s-5);
  background: var(--c-cream); border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-size: var(--fs-xs); line-height: 1.55; color: var(--text-1);
}
.aora-pago .aora-terms-inline h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-3); }
.aora-pago .aora-terms-inline h2 ~ h2,
.aora-pago .aora-terms-inline h3 {
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0;
  margin: var(--s-4) 0 var(--s-2);
}
.aora-pago .aora-terms-inline p,
.aora-pago .aora-terms-inline li,
.aora-pago .aora-terms-inline address { margin: 0 0 var(--s-2); font-size: var(--fs-xs); font-style: normal; }

.aora-pago .place-order { margin-top: var(--s-6); gap: var(--s-4); }
.aora-pago .woocommerce-terms-and-conditions-wrapper { font-size: var(--fs-xs); color: var(--text-2); }
.aora-pago .lockline { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--text-2); }
.aora-pago .lockline svg { color: var(--c-gold-deep); flex: none; }
.aora-pago .co-back { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.aora-pago .sum-list { display: flex; flex-direction: column; gap: var(--s-4); }
.aora-pago .sum-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; }
.aora-pago .sum-item::before { content: none; }
.aora-pago .sum-item img { width: 56px; height: 56px; object-fit: contain; background: var(--c-cream); border: 1px solid var(--rule); border-radius: var(--r-xs); padding: 3px; }
.aora-pago .sum-name { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); line-height: 1.35; }
.aora-pago .sum-meta { font-size: var(--fs-2xs); color: var(--text-2); margin-top: 2px; }
.aora-pago .sum-line { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.aora-pago .sum-grand {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-top: var(--s-4); border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   6. Account (the .aora-cuenta block of aora.css already covers the rest)
   -------------------------------------------------------------------------- */

.aora-cuenta .woocommerce-MyAccount-content { min-width: 0; }
.aora-cuenta .table-scroll { position: relative; overflow-x: auto; }
.aora-cuenta .woocommerce-orders-table,
.aora-cuenta .shop_table {
  width: 100%; border-collapse: collapse; background: var(--c-white);
  border: 1px solid var(--rule); border-radius: var(--r-md); font-size: var(--fs-sm);
}
.aora-cuenta .shop_table th,
.aora-cuenta .shop_table td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--rule); }
.aora-cuenta .shop_table th { font-weight: 600; color: var(--c-ink); }
.aora-cuenta .woocommerce-Addresses { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 720px) { .aora-cuenta .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aora-cuenta .woocommerce-Address,
.aora-cuenta .card {
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-6);
}
.aora-cuenta .woocommerce-EditAccountForm .form-row,
.aora-cuenta .woocommerce-address-fields .form-row { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }


/* ==========================================================================
   For woo.css, section 6 "Account" (append at the end of section 6, before
   section 7). Written by the ACCOUNT agent 2026-09-23, bugs #63 and #58.
   Every rule is scoped to .aora-cuenta (Mi cuenta, lost password, search/404
   also carry it but have no WooCommerce forms), so the cart and checkout are
   not touched.
   ========================================================================== */

/* #63 The second box inside the login / register cards: woocommerce.css draws
   `.woocommerce form.login, form.register { border; padding: 20px; margin: 2em 0 }`
   (0,2,1) inside our .card. The card is the only box. */
.aora-cuenta .woocommerce form.login,
.aora-cuenta .woocommerce form.register,
.aora-cuenta .woocommerce form.lost_reset_password {
  border: 0; padding: 0; margin: var(--s-5) 0 0; border-radius: 0; text-align: left;
}

/* #63 WooCommerce's grey buttons in Mi cuenta ("Guardar dirección", "Guardar los
   cambios", "Añadir método de pago", "Pedir de nuevo", the button inside the
   "Confirma tu dirección de correo" notice...). woocommerce.css
   `.woocommerce a.button` is (0,2,1); these are (0,3,1). Look = .btn-quiet. */
.aora-cuenta .woocommerce a.button,
.aora-cuenta .woocommerce button.button,
.aora-cuenta .woocommerce input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: var(--s-3) var(--s-6);
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
  letter-spacing: 0.01em; text-align: center; text-decoration: none; text-transform: none;
  box-shadow: none;
}
.aora-cuenta .woocommerce a.button:hover,
.aora-cuenta .woocommerce button.button:hover,
.aora-cuenta .woocommerce input.button:hover {
  background: var(--c-white); color: var(--c-ink); border-color: var(--c-ink); text-decoration: none;
}
/* The form submits are the main action of their screen: look = .btn-dark. */
.aora-cuenta .woocommerce-EditAccountForm button.button,
.aora-cuenta .woocommerce-address-fields button.button,
.aora-cuenta #add_payment_method button.button,
.aora-cuenta .woocommerce a.button.alt,
.aora-cuenta .woocommerce button.button.alt {
  background: var(--c-slate); color: var(--c-white); border-color: var(--c-slate);
  min-height: var(--tap); padding: var(--s-3) var(--s-6); font-size: var(--fs-sm);
}
.aora-cuenta .woocommerce-EditAccountForm button.button:hover,
.aora-cuenta .woocommerce-address-fields button.button:hover,
.aora-cuenta #add_payment_method button.button:hover,
.aora-cuenta .woocommerce a.button.alt:hover,
.aora-cuenta .woocommerce button.button.alt:hover {
  background: var(--c-slate-hover); color: var(--c-white); border-color: var(--c-slate-hover);
}
/* A button inside a notice: next to the text on wide screens, under it on phones. */
@media (max-width: 639px) {
  .aora-cuenta .woocommerce-info a.button,
  .aora-cuenta .woocommerce-message a.button { float: none; display: flex; width: 100%; margin-bottom: var(--s-3); }
}

/* #58 Login / register notices now print under the heading (.auth-notices in
   form-login.php): no extra outer margin there. */
.aora-cuenta .auth-notices .woocommerce-error,
.aora-cuenta .auth-notices .woocommerce-message,
.aora-cuenta .auth-notices .woocommerce-info { margin: 0 0 var(--s-3); }
.aora-cuenta .auth-notices > :last-child,
.aora-cuenta .auth-notices .woocommerce-notices-wrapper > :last-child { margin-bottom: 0; }

/* The privacy sentence WooCommerce prints in the register form: small print. */
.aora-cuenta .woocommerce-privacy-policy-text,
.aora-cuenta .woocommerce-privacy-policy-text p { font-size: var(--fs-xs); color: var(--text-2); margin: 0; }

/* #39 A notice at the top of the lost-password card: room before the heading. */
.aora-cuenta .auth-single .card > .woocommerce-notices-wrapper .woocommerce-error,
.aora-cuenta .auth-single .card > .woocommerce-notices-wrapper .woocommerce-message,
.aora-cuenta .auth-single .card > .woocommerce-notices-wrapper .woocommerce-info { margin: 0 0 var(--s-5); }

/* #40 Phone, Mi cuenta > Pedidos: the table keeps woo.css's white bordered box
   (.woocommerce-orders-table), so each order block gets inner side padding. */
@media (max-width: 639px) {
  .aora-cuenta .otable-stack.woocommerce-orders-table tr { padding-inline: var(--s-4); }
  .aora-cuenta .otable-stack.woocommerce-orders-table tr:last-child { border-bottom: 0; }
}

/* Ver pedido: WooCommerce's headings sat right under the paragraph above. */
.aora-cuenta .woocommerce-order-details,
.aora-cuenta .woocommerce-customer-details { margin-top: var(--s-8); }

/* woocommerce.css colours the top border of .woocommerce-info / -message
   (blue/green) over woo.css's thin rule; in Mi cuenta the gold left bar is enough. */
.aora-cuenta .woocommerce .woocommerce-info,
.aora-cuenta .woocommerce .woocommerce-message { border-top-color: var(--rule); }


/* --------------------------------------------------------------------------
   7. Late overrides: WooCommerce and the gateway plugins load after this file
      in a few places, so these rules are written to outrank them.
   -------------------------------------------------------------------------- */

/* The cart's "Finalizar compra" button: gold, never the plugin green. */
.aora-carrito .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
body a.checkout-button.button.alt {
  background: var(--c-gold); color: var(--c-ink); border: 1px solid var(--c-gold);
  border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--fs-base);
  font-weight: 600; text-transform: none; letter-spacing: 0.01em;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: var(--s-4) var(--s-8); width: 100%; text-align: center;
}
.aora-carrito .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: #BE8C4D; border-color: #BE8C4D; color: var(--c-ink); }

/* WooCommerce prints a.remove as a big red cross; here it is a quiet link. */
/* WooCommerce core sets `a.remove { color: red !important }`. */
.aora-carrito .citem-links a.remove { color: var(--text-2) !important; }
.aora-carrito .citem-links a.remove:hover { color: var(--c-clay) !important; }
.aora-carrito .citem-links a.remove,
.aora-carrito .citem-links a.remove:hover {
  /* 44 px tap target (it was 39 x 32 on a phone). */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); margin: calc(var(--s-2) * -1) 0;
  width: auto; height: auto; border-radius: 0; background: none;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  text-decoration: underline; color: var(--text-2);
}
.aora-carrito .citem-links a.remove:hover { color: var(--c-clay); background: none; }

/* The shipping choice inside the summary. */
.aora-carrito .woocommerce-shipping-totals,
.aora-pago .woocommerce-shipping-totals { display: block; }
.aora-carrito ul#shipping_method,
.aora-pago ul#shipping_method { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.aora-carrito ul#shipping_method li,
.aora-pago ul#shipping_method li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-sm); }
.aora-carrito ul#shipping_method li::before,
.aora-pago ul#shipping_method li::before { content: none; }

/* The order button: the gateways' stylesheets colour #place_order themselves. */
.aora-pago #place_order,
body button#place_order,
.woocommerce #place_order {
  background: var(--c-gold) !important; color: var(--c-ink) !important;
  border: 1px solid var(--c-gold) !important; border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600;
  text-transform: none; letter-spacing: 0.01em;
  min-height: 52px; width: 100%; padding: var(--s-4) var(--s-8);
}
.aora-pago #place_order:hover,
body button#place_order:hover { background: #BE8C4D !important; border-color: #BE8C4D !important; }

/* Express checkout blocks the gateways inject above the form: kept, but boxed. */
.aora-pago .wc-stripe-payment-request-wrapper,
.aora-pago #wc-stripe-payment-request-wrapper,
.aora-pago .wc-stripe-checkout-express-payment-wrapper,
.aora-pago .wcpay-payment-request-wrapper {
  max-width: 360px; margin: 0 auto var(--s-4);
}
.aora-pago .wc-stripe-payment-request-button-separator { font-size: var(--fs-xs); color: var(--text-2); }

/* --------------------------------------------------------------------------
   8. Express pay — the wallet row on the product page
   Apple Pay / Google Pay / Amazon Pay / Link used to print as three full-width
   bars right under "Añadir al carrito". They are now one small secondary row
   inside a bordered card, always below the buy button. The card only appears
   once a wallet has really drawn itself (see inc/express-pay.php).
   -------------------------------------------------------------------------- */

.aora-xpay { display: none; }
.aora-xpay.is-ready { display: block; }

/* Inside the buy row it takes the whole width and always comes last. */
.aora-producto .buyrow .aora-xpay {
  order: 9;
  flex: 1 1 100%;
  margin-top: var(--s-1);
}

.aora-xpay.is-ready {
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--c-cream);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}

.aora-xpay-label {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text-2);
}

/* Stripe prints its own inline margins; a stylesheet !important still wins. */
.aora-xpay .wc-stripe-express-checkout-wrapper,
.aora-xpay #wc-stripe-express-checkout-element,
.aora-xpay .wc-stripe-payment-request-wrapper,
.aora-xpay #wc-stripe-payment-request-wrapper,
.aora-xpay .wcpay-payment-request-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  clear: both;
}

/* Stripe's own stylesheet makes the container a flex row; only the wrapping is
   changed here, never the display, so its show/hide from JavaScript keeps working. */
.aora-xpay #wc-stripe-express-checkout-element,
.aora-xpay .wc-stripe-payment-request-wrapper,
.aora-xpay .wcpay-payment-request-wrapper {
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: flex-start;
}

/* One wallet per cell: three per row on a desktop, two on a phone. */
.aora-xpay #wc-stripe-express-checkout-element > div,
.aora-xpay .wc-stripe-payment-request-wrapper > div,
.aora-xpay .wcpay-payment-request-wrapper > div {
  display: inline-block;
  vertical-align: top;
  flex: 0 1 calc(33.333% - 6px);
  width: calc(33.333% - 6px);
  min-width: 140px;
  max-width: 220px;
  max-height: 40px;
  overflow: hidden;
}

.aora-xpay #wc-stripe-express-checkout-element > div iframe,
.aora-xpay .wc-stripe-payment-request-wrapper > div iframe {
  max-height: 40px;
}

/* Stripe's "— O —" line: the card's own label replaces it. */
.aora-xpay #wc-stripe-express-checkout-button-separator,
.aora-xpay .wc-stripe-payment-request-button-separator,
.aora-producto #wc-stripe-express-checkout-button-separator,
.aora-producto .wc-stripe-payment-request-button-separator {
  display: none !important;
}

@media (max-width: 767px) {
  .aora-xpay #wc-stripe-express-checkout-element > div,
  .aora-xpay .wc-stripe-payment-request-wrapper > div,
  .aora-xpay .wcpay-payment-request-wrapper > div {
    flex: 0 1 calc(50% - 4px);
    width: calc(50% - 4px);
    min-width: 140px;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   9. Omnibus — "Precio más bajo en los últimos 30 días" (inc/omnibus.php)
   The markup also carries .xsmall .muted (base.css), so a card on a page
   without this file (home sections) still gets the small grey line.
   -------------------------------------------------------------------------- */

.price-ref { margin: 0; font-size: var(--fs-xs); line-height: 1.35; color: var(--text-2); }
.price-ref .woocommerce-Price-amount { font-weight: 600; white-space: nowrap; }
.pcard-foot .price-ref { margin-top: calc(-1 * var(--s-2)); }
.aora-producto .pdp-info > .price-ref { margin-top: calc(-1 * var(--s-3)); }
.aora-producto .woocommerce-variation-price .price-ref { margin-top: var(--s-1); }
/* WooCommerce's sale markup (<del> old, <ins> new) in the look of .price-old. */
.price del { font-size: var(--fs-sm); font-weight: 400; color: var(--text-2); margin-right: var(--s-1); }
.price ins { text-decoration: none; }
.aora-producto .price-xl del { font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   10. Order received (woocommerce/checkout/thankyou.php): step 4 of 08.
   The body has no .aora-pago here, so every rule hangs off .aora-gracias.
   -------------------------------------------------------------------------- */

.aora-gracias .cpasos { padding-block: var(--s-6) 0; }
.aora-gracias .cpasos ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); font-size: var(--fs-xs); color: var(--text-2); }
.aora-gracias .cpasos li { display: inline-flex; align-items: center; gap: var(--s-2); }
.aora-gracias .cpasos li::before { content: none; }
.aora-gracias .cpasos .n {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--c-sand); color: var(--c-ink);
  font-size: 11px; font-weight: 700;
}
.aora-gracias .cpasos [aria-current="step"] { color: var(--c-ink); font-weight: 600; }
.aora-gracias .cpasos [aria-current="step"] .n { background: var(--c-slate); color: var(--c-white); }
.aora-gracias .cpasos .sep { color: var(--c-border-strong); }

.aora-gracias .thanks { display: flex; flex-direction: column; gap: var(--s-6); max-width: 860px; }
.aora-gracias .woocommerce-thankyou-order-received { font-size: var(--fs-lg); color: var(--c-ink); margin: 0; }
.aora-gracias .woocommerce-notice--error {
  margin: 0; padding: var(--s-4) var(--s-5);
  background: var(--c-clay-tint); border: 1px solid var(--rule); border-left: 3px solid var(--c-clay);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
}

/* The four facts: number, date, total, payment method. */
.aora-gracias .thanks-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  margin: 0; padding: 0; list-style: none;
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
}
/* WooCommerce's clearfix ::before/::after would be empty grid cells, and its
   `.woocommerce ul.order_details li` (0,2,2) draws dashed dividers. */
.aora-gracias ul.thanks-facts::before,
.aora-gracias ul.thanks-facts::after,
.aora-gracias .col2-set::before,
.aora-gracias .col2-set::after { content: none; display: none; }
.aora-gracias ul.thanks-facts li {
  margin: 0; padding: var(--s-4) var(--s-5); border: 0;
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-slate-deep);
  float: none;
}
.aora-gracias .thanks-facts li::before { content: none; }
.aora-gracias .thanks-facts strong {
  display: block; margin-top: var(--s-1);
  font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink);
  overflow-wrap: anywhere;
}
.aora-gracias .thanks-facts strong .woocommerce-Price-amount { white-space: nowrap; }

/* Bank transfer details (only when the shop filled them in). */
.aora-gracias .woocommerce-bacs-bank-details,
.aora-gracias .wc-bacs-bank-details {
  padding: var(--s-5); background: var(--c-gold-tint); border: 1px solid var(--c-gold); border-radius: var(--r-md);
}
.aora-gracias .wc-bacs-bank-details-heading,
.aora-gracias .wc-bacs-bank-details-account-name { font-family: var(--font-sans); font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; margin: 0 0 var(--s-3); }
.aora-gracias .wc-bacs-bank-details.order_details { list-style: none; margin: 0; padding: 0; background: none; border: 0; display: grid; gap: var(--s-2); }
.aora-gracias .wc-bacs-bank-details.order_details li { margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--text-2); border: 0; float: none; }
.aora-gracias .wc-bacs-bank-details.order_details li::before { content: none; }
.aora-gracias .wc-bacs-bank-details.order_details strong { display: block; font-size: var(--fs-sm); color: var(--c-ink); }

/* Order table and addresses (WooCommerce's order-details templates). */
.aora-gracias .woocommerce-order-details,
.aora-gracias .woocommerce-customer-details { margin: 0; }
.aora-gracias .woocommerce-order-details__title,
.aora-gracias .woocommerce-column__title {
  font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--tr-tight);
  margin: 0 0 var(--s-4);
}
.aora-gracias table.shop_table {
  width: 100%; margin: 0; border-collapse: collapse; background: var(--c-white);
  border: 1px solid var(--rule); border-radius: var(--r-md); font-size: var(--fs-sm);
}
.aora-gracias table.shop_table th,
.aora-gracias table.shop_table td {
  padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top;
  border: 0; border-top: 1px solid var(--rule); color: var(--text-1); font-weight: 400;
}
.aora-gracias table.shop_table thead th { border-top: 0; font-weight: 600; color: var(--c-ink); }
.aora-gracias table.shop_table tfoot th { font-weight: 600; color: var(--c-ink); }
.aora-gracias table.shop_table td:last-child,
.aora-gracias table.shop_table th:last-child { text-align: right; }
.aora-gracias table.shop_table .product-name a { color: var(--c-ink); }
.aora-gracias table.shop_table .woocommerce-Price-amount { white-space: nowrap; }
.aora-gracias table.shop_table small { font-size: var(--fs-2xs); color: var(--text-2); }
.aora-gracias table.shop_table .order-actions-button,
.aora-gracias table.shop_table td a.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
  padding: var(--s-2) var(--s-4); margin: 0;
  background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-ink); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 600; text-decoration: none;
}
.aora-gracias table.shop_table .order-actions-button:hover,
.aora-gracias table.shop_table td a.button:hover { background: var(--c-cream); }
.aora-gracias .order-again .button { background: var(--c-white); color: var(--c-ink); border-color: var(--c-ink); }
.aora-gracias .wd-orderline { margin: var(--s-4) 0 0; }

.aora-gracias .woocommerce-columns--addresses { display: grid; gap: var(--s-6); width: auto; }
@media (min-width: 720px) { .aora-gracias .woocommerce-columns--addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aora-gracias .woocommerce-columns--addresses .woocommerce-column,
.aora-gracias .col2-set .col-1,
.aora-gracias .col2-set .col-2 { width: auto; float: none; margin: 0; max-width: none; }
.aora-gracias .woocommerce-customer-details address {
  margin: 0; padding: var(--s-5); font-style: normal; font-size: var(--fs-sm); line-height: 1.6;
  background: var(--c-white); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.aora-gracias .woocommerce-customer-details address p { margin: var(--s-1) 0 0; padding: 0; font-size: var(--fs-sm); }
.aora-gracias .woocommerce-customer-details address p::before { content: none; }

.aora-gracias .thanks-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }

/* Order-pay page ("Pagar el pedido"): same column as the thank-you page; the
   gateway list keeps the .aora-pago radio cards (the body has that class). */
.aora-pagar .pay-order #order_review { display: flex; flex-direction: column; gap: var(--s-6); }
.aora-pagar .pay-order #payment { margin: 0; }
.aora-pagar .pay-order .woocommerce-error,
.aora-pagar .pay-order .woocommerce-info,
.aora-pagar .pay-order .woocommerce-message { margin: 0 0 var(--s-4); }