/*
Theme Name: Solid Client
Version: 0.4.0
Description: Standalone WordPress theme for NUA / Solid ecommerce stores. No vendor parent — header, footer, page templates, and WooCommerce overrides all live in this directory.
*/

/* Hide the Onsus "Sold / Available" stock widget across shop, single
   product, and any catalog listing. Sales counts aren't populated for
   this brand, so the 0/total readout and empty progress bar are noise. */
body .special-progress,
body .infor-sold {
  display: none !important;
}

/* ── Homepage section spacing ── */
/* Use margin-bottom only to avoid double-margin stacking issues with
   Elementor stretched sections (which can prevent CSS margin collapse). */
body.page .elementor-top-section {
  margin-top: 0 !important;
  margin-bottom: 50px !important;
}

/* Last content section before footer — no bottom margin */
body.page .elementor-top-section:last-of-type {
  margin-bottom: 0 !important;
}

/* Footer sections must NOT get homepage spacing */
body.page .site-footer .elementor-top-section,
body.page .site-footer .elementor-section,
.site-footer .elementor-top-section,
.site-footer .elementor-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

article:before,
article:after {
  display: none !important;
}

/* ── Product/Category Placeholder Images ── */

/* Onsus theme: products without images have .image div with no <img> inside */
.item .image:not(:has(.img_thumbnail)),
.item .image:not(:has(img)) {
  background: #e5e7eb !important;
  min-height: 200px;
  position: relative;
}

.item .image:not(:has(.img_thumbnail))::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
  background: #e5e7eb;
  border-radius: 4px;
}

/* WooCommerce standard placeholder */
.woocommerce-placeholder,
img.wp-post-image[src*="placeholder"] {
  background: #e5e7eb !important;
  min-height: 200px;
  object-fit: contain;
}

/* Category placeholder */
.product-category .image:not(:has(img)),
.product-category img[src*="placeholder"] {
  background: #f3f4f6 !important;
  min-height: 150px;
}

img.woocommerce-placeholder {
  background-color: #e5e7eb;
  padding: 20px;
  width: 100%;
  height: auto;
  min-height: 180px;
  object-fit: contain;
}

/* Deal of the day / banner without image */
.tf-products-banner .image:not(:has(img)) {
  background: #e5e7eb !important;
  min-height: 180px;
  border-radius: 4px;
}

/* Shop page: make category images circular (onsus uses ::before for circle bg;
   image sits on top as a square — we override to make the image itself circular).
   Onsus locks .thumb (the flex container) and .thumb::before (the gray circle
   bg) to 74×74; we bump both to 84×84 so they match the image dimensions —
   without these, the 84px image overflows a 74px container and the visual
   reads as a vertically-stretched circle. */
.wrap-product-category .item .thumb,
.wrap-product-category .thumb {
  width: 84px !important;
  height: 84px !important;
}
.wrap-product-category .item .thumb::before,
.wrap-product-category .thumb::before {
  width: 84px !important;
  height: 84px !important;
}
.wrap-product-category .item .thumb img {
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 300ms ease-out;
}

/* Zoom the category circle on hover. Transform only (no reflow); the whole
   circle grows rather than clipping inside the frame, so the .is-active ring
   (a box-shadow sitting outside the image) is preserved. */
.wrap-product-category .item:hover .thumb img {
  transform: scale(1.12);
}
@media (prefers-reduced-motion: reduce) {
  .wrap-product-category .item .thumb img { transition: none; }
  .wrap-product-category .item:hover .thumb img { transform: none; }
}

/* Hide the onsus ::before since we're making the image itself the circle */
.wrap-product-category .item .thumb::before {
  display: none !important;
}

/* Active state — the category circle for the page we're currently
   viewing gets a primary-green ring + lime-tinted title so the
   selection is immediately legible. Class set server-side in
   woocommerce/category-product.php override. */
.wrap-product-category .item.is-active .thumb img {
  box-shadow:
    0 0 0 2px var(--brand-cream),
    0 0 0 5px var(--brand-ink) !important;
}
.wrap-product-category .item.is-active .title,
.wrap-product-category .item.is-active .title a {
  color: var(--accent-lime, #c5d202) !important;
}

/* Category-name header — sits on its own row directly UNDER
   the Ver como / Sort toolbar. Centered, 30px top + bottom
   margin, full width of the content area. Empty state still
   reserves space so the products grid below doesn't shift. */
.solid-shop-cat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  margin: 30px 0;
  width: 100%;
}
/* When a title is actually rendered (category selected), give the
   products grid 50px of breathing room below it. */
.solid-shop-cat-header.is-active {
  margin-bottom: 50px;
}
.solid-shop-cat-header__title {
  font-family: "Bricolage Grotesque", var(--font-sans);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--primary, var(--brand-ink));
  margin: 0;
  text-transform: uppercase;
}

/* Ensure the toolbar's right edge lines up with other sections
   on the page (categories strip + products grid). Onsus's stock
   `.meta-wrap` rule applies a negative right margin / box-sizing
   quirk that pushes the toolbar past the `.content-woocommerce`
   right edge — explicit `margin: 0; width: 100%; box-sizing:
   border-box` keeps it aligned. */
.solid-shop-toolbar.meta-wrap {
  margin: 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100%;
}

@media (max-width: 767px) {
  .solid-shop-cat-header {
    min-height: 40px;
    margin: 20px 0;
  }
  .solid-shop-cat-header__title {
    font-size: 30px;
  }
  /* Shrink the category circles on mobile and tighten the per-item
     padding so more circles fit per row + they cluster visually
     instead of floating with desktop-sized whitespace. Onsus's
     `.item { padding: 14px 10px }` is the source of the horizontal
     gap between circles in the owl-carousel; cutting it to 2px each
     side roughly halves the visible gap. */
  .wrap-product-category .item .thumb,
  .wrap-product-category .thumb,
  .wrap-product-category .item .thumb::before,
  .wrap-product-category .thumb::before,
  .wrap-product-category .item .thumb img {
    width: 56px !important;
    height: 56px !important;
  }
  /* Narrow the per-item box so each circle+title sits in its own
     compact column instead of taking up the full owl-allocated slot.
     `flex: 0 0 auto` stops the onsus `flex: 1 0 auto` rule from
     stretching items to fill the stage; `width: auto` lets the
     content drive sizing; max-width caps it. Padding 10px each side
     creates ~20px of breathing room between adjacent circles. */
  .wrap-product-category .owl-item {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .wrap-product-category .item {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 104px !important;
    padding: 8px 10px !important;
    margin: 0 auto !important;
  }
  /* Force the category name onto a single row. Onsus uses
     `display: -webkit-box; -webkit-line-clamp: 2;` which wraps long
     names to a second line and made the strip feel ragged. Override
     to a single-row block with ellipsis fallback for the one or two
     names that exceed the column (e.g. "Vitaminas y Minerales"). */
  .wrap-product-category .item .title,
  .wrap-product-category .item .title a {
    font-size: 10px !important;
    line-height: 1.25 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: horizontal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
}

/* Category circle title — bold uppercase 12px var(--brand-ink) (was
   inheriting the default body color, which read as muted black on
   the cream/white bg). */
.wrap-product-category .item .title,
.wrap-product-category .item .title a {
  color: var(--brand-ink) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

/* Align the three sections inside .content-woocommerce — categories
   carousel, toolbar, and product grid all use the same horizontal
   bounds (no extra left/right padding-margin). The owl-carousel may
   inject its own internal padding, so we force the outer wrapper to
   span full width and zero out negative margins / paddings. */
.content-woocommerce > .wrap-product-category,
.content-woocommerce > .collection-archive-header,
.content-woocommerce > .solid-shop-results,
.solid-shop-results > .meta-wrap.solid-shop-toolbar,
.solid-shop-results > .products-content,
.solid-shop-results > .products-content > ul.products {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove borders wrapping each category item, and match the page bg
   so the carousel reads as one continuous warm-cream surface. */
.wrap-product-category,
.wrap-product-category .item {
  border: none !important;
  background-color: var(--brand-cream) !important;
}

/* Minimum Bootstrap grid reset. archive-product.php (and a few legacy
   onsus layouts) wraps content in `.container > .row > .col-md-12`,
   which onsus's bootstrap.css used to constrain via
   `.container { max-width: 1515px; padding: 0 12px; margin: 0 auto }`
   and `.col-md-12 { padding: 0 12px }`. With bootstrap.css gone, those
   wrappers had no max-width and the shop product grid stretched flush
   to the viewport edges — felt like a "missing container." Restate the
   minimal rules production was relying on. Scoped via the literal class
   name (Bootstrap-native), so any other template that opts into these
   classes inherits the same behavior. */
.container {
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 12px;
  width: 100%;
}
.row {
  display: block;
}
[class^="col-md-"],
[class*=" col-md-"] {
  padding: 0 12px;
}

/* Hide the onsus filter popup chrome on the shop archive.
   `archive-product.php` still renders the .popup-filter and .filter-active
   blocks because their trigger / behaviour could be revived later, but
   the supporting CSS + JS lived in onsus and is gone now. Without these
   resets the popup's "FILTRO" heading band leaks into the toolbar row
   and the empty .filter-active container shows a stray "Borrar todo"
   chip above the product grid. Production has the same markup but hides
   both blocks via its onsus stylesheet — we restate the same display
   suppression here so the layout matches one-to-one. */
.solid-shop-toolbar .popup-filter,
.content-woocommerce .filter-active {
  display: none !important;
}

/* Replacement layer for OwlCarousel. The `.owl-carousel` wrapper used
   to be initialized by onsus's JS into a horizontal slider with auto-
   distributed slides + nav arrows. With onsus removed, the `.item`
   blocks stacked vertically. We re-implement the "row of circles"
   layout in pure CSS — flex with center-justified items, auto-wrap
   for narrow viewports. No JS dependency. The carousel-only nav
   arrows (`.owl-nav`) stay hidden since there's no carousel to
   navigate; categories that overflow simply wrap to a new line. */
.wrap-product-category .owl-carousel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0 30px;
  padding: 12px 0;
  margin: 0;
  width: 100%;
}
.wrap-product-category .owl-carousel .item {
  flex: 0 0 auto;
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 0;
  margin: 0;
}
.wrap-product-category .owl-carousel .item .title {
  margin: 12px 0 0;
}
/* OwlCarousel nav arrows have no role without the JS. */
.wrap-product-category .owl-nav,
.wrap-product-category .owl-dots {
  display: none !important;
}

/* Align carousel arrows vertically with the image (not the title) */
.wrap-product-category .owl-nav button {
  top: 56px !important; /* ~center of the 84px image + 14px item padding */
  transform: translateY(0) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.wrap-product-category .owl-nav button i,
.wrap-product-category .owl-nav button svg,
.wrap-product-category .owl-nav button span {
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Shop page: equal-height product cards (GRID view only) ── */
/* Density pass (NUA-22 / Spec 3): denser desktop "wall of product" — 5-up
   by default, tightening down at the breakpoints below. --products-cols is
   set directly by the media queries; the WC-emitted `columns-N` class
   (note: WITH the "s" — `ul.products.column-N` below has no "s" and never
   matches it) plays no part in the effective column count. */
.products.products-grid,
ul.products:not(.list) {
  display: grid !important;
  grid-template-columns: repeat(var(--products-cols, 5), 1fr);
  gap: 30px 20px;
}

/* LIST view: restore flex row layout (image left, content right) */
ul.products.list {
  display: block !important;
}

ul.products.list > li.product {
  display: block !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  float: none !important;
}

ul.products.list li.product .inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: 24px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s;
}

ul.products.list li.product:hover .inner {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

ul.products.list li .left-content {
  flex: 0 0 220px !important;
  width: 220px !important;
  margin: 0 !important;
}

ul.products.list li .product-thumbnail {
  aspect-ratio: 1;
  width: 220px !important;
  height: 220px !important;
  margin: 0 !important;
  background: #f9fafb;
  border-radius: 10px;
  overflow: hidden;
}

ul.products.list li .product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

ul.products.list li .product-content {
  flex: 1 !important;
  width: auto !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

ul.products.list li .product-footer {
  margin-top: auto;
}

@media (max-width: 767px) {
  ul.products.list li.product .inner {
    flex-direction: column !important;
    gap: 16px;
  }
  ul.products.list li .left-content,
  ul.products.list li .product-thumbnail {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
  }
}

/* Remove WooCommerce clearfix ::before that adds whitespace above the grid */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}

ul.products.column-2 {
  --products-cols: 2;
}
ul.products.column-3 {
  --products-cols: 3;
}
ul.products.column-4 {
  --products-cols: 4;
}
ul.products.column-5 {
  --products-cols: 5;
}

ul.products:not(.list) > li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  flex-direction: column;
}

ul.products:not(.list) > li.product > .inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

/* Force all product thumbnails to same aspect ratio so cards match in height
   (grid view only — list view has its own rules above) */
ul.products:not(.list) .product-thumbnail {
  aspect-ratio: 1;
  background: #f9fafb;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

ul.products .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Products without an image: use WooCommerce placeholder styling */
ul.products .product-thumbnail img.woocommerce-placeholder,
ul.products .product-thumbnail img[src*="woocommerce-placeholder"] {
  object-fit: contain;
  padding: 30px;
  opacity: 0.4;
}

@media (max-width: 991px) {
  ul.products:not(.list) {
    --products-cols: 3;
  }
}

/* Same selector (equal specificity) as the 991px rule above — the mobile
   breakpoint must win by SOURCE ORDER, not by a specificity fluke. A
   plain `ul.products` here (lower specificity than `:not(.list)` above)
   loses the cascade at widths below 767px where BOTH media queries
   match, leaving the grid stuck at 3-up instead of dropping to 2-up. */
@media (max-width: 767px) {
  ul.products:not(.list) {
    --products-cols: 2;
  }
}

/* ── Shop pagination ── */
.woocommerce-pagination {
  margin-top: 40px;
  text-align: center;
}

.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  border: none !important;
}

.woocommerce-pagination ul li {
  border: none !important;
}

.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--brand-ink) !important; /* inactive page numbers */
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li a.current,
.woocommerce-pagination ul li .current {
  background: transparent !important;
  border: 0 !important;
  color: var(--green-500, var(--brand-lime)) !important; /* active = logo green */
}

.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li *:hover {
  background: transparent !important;
  border: 0 !important;
  color: var(--green-500, var(--brand-lime)) !important;
}

.woocommerce-pagination ul li a.next,
.woocommerce-pagination ul li a.prev {
  width: auto;
  padding: 0 14px !important;
}

@media (max-width: 767px) {
  .tf-products-banner.style3 {
    flex-direction: column !important;
    padding: 20px !important;
  }
  .tf-products-banner.style3 > .image {
    margin-right: 0 !important;
    margin-bottom: 15px !important;
  }
  .tf-products-banner.style3 > .image img {
    width: 160px !important;
    height: 160px !important;
  }
  .apex-cat-cards > .elementor-container {
    flex-wrap: wrap !important;
  }
  .apex-cat-cards .elementor-column {
    flex: 0 0 calc(50% - 20px) !important;
  }
}

/* ══════════════════════════════════════
   Custom Homepage
   ══════════════════════════════════════ */

:root {
  --home-container-max: 1200px;
  --home-gap: 50px;
  --home-card-gap: 20px;
  /* Homepage local color scope — re-pointed at brand tokens per Tier A.
     Was: forest-green darks + chartreuse lime accent. Now: IG deep
     navy darks + royal ink accent (the same hover swap applied
     globally elsewhere). */
  --home-dark-bg: var(--brand-ink-deep); /* was var(--brand-ink-deep) */
  --home-dark-bg-alt: var(--brand-ink); /* was var(--brand-ink) — slightly lighter dark panel */
  --home-accent: var(--brand-ink-deep); /* was #c5d202 chartreuse */
  --home-radius: 12px;
  --home-text-muted: var(--brand-ink-soft); /* was generic neutral gray */
}

/* Site-wide theme-token override — paints onsus-era stock templates
   (account index, orders list, order detail, etc.) with the brand
   tokens so they match the custom pages. Uses :root:root (specificity
   0,2,0) so it wins over the inline :root injected by themesflat-core
   in wp_head, regardless of load order. */
:root:root {
  --theme-primary-color: var(--brand-ink); /* was var(--brand-ink) forest. Now royal ink — links, CTAs */
  --theme-secondary-color: var(--brand-ink-deep); /* was var(--brand-ink-deep). Now IG deep navy — supporting dark surfaces */
  --theme-accent-color: var(--brand-ink); /* was var(--brand-ink). Now royal ink — nav hover + active */
}

/* Header — compact logo + trimmed topbar. Onsus doesn't constrain the
   logo img size by default, so a 1200×468 source renders huge. Cap the
   width so the wordmark stays compact while preserving the natural
   aspect ratio. Topbar padding also trimmed so the utility bar doesn't
   steal vertical real estate. */
body .site-logo,
body #logo .site-logo,
body #logo-mobi .site-logo,
#header #logo a img,
#header-fixed-wrap #logo a img,
#logo-mobi a img {
  max-width: 150px !important;
  width: auto !important;
  height: auto !important;
}
body .themesflat-top {
  padding-top: 6px;
  padding-bottom: 6px;
  min-height: 0;
  font-size: 12px;
}
body .themesflat-top .container-inside {
  min-height: 32px;
}
@media (max-width: 767px) {
  body .site-logo,
  body #logo .site-logo,
  body #logo-mobi .site-logo {
    max-height: none;
  }
  body .themesflat-top {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* Nav color overrides — themesflat-core injects hardcoded #FF3D3D rules into
   <style> on every page (not via var(--theme-accent-color)), so these need
   matching selectors with higher specificity. `body` prefix bumps each
   selector by 1 type, winning over the inline version. */
body #mainnav > ul > li > a:hover,
body #mainnav > ul > li.current-menu-item > a,
body #mainnav > ul > li.current-menu-ancestor > a,
body #mainnav > ul > li.current-menu-parent > a,
body #mainnav ul.sub-menu > li > a:hover,
body #mainnav ul.sub-menu > li.current-menu-item > a,
body #mainnav ul.sub-menu > li.current-menu-ancestor > a,
body #mainnav-mobi ul li.current-menu-item > a,
body #mainnav-mobi ul li.current-menu-ancestor > a,
body #mainnav-mobi ul li .current-menu-item > a,
body .themesflat-top a:hover {
  color: var(--theme-primary-color);
}
body #mainnav > ul > li > a::after,
body #mainnav > ul > li.current-menu-item > a::after,
body #mainnav > ul > li.current-menu-ancestor > a::after,
body #mainnav > ul > li.current-menu-parent > a::after,
body #mainnav-mobi ul li.current-menu-item .btn-submenu::before,
body #mainnav-mobi ul li .current-menu-item .btn-submenu::before {
  background: var(--theme-primary-color);
  color: var(--theme-primary-color);
}

/* Override onsus theme heading color on dark backgrounds */
.home-hero h2,
.home-hero h3,
.home-promo-card h3,
.home-promo-card__title,
.home-cat-card h3,
.home-cat-card__name,
.home-wide-banner h2,
.home-wide-banner__headline,
.home-cat-banner h3,
.home-cat-banner__headline,
.home-section__title {
  color: inherit !important;
}

/* Kill blue link hover globally on homepage */
.home-page a,
.home-page a:hover,
.home-page a:focus,
.home-page a:visited,
.home-page a:active {
  color: inherit;
  text-decoration: none;
}

/* Force white on ALL text inside dark-bg sections — onsus sets
   color on h1-h6, a, p, span etc. via var(--theme-primary-color) */
.home-promo-card,
.home-promo-card *,
.home-cat-card,
.home-cat-card *,
.home-wide-banner,
.home-wide-banner *,
.home-cat-banner,
.home-cat-banner *,
.home-hero,
.home-hero * {
  color: #fff !important;
}

/* Product cards on white bg keep dark text */
.home-product-card__title {
  color: #111 !important;
}
.home-product-card__price {
  color: #111 !important;
}
.home-product-card__price del {
  color: var(--home-text-muted) !important;
}
.home-product-card__price ins {
  color: var(--home-accent) !important;
}
.home-product-card__cart-btn {
  color: var(--home-dark-bg) !important;
}
.home-product-card__cart-btn:hover {
  color: #fff !important;
}

/* Sections fade in on load */
.home-page {
  width: 100%;
  overflow: hidden;
}

.home-section {
  animation: homeFadeUp 0.5s ease both;
}

.home-section:nth-child(1) {
  animation-delay: 0s;
}
.home-section:nth-child(2) {
  animation-delay: 0.05s;
}
.home-section:nth-child(3) {
  animation-delay: 0.1s;
}
.home-section:nth-child(4) {
  animation-delay: 0.15s;
}
.home-section:nth-child(5) {
  animation-delay: 0.2s;
}
.home-section:nth-child(6) {
  animation-delay: 0.25s;
}
.home-section:nth-child(7) {
  animation-delay: 0.3s;
}
.home-section:nth-child(8) {
  animation-delay: 0.35s;
}
.home-section:nth-child(9) {
  animation-delay: 0.4s;
}
.home-section:nth-child(10) {
  animation-delay: 0.45s;
}

@keyframes homeFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes homeFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-section {
  margin-bottom: var(--home-gap);
}

.home-section:last-child {
  margin-bottom: 0;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .home-section {
    animation: none;
  }
}

.home-container {
  max-width: var(--home-container-max);
  margin: 0 auto;
  padding: 0 20px;
}

.home-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.home-section__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--home-accent) !important;
}

.home-scroll-row {
  display: flex;
  gap: var(--home-card-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.home-scroll-row > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.home-scroll-arrows {
  display: flex;
  gap: 8px;
}

.home-scroll-arrow {
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #333;
  transition: border-color 0.2s;
}

.home-scroll-arrow:hover {
  border-color: var(--home-accent);
  background: var(--home-accent);
  color: #fff;
}

.home-product-card {
  position: relative;
  width: 220px;
  background: #fff;
  border-radius: var(--home-radius);
  overflow: hidden;
  border: 1px solid #eee;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  display: flex;
  flex-direction: column;
}

.home-product-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.home-product-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--home-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  z-index: 1;
  text-transform: uppercase;
}

.home-product-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.home-product-card__image {
  aspect-ratio: 1;
  overflow: hidden;
  background: #f9fafb;
  position: relative;
}

.home-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-product-card__title {
  font-size: 14px;
  font-weight: 500;
  margin: 12px 12px 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #111;
}

.home-product-card__price {
  font-size: 15px;
  font-weight: 700;
  padding: 0 12px 12px;
  margin: 0;
  margin-top: auto;
  color: #111;
}

.home-product-card__price del {
  color: var(--home-text-muted);
  font-weight: 400;
  font-size: 13px;
}

.home-product-card__price ins {
  text-decoration: none;
  color: var(--home-accent);
}

/* Hover overlay with add-to-cart at bottom center */
.home-product-card__hover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 2;
}

.home-product-card:hover .home-product-card__hover {
  opacity: 1;
}

.home-product-card__cart-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  color: var(--home-dark-bg);
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(20px);
  opacity: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    background 0.2s;
}

.home-product-card:hover .home-product-card__cart-btn {
  transform: translateY(0);
  opacity: 1;
}

.home-product-card__cart-btn:hover {
  background: var(--home-accent);
  color: #fff;
}

/* Favorite heart button — top right, no background, hover only */
.home-product-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transform: translateY(-10px);
  opacity: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    color 0.2s;
  z-index: 3;
  line-height: 1;
}

.home-product-card:hover .home-product-card__fav {
  transform: translateY(0);
  opacity: 1;
}

.home-product-card__fav:hover {
  color: var(--home-accent);
}

.home-product-card__fav:hover svg {
  fill: var(--home-accent);
}

/* Hide YITH duplicate if present */
.home-product-card__hover .yith-wcwl-add-to-wishlist {
  display: none;
}

.home-mini-card {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 8px 0;
}

.home-mini-card__image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f9fafb;
}

.home-mini-card__info {
  flex: 1;
  min-width: 0;
}

.home-mini-card__title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #111;
}

.home-mini-card__price {
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

.home-mini-card__price del {
  color: var(--home-text-muted);
  font-weight: 400;
  font-size: 12px;
}

.home-mini-card__price ins {
  text-decoration: none;
  color: var(--home-accent);
}

.home-product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--home-card-gap);
}

.home-product-grid .home-product-card {
  width: auto;
}

@media (max-width: 991px) {
  .home-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .home-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-product-card {
    width: 170px;
  }
}

/* ── Hero Carousel ── */
.home-hero__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.home-hero__track {
  display: flex;
  transition: transform 0.5s ease;
}

.home-hero__slide {
  min-width: 100%;
  height: 420px;
  display: flex;
  align-items: center;
}

.home-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-hero__content {
  color: #fff;
  flex: 1;
}

.home-hero__image {
  flex-shrink: 0;
  order: -1;
  margin-right: 40px;
}

.home-hero__image img {
  width: 280px;
  height: 280px;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  padding: 12px;
}

@media (max-width: 767px) {
  .home-hero__image {
    display: none;
  }
}

.home-hero__headline {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.15;
}

.home-hero__subtitle {
  font-size: 18px;
  margin: 0 0 28px;
  opacity: 0.85;
}

.home-hero__cta {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 28px;
  background: var(--home-accent);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}

.home-hero__cta:hover {
  background: #d13a54;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
}

.home-hero__prev,
.home-hero__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-hero__prev {
  left: 16px;
}
.home-hero__next {
  right: 16px;
}

.home-hero__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.home-hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
}

.home-hero__dot.active {
  background: var(--home-accent);
}

@media (max-width: 767px) {
  .home-hero__slide {
    height: 220px;
  }
  .home-hero__headline {
    font-size: 24px;
  }
  .home-hero__subtitle {
    font-size: 14px;
  }
}

/* ── Deal of the Day ── */
.home-deal {
  background: transparent;
  padding: 0;
}

.home-deal .home-container {
  background: #fff;
  border-radius: var(--home-radius);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
}

.home-deal .home-product-card {
  min-width: 200px;
}

/* ── Two-Column Promo Banners (stacked cycling cards) ── */
.home-promo-row {
  display: flex;
  gap: var(--home-card-gap);
}

.home-promo-stack {
  flex: 1;
  position: relative;
  /* Extra padding at bottom-right for the peeking card edge */
  padding-bottom: 4px;
  padding-right: 6px;
}

.home-promo-card {
  /* Behind card — absolute, peeking out from bottom-right */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease,
    z-index 0s;
  pointer-events: none;
  transform: translate(6px, 4px);
  opacity: 0.6;
  z-index: 1;
  /* Visual styling */
  display: flex !important;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background: var(--home-dark-bg-alt);
  border-radius: var(--home-radius);
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 260px;
  transition: transform 0.2s;
}

/* Front card — relative so it gives the stack its height */
.home-promo-card.active {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(0, 0);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.home-promo-card.active:hover {
  transform: translateY(-2px);
  color: #fff;
}

.home-promo-card:visited,
.home-promo-card:active,
.home-promo-card:focus {
  color: #fff;
}

.home-promo-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--home-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  text-transform: uppercase;
}

.home-promo-card__image {
  flex-shrink: 0;
}

.home-promo-card__image img {
  width: 240px;
  height: 240px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  padding: 10px;
}

.home-promo-card__title {
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 8px;
  line-height: 1.3;
}

.home-promo-card__title strong {
  font-weight: 800;
}

.home-promo-card__subtitle {
  font-size: 13px;
  margin: 0 0 12px;
  opacity: 0.75;
}

.home-promo-card__price {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 12px;
}

.home-promo-card__price del {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.6;
}
.home-promo-card__price ins {
  text-decoration: none;
}
.home-promo-card__cta {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
  margin-top: 16px;
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.home-promo-card__cta:hover {
  background: var(--home-accent);
  border-color: var(--home-accent);
  opacity: 1;
}

@media (max-width: 767px) {
  .home-promo-row {
    flex-direction: column;
  }
  .home-promo-card {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }
  .home-promo-card__image img {
    width: 160px;
    height: 160px;
  }
}

/* ── Product Tabs ── */
.home-tabs__nav {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 2px solid #eee;
}

.home-tabs__btn {
  padding: 12px 24px;
  border: none;
  background: none !important;
  font-size: 18px;
  font-weight: 700;
  color: var(--home-text-muted) !important;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}

.home-tabs__btn:hover {
  color: var(--home-accent) !important;
  background: none !important;
}

.home-tabs__btn:hover::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(233, 69, 96, 0.3);
}

.home-tabs__btn.active {
  color: var(--home-accent) !important;
}

.home-tabs__btn.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--home-accent);
}

.home-tabs__panel {
  display: none;
  opacity: 0;
}

.home-tabs__panel.active {
  display: grid;
  animation: homeFadeIn 0.35s ease forwards;
  grid-template-columns: 1fr 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--home-card-gap);
  align-items: stretch;
}

/* Center card spans 2 rows, matches full height of both side rows */
.home-tabs__panel .home-product-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / 3;
}

.home-tabs__panel .home-product-card:nth-child(2) .home-product-card__image {
  aspect-ratio: auto;
  flex: 1;
}

/* Side cards are smaller */
.home-tabs__panel .home-product-card:nth-child(1),
.home-tabs__panel .home-product-card:nth-child(3),
.home-tabs__panel .home-product-card:nth-child(4),
.home-tabs__panel .home-product-card:nth-child(5) {
  font-size: 13px;
}

.home-tabs__panel .home-product-card:nth-child(1) .home-product-card__image,
.home-tabs__panel .home-product-card:nth-child(3) .home-product-card__image,
.home-tabs__panel .home-product-card:nth-child(4) .home-product-card__image,
.home-tabs__panel .home-product-card:nth-child(5) .home-product-card__image {
  aspect-ratio: 1;
}

/* Grid/tabs cards stretch to fill */
.home-product-grid .home-product-card,
.home-tabs__panel .home-product-card {
  width: auto;
}

/* ── Category Cards ── */
.home-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--home-card-gap);
}

.home-cat-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 280px;
  border-radius: var(--home-radius);
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}

.home-cat-card:hover {
  transform: translateY(-3px);
}

.home-cat-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  transition: background 0.3s;
  z-index: 1;
}

.home-cat-card:hover .home-cat-card__overlay {
  background: rgba(0, 0, 0, 0.55);
}

.home-cat-card__content {
  position: relative;
  z-index: 2;
  padding: 24px;
}

.home-cat-card__name {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 4px;
}

.home-cat-card__tagline {
  font-size: 13px;
  margin: 0 0 8px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}

.home-cat-card:hover .home-cat-card__tagline {
  opacity: 0.9;
  transform: translateY(0);
}

.home-cat-card__cta {
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s 0.05s,
    transform 0.3s 0.05s,
    background 0.2s;
  margin-top: 14px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  display: inline-block;
}

.home-cat-card__cta:hover {
  background: var(--home-accent);
  border-color: var(--home-accent);
}

.home-cat-card:hover .home-cat-card__cta {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 991px) {
  .home-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .home-cat-grid {
    grid-template-columns: 1fr;
  }
  .home-cat-card {
    height: 200px;
  }
}

/* ── Wide Promo Banner ── */
.home-wide-banner {
  background: linear-gradient(135deg, var(--brand-ink-deep) 0%, #2d1b4e 100%);
  padding: 70px 0;
}

.home-wide-banner__inner {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Two overlapping images — top-left + bottom-right, corners touching */
.home-wide-banner__images {
  position: relative;
  width: 300px;
  height: 300px;
  flex-shrink: 0;
}

.home-wide-banner__img {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 8px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.home-wide-banner__img--tl {
  top: 0;
  left: 0;
  z-index: 2;
}

.home-wide-banner__img--br {
  bottom: 0;
  right: 0;
  z-index: 1;
}

.home-wide-banner__img:hover {
  transform: scale(1.15) !important;
  z-index: 3 !important;
}

.home-wide-banner__content {
  color: #fff;
  flex: 1;
  text-align: right;
}

.home-wide-banner__headline {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff !important;
}

.home-wide-banner__subtitle {
  font-size: 16px;
  margin: 0 0 20px;
  opacity: 0.8;
  margin-left: auto;
  max-width: 500px;
}

.home-wide-banner__cta {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 28px;
  background: var(--home-accent);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}

.home-wide-banner__cta:hover {
  background: #d13a54;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(233, 69, 96, 0.4);
}

.home-wide-banner__accent {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--home-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.home-wide-banner__price-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0.9;
}

.home-wide-banner__price {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 767px) {
  .home-wide-banner__inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  .home-wide-banner__content {
    text-align: center;
  }
  .home-wide-banner__headline {
    font-size: 24px;
  }
  .home-wide-banner__images {
    width: 200px;
    height: 200px;
  }
  .home-wide-banner__img {
    width: 130px;
    height: 130px;
  }
  .home-wide-banner__accent {
    width: 90px;
    height: 90px;
  }
  .home-wide-banner__price {
    font-size: 28px;
  }
}

/* ── Top Products (4 columns) ── */
.home-top-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.home-top-col__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #eee;
  min-height: 52px;
}

.home-top-col__heading {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #111 !important;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.home-top-col__header .home-scroll-arrows {
  gap: 4px;
}

.home-top-col__header .home-scroll-arrow {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  font-size: 12px;
  padding: 0;
  flex-shrink: 0;
}

.home-top-col__slider {
  position: relative;
}

.home-top-col__page {
  display: none;
  flex-direction: column;
  gap: 15px;
  opacity: 0;
}

.home-top-col__page.active {
  display: flex;
  animation: homeFadeIn 0.35s ease forwards;
}

.home-top-col__page .home-mini-card {
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 12px;
}

.home-top-col__page .home-mini-card:last-child {
  border-bottom: none;
}

@media (max-width: 991px) {
  .home-top-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .home-top-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Category Banners (single column vertical slider) ── */
.home-cat-banner-single {
  display: flex;
  align-items: center;
  gap: 24px;
}

.home-cat-banner-slider {
  flex: 1;
  min-width: 0;
  position: relative;
  min-height: 200px;
  border-radius: var(--home-radius);
  overflow: hidden;
}

.home-cat-banner-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.home-cat-banner-nav__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.home-cat-banner-nav__btn svg {
  width: 22px;
  height: 22px;
}

.home-cat-banner-nav__btn:hover {
  background: var(--home-accent);
  border-color: var(--home-accent);
  color: #fff;
}

.home-cat-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 32px 36px;
  text-decoration: none;
  color: #fff !important;
  min-height: 200px;
  opacity: 0;
}

.home-cat-banner.active {
  display: flex;
  animation: homeFadeIn 0.4s ease forwards;
}

.home-cat-banner:hover,
.home-cat-banner:visited,
.home-cat-banner:focus {
  color: #fff !important;
}

.home-cat-banner__text {
  flex: 1;
}

.home-cat-banner__headline {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #fff !important;
}

.home-cat-banner__subtitle {
  font-size: 14px;
  margin: 0 0 16px;
  opacity: 0.8;
}

.home-cat-banner__cta {
  font-size: 14px;
  font-weight: 600;
  margin-top: 16px;
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  transition:
    background 0.2s,
    border-color 0.2s;
}

.home-cat-banner__cta:hover {
  background: var(--home-accent);
  border-color: var(--home-accent);
}

.home-cat-banner__image {
  flex-shrink: 0;
  margin-left: 20px;
}

.home-cat-banner__image img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  padding: 8px;
}

@media (max-width: 767px) {
  .home-cat-banner-single {
    flex-direction: column;
  }
  .home-cat-banner-slider {
    flex: 0 0 100%;
    width: 100%;
  }
  .home-cat-banner-nav {
    flex-direction: row;
  }
  .home-cat-banner {
    flex-direction: column;
    text-align: center;
    padding: 24px;
    min-height: 180px;
  }
  .home-cat-banner__image {
    margin-left: 0;
    margin-top: 12px;
  }
  .home-cat-banner__image img {
    width: 100px;
    height: 100px;
  }
}

/* ══════════════════════════════════════
   Custom Footer
   ══════════════════════════════════════ */

/* Hide onsus/Elementor footer on ALL pages */
.footer_background,
.site-footer.tf-custom-footer,
.footer-shop {
  display: none !important;
}

/* Fallback image style when src fails (onerror JS adds this class) */
.home-img-fallback {
  object-fit: contain !important;
  background: #f3f4f6 !important;
  padding: 20px !important;
}

footer.home-footer {
  display: block !important;
  background: #ffffff !important;
  color: var(--brand-ink) !important;
  font-size: 14px;
  line-height: 1.7;
  position: relative;
  z-index: 10;
}

.home-footer a {
  color: var(--brand-ink) !important;
  text-decoration: none;
  transition: color 0.2s;
}

.home-footer a:hover {
  color: var(--accent-lime, #c5d202) !important;
}

/* ── Top section (grid) ── */
.home-footer__top {
  padding: 60px 0 40px;
}

.home-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
}

/* Brand column — logo image, tagline, social row docked under it */
.home-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin: 0 0 14px;
  line-height: 0;
}
.home-footer__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 140px;
  max-height: 56px;
}
.home-footer__logo-text {
  font-family: var(--font-display, inherit);
  font-size: 24px;
  font-weight: 800;
  color: var(--brand-ink);
  letter-spacing: 0.02em;
}

/* Brand statement under the logo — uppercase, 12px desktop /
   16px mobile (responsive override in the @media block below).
   Weight 400 + generous bottom margin so it reads as a calm
   tagline with breathing room before the address/social row. */
.home-footer__tagline {
  margin: 24px 0 36px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-ink);
  max-width: 280px;
}

/* Link columns — 50px between the heading and its first list
   item per the spec ("50px after each title before the items"). */
.home-footer__heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink) !important;
  margin: 0 0 50px;
  letter-spacing: 0.3px;
}

.home-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-footer__links li {
  margin-bottom: 15px;
}
.home-footer__links li:last-child {
  margin-bottom: 0;
}

/* Links — uppercase + underlined on desktop + mobile so every
   link reads consistently across viewports. */
.home-footer__links li a,
.home-footer__links li a:link,
.home-footer__links li a:visited {
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  letter-spacing: 0.04em;
}

/* Contact column */
.home-footer__links--contact li {
  margin-bottom: 14px;
}

.home-footer__links--contact strong {
  display: block;
  font-size: 12px;
  color: rgba(79, 111, 82, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.home-footer__links--contact span,
.home-footer__links--contact a {
  font-size: 13px;
}

/* Mobile footer overflow guard: the contact email (and any URL) is an
   unbreakable string, so its min-content width forced a 2-col grid track
   wider than its share and pushed the footer ~7-12px past the viewport.
   Letting the columns shrink and the long strings wrap removes it. */
.home-footer__col {
  min-width: 0;
}
.home-footer__links--contact a,
.home-footer__links--contact span,
.home-footer__social--named a span {
  overflow-wrap: anywhere;
}

/* Social row — borderless icons sit directly inline. Each anchor
   wraps the new SVG file shipped in assets/img/social/ (rendered
   via <img> in footer.php). The image inherits its natural size
   (~17×17px), keeping it lightweight visually. */
.home-footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.home-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--brand-ink) !important;
  transition: opacity 0.2s ease;
}
.home-footer__social a img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}
.home-footer__social a:hover,
.home-footer__social a:focus-visible {
  opacity: 0.7;
}
/* Named variant — icon + account name, stacked vertically (footer). */
.home-footer__social--named {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.home-footer__social--named a {
  width: auto;
  height: auto;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

/* ── Bottom bar ── */
.home-footer__bottom {
  padding: 18px 0;
}
.home-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.home-footer__bottom p {
  margin: 0;
  font-size: 12px;
  color: rgba(79, 111, 82, 0.7);
}
/* New copyright typography spec — Inter / 400 / 10px /
   line-height 15px / 2px letter-spacing / uppercase / centered
   in color-mix(in oklch, var(--brand-ink) 40%, transparent) (40% opacity of the primary green). */
.home-footer__copyright {
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--brand-ink) 40%, transparent) !important;
  margin: 0 auto;
}

/* ── Newsletter column ─────────────────────────────────────────── */

/* Subtext under the heading — uppercase + light olive so it
   matches the brand tagline at the top of the footer. */
.home-footer__newsletter-blurb {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-ink);
  max-width: 240px;
}
/* Form is a single inline-flex row: input takes the remaining
   space, arrow submit hugs the right edge. Bottom border row
   mirrors the login page input pattern. 40px above so it has
   breathing room from the blurb. */
.home-footer__newsletter-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(79, 111, 82, 0.4);
  padding-bottom: 4px;
  margin-top: 40px;
  max-width: 280px;
}
.home-footer__newsletter-input {
  flex: 1 1 0%;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  color: var(--brand-ink) !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.home-footer__newsletter-input::placeholder {
  color: rgba(79, 111, 82, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* 16px on phones so focusing the field does not trigger iOS Safari
   auto-zoom; desktop keeps the compact 12px footer treatment. */
@media (max-width: 768px) {
  .home-footer__newsletter-input {
    font-size: 16px !important;
  }
}
.home-footer__newsletter-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent !important;
  border: none !important;
  color: var(--brand-ink) !important;
  padding: 0 !important;
  cursor: pointer;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.home-footer__newsletter-submit:hover,
.home-footer__newsletter-submit:focus-visible {
  color: var(--brand-ink) !important;
  transform: translateX(2px);
  outline: none;
}
.home-footer__newsletter-submit:disabled {
  opacity: 0.5;
  cursor: progress;
  transform: none;
}
/* Status row — populated by JS after subscribe. Lives BELOW
   the form on its own line with 30px breathing room above it.
   Success is bold so the confirmation reads strongly; error is
   regular weight in red. Hides entirely when empty so it
   doesn't push siblings around. */
/* Feedback row — sits 18px below the input. The 11px uppercase
   look from the previous spec read as decorative chrome and got
   missed by users (it didn't visually announce itself as a state
   change). Bumped to 15px sentence-case with a subtle chip so
   the success / error message is obviously distinct from the
   surrounding column copy. */
.home-footer__newsletter-feedback {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-ink);
  background: rgba(168, 199, 130, 0.22);
  border-left: 3px solid var(--brand-ink);
  border-radius: 3px;
  max-width: 320px;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  will-change: opacity, transform;
}
.home-footer__newsletter-feedback:empty {
  /* Empty state — keep no visible chip box so the column doesn't
     reserve dead space until the user actually submits. */
  display: none;
}
.home-footer__newsletter-feedback::before {
  content: "";
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: var(--brand-ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.home-footer__newsletter-feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.home-footer__newsletter-feedback.is-error {
  color: #8a2222;
  background: rgba(176, 70, 70, 0.12);
  border-left-color: #b04646;
}
.home-footer__newsletter-feedback.is-error::before {
  background-color: #b04646;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .home-footer__newsletter-feedback {
    transition: opacity 0.15s linear;
    transform: none;
  }
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .home-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .home-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  /* Mobile footer: centered brand block on top (logo + tagline +
     socials + address), then the four link cols in a 2-column
     grid below. The 50px gap between each heading and its list
     lives on `.home-footer__heading { margin-bottom }`, so the
     grid only needs a normal row-gap between rows of cols. */
  .home-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .home-footer__brand {
    grid-column: 1 / -1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .home-footer__brand .home-footer__tagline {
    max-width: 32ch;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.45;
    letter-spacing: 0.04em;
  }
  .home-footer__brand .home-footer__social {
    justify-content: center;
  }
  .home-footer__col {
    text-align: left;
  }
  /* Newsletter spans its own full-width row on mobile — the form +
     feedback need horizontal room and look cramped when squeezed
     into half a grid track with another link column. Visually it
     also separates the "subscribe" CTA from the navigation lists.
     The desktop `max-width` clamps on blurb/form/feedback are also
     dropped here so the content actually fills the new full-width
     track (otherwise it'd stay ~280px wide inside a ~335px column). */
  .home-footer__col--newsletter {
    grid-column: 1 / -1;
  }
  .home-footer__col--newsletter .home-footer__newsletter-blurb,
  .home-footer__col--newsletter .home-footer__newsletter-form,
  .home-footer__col--newsletter .home-footer__newsletter-feedback {
    max-width: none;
    width: 100%;
  }
  /* Lock link size at 13px on mobile (overrides any onsus /
     Bootstrap responsive rule that might bump it). */
  .home-footer__links li a,
  .home-footer__links li a:link,
  .home-footer__links li a:visited {
    font-size: 13px !important;
  }
  .home-footer__bottom-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ══════════════════════════════════════
   Layout 2 — Category-First
   ══════════════════════════════════════ */

/* ── Hero Single ── */
.home-hero-single {
  background: linear-gradient(135deg, var(--brand-ink-deep) 0%, #2d3a6e 100%);
  padding: 60px 0;
}

.home-hero-single__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.home-hero-single__image {
  flex-shrink: 0;
  order: -1;
}

.home-hero-single__image img {
  width: 300px;
  height: 300px;
  object-fit: contain;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  padding: 12px;
}

.home-hero-single__content {
  flex: 1;
}

.home-hero-single__headline {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.15;
}

.home-hero-single__subtitle {
  font-size: 18px;
  margin: 0 0 28px;
  opacity: 0.8;
}

@media (max-width: 767px) {
  .home-hero-single__inner {
    flex-direction: column;
    text-align: center;
  }
  .home-hero-single__image img {
    width: 200px;
    height: 200px;
  }
  .home-hero-single__headline {
    font-size: 26px;
  }
}

/* ── Category Cards Full (3x3) ── */
.home-cat-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--home-card-gap);
}

.home-cat-card--sm {
  height: 180px;
}

@media (max-width: 991px) {
  .home-cat-grid-full {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .home-cat-grid-full {
    grid-template-columns: 1fr;
  }
  .home-cat-card--sm {
    height: 140px;
  }
}

/* ── Trust Signals ── */
.home-trust {
  background: #f9fafb;
  padding: 50px 0;
}

.home-trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.home-trust__card {
  text-align: center;
  padding: 30px 20px;
  background: #fff;
  border-radius: var(--home-radius);
  border: 1px solid #eee;
}

.home-trust__icon {
  color: var(--home-accent);
  margin-bottom: 16px;
}

.home-trust__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #111 !important;
}

.home-trust__subtitle {
  font-size: 13px;
  color: var(--home-text-muted);
  margin: 0;
}

@media (max-width: 767px) {
  .home-trust__grid {
    grid-template-columns: 1fr;
  }
}

/* Force white text on hero-single (onsus override) */
.home-hero-single,
.home-hero-single * {
  color: #fff !important;
}

/* ══════════════════════════════════════
   Layout 3 — Minimal / Conversion
   ══════════════════════════════════════ */

/* ── Hero CTA ── */
.home-hero-cta {
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  padding: 80px 0;
}

.home-hero-cta__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.home-hero-cta__headline {
  font-size: 48px;
  font-weight: 900;
  margin: 0 0 16px;
  line-height: 1.1;
}

.home-hero-cta__subtitle {
  font-size: 18px;
  margin: 0 0 32px;
  opacity: 0.8;
}

@media (max-width: 767px) {
  .home-hero-cta {
    padding: 50px 0;
  }
  .home-hero-cta__headline {
    font-size: 30px;
  }
  .home-hero-cta__subtitle {
    font-size: 15px;
  }
}

/* Force white on hero-cta (onsus override) */
.home-hero-cta,
.home-hero-cta * {
  color: #fff !important;
}

/* ── Category Strip (pills) ── */
.home-cat-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.home-cat-pill {
  flex-shrink: 0;
  padding: 10px 24px;
  border: 1px solid #ddd;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #333 !important;
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
  white-space: nowrap;
}

.home-cat-pill:hover {
  background: var(--home-accent);
  border-color: var(--home-accent);
  color: #fff !important;
}

/* ── On Sale Grid (4 cols) ── */
.home-product-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
  .home-product-grid--4col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .home-product-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Newsletter ── */
.home-newsletter {
  background: linear-gradient(135deg, var(--brand-ink-deep) 0%, #2d1b4e 100%);
  padding: 60px 0;
}

.home-newsletter__inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.home-newsletter__headline {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 10px;
}

.home-newsletter__subtitle {
  font-size: 15px;
  margin: 0 0 28px;
  opacity: 0.8;
}

.home-newsletter__form {
  display: flex;
  gap: 0;
  max-width: 460px;
  margin: 16px auto 0;
}

.home-newsletter__input,
.home-newsletter__btn {
  font-size: 14px !important;
  line-height: 1.2 !important;
  padding: 0 24px !important;
  border: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  height: 50px !important;
}

.home-newsletter__input {
  flex: 1;
  border-radius: 8px 0 0 8px !important;
  outline: none;
  color: #111 !important;
  background: #fff !important;
  min-width: 0;
}

.home-newsletter__btn {
  background: var(--home-accent) !important;
  color: #fff !important;
  border-radius: 0 8px 8px 0 !important;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.home-newsletter__btn:hover {
  background: #d13a54;
}

/* Submit button label/loading swap — same pattern the contact +
   footer newsletter forms use. Button locks (cursor + opacity)
   for the duration of the AJAX request. */
.home-newsletter__btn[disabled],
.home-newsletter__form.is-submitting .home-newsletter__btn {
  cursor: progress;
  opacity: 0.75;
}
.home-newsletter__btn-loading {
  display: none;
}
.home-newsletter__form.is-submitting .home-newsletter__btn-label {
  display: none;
}
.home-newsletter__form.is-submitting .home-newsletter__btn-loading {
  display: inline-block;
}

/* Feedback row beneath the form. Same red-on-error / dark-on-ok
   palette the contact form uses. */
.home-newsletter__feedback {
  display: none;
  margin: 14px 0 0;
  font-family: "Inter", var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
}
.home-newsletter__feedback.is-visible {
  display: block;
}
.home-newsletter__feedback.is-error {
  color: #ffd6d6 !important;
}

/* Force white on newsletter (onsus override) */
.home-newsletter,
.home-newsletter * {
  color: #fff !important;
}

@media (max-width: 767px) {
  .home-newsletter__form {
    flex-direction: column;
    gap: 10px;
  }
  .home-newsletter__input {
    border-radius: 8px !important;
  }
  .home-newsletter__btn {
    border-radius: 8px !important;
  }
  .home-newsletter__headline {
    font-size: 22px;
  }
}

/* ══════════════════════════════════════
   Contact Page (NUA — page-contact.php)
   ══════════════════════════════════════ */

/* Cream page surface, matching the about page. Hide the onsus
   default page-title banner — our custom hero replaces it. */
body.contact-page {
  background: var(--brand-cream) !important;
}

body.contact-page .home-page {
  background: transparent;
}

body.contact-page .page-header,
body.contact-page .page-title {
  display: none !important;
}

.solid-contact {
  padding: 110px 0 110px;
}

.solid-contact__inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 48px;
}

.solid-contact__grid {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

/* Left column — dark photo with lime headline up top + 3 contact
   info blocks at the bottom. The ::before scrim ensures the
   foreground text remains legible across any photo. */
.solid-contact__left {
  flex: 1 1 0%;
  position: relative;
  background-color: var(--brand-ink-deep);
  background-size: cover;
  background-position: center;
  padding: 65px 50px;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  border-radius: 4px;
  overflow: hidden;
}

.solid-contact__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
}

.solid-contact__lead,
.solid-contact__info {
  position: relative;
  z-index: 1;
}

.solid-contact__lead {
  font-family: "Bricolage Grotesque", var(--font-sans);
  font-size: 45px;
  line-height: 54px;
  font-weight: 600;
  letter-spacing: -1.8px;
  text-transform: uppercase;
  color: var(--accent-lime, #c5d202);
  margin: 0;
  max-width: 22ch;
}

.solid-contact__info {
  list-style: none;
  margin: 130px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* align-items: flex-start pins the icon (and every line) to the
   left edge — without it, column flex's default stretch makes the
   icon span span the full column width and centers the SVG. */
.solid-contact__info-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.solid-contact__info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  color: var(--accent-lime, #c5d202);
  margin-bottom: 4px;
}

.solid-contact__info-title {
  font-family: "Inter", var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-lime, #c5d202);
  margin: 0;
}

.solid-contact__info-line {
  font-family: "Inter", var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
}

.solid-contact__info-sub {
  font-family: "Inter", var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Right column — form. 50/50 with the left column, content
   vertically centered to match the photo's optical center. */
.solid-contact__right {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.solid-contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.solid-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.solid-contact-form__field label {
  font-family: "Inter", var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 14.4px;
  letter-spacing: 0;
  color: color-mix(in oklch, var(--brand-ink-soft) 90%, transparent);
}

.solid-contact-form__field input,
.solid-contact-form__field select,
.solid-contact-form__field textarea {
  width: 100% !important;
  border: none !important;
  background: color-mix(in oklch, var(--brand-lime) 63%, transparent) !important;
  padding: 8px 14px !important;
  font-family: "Inter", var(--font-sans) !important;
  /* 16px (not 14) so iOS Safari does not auto-zoom the page when the
     field is focused on a phone. */
  font-size: 16px !important;
  color: #2a2a2a !important;
  border-radius: 4px !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none !important;
  box-shadow: none !important;
  transition: background 0.2s ease;
}

.solid-contact-form__field textarea {
  resize: vertical;
  min-height: 110px;
  font-family: "Inter", var(--font-sans) !important;
}

/* E2 — 0.55 alpha read below 4.5:1 against the lime fill; 0.8
   clears AA, matching the login/register placeholder fix. */
.solid-contact-form__field input::placeholder,
.solid-contact-form__field textarea::placeholder {
  color: rgba(60, 60, 60, 0.8);
}

.solid-contact-form__field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%232a2a2a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
  padding-right: 40px !important;
}

.solid-contact-form__field input:focus,
.solid-contact-form__field select:focus,
.solid-contact-form__field textarea:focus {
  background: var(--brand-lime) !important;
}

.solid-contact-form__submit {
  align-self: flex-start;
  margin-top: 10px;
  padding: 24px 80px;
  background: var(--brand-ink);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 14.4px;
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.solid-contact-form__submit:hover {
  background: var(--brand-ink);
  transform: translateY(-1px);
}

.solid-contact-form__submit:focus-visible {
  outline: 2px solid var(--accent-lime, #c5d202);
  outline-offset: 2px;
}

/* Submit button label/loading swap. The "Enviando…" label is
   hidden by default; while the form is submitting it shows and
   the regular label hides. Button is also disabled during
   submission so a second click can't fire another POST. */
.solid-contact-form__submit[disabled],
.solid-contact-form.is-submitting .solid-contact-form__submit {
  cursor: progress;
  opacity: 0.7;
}
.solid-contact-form__submit-loading {
  display: none;
}
.solid-contact-form.is-submitting .solid-contact-form__submit-label {
  display: none;
}
.solid-contact-form.is-submitting .solid-contact-form__submit-loading {
  display: inline-block;
}

/* Honeypot — invisible to humans, visible to bots. Off-screen
   instead of display:none so headless crawlers that skip
   non-visible inputs still see + fill it. */
.solid-contact-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inline field error — appears under the input on a failed
   submit. Reserves no vertical space until populated, so the
   form doesn't shift when errors first render. */
.solid-contact-form__error {
  display: none;
  margin-top: 6px;
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  line-height: 1.3;
  color: #b1232b;
}
.solid-contact-form__error.is-visible {
  display: block;
}
.solid-contact-form__field.has-error input,
.solid-contact-form__field.has-error select,
.solid-contact-form__field.has-error textarea {
  border-color: #b1232b !important;
}

/* Native :invalid styling — only paints AFTER the user has
   attempted to submit (the JS adds `.is-submitted` on first
   submit). Without the gate, browsers paint every empty
   required field red on page load. */
.solid-contact-form.is-submitted input:invalid,
.solid-contact-form.is-submitted select:invalid,
.solid-contact-form.is-submitted textarea:invalid {
  border-color: #b1232b;
}

/* Status row beneath the submit button. Single line that picks
   up either the success message (default green) or an error
   message (red via .is-error). */
.solid-contact-form__feedback {
  display: none;
  margin: 16px 0 0;
  font-family: "Inter", var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--brand-ink);
}
.solid-contact-form__feedback.is-visible {
  display: block;
}
.solid-contact-form__feedback.is-error {
  color: #b1232b;
}

@media (max-width: 991px) {
  .solid-contact {
    padding: 64px 0 60px;
  }
  .solid-contact__inner {
    padding: 0 24px;
  }
  .solid-contact__grid {
    flex-direction: column;
    gap: 28px;
  }
  .solid-contact__left {
    min-height: 460px;
    padding: 36px 28px;
    gap: 80px;
  }
  .solid-contact__lead {
    font-size: 26px;
    line-height: 30px;
    letter-spacing: -0.6px;
  }
  .solid-contact-form__submit {
    align-self: stretch;
    text-align: center;
  }
}

/* Hide support button/icon from header — not needed for supplement store */
.header-content .support,
.header-ct-right .support,
.header-ct-center .header-infor {
  display: none !important;
}

/* Legacy inline colon approximation (the display layer was removed in NUA-29).
   Inherits color from parent so any section-level price color wins,
   rather than forcing a gray override via !important. */
.solid-crc-approx {
  color: inherit;
  font-size: 0.85em;
  font-weight: 400;
  margin-left: 4px;
}

/* Mini-cart quantity +/- controls */
.solid-mini-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  vertical-align: middle;
}

.solid-mini-qty__btn {
  width: 24px;
  height: 24px;
  border: none !important;
  background: transparent !important;
  color: var(--home-dark-bg, var(--brand-ink-deep)) !important;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1;
  transition: color 0.15s;
}

.solid-mini-qty__btn:hover:not(:disabled),
.solid-mini-qty__btn:active:not(:disabled),
.solid-mini-qty__btn:focus:not(:disabled) {
  color: var(--home-accent, #e94560) !important;
  background: transparent !important;
}

.solid-mini-qty__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.solid-mini-qty__value {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: #111;
}

/* Onsus mini-cart used .quantity-number for "× 2" — hide it since we
   now have the +/- widget */
.woocommerce-mini-cart .quantity-number {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   V2 — Professional Redesign (Layout 1 only)
   Spec: docs/superpowers/specs/2026-04-22-homepage-professional-redesign.md
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* NUA brand palette — derived from NUA SUPLEMENTOS 2026.pdf (the
     catalog) + @nuasuplementos Instagram feed. Replaces the earlier
     forest-green/olive system that was driving the site through V1
     and V2 of the redesign. See docs/design/2026-06-15-nua-brand-audit.md
     for the full DNA extraction.

     Three primary roles carry the brand:
       --brand-lime  pastel yellow-green, the body / hero / section surface
       --brand-ink   royal indigo, ALL primary type + price pills
       --brand-cream warm bone, product photography backdrop only

     Contrast anchors (WCAG AA: 4.5:1 normal, 3:1 large):
       --brand-ink  #1f2da1 on --brand-lime  #dcea96  → ~7.3:1  (body text on lime)  ✓ AA
       --brand-ink  #1f2da1 on #ffffff                → ~9.4:1  (text on white)      ✓ AA
       --brand-ink  #1f2da1 on --brand-cream #f5f1e6  → ~8.5:1  (text on cream)      ✓ AA
       --brand-ink-soft #42547d on --brand-lime       → ~4.6:1  (tertiary on lime)   ✓ AA
       white        #ffffff on --brand-ink   var(--brand-ink)  → ~9.4:1  (pill price tag)     ✓ AA  */

  /* ── Brand identity tokens (use these for all new work) ───────── */
  --brand-lime: #dcea96; /* pastel-lime surface. Body / hero / section bg. */
  --brand-ink: #1f2da1; /* royal indigo. ALL primary type + price pills. */
  --brand-ink-soft: #42547d; /* "Suplementos" subtitle. Tertiary text only. */
  --brand-cream: #f5f1e6; /* product photo backdrop. NOT a body surface. */
  --brand-ink-deep: #1c1a3d; /* deep navy from IG palette. Footer / closing. */

  /* Darks (kept for sections that intentionally go dark — about, footer) */
  --ink: var(--brand-ink); /* was var(--brand-ink) near-black olive. Now royal ink. */
  --ink-2: var(--brand-ink-deep); /* was var(--brand-ink-deep). Now IG deep-navy. */
  --ink-3: var(--brand-ink); /* legacy darker section background — retained for archives */

  /* Mutes */
  --muted: var(--brand-ink-soft); /* was olive-gray. Now soft brand ink. */
  --muted-2: #a8b770; /* pale olive-lime muted on dark sections — legacy */

  /* Surfaces */
  --cream: var(--brand-cream); /* was var(--brand-cream) pale lime wash. Now the warm bone. */
  --surface: #ffffff; /* pure white — cards / white sections */
  --line: #c6d486; /* lime-tinted hairlines on the lime surface (darker than bg) */

  /* Brand accent — was forest green. Now royal ink (the brand's primary). */
  --primary: var(--brand-ink);
  --secondary: var(--brand-ink-soft);
  --accent: var(--brand-ink); /* legacy selectors picking --accent now get royal ink */
  --accent-soft: var(--brand-lime); /* was var(--brand-lime) pale sage. Now the brand lime. */
  --accent-dark: var(--brand-ink-deep); /* was olive var(--brand-ink). Now IG deep navy. */
  --accent-lime: #c5d202; /* logo-internal saturated chartreuse — used inside the wordmark only */

  /* Feedback */
  --success: #3f7d0c; /* deeper lime for checks / pass rows */

  /* Kept for backwards compat with existing selectors */
  --green-500: var(--brand-lime); /* was var(--brand-lime). Now the brand surface. */
  --green-900: var(--brand-ink); /* was var(--brand-ink-deep). Now royal ink. */

  /* Focus (WCAG 2.4.7) */
  --focus-ring: 2px solid var(--brand-ink);
  --focus-offset: 2px;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 20, 25, 0.06);
  --shadow-lg: 0 20px 48px rgba(15, 20, 25, 0.12);

  /* Typography */
  /* --font-display: heavy rounded geometric for wordmark + section headings
     (Bricolage Grotesque, Google Fonts, free). Inter remains body type. */
  --font-display:
    "Bricolage Grotesque", "Bricolage Grotesque", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", monospace;
}

/* Base body typeface. Onsus used to emit this rule as inline CSS via its
   Customizer typography integration (`body, button, input, select, textarea
   { font-family: <customizer-choice> }`). With onsus dropped in the
   standalone-theme migration, that inline <style> no longer prints — so
   the body fell back to the browser default (Times New Roman on Windows),
   leaking into the footer, the cart count badge, form inputs, and any
   other element that doesn't have its own font-family rule. Re-asserting
   Inter on the same selectors closes the gap. Site-wide; not gated on
   any home/shop template. */
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

/* Zero the UA's default 8px body margin + lock the brand surface +
   ink color at the root so every page inherits the catalog backdrop.
   Per docs/design/2026-06-15-nua-brand-audit.md §3 Tier A. Most
   downstream section/component CSS already specifies its own
   background — they paint over lime as needed (cream product cards,
   white modals, dark sections). The lime is the *default* surface,
   the one a section sees if it doesn't declare otherwise. */
/* Document-level horizontal-overflow guard. `.home-page` clips its own
   sections, but the header + footer chrome live outside it; at narrow
   widths a stray element/sub-pixel overflow there exposes the lime
   <body> bg as a green strip on the right and makes the full-bleed hero
   look like it stops short of the edge. `clip` contains the x-axis
   without creating a scroll container (so the sticky header keeps
   sticking) and without forcing overflow-y to `auto`. */
html {
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--brand-lime);
  color: var(--brand-ink);
}

/* Universal box-sizing reset. Bootstrap Reboot sets this and a huge
   number of our own rules silently assume border-box (e.g. cards with
   "width: 100%" + padding, buttons with set height + horizontal padding,
   hover transitions that animate transform on padded elements). Without
   it, content-box is the UA default — adding padding/border grows the
   element past its declared width, which makes hover shifts and grid
   misalignment in places that worked under onsus. Apply universally;
   if any element legitimately needs content-box (rare), it can opt back
   in locally. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Layout chrome for the generic page.php fallback — Privacy Policy,
   Términos y Condiciones, plus the four WC pages (cart/checkout/account)
   which suppress the title but still rely on this wrapper for width and
   padding. Without these rules the page hugs the viewport edges and the
   title sits flush with the header, which read as broken layout. */
.site-content--page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.site-content--page .entry-title {
  font-family: "Bricolage Grotesque", var(--font-sans);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--primary, var(--brand-ink));
  margin: 0 0 28px;
}
.site-content--page .entry-content {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink, var(--brand-ink));
}
.site-content--page .entry-content p {
  margin: 0 0 16px;
}
/* On the WC pages the title is suppressed in PHP; this just makes sure
   the inner WC chrome has comfortable padding without us double-spacing. */
.site-content--wc {
  padding-top: 32px;
}

/* Global focus-visible for every interactive element inside v2 sections.
   Scoped to .home-section-v2 so we don't alter focus styling outside
   the redesigned homepage. */
.home-section-v2 a:focus-visible,
.home-section-v2 button:focus-visible,
.home-section-v2 [role="tab"]:focus-visible,
.home-section-v2 [role="region"][tabindex]:focus-visible,
.home-section-v2 input:focus-visible,
.home-section-v2 select:focus-visible,
.home-section-v2 textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 0;
}

/* ── NUA Home page wrapper — flush to header (no top gap) ──────────── */
.page-template-page-home-nua .page-wrap,
.page-template-page-home-nua #themesflat-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* The section directly under the trust-strip honors the
   project-wide 50px minimum vertical gap between sections
   (override of the default 75px so the strip doesn't feel
   isolated, but still gives bestsellers enough breathing room
   to read as a distinct section). */
.home-trust-strip + .home-section-v2 {
  padding-top: 50px !important;
}

/* Trust-strip should NEVER hide behind the js-reveal entrance
   animation — it's a thin marquee that should be visible from
   first paint, not after the IO observer fires. Forcing
   opacity: 1 + transform: none here overrides the
   `.home-trust-strip:not(.is-revealed) { opacity: 0 }` rule
   in the js-reveal block further down so the strip never
   shows as white space on load (even if the kickstart pass
   somehow misses it). */
html.js-reveal .home-trust-strip,
html.js-reveal .home-trust-strip:not(.is-revealed) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
}

/* ── Base: v2 section shell ─────────────────────────────────────────── */

.home-section-v2 {
  background: var(--cream);
  padding: 75px 0;
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}

.home-section-v2--white {
  background: var(--surface);
}
.home-section-v2--ink {
  background: var(--ink);
  color: var(--cream);
}

.home-container {
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 48px;
}

.home-section-v2__header {
  margin-bottom: 64px;
}

.home-section-v2__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.home-section-v2__title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
  color: var(--primary);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.home-section-v2__subtitle {
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 640px;
  margin: 0;
}

.home-section-v2__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.home-section-v2__view-all {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    border-color 200ms ease,
    color 200ms ease;
}
.home-section-v2__view-all:hover {
  border-bottom-color: var(--accent-dark);
  color: var(--accent-dark);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
/* Selectors use a.home-btn-v2 / button.home-btn-v2 to outrank the onsus
   vendor theme's cascading `.something a { color: … }` rules which were
   making link-button text invisible. */

a.home-btn-v2,
button.home-btn-v2,
.home-btn-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition:
    background 200ms ease,
    color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
  cursor: pointer;
  border: 1px solid transparent;
}
a.home-btn-v2--primary,
a.home-btn-v2--primary:link,
a.home-btn-v2--primary:visited,
button.home-btn-v2--primary,
.home-btn-v2--primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
/* Hover = pure animation (no color swap), same feel as the flagship CTA.
   Lift + soft lime glow communicate the state change; bg + text stay put. */
a.home-btn-v2--primary:hover,
a.home-btn-v2--primary:focus,
button.home-btn-v2--primary:hover,
.home-btn-v2--primary:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(197, 210, 2, 0.45);
}
.home-btn-v2--primary:active,
.home-btn-v2--secondary:active {
  transform: scale(0.98);
}
a.home-btn-v2--secondary,
a.home-btn-v2--secondary:link,
a.home-btn-v2--secondary:visited,
button.home-btn-v2--secondary,
.home-btn-v2--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
a.home-btn-v2--secondary:hover,
a.home-btn-v2--secondary:focus,
button.home-btn-v2--secondary:hover,
.home-btn-v2--secondary:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
a.home-btn-v2--tertiary,
a.home-btn-v2--tertiary:link,
a.home-btn-v2--tertiary:visited,
button.home-btn-v2--tertiary,
.home-btn-v2--tertiary {
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border: none;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}
.home-btn-v2--tertiary:hover {
  color: var(--accent-dark);
  border-bottom-color: var(--accent-dark);
}

/* ── Responsive: tablet + mobile section padding ─────────────────── */

@media (max-width: 991px) {
  .home-section-v2 {
    padding: 56px 0;
  }
  .home-section-v2__header {
    margin-bottom: 48px;
  }
  .home-section-v2__title {
    font-size: 32px;
    line-height: 40px;
  }
  .home-container {
    padding: 0 24px;
  }
}
@media (max-width: 767px) {
  .home-section-v2 {
    padding: 40px 0;
  }
  .home-section-v2__header {
    margin-bottom: 32px;
  }
  .home-section-v2__title {
    font-size: 28px;
    line-height: 36px;
  }
  .home-container {
    padding: 0 20px;
  }
}

/* Respect prefers-reduced-motion globally for v2 transitions */
@media (prefers-reduced-motion: reduce) {
  .home-section-v2 *,
  .home-section-v2 *::before,
  .home-section-v2 *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.stat-chip {
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface);
}
.stat-chip__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-chip__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* ── Section 2: Trust Strip — pale sage marquee ─────────────────────
   Pale-sage band with a continuous left-scrolling track. The 4 trust
   items + their duplicates form a 2×4 group; translateX(-50%) shifts
   exactly one full group, keeping the loop seamless. The duplicate set
   is aria-hidden so screen readers see the items once. */
.home-trust-strip {
  background: var(--brand-lime);
  color: var(--brand-ink);
  padding: 15px 0;
  font-family: var(--font-sans);
  font-size: 16px;
  overflow: hidden;
  /* F1 — a continuous marquee always shows a partial item at each
     container edge (that's the mechanism, not a bug); the reported
     issue was that the hard `overflow: hidden` clip crisply cut items
     mid-word ("…leccionados", "Pr…"), reading as broken rather than
     as motion. Fade the edges with a mask instead of a hard clip so a
     partially-scrolled item dissolves into the strip's own background
     rather than getting chopped. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 48px,
    #000 calc(100% - 48px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 48px,
    #000 calc(100% - 48px),
    transparent 100%
  );
}
.home-trust-strip__list {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
  gap: 0;
  animation: home-trust-strip-scroll 40s linear infinite;
}
.home-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 36px;
  font-weight: 500;
  color: var(--brand-ink);
  flex-shrink: 0;
  white-space: nowrap;
}
.home-trust-strip__item span {
  font-variant-numeric: tabular-nums;
}
.home-trust-strip__icon {
  flex-shrink: 0;
  color: var(--brand-ink);
}
.home-trust-strip:hover .home-trust-strip__list {
  animation-play-state: paused;
}
@keyframes home-trust-strip-scroll {
  /* 3 duplicate sets render in the template; advancing by exactly one
     third of total track width snaps back invisibly at loop boundary. */
  to {
    transform: translateX(-33.3333%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-trust-strip__list {
    animation: none;
  }
}
@media (max-width: 767px) {
  .home-trust-strip {
    padding: 12px 0;
    font-size: 14px;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 24px,
      #000 calc(100% - 24px),
      transparent 100%
    );
  }
  .home-trust-strip__item {
    padding: 0 24px;
    gap: 8px;
  }
}

/* ── Product card v2 ──────────────────────────────────────────────── */

.product-card-v2 {
  position: relative;
  background: var(--surface);
  border: 0;
  border-radius: 2px;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
  overflow: hidden;
}
.product-card-v2:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.product-card-v2__link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
}

.product-card-v2__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream);
}
.product-card-v2__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card-v2:hover .product-card-v2__image img {
  transform: scale(1.03);
}

.product-card-v2__body {
  /* Flush-left so title/category/price line up with the image edge —
     keeps the editorial rhythm. Right/top/bottom padding preserved. */
  padding: 16px 16px 16px 0;
}
/* Card front face — title (primary forest green), category (secondary
   olive-gray), price (primary). Letter-spacing relaxed and weight at 400
   to read as editorial. The CTA arrow has been dropped — the dual hover
   CTAs (Al carrito + Ver detalle) on the back panel cover the action. */
.product-card-v2__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary);
  margin: 0 0 8px;
}
.product-card-v2__eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--secondary);
  margin: 0 0 8px;
  line-height: 1.35;
}
.product-card-v2__eyebrow a {
  color: inherit;
  text-decoration: none;
}
.product-card-v2__price {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.product-card-v2__price .solid-crc-approx {
  color: var(--secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
}

/* Mobile typography — name + category + price all read at 16px.
   The category (eyebrow) stays at weight 400 so it doesn't
   compete with the bold title underneath. */
@media (max-width: 767px) {
  .product-card-v2__title {
    font-size: 16px !important;
  }
  .product-card-v2__eyebrow {
    font-size: 16px !important;
    font-weight: 400 !important;
  }
  .product-card-v2__price {
    font-size: 16px !important;
  }
}

/* Badges */
.product-card-v2__sale-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent-dark);
  color: var(--surface);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 2px;
  z-index: 2;
}
.product-card-v2__rank {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1;
  z-index: 2;
  font-variant-numeric: tabular-nums;
}
/* If BOTH rank and sale appear, push rank to bottom-left */
.product-card-v2--sale .product-card-v2__rank {
  top: auto;
  bottom: 12px;
}

/* Wishlist heart — YITH-rendered anchor styled as a primary-green icon
   button sitting on the pale-sage back panel. !important throughout to
   outrank YITH + onsus + themesflat-core's SVG color/size rules.
   Default = forest-green outline, added state = forest-green filled. */
.product-card-v2__wishlist {
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.product-card-v2__wishlist .yith-wcwl-add-to-wishlist,
.product-card-v2__wishlist .yith-wcwl-add-button,
.product-card-v2__wishlist .yith-wcwl-wishlistexistsbrowse,
.product-card-v2__wishlist .yith-wcwl-wishlistaddedbrowse {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
}
.product-card-v2__wishlist a,
.product-card-v2__wishlist .feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--primary) !important;
  text-decoration: none !important;
  line-height: 0;
  transition: transform 150ms ease;
}
.product-card-v2__wishlist a:hover {
  transform: scale(1.15);
}
.product-card-v2__wishlist svg,
.product-card-v2__wishlist svg.yith-wcwl-icon-svg {
  width: 22px !important;
  height: 22px !important;
  stroke: var(--primary) !important;
  fill: transparent !important;
  color: var(--primary) !important;
  transition: fill 150ms ease;
}
/* Hide YITH's label text — icon-only. We hide via font-size: 0 only (no
   color: transparent, since the feedback span's color cascades into the
   SVG's stroke/fill via currentColor). */
.product-card-v2__wishlist a > span,
.product-card-v2__wishlist .feedback {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-indent: -9999px;
  color: var(--primary) !important;
}
/* Added (in wishlist) state — accent-green FILLED heart that's clickable to
   remove. YITH renders <a class="delete_item"> inside .yith-wcwl-add-to-wishlist
   when the after-add behaviour is set to 'remove'. The DOM matches the default
   anchor exactly (a > svg + span) so toggling between states doesn't shift
   layout. We just recolor the heart. */
.product-card-v2__wishlist a.delete_item,
.product-card-v2__wishlist .exists a,
.product-card-v2__wishlist a.yith-wcwl-add-to-wishlist-button--added {
  color: var(--accent) !important;
}
.product-card-v2__wishlist a.delete_item svg,
.product-card-v2__wishlist .exists a svg,
.product-card-v2__wishlist a.yith-wcwl-add-to-wishlist-button--added svg {
  fill: var(--accent) !important;
  stroke: var(--accent) !important;
}

/* AJAX add-to-cart wrapper — onsus's tf_AddToCart handler binds to
   `.btn-add-to-cart .add_to_cart`. Wrapping the primary CTA opts in to that
   handler (loading state + open mini-cart sidebar). `display: contents`
   keeps the anchor as the actual flex child so the CTA layout doesn't shift. */
.product-card-v2__back-ctas > .btn-add-to-cart {
  display: contents;
}
/* Loading + added states — the onsus handler toggles .loading / .added on
   the clicked anchor. Subtle visuals so the user gets feedback. */
.product-card-v2__back-cta--primary.loading {
  opacity: 0.7;
  pointer-events: none;
}
.product-card-v2__back-cta--primary.added::before {
  content: "✓ ";
  margin-right: 4px;
}

/* 4-column product grid */
.home-product-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1199px) {
  .home-product-grid-v2 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .home-product-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ── Section 7: Bestsellers ──────────────────────────────────────── */

.home-bestsellers-v2__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.home-bestsellers-v2__header .home-section-v2__title {
  margin: 0;
}
.home-bestsellers-v2__view-all,
.home-bestsellers-v2__view-all:link,
.home-bestsellers-v2__view-all:visited {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-ink) !important;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--brand-ink);
  transition: border-color 200ms ease;
}
.home-bestsellers-v2__view-all:hover,
.home-bestsellers-v2__view-all:focus-visible {
  color: var(--brand-ink) !important;
  border-bottom-color: var(--brand-ink);
}

/* 5-column grid on desktop, scaling down on smaller screens. Same product
   list at every breakpoint — the browser adjusts how many cards are
   visible per row.
   `margin: 0` — this is a `<ul>` (holds `.solid-shop-card-li` items,
   same markup the main shop grid uses) but, unlike `ul.products`, has
   no `.products` class, so it doesn't inherit WooCommerce core's own
   `ul.products` reset. `padding-left`/`-right` are already zeroed by
   the shorthand below; list markers are handled by the `.solid-shop-
   card-li` reset elsewhere. */
.home-bestsellers-v2__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 8px 0 24px;
}

@media (max-width: 1199px) {
  .home-bestsellers-v2__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .home-bestsellers-v2__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Mobile: header swaps so the "Ver todos los productos" link sits at
   the LEFT and the "Más Vendidos" title at the RIGHT, with both on
   the same row pushed apart via space-between. CSS `order` lets us
   flip without changing DOM order (so desktop stays as-is). Smaller
   font sizes on both so they fit on a 375px viewport. */
@media (max-width: 767px) {
  /* Stack the bestsellers header vertically on mobile so the long
     "Ver todos los productos" link sits directly under the title
     instead of crowding the same row. Both align to the left. */
  .home-bestsellers-v2__header {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
  }
  .home-bestsellers-v2__header .home-section-v2__title {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
  }
  .home-bestsellers-v2__view-all,
  .home-bestsellers-v2__view-all:link,
  .home-bestsellers-v2__view-all:visited {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  /* Convert the grid to a horizontal scroll-snap carousel. Each cell
     takes nearly the full viewport so one card is in view at a time;
     scroll snaps centered. Hide the native scrollbar — the bullet row
     below the row indicates position instead. */
  .home-bestsellers-v2__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 8px 0 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .home-bestsellers-v2__grid::-webkit-scrollbar {
    display: none;
  }
  /* Cell width tuned so one full card + a peek of the next is in
     view — narrower than 100% so the carousel obviously scrolls.
     Targets the card's own `<li>` directly — there's no wrapper div
     between the grid and the card (dropped along with `.product-card-v2`;
     `.solid-shop-card-li` is the grid's actual direct child, matching
     how `ul.products > li.solid-shop-card-li` works in the shop grid). */
  .home-bestsellers-v2__grid > .solid-shop-card-li {
    flex: 0 0 76%;
    max-width: 320px;
    scroll-snap-align: center;
  }
}
@media (max-width: 419px) {
  .home-bestsellers-v2__grid > .solid-shop-card-li {
    flex: 0 0 80%;
    max-width: none;
  }
}

/* Bullet row — desktop hidden; mobile shows under the carousel and
   mirrors the hero-slider bullet style (50×5 pill, primary green for
   active, soft green at 25% for idle). 44px tappable area via ::before
   keeps the visual pill thin without sacrificing touch target size. */
.home-bestsellers-v2__bullets {
  display: none;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.home-bestsellers-v2__bullet {
  width: 50px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 25px;
  background: rgba(55, 86, 59, 0.25);
  cursor: pointer;
  position: relative;
  transition: background 200ms ease;
}
.home-bestsellers-v2__bullet::before {
  content: "";
  position: absolute;
  inset: -20px -8px;
}
.home-bestsellers-v2__bullet.is-active {
  background: var(--primary, var(--brand-ink));
}
.home-bestsellers-v2__bullet:focus-visible {
  outline: 2px solid var(--primary, var(--brand-ink));
  outline-offset: 4px;
}
@media (max-width: 767px) {
  .home-bestsellers-v2__bullets {
    display: flex;
  }
}

/* ── Product card v2 — back face (hover-reveal) ──────────────────── */

.product-card-v2__back {
  position: absolute;
  inset: 0;
  background: var(--brand-lime); /* pale sage — same as the trust strip / first section */
  color: var(--primary);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* children span full width */
  text-align: left; /* text aligned left */
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 240ms ease-out,
    transform 240ms ease-out;
  pointer-events: none;
  z-index: 3;
}
.product-card-v2:hover .product-card-v2__back,
.product-card-v2:focus-within .product-card-v2__back {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Top row — category on the left, heart on the right. The eyebrow can wrap
   to two lines (long category names) so we use baseline anchors then a
   line-height match on both children to keep visual centerlines aligned. */
.product-card-v2__back-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 22px;
  margin-bottom: 20px;
  line-height: 1;
}

/* Short description shown under the product name on hover. Kept small so
   the CTA stays readable + the stack doesn't crowd the image. */
.product-card-v2__back-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-v2__back-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.product-card-v2__back-eyebrow a {
  color: inherit;
  text-decoration: none;
}
.product-card-v2__back-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--primary);
  margin: 0;
}
.product-card-v2__back-price {
  font-family: var(--font-display);
  font-size: 26px; /* bigger than the front card price */
  font-weight: 500;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.product-card-v2__back-price .solid-crc-approx {
  /* inherits parent lime via the global .solid-crc-approx { color: inherit } */
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  margin-left: 8px;
}

/* Two compact CTAs side-by-side, pinned to the bottom of the hover panel.
   Primary (lime fill) = add to cart; secondary (outline) = view detail. */
.product-card-v2__back-ctas {
  display: flex;
  gap: 6px;
  margin-top: auto;
  width: 100%;
}
.product-card-v2__back-cta,
.product-card-v2__back-cta:link,
.product-card-v2__back-cta:visited {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease,
    color 200ms ease;
}
.product-card-v2__back-cta--primary,
.product-card-v2__back-cta--primary:link,
.product-card-v2__back-cta--primary:visited {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
/* Hover both CTAs flip to logo lime (var(--accent-lime) = #C5D202)
   for a brand-forward callout against the pale-sage hover panel. */
.product-card-v2__back-cta--primary:hover,
.product-card-v2__back-cta--primary:focus-visible {
  background: var(--accent-lime);
  color: var(--primary);
  border-color: var(--accent-lime);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(197, 210, 2, 0.45);
}
.product-card-v2__back-cta--secondary,
.product-card-v2__back-cta--secondary:link,
.product-card-v2__back-cta--secondary:visited {
  background: transparent;
  color: var(--accent);
}
.product-card-v2__back-cta--secondary:hover,
.product-card-v2__back-cta--secondary:focus-visible {
  background: var(--accent-lime);
  color: var(--primary);
  border-color: var(--accent-lime);
  transform: translateY(-1px);
}
/* Touch devices: no reliable hover — hide back entirely, keep front functional */
@media (hover: none) {
  .product-card-v2__back {
    display: none;
  }
}

/* ── Entrance animations (scroll-triggered fade-up + stagger) ────── */

/* Pre-hidden state is gated on html.js-reveal (set by an early head-script)
   so the browser paints sections already hidden — no flash-of-content.
   The IO in home.js adds .is-revealed once the section enters the viewport.
   .home-trust-strip is included so the marquee strip also has an entrance,
   not just the v2 sections. */
/* CRITICAL: the transition declaration must live on the BASE selector
   (no :not class condition) so it persists when .is-revealed gets added.
   Earlier we had the transition on `:not(.is-revealed)` which meant the
   declaration vanished the moment the class flipped — CSS had nothing to
   animate from/to and the change was instant. */
html.js-reveal .home-section-v2,
html.js-reveal .home-trust-strip,
html.js-reveal .solid-shop-banner,
html.js-reveal .wrap-product-category,
html.js-reveal .solid-shop-toolbar,
html.js-reveal .products-content,
html.js-reveal .solid-product-detail,
html.js-reveal .solid-product-extras,
html.js-reveal .solid-about-intro,
html.js-reveal .solid-about-philo,
html.js-reveal .solid-about-why,
html.js-reveal .solid-about-closing,
html.js-reveal .solid-contact,
html.js-reveal .solid-faq__qna,
html.js-reveal .solid-cta-consult,
html.js-reveal .solid-wishlist {
  transition:
    opacity 1800ms ease-out,
    transform 1800ms cubic-bezier(0.22, 0.72, 0.3, 1);
  will-change: opacity, transform;
}
html.js-reveal .home-section-v2:not(.is-revealed),
html.js-reveal .home-trust-strip:not(.is-revealed),
html.js-reveal .solid-shop-banner:not(.is-revealed),
html.js-reveal .wrap-product-category:not(.is-revealed),
html.js-reveal .solid-shop-toolbar:not(.is-revealed),
html.js-reveal .products-content:not(.is-revealed),
html.js-reveal .solid-product-detail:not(.is-revealed),
html.js-reveal .solid-product-extras:not(.is-revealed),
html.js-reveal .solid-about-intro:not(.is-revealed),
html.js-reveal .solid-about-philo:not(.is-revealed),
html.js-reveal .solid-about-why:not(.is-revealed),
html.js-reveal .solid-about-closing:not(.is-revealed),
html.js-reveal .solid-contact:not(.is-revealed),
html.js-reveal .solid-faq__qna:not(.is-revealed),
html.js-reveal .solid-cta-consult:not(.is-revealed),
html.js-reveal .solid-wishlist:not(.is-revealed) {
  opacity: 0;
  transform: translateY(60px);
}
html.js-reveal .home-section-v2.is-revealed,
html.js-reveal .home-trust-strip.is-revealed,
html.js-reveal .solid-shop-banner.is-revealed,
html.js-reveal .wrap-product-category.is-revealed,
html.js-reveal .solid-shop-toolbar.is-revealed,
html.js-reveal .products-content.is-revealed,
html.js-reveal .solid-product-detail.is-revealed,
html.js-reveal .solid-product-extras.is-revealed,
html.js-reveal .solid-about-intro.is-revealed,
html.js-reveal .solid-about-philo.is-revealed,
html.js-reveal .solid-about-why.is-revealed,
html.js-reveal .solid-about-closing.is-revealed,
html.js-reveal .solid-contact.is-revealed,
html.js-reveal .solid-faq__qna.is-revealed,
html.js-reveal .solid-cta-consult.is-revealed,
html.js-reveal .solid-wishlist.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
html.js-reveal .home-section-v2 .product-card-v2,
html.js-reveal .home-section-v2 .home-trust-strip__item,
html.js-reveal .home-section-v2 .home-values__item,
html.js-reveal .home-section-v2 .stat-chip,
html.js-reveal .products-content .solid-shop-card-li,
html.js-reveal .wrap-product-category .item,
html.js-reveal .solid-product-extras .product-card-v2,
html.js-reveal .solid-about-philo .solid-about-philo__value,
html.js-reveal .solid-about-why .solid-about-why__item,
html.js-reveal .solid-contact .solid-contact__info-item,
html.js-reveal .solid-contact .solid-contact-form__field,
html.js-reveal .solid-faq__qna h3,
html.js-reveal .solid-faq__qna p,
html.js-reveal .solid-wishlist__item,
html.js-reveal .solid-wishlist__actions {
  /* opacity + transform run on the slow entrance curve; box-shadow is
     short so hover effects on these items aren't dragged into the same
     1400ms timing. Per-property durations live in one shorthand so this
     declaration doesn't override per-element transitions on hover. */
  transition:
    opacity 1400ms ease-out,
    transform 1400ms cubic-bezier(0.22, 0.72, 0.3, 1),
    box-shadow 280ms ease;
  will-change: opacity, transform;
}
html.js-reveal .home-section-v2:not(.is-revealed) .product-card-v2,
html.js-reveal .home-section-v2:not(.is-revealed) .home-trust-strip__item,
html.js-reveal .home-section-v2:not(.is-revealed) .home-values__item,
html.js-reveal .home-section-v2:not(.is-revealed) .stat-chip,
html.js-reveal .products-content:not(.is-revealed) .solid-shop-card-li,
html.js-reveal .wrap-product-category:not(.is-revealed) .item,
html.js-reveal .solid-product-extras:not(.is-revealed) .product-card-v2,
html.js-reveal .solid-about-philo:not(.is-revealed) .solid-about-philo__value,
html.js-reveal .solid-about-why:not(.is-revealed) .solid-about-why__item,
html.js-reveal .solid-contact:not(.is-revealed) .solid-contact__info-item,
html.js-reveal .solid-contact:not(.is-revealed) .solid-contact-form__field,
html.js-reveal .solid-faq__qna:not(.is-revealed) h3,
html.js-reveal .solid-faq__qna:not(.is-revealed) p,
html.js-reveal .solid-wishlist:not(.is-revealed) .solid-wishlist__item,
html.js-reveal .solid-wishlist:not(.is-revealed) .solid-wishlist__actions {
  opacity: 0;
  transform: translateY(40px);
}
html.js-reveal .home-section-v2.is-revealed .product-card-v2,
html.js-reveal .home-section-v2.is-revealed .home-trust-strip__item,
html.js-reveal .home-section-v2.is-revealed .home-values__item,
html.js-reveal .home-section-v2.is-revealed .stat-chip,
html.js-reveal .products-content.is-revealed .solid-shop-card-li,
html.js-reveal .wrap-product-category.is-revealed .item,
html.js-reveal .solid-product-extras.is-revealed .product-card-v2,
html.js-reveal .solid-about-philo.is-revealed .solid-about-philo__value,
html.js-reveal .solid-about-why.is-revealed .solid-about-why__item,
html.js-reveal .solid-contact.is-revealed .solid-contact__info-item,
html.js-reveal .solid-contact.is-revealed .solid-contact-form__field,
html.js-reveal .solid-faq__qna.is-revealed h3,
html.js-reveal .solid-faq__qna.is-revealed p,
html.js-reveal .solid-wishlist.is-revealed .solid-wishlist__item,
html.js-reveal .solid-wishlist.is-revealed .solid-wishlist__actions {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .home-section-v2:not(.is-revealed),
  html.js-reveal .home-section-v2:not(.is-revealed) *,
  html.js-reveal .solid-shop-banner:not(.is-revealed),
  html.js-reveal .wrap-product-category:not(.is-revealed),
  html.js-reveal .solid-shop-toolbar:not(.is-revealed),
  html.js-reveal .products-content:not(.is-revealed),
  html.js-reveal .products-content:not(.is-revealed) *,
  html.js-reveal .solid-product-detail:not(.is-revealed),
  html.js-reveal .solid-product-extras:not(.is-revealed),
  html.js-reveal .solid-product-extras:not(.is-revealed) *,
  html.js-reveal .solid-about-intro:not(.is-revealed),
  html.js-reveal .solid-about-intro:not(.is-revealed) *,
  html.js-reveal .solid-about-philo:not(.is-revealed),
  html.js-reveal .solid-about-philo:not(.is-revealed) *,
  html.js-reveal .solid-about-why:not(.is-revealed),
  html.js-reveal .solid-about-why:not(.is-revealed) *,
  html.js-reveal .solid-about-closing:not(.is-revealed),
  html.js-reveal .solid-about-closing:not(.is-revealed) *,
  html.js-reveal .solid-contact:not(.is-revealed),
  html.js-reveal .solid-contact:not(.is-revealed) *,
  html.js-reveal .solid-faq__qna:not(.is-revealed),
  html.js-reveal .solid-faq__qna:not(.is-revealed) *,
  html.js-reveal .solid-cta-consult:not(.is-revealed),
  html.js-reveal .solid-cta-consult:not(.is-revealed) *,
  html.js-reveal .solid-wishlist:not(.is-revealed),
  html.js-reveal .solid-wishlist:not(.is-revealed) * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .product-card-v2__back {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Product card: equal heights across the grid ─────────────────── */
/* Grid cells default to align-items: stretch so articles fill row height;
   the card becomes a flex column so body stretches + CTA pins bottom.
   (`.home-bestsellers-v2__cell .product-card-v2` used to share this
   block — that section now renders `.solid-shop-card` instead, which
   doesn't need a stretch hack: its `aspect-ratio` already keeps every
   card the same size regardless of grid row height. See the
   `.home-bestsellers-v2__grid .solid-shop-card` rules further down.) */
.home-product-grid-v2 .product-card-v2 {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.home-product-grid-v2 .product-card-v2 .product-card-v2__link {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.home-product-grid-v2 .product-card-v2 .product-card-v2__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.home-product-grid-v2 .product-card-v2 .product-card-v2__title {
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-product-grid-v2 .product-card-v2 .product-card-v2__cta {
  margin-top: auto;
  padding-top: 8px;
}

/* ── Global overflow guard ────────────────────────────────────────── */
/* .home-page already has overflow-x: hidden (v1) which contains the
   horizontal axis for the whole homepage. Do NOT put overflow-x alone
   on .home-section-v2 — per spec, that makes overflow-y compute to
   auto and the browser renders a scrollbar INSIDE the section.
   If a belt-and-suspenders rule is ever needed, use the shorthand
   `overflow: clip` (both axes) or `overflow: hidden` (both axes). */
.home-section-v2 {
  max-width: 100vw;
}

/* ── NUA home: all-white surfaces + lime titles ──────────────────
   Every v2 section renders on white. Titles / display headings go to
   --accent (logo lime) for brand-forward hierarchy. Body copy stays
   dark-on-white. Newsletter + trust-strip are reverted from their
   original dark-bg treatment. */

.home-bestsellers-v2 {
  background: var(--brand-cream);
  color: var(--ink);
}
.home-manifesto {
  background: var(--surface);
  color: var(--ink);
}
.home-testimonials {
  background: transparent;
  color: var(--ink);
}
.home-hero-slider {
  background: var(--surface);
}

/* All titles + display headlines → logo lime */
.home-section-v2__title,
.home-manifesto__copy {
  color: var(--accent);
}

/* Accent fragments INSIDE the (now-lime) manifesto copy flip to ink so
   they still read as the emphasis anchors — contrast within the line. */
.home-manifesto .home-manifesto__accent {
  color: var(--ink);
}

/* NUESTRA FILOSOFÍA eyebrow — small uppercase label per the new spec
   (was previously promoted to a 32px display heading; reverting). */
.home-manifesto .home-section-v2__eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--secondary);
  text-transform: uppercase;
  margin-bottom: 0;
}
.home-manifesto::before {
  background: radial-gradient(
    closest-side,
    rgba(55, 86, 59, 0.08),
    transparent 70%
  );
}

/* Trust-strip icons match the olive marquee text. */
.home-trust-strip__icon {
  opacity: 1;
  color: var(--brand-ink);
}

/* ── Hero slider (NUA home) ──────────────────────────────────────── */
/* Full-bleed, image-only banner. Each slide is a background-image on an
   absolute-positioned layer; active layer fades in via opacity. Bullets sit
   at the bottom-center, scoped inside the same section so keyboard order
   stays within the hero. No gradients — the admin-provided image IS the art. */

.home-hero-slider {
  position: relative;
  width: 100%;
  /* Desktop default: take exactly the viewport height minus the
     topbar (~88px) AND the trust-strip marquee directly below
     the hero (~56px = 15px padding × 2 + ~24px line-height) so
     all three elements — header, hero, scrolling strip — fit
     in the visible viewport without scrolling. ≤991px / ≤767px
     media queries below override with fixed phone-friendly
     heights. */
  /* Heights tied directly to viewport on desktop so topbar +
     hero + trust-strip always exactly fill the viewport.
     Measured rendered heights via DevTools: header 87px +
     strip 52.4px ≈ 140px. The hero takes the remaining
     viewport so all three together = exactly 100vh. */
  height: calc(100vh - 140px);
  min-height: 520px;
  overflow: hidden;
  background: #0b1f33;
  isolation: isolate;
}
.home-hero-slider__slides {
  position: absolute;
  inset: 0;
}
.home-hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 600ms ease-in-out;
  z-index: 0;
}
.home-hero-slider__slide.is-active {
  opacity: 1;
  z-index: 1;
}

/* ── Hero slide content (title / subtitle / CTA) ───────────────────
   Per-slide content sits above the bg image. The slide's modifier class
   (--left / --center / --right) places + aligns the block. The wrapper
   itself is pointer-events:none so the cover link still gets clicks
   over decorative space; only the CTA is interactive. */
.home-hero-slider__content {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: 56px 120px;
  width: 100%;
  max-width: 650px;
  color: #ffffff;
}
.home-hero-slider__slide--left .home-hero-slider__content {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  align-items: flex-start;
  text-align: left;
}
.home-hero-slider__slide--right .home-hero-slider__content {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  align-items: flex-end;
  text-align: right;
}
.home-hero-slider__slide--center .home-hero-slider__content {
  left: 50%;
  top: 0;
  padding-top: 24px;
  transform: translateX(-50%);
  align-items: center;
  text-align: center;
}

.home-hero-slider__title {
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-size: 90px;
  font-weight: 700;
  line-height: 99.25px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 24px rgba(15, 20, 15, 0.35);
  /* Prevent the browser from breaking the title at internal hyphens
     (the dash in `‑RESFRIADOS` should always travel with its word).
     `word-break: keep-all` keeps CJK-style word boundaries strict;
     `hyphens: none` blocks soft-hyphen auto-breaks; `overflow-wrap`
     stays `normal` so the title only wraps at real whitespace. */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
.home-hero-slider__subtitle {
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: #ffffff;
  max-width: 640px;
  text-shadow: 0 1px 16px rgba(15, 20, 15, 0.35);
}
.home-hero-slider__cta,
.home-hero-slider__cta:link,
.home-hero-slider__cta:visited {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 48px;
  padding: 24px 80px;
  background: var(--brand-ink);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(15, 20, 15, 0.35);
  transition:
    background 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}
.home-hero-slider__cta:hover,
.home-hero-slider__cta:focus-visible {
  background: var(--brand-ink);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(15, 20, 15, 0.55);
  outline: none;
}
.home-hero-slider__cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px -6px rgba(15, 20, 15, 0.4);
  background: #2c4a30;
}

@media (max-width: 991px) {
  .home-hero-slider__content {
    padding: 36px 64px;
    max-width: 100%;
  }
  .home-hero-slider__slide--center .home-hero-slider__content {
    padding-top: 18px;
  }
  /* Tablet headline. 56px with the desktop 99.25px line-height made
     the long titles ("+VITAMINAS, ‑RESFRIADOS" /
     "RECUPERACIÓN, REFINADA") stretch 60–80% of the slide on one
     line — they crossed the product imagery on every slide. 48px
     with a 1.1 line-height shrinks both axes and lets the image
     breathe through at 768px and up. */
  .home-hero-slider__title {
    font-size: 48px;
    line-height: 1.1;
  }
  .home-hero-slider__subtitle {
    font-size: 16px;
    margin-top: 12px;
  }
  .home-hero-slider__cta {
    padding: 18px 48px;
  }
}
/* Narrow-desktop / large-tablet range (992–1199px). At full desktop
   (≥1200px) the 90px headline fits comfortably; below 992px the
   tablet block above kicks in at 56px. Between those, 90px takes
   ~half the viewport width and crowds the slide's product imagery,
   so step it down to 64px / 1.1. Subtitle stays at the desktop 18px;
   only the headline was overpowering the image. */
@media (min-width: 992px) and (max-width: 1199px) {
  .home-hero-slider__title {
    font-size: 64px;
    line-height: 1.1;
  }
}
/* Swap to the per-slide mobile artwork on any viewport ≤768px.
   Outside the @media so the rule's specificity isn't reduced. The
   inline `background-image: var(--bg-desktop)` style on the slide
   element wins by default, so `!important` is required to flip to
   the mobile URL. The fallback chain `var(--bg-mobile, --bg-desktop)`
   means a slide without a mobile-specific image still shows the
   desktop one — no broken empty bg. */
@media (max-width: 768px) {
  .home-hero-slider__slide {
    background-image: var(--bg-mobile, var(--bg-desktop)) !important;
    background-position: center center !important;
  }
}

@media (max-width: 640px) {
  /* Tighter outer padding inside the slide so the content block
     gets more breathing room at narrow viewports. */
  .home-hero-slider__content {
    padding: 16px 18px;
  }
  /* Smaller headline + CTA scaling per spec. The content stack
     gaps are also reduced (subtitle margin-top + CTA margin-top)
     so the 3 items sit closer together and fit on a phone. */
  .home-hero-slider__title {
    font-size: 28px;
    line-height: 1.05;
  }
  .home-hero-slider__subtitle {
    font-size: 13px;
    line-height: 1.4;
    margin-top: 6px;
  }
  /* Include `:link`/`:visited` so this rule wins against the
     desktop block which uses those state-pseudos (higher specificity
     than a bare `.home-hero-slider__cta`). Without them the mobile
     padding + margin would only apply to non-anchor CTAs. */
  .home-hero-slider__cta,
  .home-hero-slider__cta:link,
  .home-hero-slider__cta:visited {
    padding: 14px 24px;
    font-size: 12px;
    line-height: 1.2;
    margin-top: 20px;
    letter-spacing: 0.06em;
  }

  /* Mobile content position — top / middle / bottom. The desktop
     `--left/--center/--right` rules are overridden inside this
     breakpoint so the mobile-specific class is the source of truth.
     `inset-inline` is reset to 0 so the content spans the full
     mobile width before the padding kicks in. */
  .home-hero-slider__slide .home-hero-slider__content {
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
    transform: none !important;
  }
  .home-hero-slider__slide--m-top .home-hero-slider__content {
    top: 0 !important;
    bottom: auto !important;
    padding-top: 24px;
  }
  .home-hero-slider__slide--m-middle .home-hero-slider__content {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
  .home-hero-slider__slide--m-bottom .home-hero-slider__content {
    top: auto !important;
    bottom: 0 !important;
    padding-bottom: 56px;
  }
}
/* Phones (<768px). Top-aligned content (`--center` or `--m-top`)
   needs a touch more breathing room than the desktop/tablet 18-24px
   so the headline doesn't skim the header on narrow viewports. Comes
   AFTER the 991px tablet + 640px mobile blocks so the cascade lets
   it override both for matching slides at ≤767px. */
@media (max-width: 767px) {
  .home-hero-slider__slide--center .home-hero-slider__content,
  .home-hero-slider__slide--m-top .home-hero-slider__content {
    padding-top: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-slider__cta {
    transition: none;
  }
}
.home-hero-slider__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  outline: none;
}
.home-hero-slider__link:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: -6px;
}

.home-hero-slider__bullets {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 10px;
  padding: 0;
  background: transparent;
  z-index: 3;
}

/* Prev/Next arrow buttons — hidden until the slider is hovered or an
   element inside it receives keyboard focus. Frosted-glass pill matches
   the bullets' treatment. */
.home-hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(15, 20, 25, 0.35);
  color: var(--cream);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition:
    opacity 200ms ease,
    background 200ms ease,
    transform 200ms ease;
  z-index: 3;
}
.home-hero-slider__arrow--prev {
  left: 24px;
}
.home-hero-slider__arrow--next {
  right: 24px;
}
.home-hero-slider:hover .home-hero-slider__arrow,
.home-hero-slider:focus-within .home-hero-slider__arrow {
  opacity: 1;
}
.home-hero-slider__arrow:hover {
  background: rgba(15, 20, 25, 0.6);
}
.home-hero-slider__arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}
@media (hover: none) {
  /* Touch devices have no hover — keep arrows always visible there. */
  .home-hero-slider__arrow {
    opacity: 1;
  }
}
@media (max-width: 767px) {
  .home-hero-slider__arrow {
    width: 40px;
    height: 40px;
  }
  .home-hero-slider__arrow--prev {
    left: 12px;
  }
  .home-hero-slider__arrow--next {
    right: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-slider__arrow {
    transition: none !important;
  }
}
.home-hero-slider__bullet {
  width: 50px;
  height: 5px;
  padding: 0;
  border-radius: 25px;
  border: 0;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition:
    background 200ms ease,
    transform 200ms ease;
  /* 44px tappable surface via ::before — keeps the visual pill thin */
  position: relative;
}
.home-hero-slider__bullet::before {
  content: "";
  position: absolute;
  inset: -20px -8px;
}
.home-hero-slider__bullet:hover {
  background: rgba(255, 255, 255, 0.7);
}
.home-hero-slider__bullet.is-active {
  background: var(--cream);
}
.home-hero-slider__bullet:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

/* Tablet / mobile — same intent as desktop: topbar + hero + trust-strip
   together fill exactly one viewport, no scroll required to see the
   marquee. Subtraction values are MEASURED rendered heights (Playwright)
   so the three pieces sum to 100vh without whitespace gap or overflow:
     • tablet 768–991: header 87 + strip 52 ≈ 139px → subtract 140
     • phone   ≤767:   header 57 + strip 44 ≈ 101px → subtract 100
   Mobile header inner shrinks at ≤767 (logo 30 + 10/10 padding) while
   tablet still uses desktop header sizing because the mobile-header
   overrides are scoped to ≤767px. `dvh` (dynamic viewport height)
   keeps the hero from being clipped when iOS Safari's address bar
   collapses on scroll; `vh` is the fallback for older browsers. */
@media (max-width: 991px) {
  .home-hero-slider {
    height: calc(100vh - 140px);
    height: calc(100dvh - 140px);
    min-height: 480px;
  }
  .home-hero-slider__bullets {
    bottom: 20px;
  }
}
@media (max-width: 767px) {
  .home-hero-slider {
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
    min-height: 440px;
  }
  .home-hero-slider__bullets {
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-slider__slide {
    transition: none !important;
  }
  .home-hero-slider__bullet {
    transition: none !important;
  }
}

/* ── Manifesto (NUA home) ────────────────────────────────────────── */
/* Typographic brand moment — editorial, generous whitespace. Cream on
   cream, with accent fragments providing the rhythm of the claim. */

.home-manifesto {
  /* Warm off-white surface so the section breathes apart from the rest
     of the cream rhythm and lets the green inset pop. */
  background: #f9f7f0 !important;
  padding-top: 160px;
  padding-bottom: 160px;
  position: relative;
  overflow: hidden;
}
.home-manifesto::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -30%;
  width: 60%;
  height: 160%;
  background: radial-gradient(
    closest-side,
    rgba(16, 185, 129, 0.1),
    transparent 70%
  );
  pointer-events: none;
}
.home-manifesto__grid {
  display: grid;
  /* Media column pinned to 550px (matches the figure's max-width); text
     column fills the remaining space. 128px gap stays. */
  grid-template-columns: 550px minmax(0, 1fr);
  gap: 128px;
  align-items: center;
  position: relative;
}
.home-manifesto__media-col {
  position: relative;
  width: 550px;
  max-width: 100%;
}

/* Wider rectangular hero image. The square inset (.home-manifesto__inset)
   anchors to the bottom-right and breaks out beyond the figure's edge to
   create the overlap shown in the spec. */
.home-manifesto__figure {
  margin: 0;
  overflow: visible; /* lets the inset peek beyond the right/bottom edges */
  border-radius: 4px;
  aspect-ratio: 4 / 5;
  background: var(--accent-soft);
  position: relative;
  width: 100%;
  max-width: 550px;
}
.home-manifesto__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  transform: scale(1);
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
/* Trigger from the IMAGE itself, not the figure — the inset is positioned
   absolutely on top of the figure's bottom-right corner. Using figure:hover
   here makes the main image grow when the mouse is over the inset too. */
.home-manifesto__image:hover,
.home-manifesto__image:focus-visible {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .home-manifesto__image {
    transition: none !important;
    transform: none !important;
  }
}

/* Square inset — overlaps the main figure at the bottom-right with a
   solid primary-green frame (12px padding behaves as a border). Subtle
   shadow so it visually sits above the main photo. The whole wrapper
   (frame + image) scales on hover so the green border grows with the
   image, instead of only the inner photo. */
.home-manifesto__inset {
  position: absolute;
  right: -8%;
  bottom: -10%;
  width: 232px;
  height: 232px;
  padding: 12px;
  background: var(--primary);
  border-radius: 4px;
  box-shadow: 0 18px 40px -16px rgba(15, 20, 15, 0.35);
  display: block;
  overflow: hidden;
  z-index: 2;
  transform: scale(1);
  transform-origin: center;
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.home-manifesto__inset:hover,
.home-manifesto__inset:focus-within {
  transform: scale(1.06);
}
.home-manifesto__inset img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .home-manifesto__inset {
    transition: none !important;
    transform: none !important;
  }
}

/* Right column — 15px vertical rhythm between every block (eyebrow,
   headline, body paragraph, checklist, CTA). flex column + gap keeps it
   uniform regardless of which children are present. */
.home-manifesto__main {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
}
.home-manifesto__copy {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--primary);
  margin: 0;
  max-width: 520px;
}
.home-manifesto__accent {
  font-style: normal;
  color: var(--accent-dark);
  font-weight: 400;
}

.home-manifesto__body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--secondary);
  max-width: 520px;
  margin: 0;
}

.home-manifesto__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.home-manifesto__list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--primary);
}
.home-manifesto__list-icon {
  flex-shrink: 0;
  color: var(--primary);
}

.home-manifesto__cta,
.home-manifesto__cta:link,
.home-manifesto__cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid var(--brand-ink);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--brand-ink) !important;
  text-decoration: none;
  transition:
    background 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}
.home-manifesto__cta:hover,
.home-manifesto__cta:focus-visible {
  background: var(--accent-lime, #c5d202);
  color: #ffffff !important;
  border-color: var(--accent-lime, #c5d202);
  transform: translateY(-1px);
}

@media (max-width: 991px) {
  .home-manifesto {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .home-manifesto__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .home-manifesto__copy {
    font-size: 38px;
    line-height: 1.15;
  }
  .home-manifesto__figure {
    max-width: 520px;
    aspect-ratio: 4 / 5;
    margin: 0 0 8px;
  }
  .home-manifesto__inset {
    width: 180px;
    height: 180px;
  }
}
@media (max-width: 767px) {
  .home-manifesto {
    padding-top: 88px;
    padding-bottom: 88px;
  }
  .home-manifesto__copy {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 20px;
  }
  /* Hide the second (square inset) image on mobile — only the
     main figure shows, edge-to-edge. */
  .home-manifesto__inset {
    display: none !important;
  }
  /* Image col breaks out of the 20px page padding to span the full
     viewport at a reduced 320px height. Negative margin equals the
     mobile container padding (.home-container) so it lines up edge-
     to-edge with the viewport. The figure ditches its aspect-ratio
     for a fixed height to match the spec. */
  .home-manifesto__media-col {
    width: auto;
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
  }
  .home-manifesto__figure {
    max-width: none;
    aspect-ratio: auto;
    height: 240px;
    margin: 0;
    border-radius: 0;
  }
  .home-manifesto__image {
    border-radius: 0;
  }
  /* Stack vertical rhythm tighter on mobile but leave a deliberate
     larger gap right above the CTA so it has breathing room. */
  .home-manifesto__main {
    gap: 14px;
  }
  .home-manifesto__cta,
  .home-manifesto__cta:link,
  .home-manifesto__cta:visited {
    margin-top: 32px;
    width: 100%;
    padding: 18px 24px;
  }
}

/* ── Values strip (NUA home) — 4 columns, icon + title + subtitle ────
   Sits between Featured Products and Testimonials. Spec: icon (36px),
   30px below it the title (16px bold var(--brand-ink)), 12px below it the
   subtitle (16px regular var(--brand-ink-soft)). Each column horizontally centered. */
.home-values {
  background: var(--surface);
}
.home-values__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.home-values__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  border-radius: 6px;
  box-shadow: 0 0 0 0 rgba(55, 86, 59, 0);
  /* box-shadow transition lives on the higher-specificity entrance rule
     above (so it survives that rule's full transition shorthand). Keeping
     a fallback here for non-js-reveal contexts. */
  transition: box-shadow 280ms ease;
}
.home-values__item:hover {
  box-shadow: 0 18px 40px -16px rgba(55, 86, 59, 0.28);
}
.home-values__item:hover .home-values__title {
  color: var(--accent-lime, #c5d202);
}
.home-values__item:hover .home-values__icon {
  color: var(--accent-lime, #c5d202);
}
.home-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 30px;
  line-height: 0;
  transition: color 280ms ease;
}
.home-values__icon svg {
  width: 36px;
  height: 36px;
}
.home-values__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0 0 12px;
  line-height: 1.3;
  transition: color 280ms ease;
}
.home-values__desc {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--brand-ink-soft);
  margin: 0;
  line-height: 1.45;
  max-width: 240px;
}
@media (max-width: 991px) {
  .home-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }
}
@media (max-width: 540px) {
  /* Keep the 2-up rhythm on small phones too — a single column
     for four values reads as a long list and breaks the visual
     symmetry of the section. 2×2 stays compact even on 320px. */
  .home-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
}

/* ── Testimonials (NUA home) — single-card carousel ──────────────────
   Spec: NUA COMMUNITY eyebrow → 24px → quote glyph → 30px → italic body
   (40px / regular / forest green) → 50px → person row (square avatar +
   name + role). Bullets at the bottom switch slides; auto-advance on a
   timer set in the template. */

.home-testimonials__slider {
  /* All slides share one grid cell — the cell sizes to the tallest slide
     so cycling doesn't reflow the page. Inactive slides stay in the cell
     but are hidden via visibility/opacity. */
  display: grid;
  grid-template-areas: "stack";
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.home-testimonial-card {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Vertically center the body + person row inside the slider
     cell so short slides don't leave a big gap above the
     pagination dots below. */
  justify-content: center;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  /* Default inactive state — invisible, no transform offset.
     The transition only kicks in when one of the directional
     state classes (is-active / is-leaving-*) is applied. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: none;
  will-change: transform, opacity;
}

/* Pre-active positions — JS sets one of these on the incoming
   slide for a frame so the browser paints it offscreen, then
   removes the class and adds .is-active. The offscreen → 0
   transition is what produces the slide-in animation. */
.home-testimonial-card.is-from-right {
  visibility: visible;
  opacity: 0;
  transform: translateX(100%);
  transition: none;
}
.home-testimonial-card.is-from-left {
  visibility: visible;
  opacity: 0;
  transform: translateX(-100%);
  transition: none;
}

/* Active — slid into view from whichever side. */
.home-testimonial-card.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition:
    transform 360ms cubic-bezier(0.22, 0.72, 0.3, 1),
    opacity 220ms ease;
}

/* Leaving — outgoing card animates off in the direction of
   travel (forward = exits left, backward = exits right). */
.home-testimonial-card.is-leaving-left {
  visibility: visible;
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
  transition:
    transform 360ms cubic-bezier(0.22, 0.72, 0.3, 1),
    opacity 260ms ease;
}
.home-testimonial-card.is-leaving-right {
  visibility: visible;
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  transition:
    transform 360ms cubic-bezier(0.22, 0.72, 0.3, 1),
    opacity 260ms ease;
}

/* Slider wrapper clips overflowing cards so the off-screen
   slides aren't visible during the slide animation. */
.home-testimonials__slider {
  overflow: hidden;
}

/* Eyebrow now lives OUTSIDE the slider (above all cards) so it
   stays put during slide transitions instead of sliding in/out
   with each card. The `.home-testimonial-card__eyebrow` selector
   is kept for safety in case any cached/markup variant still
   includes it inside the card. */
.home-testimonials__eyebrow,
.home-testimonial-card__eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: #59623e;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* `!important` because onsus's `.themesflat-content p` rule
     ships a default margin that was eating the bottom space. */
  margin: 0 0 50px !important;
  text-align: center;
}
/* Small lime quote glyph rendered as a normal block above the body
   (no overlap). 30px below it sits the body. */
.home-testimonial-card__quote {
  margin: 24px 0 30px;
  flex-shrink: 0;
  color: var(--accent-lime, #c5d202);
}
.home-testimonial-card__quote-text {
  /* Bootstrap injects a default blockquote bg (#f6f6f6) + padding +
     border-left — wipe everything so the quote sits naked on the page. */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-style: italic;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--primary);
  max-width: 760px;
}
/* Bootstrap / onsus inject a `blockquote::before` pseudo-element with a
   quote glyph (or background image). Wipe it. */
.home-testimonial-card__quote-text::before,
.home-testimonial-card__quote-text::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}
.home-testimonial-card__person {
  margin: 70px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.home-testimonial-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--accent-soft);
}
.home-testimonial-card__person-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}
.home-testimonial-card__author {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-testimonial-card__role {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  color: var(--secondary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Bullets — same pill treatment as the hero's, tinted for the white bg */
/* Pagination — pill style matching the hero slider + bestsellers
   carousel (50×5px, 25px radius). Idle: 25%-opacity primary green,
   active: solid primary green. ::before extends a 44px tap target
   so the visual pill stays thin. */
.home-testimonials__bullets {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.home-testimonials__bullet {
  width: 50px;
  height: 5px;
  padding: 0;
  border-radius: 25px;
  border: 0;
  background: rgba(55, 86, 59, 0.25);
  cursor: pointer;
  transition: background 200ms ease;
  position: relative;
}
.home-testimonials__bullet::before {
  content: "";
  position: absolute;
  inset: -20px -8px;
}
.home-testimonials__bullet:hover {
  background: rgba(55, 86, 59, 0.5);
}
.home-testimonials__bullet.is-active {
  background: var(--primary, var(--brand-ink));
}
.home-testimonials__bullet:focus-visible {
  outline: 2px solid var(--primary, var(--brand-ink));
  outline-offset: 4px;
}

@media (max-width: 991px) {
  .home-testimonial-card__quote-text {
    font-size: 30px;
  }
}
@media (max-width: 640px) {
  .home-testimonial-card__quote-text {
    font-size: 22px;
    /* Mobile-only: hide the original above-the-body lime quote
       glyph and render a flipped version (rotated 180° so the
       curls/heads sit at the top) as a watermark BEHIND the
       quote text inside the body itself. The glyph is now
       vertically centered (top: 50% + translate -50%), so no
       extra padding is needed to make room for it. */
    position: relative;
    isolation: isolate;
  }
  .home-testimonial-card__quote {
    display: none !important;
  }
  .home-testimonial-card__quote-text::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 110px;
    /* `!important` on every background property because the
       higher-specificity-equal rule earlier in this file wipes
       background-image with !important. Without `!important`
       here, that earlier rule wins and the glyph never paints.
       Fill color var(--brand-lime) (pale lime) — combined with the 0.5
       opacity below this renders as color-mix(in oklch, var(--brand-lime) 50%, transparent) per the spec. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28' fill='%23D8E2B4'><path d='M0 28V16c0-4.5 1.2-8.1 3.5-10.7C5.8 2.7 9.2.8 13.5 0l1.6 4c-2.5.7-4.5 1.8-5.7 3.4-1.4 1.7-2.2 3.8-2.5 6.3H14V28H0zm22 0V16c0-4.5 1.2-8.1 3.5-10.7C27.8 2.7 31.2.8 35.5 0l1.6 4c-2.5.7-4.5 1.8-5.7 3.4-1.4 1.7-2.2 3.8-2.5 6.3H36V28H22z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    /* Translate -50% on both axes to centre the glyph relative
       to itself; then rotate 180° so the curls/heads sit at
       the top. */
    transform: translate(-50%, -50%) rotate(180deg);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
  }
  .home-testimonial-card__person {
    margin-top: 36px;
  }
  .home-testimonials__bullets {
    margin-top: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-testimonial-card.is-active {
    animation: none !important;
  }
  .home-testimonials__bullet {
    transition: none !important;
  }
}

/* ── Botanical growing SVGs ───────────────────────────────────────────
   Two decorative branches anchored inside specific sections:

   - .home-botanical--left  lives in .home-bestsellers-v2, left of the
     "LO MÁS VENDIDO ESTE MES" eyebrow, growing up from the section base
   - .home-botanical--right lives in .home-featured-products, anchored to
     the bottom-right and growing up past the "Curado para rendimiento"
     title toward the top-right

   Sections already have `position: relative` via .home-section-v2; the
   SVGs pin to their section and never block pointer events. */
.home-bestsellers-v2 {
  overflow: hidden;
}

.home-botanical {
  position: absolute;
  color: var(--accent);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: scale(0.08) translateY(30px);
  animation: home-botanical-grow 2200ms cubic-bezier(0.22, 0.68, 0.3, 1.02)
    forwards;
  animation-delay: 400ms;
  will-change: transform, opacity;
}
.home-bestsellers-v2 .home-container {
  position: relative;
  z-index: 1;
}

.home-botanical--left {
  bottom: 0;
  left: 20px;
  width: 120px;
  height: 240px;
  transform-origin: bottom center;
}
.home-botanical--right {
  bottom: 0;
  right: 24px;
  width: 140px;
  height: 280px;
  transform-origin: bottom right;
  color: var(--accent-dark);
}

/* Stem path: draws in via stroke-dashoffset (classic SVG "grow" effect). */
.home-botanical__stem {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: home-botanical-stem 2000ms cubic-bezier(0.32, 0.72, 0.28, 1)
    forwards;
  animation-delay: 600ms;
}
.home-botanical__leaf {
  transform-origin: 50% 100%;
  transform: scale(0);
  animation: home-botanical-leaf 1100ms cubic-bezier(0.22, 0.82, 0.3, 1.08)
    forwards;
}
/* Leaf stagger — each leaf unfurls ~250ms after the previous. Base offset
   is 1000ms so they come in AFTER the stem has visibly started drawing. */
.home-botanical__leaf:nth-of-type(2) {
  animation-delay: 1000ms;
}
.home-botanical__leaf:nth-of-type(3) {
  animation-delay: 1250ms;
}
.home-botanical__leaf:nth-of-type(4) {
  animation-delay: 1500ms;
}
.home-botanical__leaf:nth-of-type(5) {
  animation-delay: 1750ms;
}
.home-botanical__leaf:nth-of-type(6) {
  animation-delay: 2000ms;
}

@keyframes home-botanical-grow {
  0% {
    opacity: 0;
    transform: scale(0.08) translateY(30px);
  }
  60% {
    opacity: 0.95;
  }
  100% {
    opacity: 0.85;
    transform: scale(1) translateY(0);
  }
}
@keyframes home-botanical-stem {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes home-botanical-leaf {
  0% {
    transform: scale(0) rotate(-6deg);
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .home-botanical--left {
    width: 72px;
    height: 160px;
    left: 8px;
  }
  .home-botanical--right {
    width: 82px;
    height: 180px;
    right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-botanical,
  .home-botanical__stem,
  .home-botanical__leaf {
    animation: none !important;
    opacity: 0.25;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   NUA custom header
   Default site header — left nav, centered logo, right utilities.
   `.solid-header-legacy` body class falls back to onsus's bundled
   header (no rules below take effect), so the legacy path is intact.
   ────────────────────────────────────────────────────────────────── */

/* Hide onsus's site-header / fixed-header / page-title when our custom
   header is on (body has .solid-header-nua). Belt-and-suspenders: the
   PHP only loads onsus parts under .solid-header-legacy, but onsus may
   inject its own markup elsewhere via Customizer. */
body.solid-header-nua > .themesflat-boxed > #site-header,
body.solid-header-nua > .themesflat-boxed > #header-fixed-wrap,
body.solid-header-nua > .themesflat-boxed > .themesflat-pagetitle {
  display: none !important;
}

.nua-header {
  background: #f9f7f0;
  border-bottom: 1px solid rgba(55, 86, 59, 0.08);
  /* Sticky topbar — stays glued to the viewport top as the user
     scrolls. z-index 100 keeps it above page content; the hero +
     confirmation pages still calc `100dvh - <topbar>` correctly
     because the topbar always occupies that height at scroll=0. */
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Icons in the header — onsus's vendor CSS injects rules like
   `header svg { fill: #fff }` that win specificity, leaving the icons
   invisible on our cream-white bg. Force everything with !important on
   both stroke AND fill (the SVG paths use stroke="currentColor" but
   onsus's fill override still wipes the visible glyph on some shapes). */
.nua-header__icon-btn,
.nua-header__dropdown-toggle {
  color: var(--brand-ink) !important;
}
.nua-header__icon-btn svg,
.nua-header__dropdown-toggle svg,
.nua-header__icon-btn svg *,
.nua-header__dropdown-toggle svg * {
  stroke: var(--brand-ink) !important;
  fill: none !important;
  stroke-width: 2.2 !important;
}
.nua-header__icon-btn:hover,
.nua-header__icon-btn:focus-visible {
  color: var(--accent-lime, #c5d202) !important;
}
.nua-header__icon-btn:hover svg,
.nua-header__icon-btn:hover svg *,
.nua-header__icon-btn:focus-visible svg,
.nua-header__icon-btn:focus-visible svg * {
  stroke: var(--accent-lime, #c5d202) !important;
}
/* Cart count badge IS a filled pill — keep its bg/text intact above
   the rule that nukes fill on header icons. */
.nua-cart-count {
  background: var(--primary, var(--brand-ink)) !important;
  color: var(--surface, #fff) !important;
  -webkit-text-fill-color: var(--surface, #fff);
}

/* Search-modal close button — same forest as the header icons so it's
   visible and reads as part of the same UI. The X SVG inside is also
   stroke-only, so we mirror the header rule. */
.nua-search-modal__close {
  color: var(--brand-ink) !important;
}
.nua-search-modal__close svg,
.nua-search-modal__close svg * {
  stroke: var(--brand-ink) !important;
  fill: none !important;
  stroke-width: 2.2 !important;
}
.nua-search-modal__close:hover,
.nua-search-modal__close:focus-visible {
  color: var(--primary, var(--brand-ink)) !important;
}
.nua-search-modal__close:hover svg,
.nua-search-modal__close:hover svg *,
.nua-search-modal__close:focus-visible svg,
.nua-search-modal__close:focus-visible svg * {
  stroke: var(--primary, var(--brand-ink)) !important;
}
.nua-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  /* Tightened from `35px 48px` to `16px 48px` so the header
     reads as ~88px tall instead of ~124px, giving the hero
     more vertical room when sized to `100vh - header`. */
  padding: 16px 48px;
}
/* Ayuda dropdown — keep the trigger button transparent in every state.
   Onsus / bootstrap default a tint on button:hover; force it off so the
   only thing that changes is the text color (handled by the menu rule). */
.nua-header__dropdown-toggle,
.nua-header__dropdown-toggle:hover,
.nua-header__dropdown-toggle:focus,
.nua-header__dropdown-toggle:active,
.nua-header__dropdown-toggle[aria-expanded="true"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Left nav */
.nua-header__nav--left {
  justify-self: start;
}
.nua-header__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
  align-items: center;
}
.nua-header__menu > li {
  position: relative;
}
.nua-header__menu a,
.nua-header__dropdown-toggle {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary, var(--brand-ink));
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nua-header__menu a.is-active {
  border-bottom: 1px solid var(--primary, var(--brand-ink));
}
.nua-header__menu a:hover,
.nua-header__dropdown-toggle:hover,
.nua-header__dropdown-toggle[aria-expanded="true"] {
  color: var(--accent-lime, #c5d202);
}

/* Help dropdown */
.nua-header__menu-item--has-children {
  position: relative;
}
.nua-header__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--surface, #ffffff);
  border: 1px solid rgba(55, 86, 59, 0.12);
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 0;
  box-shadow: 0 12px 28px -12px rgba(15, 20, 15, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  z-index: 200;
}
.nua-header__menu-item--has-children:hover .nua-header__submenu,
.nua-header__menu-item--has-children:focus-within .nua-header__submenu,
.nua-header__dropdown-toggle[aria-expanded="true"] + .nua-header__submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Hover bridge over the 6px `margin-top` gap. Without it, moving the
   pointer from the toggle down to the submenu crosses a dead zone that
   isn't part of the parent <li>, so :hover drops and the menu closes
   before the cursor lands on an option. The transparent strip keeps the
   parent hovered across the gap. Inherits the submenu's pointer-events,
   so it never intercepts clicks while the menu is closed. */
.nua-header__submenu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
}
.nua-header__submenu a {
  display: block;
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.06em;
  border: 0;
}

/* Preferences dropdown (language + currency) — reuses the Help dropdown's
   reveal + submenu box. Right-aligned so the panel never overflows the
   viewport's right edge from the utilities cluster. */
.nua-header__pref {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nua-header__pref-toggle {
  gap: 6px;
}
.nua-header__pref-icon {
  width: 18px;
  height: 18px;
}
.nua-header__pref-current {
  font-size: 12px;
  letter-spacing: 0.06em;
}
.nua-header__submenu.nua-header__pref-menu {
  left: auto;
  right: 0;
  min-width: 210px;
}
.nua-header__pref-group-label {
  display: block;
  padding: 10px 18px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink-soft, #6b7280);
}
/* Divider above a second group, if one is ever added. */
.nua-header__pref-group-label:not(:first-child) {
  margin-top: 6px;
  border-top: 1px solid rgba(55, 86, 59, 0.1);
}
.nua-header__pref-option {
  color: var(--primary, var(--brand-ink));
}
.nua-header__pref-option:hover,
.nua-header__pref-option:focus-visible {
  background: rgba(55, 86, 59, 0.06);
}
/* Selected option: bold + a lime accent bar (dark text keeps 4.5:1 contrast;
   lime is only the indicator, never the text colour). */
.nua-header__pref-option.is-active {
  font-weight: 700;
  color: var(--brand-ink);
  box-shadow: inset 3px 0 0 var(--accent-lime, #c5d202);
}

/* Logo (centered) */
.nua-header__logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nua-header__logo img {
  height: 46px;
  width: auto;
  max-height: 46px;
}

/* Right utilities */
.nua-header__utilities {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.nua-header__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--primary, var(--brand-ink));
}
.nua-header__lang-btn {
  color: var(--primary, var(--brand-ink));
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 180ms ease;
}
.nua-header__lang-btn.is-active,
.nua-header__lang-btn:hover {
  opacity: 1;
  color: var(--brand-ink); /* explicit royal indigo for the active state (was reading
                              as near-black via the polish-1 deep-navy override). */
}

.nua-header__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: var(--primary, var(--brand-ink));
  cursor: pointer;
  position: relative;
  transition: color 180ms ease;
}
.nua-header__icon-btn:hover,
.nua-header__icon-btn:focus-visible {
  color: var(--accent-lime, #c5d202);
}
/* Cart badge — sits at the top-right corner of the cart icon as a
   small filled pill, slightly poking outside the icon's bounds for
   the classic notification-badge look. Specificity layered up to
   `body .nua-header ...` because onsus's stock cart-counter rule
   (`.header-cart-wrapper .shopping-cart-items-count`) ships in a
   later-loaded stylesheet at the same specificity (0,2,0); without
   the extra `body` + `.nua-header` ancestors, the badge briefly
   renders correctly from our PHP markup then re-renders to the
   side once onsus's stylesheet finishes parsing. */
body .nua-header a.nua-cart-link .nua-cart-count,
body .nua-header .nua-header__icon-btn.nua-cart-link .nua-cart-count,
body .nua-header .nua-header__icon-btn.nua-cart-link span.nua-cart-count,
a.nua-cart-link .nua-cart-count,
.nua-header__icon-btn.nua-cart-link .nua-cart-count,
.nua-header__icon-btn.nua-cart-link span.nua-cart-count,
.nua-cart-count {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary, var(--brand-ink));
  color: var(--surface, #fff);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  margin: 0 !important;
  pointer-events: none;
}
.nua-cart-count[hidden] {
  display: none !important;
}

/* Search modal */
.nua-search-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.nua-search-modal.is-open {
  display: block;
}
.nua-search-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 15, 0.55);
  backdrop-filter: blur(2px);
  animation: nua-search-fade 200ms ease both;
}
.nua-search-modal__panel {
  position: relative;
  max-width: 720px;
  margin: 12vh auto 0;
  padding: 56px 48px 48px;
  background: var(--surface, #ffffff);
  border-radius: 4px;
  box-shadow: 0 28px 60px -20px rgba(15, 20, 15, 0.45);
  animation: nua-search-pop 280ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes nua-search-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes nua-search-pop {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.nua-search-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: var(--primary, var(--brand-ink));
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nua-search-modal__close:hover {
  background: rgba(55, 86, 59, 0.08);
}
.nua-search-modal__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--primary, var(--brand-ink));
  margin: 0 0 24px;
}
.nua-search-modal__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
}
.nua-search-modal__input {
  height: 52px;
  padding: 0 16px;
  background: var(--cream, var(--brand-cream));
  border: 1px solid rgba(55, 86, 59, 0.18);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--primary, var(--brand-ink));
}
.nua-search-modal__input:focus-visible {
  outline: 2px solid var(--primary, var(--brand-ink));
  outline-offset: 2px;
}
.nua-search-modal__submit {
  height: 52px;
  padding: 0 24px;
  background: var(--primary, var(--brand-ink));
  color: var(--surface, #fff);
  border: 0;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease;
}
.nua-search-modal__submit:hover {
  background: var(--accent-lime, #c5d202);
  color: var(--primary, var(--brand-ink));
}

/* Live preview list — rendered inside the modal as the user types.
   Each row: thumbnail (56px square) + name + category. Empty state /
   loading hint is a single <p>. */
.nua-search-modal__results {
  margin-top: 24px;
  display: grid;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
}
.nua-search-modal__results:empty {
  display: none;
}
.nua-search-modal__hint {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--secondary, var(--brand-ink-soft));
}
.nua-search-modal__result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: background 160ms ease;
}
.nua-search-modal__result:hover,
.nua-search-modal__result:focus-visible {
  background: rgba(55, 86, 59, 0.06);
  outline: none;
}
.nua-search-modal__result-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 4px;
  background: var(--cream, var(--brand-cream));
}
.nua-search-modal__result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nua-search-modal__result-name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--primary, var(--brand-ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nua-search-modal__result-cat {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--secondary, var(--brand-ink-soft));
  letter-spacing: 0.04em;
}

/* Mobile collapse — hide left nav, stack utilities tighter. Full mobile
   menu (hamburger drawer) is a follow-up; this is just the safety net so
   the row stays usable on a phone. */
@media (max-width: 767px) {
  /* Tight padding + small gap so the four utility icons + logo +
     hamburger all fit on a 360px viewport without wrapping. */
  .nua-header__inner {
    grid-template-columns: auto 1fr auto;
    padding: 10px 12px;
    gap: 8px;
  }
  .nua-header__nav--left {
    display: none;
  }
  .nua-header__logo img {
    height: 30px;
    max-height: 30px;
  }
  .nua-header__utilities {
    gap: 4px;
  }
  /* Shrink the icon button frame + the SVGs inside. The frame keeps
     the 36px tap target via padding (still ≥44px effective with
     surrounding gap), so accessibility isn't affected. */
  .nua-header__icon-btn {
    width: 32px;
    height: 32px;
  }
  .nua-header__icon-btn svg {
    width: 18px;
    height: 18px;
  }
  /* Hamburger size is intentionally NOT shrunk on mobile — it must
     read at the same visual weight as on desktop / home / shop so
     the menu affordance is obvious on every page. The base rule
     below (with !important) is the single source of truth. */
  .nua-header__lang {
    font-size: 11px;
  }
  .nua-search-modal__panel {
    margin-top: 8vh;
    padding: 48px 24px 32px;
  }
  .nua-search-modal__form {
    grid-template-columns: 1fr;
  }
}

/* Very small phones — drop logo a bit further so it doesn't crowd
   the 4-icon cluster on 320-360px viewports. */
@media (max-width: 419px) {
  .nua-header__inner {
    padding: 10px 10px;
    gap: 6px;
  }
  .nua-header__logo img {
    height: 26px;
    max-height: 26px;
  }
  .nua-header__icon-btn {
    width: 28px;
    height: 28px;
  }
  .nua-header__icon-btn svg {
    width: 16px;
    height: 16px;
  }
  /* Hamburger size is kept at the global base on every viewport
     (see the !important base rule below). Shrinking it at <420px
     made it almost invisible against the logo + 3-icon cluster
     and the menu affordance got lost. */
}

/* Inline header JS provided in template-parts/header/nua-header.php — adds
   click handlers on the search button, dropdown toggle, and lang links. */

/* ── Mobile header — hamburger + drawer ──────────────────────────── */

/* Hidden by default (desktop). Surfaced at ≤991px alongside the
   off-canvas drawer below. */
.nua-header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  /* Single source of truth for hamburger frame size on every
     viewport / every page (home, shop, single product, cart,
     checkout, anywhere). !important guards against onsus's
     shop-woocommerce.css `.woocommerce-page button` rules that
     were silently re-sizing the button on shop pages and made
     the icon look noticeably smaller there than on home. */
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  color: var(--brand-ink);
  border-radius: 4px;
  transition: none;
  /* Kill EVERY browser-default mark-up that could leave a green
     box on the button after a touch tap (which was the persistent
     "selected" look the user kept seeing on mobile after nav). */
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
  box-shadow: none !important;
}
/* SVG size locked with !important for the same reason — onsus's
   global button rules + WooCommerce's content-area styles were
   leaking into header buttons on shop/cart/checkout pages and
   re-scaling the SVG. The HTML attribute (24×18) is also restated
   here so it survives any external CSS that nullifies dimensions. */
.nua-header__hamburger svg {
  width: 24px !important;
  height: 18px !important;
  flex-shrink: 0;
}
/* Same neutral state for every interactive sub-state — no green
   tap highlight, no focus outline, no active bg. The drawer
   opening is the only visual feedback the button needs. */
.nua-header__hamburger:hover,
.nua-header__hamburger:focus,
.nua-header__hamburger:focus-visible,
.nua-header__hamburger:active {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Drawer container — full-viewport overlay + sliding panel. Hidden
   by default; .is-open class (added by home.js) toggles visibility
   and the panel slide. Body gets `nua-drawer-open` to lock scroll
   while the drawer is open. */
.nua-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: hidden;
  pointer-events: none;
}
.nua-mobile-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}
body.nua-drawer-open {
  overflow: hidden;
}

.nua-mobile-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 280ms ease;
}
.nua-mobile-drawer.is-open .nua-mobile-drawer__overlay {
  opacity: 1;
}

.nua-mobile-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 86%;
  max-width: 360px;
  background: var(--brand-cream);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
  transform: translateX(-100%);
  transition: transform 320ms cubic-bezier(0.22, 0.72, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.nua-mobile-drawer.is-open .nua-mobile-drawer__panel {
  transform: translateX(0);
}

.nua-mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(79, 111, 82, 0.15);
}
.nua-mobile-drawer__logo img {
  display: block;
  height: 36px;
  width: auto;
}
.nua-mobile-drawer__close {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-ink);
  /* Same defensive reset as the hamburger button: kill the browser
     touch-tap green flash + the `.woocommerce button` / theme button
     background that bleeds onto every <button> on shop pages and
     showed the close (×) as a solid green square. */
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
  box-shadow: none !important;
}
.nua-mobile-drawer__close svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
}
.nua-mobile-drawer__close:hover,
.nua-mobile-drawer__close:focus,
.nua-mobile-drawer__close:focus-visible,
.nua-mobile-drawer__close:active {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.nua-mobile-drawer__nav {
  padding: 16px 0;
}
.nua-mobile-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nua-mobile-drawer__menu li + li {
  border-top: 1px solid rgba(79, 111, 82, 0.08);
}
.nua-mobile-drawer__menu a,
.nua-mobile-drawer__menu a:link,
.nua-mobile-drawer__menu a:visited {
  display: block;
  padding: 18px 24px;
  font-family: "Inter", var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-ink);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.nua-mobile-drawer__menu a:hover {
  background: rgba(79, 111, 82, 0.06);
  color: var(--brand-ink);
}

/* ── Tienda categories dropdown (desktop) + accordion (drawer) ──────
   Desktop reuses .nua-header__submenu wholesale; the only addition is
   a rule separating the category rows from the "Ver todos los
   productos" catch-all at the bottom. */
.nua-header__submenu-divider {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(55, 86, 59, 0.12);
}
/* Category names are longer than the Ayuda items the shared 220px
   min-width was sized for ("Hidratación y electrolitos" wrapped to two
   lines). Own modifier so Ayuda's panel keeps its narrower box. */
.nua-header__submenu--shop {
  min-width: 0;
  /* 22 rows once subcategories are nested — that measures ~706px, which
     still fits a 800px viewport but would run off the bottom of a
     1366x768 laptop. Cap to the space actually below the header and let
     it scroll rather than clipping rows out of reach. */
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nua-header__submenu--shop a {
  white-space: nowrap;
}
/* Third level — subcategories nested under their parent. Indented and
   de-emphasised (smaller, lighter, sentence case) so the parent list
   still reads as the primary structure at a glance, but every row is a
   real link to its own archive. */
.nua-header__subsubmenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nua-header__submenu--shop .nua-header__subsubmenu a {
  padding: 7px 18px 7px 34px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.75;
}
.nua-header__submenu--shop .nua-header__subsubmenu a:hover,
.nua-header__submenu--shop .nua-header__subsubmenu a:focus-visible {
  opacity: 1;
}

/* ── Shop archive: subcategory row ─────────────────────────────────────
   Sits under the category circles on an archive whose category has a
   second level. Pills rather than circles: clearly subordinate to the
   strip above, and the row stays readable at 2-4 items. */
.nua-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.nua-subcats__item,
.nua-subcats__item:link,
.nua-subcats__item:visited {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid rgba(31, 45, 161, 0.18);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink);
  text-decoration: none;
  background: var(--surface);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}
.nua-subcats__item:hover,
.nua-subcats__item:focus-visible {
  border-color: var(--brand-ink);
}
.nua-subcats__item.is-active {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}
.nua-subcats__count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}
@media (max-width: 767px) {
  /* Horizontal scroll rather than wrapping to three rows on a phone. */
  .nua-subcats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nua-subcats::-webkit-scrollbar {
    display: none;
  }
  .nua-subcats__item {
    flex: 0 0 auto;
  }
}

/* Drawer accordion: the "Tienda" label and its caret share a row, so
   tapping the label still navigates to the shop and only the caret
   expands the categories. */
.nua-mobile-drawer__row {
  display: flex;
  align-items: stretch;
}
.nua-mobile-drawer__row a {
  flex: 1 1 auto;
}
.nua-mobile-drawer__submenu-toggle {
  flex: 0 0 auto;
  /* ≥44px touch target per the accessibility baseline */
  width: 56px;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(79, 111, 82, 0.08);
  color: var(--brand-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nua-mobile-drawer__submenu-toggle svg {
  transition: transform 200ms ease;
}
.nua-mobile-drawer__submenu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .nua-mobile-drawer__submenu-toggle svg {
    transition: none;
  }
}

.nua-mobile-drawer__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(79, 111, 82, 0.04);
}
.nua-mobile-drawer__submenu[hidden] {
  display: none;
}
/* Outranks the `.nua-mobile-drawer__menu a` block above (these rows are
   nested inside that menu): indented, smaller, and NOT uppercased —
   category names carry their own casing and accents. */
.nua-mobile-drawer__menu .nua-mobile-drawer__submenu a,
.nua-mobile-drawer__menu .nua-mobile-drawer__submenu a:link,
.nua-mobile-drawer__menu .nua-mobile-drawer__submenu a:visited {
  padding: 14px 24px 14px 40px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}
/* One indent deeper for subcategories, and lighter, so the drawer's
   two levels stay legible without a second accordion to tap through. */
.nua-mobile-drawer__menu .nua-mobile-drawer__subitem a,
.nua-mobile-drawer__menu .nua-mobile-drawer__subitem a:link,
.nua-mobile-drawer__menu .nua-mobile-drawer__subitem a:visited {
  padding-left: 58px;
  font-size: 13px;
  opacity: 0.75;
}

@media (max-width: 991px) {
  /* Hide the desktop top nav and surface the hamburger in its
     place. The header's grid stays `auto 1fr auto` — hamburger
     sits in the first slot where the nav used to. */
  .nua-header__nav--left {
    display: none !important;
  }
  .nua-header__hamburger {
    display: inline-flex;
  }
  /* Hide the EN/ES toggle in the topbar so the four utility icons
     (search / account / wishlist / cart) fit comfortably on a
     phone. The drawer ships its own lang toggle below, so the
     selector here scopes only to the topbar copy. */
  .nua-header__inner > .nua-header__utilities .nua-header__lang {
    display: none !important;
  }
}

/* In-drawer lang toggle — always visible at the bottom of the
   mobile drawer (since the topbar copy is hidden at ≤991px).
   Larger tap targets + a top divider so it reads as its own row
   under the nav links. */
.nua-mobile-drawer__lang.nua-header__lang {
  display: inline-flex !important;
  padding: 20px 24px;
  margin-top: auto;
  font-size: 14px;
  border-top: 1px solid rgba(79, 111, 82, 0.12);
}
.nua-mobile-drawer__lang .nua-header__lang-btn {
  padding: 4px 8px;
  font-size: 14px;
}

/* ── About Us page (NUA design) ───────────────────────────────────── */

/* Page surface — warm cream throughout. WP adds the
   `page-template-page-about-nua` body class when the template is
   active; the rule also covers onsus's #themesflat-content wrapper
   so the cream extends edge-to-edge. The values white card surface
   inside (`.solid-about-philo__values`) keeps its own white bg. */
body.page-template-page-about-nua {
  background-color: var(--brand-cream) !important;
}
body.page-template-page-about-nua #themesflat-content {
  background-color: var(--brand-cream);
}

/* Banner reuses .solid-shop-banner — only spec difference is the
   title content. The shop banner CSS already locks height + overlay
   + typography. The .solid-about-banner modifier hook is here in case
   we ever want a different image / treatment. */
.solid-shop-banner.solid-about-banner {
  /* Taller than the shop band so the subject reads as a full figure
     (she is seated, stretching toward her feet — needs vertical room
     for the legs to show). Focal centred on her body (~56% x, 62% y =
     her measured bbox centre) so the crop frames torso→legs, not just
     the head. */
  height: 600px;
  background-position: 56% 62%;
}
@media (max-width: 991px) {
  .solid-shop-banner.solid-about-banner {
    height: 520px;
  }
}
@media (max-width: 640px) {
  .solid-shop-banner.solid-about-banner {
    height: 420px;
  }
}

/* Intro band — 110px above the section, 1515px max-width to match
   the header / footer chrome. Two equal columns side-by-side on
   desktop; left column centers the bold headline both axes; right
   column gets 50px H padding + 85px top padding per spec. */
.solid-about-intro {
  margin-top: 110px;
  padding-bottom: 110px;
}
.solid-about-intro__inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.solid-about-intro__col {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
}
.solid-about-intro__col--left {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The block is centered both axes via the flex parent, but the
     text inside aligns to the left so the three short lines —
     "Science" / "Applied to" / "Performance" — read as a clean
     left edge inside the centered column. */
  text-align: left;
}
.solid-about-intro__col--right {
  /* `display: flex; justify-content: center` plus zero top
     padding makes the right column's content (lead + body) center
     vertically within the column. The left column's title uses
     the same vertical center via `align-items: center` on the
     flex parent, so the two columns' content visually aligns at
     the same horizontal centerline. */
  padding: 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Big headline — Inter 60/400, line-height 56 (tight stacked feel),
   -1.28px tracking, uppercase, primary green. Spec line-height is
   below font-size so the glyphs visually overlap their leading,
   which is the exact effect for the headline. */
.solid-about-intro__big-title {
  font-family: "Inter", var(--font-sans);
  font-size: 60px;
  font-weight: 400;
  font-style: normal;
  line-height: 56px;
  letter-spacing: -1.28px;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}

/* Right-column lead — Afacad Flux 33.33/400, 40 line-height, no
   tracking, primary green. The 10px margin-bottom to the body copy
   matches the spec. */
.solid-about-intro__lead {
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-size: 33.33px;
  font-weight: 400;
  font-style: normal;
  line-height: 40px;
  letter-spacing: 0;
  color: var(--primary);
  margin: 0 0 10px;
}

/* Body paragraphs — Inter 16/400/19.2 lh. Each paragraph adds its
   own 14px margin-bottom for separation; the last one's margin
   collapses against the section's padding-bottom. */
.solid-about-intro__body {
  font-family: "Inter", var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 19.2px;
  letter-spacing: 0;
  color: rgba(66, 72, 65, 0.9);
  margin: 0 0 14px;
}
.solid-about-intro__body:last-child {
  margin-bottom: 0;
}

/* Mobile — single column with reduced padding/typography. */
@media (max-width: 991px) {
  .solid-about-intro {
    margin-top: 64px;
    padding-bottom: 0;
  }
  .solid-about-intro__inner {
    flex-direction: column;
    gap: 40px;
    padding: 0 24px;
  }
  .solid-about-intro__col,
  .solid-about-intro__col--left,
  .solid-about-intro__col--right {
    width: 100%;
    flex: 0 0 auto;
    padding: 0;
  }
  .solid-about-intro__big-title {
    font-size: 40px;
    line-height: 1.05;
  }
  .solid-about-intro__lead {
    font-size: 24px;
    line-height: 1.2;
  }
}

/* ── Philosophy band — image-left / 2x2 values-right ──────────────
   50px under the intro (sections on this page are separated by 50px).
   Left column = full image (background-image, cover). Right column
   = title + body + 2x2 values grid. */
.solid-about-philo {
  margin-top: 50px;
  padding-bottom: 50px;
}
.solid-about-philo__inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: stretch;
  gap: 15px;
}
.solid-about-philo__col {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
}
.solid-about-philo__col--image {
  background-color: var(--brand-cream);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* min-height keeps the column visible when the right column's
     content is short; on tall content the image stretches via
     align-items:stretch on the parent. */
  min-height: 560px;
}
.solid-about-philo__col--text {
  padding: 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Philosophy title — same typography as the section-1 lead
   ("At Nua Suplementos, we don't believe in shortcuts"): Afacad
   Flux 33.33 / 400 / 40 line-height / 0 tracking / primary green. */
.solid-about-philo__title {
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-size: 33.33px;
  font-weight: 400;
  font-style: normal;
  line-height: 40px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--primary);
  margin: 0 0 15px;
}
.solid-about-philo__body {
  margin: 0 0 40px;
}

/* 2x2 values grid scoped to this section so it doesn't fight the
   homepage values 4-column layout. The values wrapper itself is the
   white card surface — items inside are transparent and centered.
   20px margin above separates the wrapper from the body paragraph. */
.solid-about-philo__values {
  list-style: none;
  margin: 20px 0 0;
  padding: 75px 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
  background: #ffffff;
  border-radius: 4px;
}
.solid-about-philo__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: transparent;
  padding: 8px;
  border-radius: 0;
  /* Hover effect — title + icon shift to accent-lime, matching the
     homepage values strip. No drop-shadow lift since items don't
     have their own card surface anymore (the wrapper does). */
  transition: transform 280ms ease;
}
.solid-about-philo__value:hover {
  transform: translateY(-2px);
}
.solid-about-philo__value:hover .solid-about-philo__value-title,
.solid-about-philo__value:hover .solid-about-philo__value-icon {
  color: var(--accent-lime, #c5d202);
}
.solid-about-philo__value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 6px;
  transition: color 280ms ease;
}
.solid-about-philo__value-title {
  transition: color 280ms ease;
}
.solid-about-philo__value-title {
  font-family: "Inter", var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}
.solid-about-philo__value-desc {
  font-family: "Inter", var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(66, 72, 65, 0.9);
  margin: 0;
}

@media (max-width: 991px) {
  .solid-about-philo {
    margin-top: 40px;
    padding-bottom: 0;
  }
  .solid-about-philo__inner {
    flex-direction: column;
    gap: 32px;
    padding: 0 24px;
  }
  .solid-about-philo__col,
  .solid-about-philo__col--image,
  .solid-about-philo__col--text {
    width: 100%;
    flex: 0 0 auto;
    padding: 0;
  }
  .solid-about-philo__col--image {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .solid-about-philo__values {
    gap: 16px;
    padding: 32px 20px;
  }
}

/* ── Why Choose Nua? — text-left / image-right band ───────────────
   50px gap from the philosophy section above (page-wide rule). Same
   1515px max-width wrapper. Left column (50%) has the title +
   checklist with double-check icons. Right column (50%) is a full
   image. */
.solid-about-why {
  margin-top: 50px;
  padding-bottom: 110px;
}
.solid-about-why__inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: stretch;
  gap: 15px;
}
.solid-about-why__col {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
}
.solid-about-why__col--text {
  padding: 50px 60px 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.solid-about-why__col--image {
  background-color: var(--brand-cream);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 480px;
}

.solid-about-why__title {
  margin: 0 0 32px;
}

.solid-about-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.solid-about-why__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 14px;
  align-items: start;
}
.solid-about-why__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-top: 4px;
}
.solid-about-why__copy {
  min-width: 0;
}
.solid-about-why__item-title {
  font-family: "Inter", var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--primary);
  margin: 0 0 4px;
}
.solid-about-why__item-desc {
  font-family: "Inter", var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  color: rgba(66, 72, 65, 0.9);
  margin: 0;
}

@media (max-width: 991px) {
  .solid-about-why {
    margin-top: 40px;
    padding-bottom: 64px;
  }
  .solid-about-why__inner {
    flex-direction: column-reverse;
    gap: 32px;
    padding: 0 24px;
  }
  .solid-about-why__col,
  .solid-about-why__col--image,
  .solid-about-why__col--text {
    width: 100%;
    flex: 0 0 auto;
    padding: 0;
  }
  .solid-about-why__col--image {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
}

/* Closing statement band — full-bleed ink surface that ends the About
   page. Deliberately bookends the intro: same Inter uppercase display
   treatment as `.solid-about-intro__big-title`, one step down in size
   and centered, so the page opens and closes in the same voice. */
.solid-about-closing {
  background: var(--primary);
  padding: 110px 48px;
}
.solid-about-closing__inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.solid-about-closing__title {
  font-family: "Inter", var(--font-sans);
  font-size: 52px;
  font-weight: 400;
  font-style: normal;
  line-height: 50px;
  letter-spacing: -1.1px;
  text-transform: uppercase;
  color: var(--brand-cream);
  margin: 0;
}
.solid-about-closing__body {
  font-family: "Inter", var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 27px;
  letter-spacing: 0;
  /* Cream at 80% keeps the supporting line clearly subordinate to the
     statement above it while holding well past WCAG AA on the ink. */
  color: rgba(245, 241, 230, 0.8);
  max-width: 620px;
  margin: 26px auto 0;
}

@media (max-width: 991px) {
  .solid-about-closing {
    padding: 64px 24px;
  }
  .solid-about-closing__title {
    font-size: 34px;
    line-height: 34px;
    letter-spacing: -0.7px;
  }
  .solid-about-closing__body {
    font-size: 16px;
    line-height: 24px;
    margin-top: 20px;
  }
}

/* ── Checkout page (NUA design) ───────────────────────────────────── */

/* Page surface — warm cream throughout, including under the
   #themesflat-content wrapper so the cards float on a uniform bg. */
body.woocommerce-checkout {
  background-color: var(--brand-cream) !important;
}
body.woocommerce-checkout #themesflat-content {
  background-color: var(--brand-cream);
}

/* ── Checkout steps indicator ─────────────────────────────────────
   Three-step progress bar that sits ABOVE the .solid-checkout form
   on /checkout/. Layout: <ol> with circle <li> + line <li> + circle
   <li> + line <li> + circle <li>. Circles are 50×50 primary-green
   discs holding a 30×30 (10px inset) Lucide-style SVG. Lines are
   50×3 in the same primary green. Step 3 (.--future) reuses the
   same color at reduced opacity to read as "upcoming". The title
   below uses the Afacad Flux spec from the design. 50px breathing
   room above, 100px below the title before the form starts. */
.solid-checkout-steps {
  margin: 50px auto 100px;
  text-align: center;
  /* Down-appear entrance — fires once on page mount via the
     keyframe animation. forwards holds the final state so the
     section stays visible after the 0.4s tween completes. */
  opacity: 0;
  transform: translateY(-10px);
  animation: solid-checkout-steps-in 0.4s ease 0.1s forwards;
  will-change: opacity, transform;
}
.solid-checkout-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.solid-checkout-steps__step {
  flex: 0 0 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.solid-checkout-steps__circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--brand-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 10px inset → 30×30 icon area inside the 50×50 circle. */
  padding: 10px;
  color: #ffffff;
  transition: opacity 200ms ease;
}
.solid-checkout-steps__circle svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Step 3 — same green, reduced opacity to read as "not yet". */
.solid-checkout-steps__step--future .solid-checkout-steps__circle {
  opacity: 0.4;
}
/* Check icon glyph is a bit tighter than the bag/wallet by design
   (see thankyou.php / form-checkout.php — same viewBox, shorter
   polyline). The scale here makes the visual stroke read in proportion
   to the chunkier bag/wallet shapes inside the 30×30 icon area. */
.solid-checkout-steps__check-icon {
  transform: scale(0.85);
  transform-origin: center;
}
/* Connector lines between adjacent circles — 50px long × 3px tall. */
.solid-checkout-steps__line {
  flex: 0 0 50px;
  height: 3px;
  background: var(--brand-ink);
  list-style: none;
  margin: 0;
  padding: 0;
}
.solid-checkout-steps__title {
  margin: 10px 0 0;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 600;
  font-size: 35px;
  line-height: 60px;
  letter-spacing: -1.8px;
  text-align: center;
  text-transform: uppercase;
  color: var(--brand-ink);
}
@keyframes solid-checkout-steps-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .solid-checkout-steps {
    animation: none;
    opacity: 1;
    transform: none;
    transition: opacity 0.15s linear;
  }
}
@media (max-width: 640px) {
  /* Phone: title scales down so the 35px headline doesn't dwarf
     a 320–390px viewport. Circles + lines stay at spec size — they
     already fit comfortably (5 × 50px = 250px row). */
  .solid-checkout-steps {
    margin: 40px auto 60px;
  }
  .solid-checkout-steps__title {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.8px;
  }
}

/* Steps variant for the order-received page — all 3 dots full
   opacity (no .--future dim). Same circles, same lines, same green. */
.solid-checkout-steps--all-complete
  .solid-checkout-steps__step
  .solid-checkout-steps__circle {
  opacity: 1;
}

/* ── Confirmation / order-received page ──────────────────────────
   Layout: <section> with breadcrumb 100px below the topbar, then
   a centered column holding the steps (.--all-complete), the
   "¡GRACIAS POR TU COMPRA!" title, a reassurance paragraph, and a
   "Ver detalles del pedido" primary CTA. All three of the
   centered pieces (title, paragraph, button) sit beneath the steps
   row and align to it; the paragraph has a max-width so it doesn't
   sprawl across wide viewports. */
.solid-confirmation {
  background: transparent;
  /* Page fills the viewport below the topbar — breadcrumb sits at the
     top, the centered confirmation block vertical-centers in the
     remaining space, no scroll on a normal desktop / phone viewport.
     `dvh` keeps the calc correct when iOS Safari's address bar
     collapses on scroll. Measured topbar: 87px desktop, 57px phone. */
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 87px);
  min-height: calc(100dvh - 87px);
}
.solid-confirmation__crumbs {
  margin-top: 100px;
}
.solid-confirmation__crumb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 14.4px;
  letter-spacing: 0;
  color: var(--brand-ink-soft);
  transition: opacity 200ms ease;
}
.solid-confirmation__crumb-link:hover,
.solid-confirmation__crumb-link:focus-visible {
  opacity: 0.7;
  color: var(--brand-ink-soft);
}
.solid-confirmation__crumb-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-lime, #c5d202);
}
.solid-confirmation__crumb-icon svg {
  width: 100%;
  height: 100%;
}
.solid-confirmation__crumb-label {
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 14.4px;
  color: var(--brand-ink-soft);
}
.solid-confirmation__body {
  /* Grows to fill the remaining viewport (page stays 100vh tall),
     but content stacks at the TOP of that space — a 50px gap
     under the breadcrumb, then steps + title + body + CTA flow
     directly. flex-start avoids the giant "where did the content
     go" empty area that justify-content: center produced on tall
     viewports. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 50px 0 24px;
}
/* Override the .solid-checkout-steps default 50px top margin —
   on the confirmation page the breadcrumb dictates the spacing
   above (50px gap via .solid-confirmation__body's margin-top),
   and the bottom margin is replaced by the body paragraph below. */
.solid-confirmation__body .solid-checkout-steps {
  margin: 0 auto;
}
.solid-confirmation__lead {
  margin: 15px auto 0;
  max-width: 460px;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 14.4px;
  letter-spacing: 0;
  text-align: center;
  color: var(--brand-ink-soft);
  /* Stagger entrance — fade-in slightly after the steps. */
  opacity: 0;
  transform: translateY(-10px);
  animation: solid-confirmation-in 0.4s ease 0.3s forwards;
  will-change: opacity, transform;
}
.solid-confirmation__cta {
  margin-top: 50px;
  display: inline-block;
  padding: 25px 80px;
  background: var(--brand-ink);
  color: #ffffff;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  border: 1px solid var(--brand-ink);
  border-radius: 0;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  /* Stagger entrance — fade-in after the body paragraph. */
  opacity: 0;
  transform: translateY(-10px);
  animation: solid-confirmation-in 0.4s ease 0.5s forwards;
  will-change: opacity, transform;
}
.solid-confirmation__cta:hover,
.solid-confirmation__cta:focus-visible {
  background: var(--brand-ink);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(79, 111, 82, 0.22);
}
@keyframes solid-confirmation-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .solid-confirmation__lead,
  .solid-confirmation__cta {
    animation: none;
    opacity: 1;
    transform: none;
    transition: opacity 0.15s linear;
  }
}
@media (max-width: 767px) {
  /* Mobile: topbar shrinks to ~57px, so subtract that instead of 87
     to keep the 100vh layout snug without a giant empty area. */
  .solid-confirmation {
    min-height: calc(100vh - 57px);
    min-height: calc(100dvh - 57px);
  }
}
@media (max-width: 640px) {
  .solid-confirmation__crumbs {
    margin-top: 60px;
  }
  .solid-confirmation__body {
    padding: 24px 0;
  }
  .solid-confirmation__lead {
    max-width: 320px;
  }
  .solid-confirmation__cta {
    /* Tighter button on phones — 80px horizontal padding would
       overflow narrow viewports. */
    padding: 20px 48px;
    font-size: 15px;
    line-height: 18px;
  }
}

/* ── Payment poll states (set by assets/js/payment-thank-you-poll.js)
   The thank-you page can be in three states while the payment-poller
   runs:
     • default       — initial "¡Gracias por tu compra!" copy
     • --success     — webhook landed, payment confirmed (title swap only)
     • --pending     — 60s timeout reached without webhook; show a calm
                       "estamos confirmando" message at a smaller, less
                       shouty size with a soft pulse to indicate activity
   The state class lives on <body>; we scope rules under it so default
   (no-JS / no-poll) renders unchanged.
   ───────────────────────────────────────────────────────────────── */
body.solid-payment-poll--pending .solid-checkout-steps__title {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  font-weight: 500;
  text-transform: none;
  max-width: 560px;
  margin: 10px auto 0;
  color: var(--brand-ink);
  animation: solid-poll-pending-pulse 2.4s ease-in-out infinite;
}
body.solid-payment-poll--pending .solid-checkout-steps__title::after {
  content: "…";
  display: inline-block;
  margin-left: 2px;
  animation: solid-poll-pending-dots 1.4s steps(4, end) infinite;
  width: 1ch;
  overflow: hidden;
  vertical-align: bottom;
}
body.solid-payment-poll--pending .solid-confirmation__lead {
  max-width: 460px;
}
body.solid-payment-poll--success .solid-checkout-steps__title {
  font-size: 28px;
  line-height: 1.25;
  text-transform: none;
  max-width: 560px;
  margin: 10px auto 0;
}
@keyframes solid-poll-pending-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@keyframes solid-poll-pending-dots {
  0%   { width: 0; }
  25%  { width: 0.33ch; }
  50%  { width: 0.66ch; }
  75%, 100% { width: 1ch; }
}
@media (prefers-reduced-motion: reduce) {
  body.solid-payment-poll--pending .solid-checkout-steps__title,
  body.solid-payment-poll--pending .solid-checkout-steps__title::after {
    animation: none;
  }
}
@media (max-width: 640px) {
  body.solid-payment-poll--pending .solid-checkout-steps__title,
  body.solid-payment-poll--success .solid-checkout-steps__title {
    font-size: 20px;
    max-width: 320px;
  }
}

/* Two-column wrapper: 60% form / 100px gap / 40% review. The
   inherited bootstrap col-lg-8 / col-lg-4 widths are overridden so
   the layout matches the spec exactly regardless of the .row
   wrapper's gutter behavior. */
.solid-checkout {
  background: transparent !important;
  padding: 80px 0 120px !important;
}
.solid-checkout .solid-checkout__inner {
  display: flex !important;
  flex-direction: row !important;
  gap: 100px !important;
  align-items: flex-start !important;
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 48px;
  flex-wrap: nowrap;
}
.solid-checkout .solid-checkout__form,
.solid-checkout .col-lg-8.solid-checkout__form {
  flex: 0 0 60% !important;
  max-width: 60% !important;
  width: 60% !important;
  padding: 0 !important;
}
.solid-checkout .solid-checkout__review,
.solid-checkout .col-lg-4.solid-checkout__review {
  flex: 0 0 calc(40% - 100px) !important;
  max-width: calc(40% - 100px) !important;
  width: calc(40% - 100px) !important;
  padding: 0 !important;
}

/* "Boost your performance" headline */
.solid-checkout__title {
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-size: 50px;
  font-weight: 600;
  font-style: normal;
  line-height: 60px;
  letter-spacing: -1.8px;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 50px;
}

/* Form labels — 12px Inter 400 uppercase color-mix(in oklch, var(--brand-ink-soft) 90%, transparent) */
.solid-checkout #customer_details label,
.solid-checkout .woocommerce-billing-fields label,
.solid-checkout .woocommerce-shipping-fields label,
.solid-checkout .woocommerce-account-fields label,
.solid-checkout .woocommerce-additional-fields label {
  font-family: "Inter", var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(66, 72, 65, 0.9) !important; /* color-mix(in oklch, var(--brand-ink-soft) 90%, transparent) */
  margin-bottom: 6px !important;
  display: block;
}

/* Form inputs — primary green border, page-cream bg (matches the
   checkout surface so the inputs read as flat panels rather than
   white tiles), comfortable padding. */
.solid-checkout #customer_details input[type="text"],
.solid-checkout #customer_details input[type="email"],
.solid-checkout #customer_details input[type="tel"],
.solid-checkout #customer_details input[type="number"],
.solid-checkout #customer_details input[type="password"],
.solid-checkout #customer_details textarea,
.solid-checkout #customer_details select,
.solid-checkout #customer_details .select2-selection,
.solid-checkout #customer_details .select2-selection--single,
.solid-checkout #customer_details .select2-selection--multiple {
  border: 1px solid var(--brand-ink) !important;
  border-radius: 3px !important;
  background-color: var(--brand-cream) !important;
  padding: 12px 14px !important;
  font-family: "Inter", var(--font-sans);
  font-size: 14px !important;
  color: var(--brand-ink-deep) !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: none !important;
}
/* Select2 inner rendered text container (the visible label area
   inside the dropdown) — onsus / select2 paint this white by
   default; force it to the page bg so the closed select doesn't
   show a white pill inside the green-bordered field. We also strip
   the inner border + arrow's left-border that select2 adds (creates
   a visible double-line inside the input). */
.solid-checkout #customer_details .select2-selection__rendered,
.solid-checkout
  #customer_details
  .select2-container
  .select2-selection__rendered {
  background-color: var(--brand-cream) !important;
  color: var(--brand-ink-deep) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.solid-checkout #customer_details .select2-selection__arrow,
.solid-checkout #customer_details .select2-selection__arrow b {
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
}
.solid-checkout #customer_details .select2-container--open .select2-selection,
.solid-checkout #customer_details .select2-container--focus .select2-selection {
  background-color: var(--brand-cream) !important;
  border: 1px solid var(--brand-ink) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Hide every checkout field the user didn't list in the spec. We
   can hide them safely now because the global "make all fields
   optional" filter set in functions.php neutralizes WC's
   server-side required-field validation — empty values pass
   through. Only country / address (1+2) / postcode / city / state
   stay visible. */
.solid-checkout #billing_first_name_field,
.solid-checkout #billing_last_name_field,
.solid-checkout #billing_company_field,
.solid-checkout #billing_email_field,
.solid-checkout #billing_phone_field,
.solid-checkout #shipping_first_name_field,
.solid-checkout #shipping_last_name_field,
.solid-checkout #shipping_company_field,
.solid-checkout #shipping_phone_field {
  display: none !important;
}
.solid-checkout
  #customer_details
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 1.4 !important;
  padding: 0 !important;
  color: var(--brand-ink-deep) !important;
}
.solid-checkout
  #customer_details
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
}

/* Field row spacing */
.solid-checkout #customer_details .form-row {
  margin-bottom: 18px;
}

/* ── Right column — order review split into two cards ───────────── */
/* Both cards share the page surface (var(--brand-cream)) so the right column
   reads as flat panels on the cream bg, with a primary-green outline.
   The 40px margin-bottom on each card creates the gap. */
.solid-checkout__review-card {
  background: var(--brand-cream) !important;
  border: 1px solid var(--brand-ink);
  border-radius: 4px;
  padding: 28px 24px;
  margin-bottom: 40px;
}
.solid-checkout__review-card:last-child {
  margin-bottom: 0;
}
.solid-checkout__review-title {
  font-family: "Inter", var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 20px;
}
/* The payment block now lives in its own card, so reset any inherited
   onsus styling on the .woocommerce-checkout-payment wrapper. */
.solid-checkout
  .solid-checkout__review-card--payment
  .woocommerce-checkout-payment {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
/* Place-order button — primary green palette */
.solid-checkout #order_review #payment #place_order {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 3px !important;
  font-family: "Inter", var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 24px !important;
  width: 100%;
  margin-top: 16px !important;
  transition:
    background 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}
.solid-checkout #order_review #payment #place_order:hover {
  background-color: var(--brand-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(15, 20, 15, 0.35);
}

/* ── WooCommerce BLOCKS cart/checkout — brand the primary CTAs ──
   The store uses the Blocks (Store-API/React) cart + checkout, whose markup
   differs from the classic #place_order button above — so the classic rule
   never reaches it, leaving "Realizar el pedido" and "Finalizar compra" as the
   default greyed WC Blocks buttons. These give both primary CTAs the indigo
   brand button, matching "AL CARRITO" on the product page. `.contained` is WC
   Blocks' filled-button modifier (place-order, cart submit, apply-coupon). */
.wp-block-woocommerce-checkout .wc-block-components-button.contained,
.wp-block-woocommerce-cart .wc-block-components-button.contained,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  background-color: var(--brand-ink) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  transition:
    background 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover,
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
  background-color: var(--brand-ink-deep) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(15, 20, 15, 0.35);
}
/* The Blocks place-order button also carries a nested text/price span; keep it
   legible on the indigo fill. */
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
  color: #ffffff !important;
}

/* Order review table */
.solid-checkout .woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}
.solid-checkout .woocommerce-checkout-review-order-table th,
.solid-checkout .woocommerce-checkout-review-order-table td {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(79, 111, 82, 0.15) !important;
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  line-height: 14.4px;
  color: var(--brand-ink-soft);
}
/* Column headers — "Product" / "Subtotal" — primary green, bold. */
.solid-checkout .woocommerce-checkout-review-order-table thead th {
  font-family: "Inter", var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary) !important;
}
/* Product name cells — Inter 400 12px line-height 14.4 var(--brand-ink-soft),
   exactly per spec. */
.solid-checkout .woocommerce-checkout-review-order-table .product-name,
.solid-checkout .woocommerce-checkout-review-order-table .product-name a,
.solid-checkout .woocommerce-checkout-review-order-table .product-name strong,
.solid-checkout .woocommerce-checkout-review-order-table .product-quantity {
  font-family: "Inter", var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 14.4px !important;
  letter-spacing: 0 !important;
  color: var(--brand-ink-soft) !important;
  text-transform: none !important;
}
/* Subtotal / Total rows in tfoot — primary green, bold. */
.solid-checkout .woocommerce-checkout-review-order-table tfoot th,
.solid-checkout .woocommerce-checkout-review-order-table tfoot td,
.solid-checkout .woocommerce-checkout-review-order-table .order-total th,
.solid-checkout .woocommerce-checkout-review-order-table .order-total td,
.solid-checkout .woocommerce-checkout-review-order-table .cart-subtotal th,
.solid-checkout .woocommerce-checkout-review-order-table .cart-subtotal td {
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: "Inter", var(--font-sans) !important;
}
.solid-checkout .woocommerce-checkout-review-order-table .order-total th,
.solid-checkout .woocommerce-checkout-review-order-table .order-total td {
  font-size: 16px !important;
}

/* All headings + links across the checkout default to primary green
   so the logo light-green doesn't leak into "Billing details" /
   "Shipping details" / payment-method labels / etc. */
.solid-checkout h1,
.solid-checkout h2,
.solid-checkout h3,
.solid-checkout h4,
.solid-checkout .woocommerce-billing-fields h3,
.solid-checkout .woocommerce-shipping-fields h3,
.solid-checkout .woocommerce-additional-fields h3,
.solid-checkout .woocommerce-account-fields h3,
.solid-checkout #order_review_heading,
.solid-checkout label.woocommerce-form__label,
.solid-checkout .payment_methods label,
.solid-checkout #payment .payment_box,
.solid-checkout a:not(.button):not(#place_order),
.solid-checkout .woocommerce-info,
.solid-checkout .woocommerce-info::before {
  color: var(--primary) !important;
}
.solid-checkout a:not(.button):not(#place_order):hover {
  color: var(--brand-ink) !important;
}

/* Hide the page-level "have a coupon" notice + login form WC
   normally renders at the top of the checkout. These come from
   the woocommerce_before_checkout_form action which our override
   skips, but the WC notice block sometimes still gets injected by
   themesflat's wrappers — defensive hide. */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout .checkout-step,
.woocommerce-checkout .checkout-steps {
  display: none !important;
}

@media (max-width: 991px) {
  .solid-checkout .solid-checkout__inner {
    flex-direction: column !important;
    gap: 40px !important;
    padding: 0 24px;
  }
  /* Match the desktop rules' specificity by including .col-lg-8 /
     .col-lg-4 so this override actually wins. Without the longer
     selectors the desktop `.col-lg-8.solid-checkout__form` rule
     (specificity 0,3,0) beats this block (0,2,0) even though both
     use !important — and the form stays clamped at 60% on mobile. */
  .solid-checkout .solid-checkout__form,
  .solid-checkout .col-lg-8.solid-checkout__form,
  .solid-checkout .solid-checkout__review,
  .solid-checkout .col-lg-4.solid-checkout__review {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .solid-checkout__title {
    font-size: 36px;
    line-height: 1.05;
    margin-bottom: 32px;
  }
}

/* ── Single product detail page ───────────────────────────────────── */

/* Like the shop archive, single-product pages use the warm-cream
   surface for the related-products area and a slightly cooler var(--brand-cream)
   for the main detail block. The wrapper max-width matches the
   nua-header (1515px) so the columns align with the rest of the
   site's chrome. */
body.single-product {
  background-color: var(--brand-cream);
}
/* D4 — PDP-scoped only (`.solid-product-extras` is shared with
   page-wishlist.php's upsell band, which keeps its own 80px). Tighter
   top padding here, combined with .solid-product-detail's reduced
   bottom padding above, closes up the dead-space fold. */
body.single-product .solid-product-extras {
  background-color: var(--brand-cream);
  padding-top: 56px;
}

/* Onsus's #themesflat-content padding is killed on single-product
   pages too so the detail section can pin to a clean 140px top
   margin set inside the section itself, not a residual wrapper
   inset. */
body.single-product #themesflat-content,
#themesflat-content:has(> .solid-product-page) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Outer wrapper for the single-product page — owns the breadcrumb
   row (rendered in our single-product.php) and the detail section
   below. Same warm-cream surface as the detail card so the
   breadcrumb sits on the same band. */
.solid-single-product {
  background-color: var(--brand-cream);
}
.solid-single-product__breadcrumb {
  padding-top: 30px;
}
.solid-single-product__breadcrumb-inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 48px;
}
.solid-single-product__breadcrumb .woocommerce-breadcrumb {
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: rgba(66, 72, 65, 0.8);
  margin: 0;
}
.solid-single-product__breadcrumb .woocommerce-breadcrumb a {
  color: rgba(66, 72, 65, 0.8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.solid-single-product__breadcrumb .woocommerce-breadcrumb a:hover {
  border-bottom-color: rgba(66, 72, 65, 0.8);
}

.solid-product-page {
  display: block;
}

.solid-product-detail {
  background-color: var(--brand-cream);
  padding-top: 60px;
  /* D4 — was 96px; now that the content column reliably fills with
     the D1 specs block + D2 rating, the extra reserve below the buy
     box read as dead space. Tightened; paired with the PDP-only
     .solid-product-extras padding-top reduction below (both bands
     share the cream surface, so their combined padding is what reads
     as "the fold"). */
  padding-bottom: 64px;
}
.solid-product-detail__inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  gap: 65px;
}

/* Image column — fixed 600px on desktop. The image fills the column
   square at its native aspect ratio. position: relative so the zoom
   button can absolute-position itself in the top-right corner. */
.solid-product-detail__image {
  position: relative;
  flex: 0 0 600px;
  width: 600px;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  display: block;
  overflow: hidden;
}
.solid-product-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* Zoom button — overlay icon in the top-right of the image. No
   background chip; just the magnifier glyph in primary green so it
   reads as a soft affordance over the product photo. The icon
   itself is sized via the SVG's width/height in markup; we bump
   that to 28px here and let the button auto-size to fit. */
/* Zoom button on the product image — fully bgless. !important on
   background + border + shadow because onsus / WC + the browser's
   default <button> styling all paint a chip if we don't strip every
   layer. The lightbox's close button KEEPS its white circular bg
   (rule below) per the user's "leave the bg there" note. */
.solid-product-detail__zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--primary);
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
  transition:
    color 200ms ease,
    transform 200ms ease;
}
.solid-product-detail__zoom svg {
  width: 28px;
  height: 28px;
}
.solid-product-detail__zoom:hover,
.solid-product-detail__zoom:focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--brand-ink);
  transform: scale(1.08);
  outline: none;
}

/* Lightbox modal — single global node at the bottom of the page,
   hidden by default. Fades in over the whole viewport with a dark
   overlay. The image inside scales to fit while preserving its
   aspect ratio (max 90% of the viewport). */
.solid-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 240ms ease,
    visibility 240ms ease;
}
.solid-image-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.solid-image-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 15, 0.85);
  cursor: zoom-out;
}
.solid-image-lightbox__panel {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid-image-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: zoom-out;
  background: #ffffff;
}
/* Lightbox close button — kept the white circular chip (per the
   "leave the bg there" note), just bumped the × icon to dark green
   and a touch larger so it stands out against the white chip. */
.solid-image-lightbox__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--primary);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(15, 20, 15, 0.35);
  transition:
    transform 200ms ease,
    color 200ms ease,
    background 200ms ease;
}
.solid-image-lightbox__close svg {
  width: 28px;
  height: 28px;
}
.solid-image-lightbox__close:hover,
.solid-image-lightbox__close:focus-visible {
  background: var(--primary);
  color: #ffffff;
  transform: scale(1.08);
  outline: none;
}

/* Content column — centered vertically against the image; flex
   column so children stack with the explicit margin-bottom rules
   below. */
.solid-product-detail__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.solid-product-detail__category {
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(66, 72, 65, 0.9); /* color-mix(in oklch, var(--brand-ink-soft) 90%, transparent) */
  margin: 0 0 15px;
}

.solid-product-detail__title {
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-size: 50px;
  font-weight: 600;
  font-style: normal;
  /* Tight 1.0 line-height — anything higher leaves leading the
     margin can't fight against, blowing the visual gap past
     the spec. Spec was 99.25px (a Figma absolute) which only made
     sense for a one-line headline in isolation. */
  line-height: 1;
  letter-spacing: -1.8px;
  text-transform: uppercase;
  color: var(--primary); /* primary green */
  margin: 0 0 30px;
}

/* Star rating — logo green, 14×14 stars only. WC's wc_get_rating_html
   returns a .star-rating element with overlapping ★★★★★ glyphs. We
   color them logo-green and shrink to 14px. Screen-reader / review
   count text that onsus might include is hidden (we kept only the
   rating html, but defensive in case other markup leaks in). */
.solid-product-detail__rating {
  margin: 0 0 15px;
  font-size: 14px;
  line-height: 1;
}
/* WC's .star-rating uses overlapping ★★★★★ glyphs:
   - the parent ::before draws 5 empty stars (the "track")
   - the inner span (with width:%) draws the filled stars on top
   We color the track gray and the fill logo green. */
.solid-product-detail__rating .star-rating {
  font-size: 14px;
  /* WC default is 5.4em; with our 4px letter-spacing the 5th
     star clipped (5 glyphs × 1em + 4 gaps × 4px ≈ 6.14em). Width
     bumped so all five stars render, plus a small buffer for the
     fill span's box-sizing. */
  width: 6.4em;
  height: 14px;
  letter-spacing: 4px;
}
.solid-product-detail__rating .star-rating::before {
  color: #d0d0cf; /* empty stars — gray */
  opacity: 1;
}
.solid-product-detail__rating .star-rating span::before {
  color: var(--green-500, var(--brand-lime)); /* filled stars — logo green */
}
.solid-product-detail__rating .woocommerce-review-link,
.solid-product-detail__rating .count {
  display: none;
}

.solid-product-detail__price {
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif !important;
  font-size: 40px;
  font-weight: 600;
  font-style: normal;
  /* Tight 1.0 line-height to honor the 15px gap to the previous item
     (stars). Spec was 99.25px Figma absolute which can't coexist with
     a 15px margin in a stack. */
  line-height: 1;
  letter-spacing: -1.8px;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin: 0 0 50px;
}
.solid-product-detail__price .woocommerce-Price-amount,
.solid-product-detail__price .woocommerce-Price-currencySymbol,
.solid-product-detail__price ins,
.solid-product-detail__price del {
  color: inherit;
  /* Defensive font-family on the inner spans — onsus's WC styles set
     font-family on .amount in some places and break inheritance from
     our parent .solid-product-detail__price. */
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif !important;
  font-weight: inherit;
  letter-spacing: inherit;
}
.solid-product-detail__price del {
  opacity: 0.55;
}
/* Sale price — WC wraps the new price in <ins> (semantically
   "inserted"), and every browser default-underlines <ins>. Strip
   the underline so the active price reads as a price, not a
   hyperlink. */
.solid-product-detail__price ins,
.solid-product-detail__price ins .amount,
.solid-product-detail__price ins .woocommerce-Price-amount {
  text-decoration: none;
}

/* Body / description — supports the WP block editor's lists,
   headings, icons (via Gutenberg or Classic Editor), so admins can
   add formatted content as expected. We just style typography. */
.solid-product-detail__description {
  font-family: "Inter", var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(66, 72, 65, 0.9); /* color-mix(in oklch, var(--brand-ink-soft) 90%, transparent) */
  margin: 0 0 50px;
}
.solid-product-detail__description p {
  margin: 0 0 1em;
}
.solid-product-detail__description p:last-child {
  margin-bottom: 0;
}
.solid-product-detail__description ul,
.solid-product-detail__description ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}
.solid-product-detail__description li {
  margin-bottom: 0.35em;
}

/* Quantity row — label + bordered input control with - / number / +. */
.solid-product-detail__quantity {
  margin: 0 0 50px;
}
.solid-product-detail__qty-label {
  display: block;
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 14.4px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(66, 72, 65, 0.9);
  margin: 0 0 8px;
}
.solid-product-detail__qty-input {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(66, 72, 65, 0.9);
  border-radius: 2px;
  padding: 5px 15px;
  background: transparent;
  width: auto;
}
/* Buttons + number share these resets so neither the browser's
   default button chrome (gray bg in some UAs) nor onsus's
   `.products li input[type=number]` rules leak through. All three
   children share the same fixed 20px height so they sit on a
   single horizontal centerline and the container only adds the
   5px V × 15px H ring of padding around them. */
.solid-product-detail__qty-btn,
.solid-product-detail__qty-number {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  font-family: "Inter", var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: rgba(66, 72, 65, 0.9);
  vertical-align: middle;
  box-sizing: content-box;
}
.solid-product-detail__qty-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  font-size: 16px;
}
.solid-product-detail__qty-btn:hover {
  color: var(--primary);
}
.solid-product-detail__qty-number {
  width: 40px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.solid-product-detail__qty-number::-webkit-outer-spin-button,
.solid-product-detail__qty-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.solid-product-detail__qty-number:focus {
  outline: none;
}

/* Actions row — Add to cart (75%) + heart (25%) with 15px gap. */
.solid-product-detail__actions {
  display: flex;
  align-items: stretch;
  gap: 15px;
  width: 100%;
  margin: 0;
}
.solid-product-detail__cta {
  flex: 0 0 calc(75% - 7.5px);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0 !important;
  border-radius: 3px !important;
  cursor: pointer;
  line-height: 1;
  transition:
    background 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}
.solid-product-detail__cta:hover,
.solid-product-detail__cta:focus-visible {
  background: var(--brand-ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(15, 20, 15, 0.35);
  outline: none;
}
.solid-product-detail__cta-icon {
  display: block;
  width: 15px;
  height: 19px;
  flex: 0 0 auto;
}
.solid-product-detail__cta-label {
  display: inline-block;
  line-height: 1;
}

/* Wishlist heart — var(--brand-lime) chip filling 25% of the actions row. The
   YITH default markup is hidden and our ::before mask paints an
   outlined heart by default, swapping to filled when the product is
   in the wishlist. Same pattern the shop card uses. */
.solid-product-detail__wishlist {
  flex: 0 0 calc(25% - 7.5px);
  display: flex;
}
.solid-product-detail__wishlist .yith-wcwl-add-to-wishlist,
.solid-product-detail__wishlist .yith-wcwl-add-button,
.solid-product-detail__wishlist .yith-wcwl-wishlistexistsbrowse {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* In-wishlist state cleanup — YITH renders the add-button +
   sibling browse anchor(s) + a literal "or" text node between
   them. Class names for the browse anchor vary by version
   (`wishlistaddedbrowse`, `wishlistexistsbrowse`, sometimes
   `wishlistexists`, etc.), so we hide ALL direct children of the
   wrapper EXCEPT the add-button. Text nodes (the "or") get killed
   by font-size:0 on the wrapper; we reset font-size on the
   add-button so its heart mask still shows. */
.solid-product-detail__wishlist .yith-wcwl-add-to-wishlist {
  font-size: 0 !important;
}
.solid-product-detail__wishlist
  .yith-wcwl-add-to-wishlist
  > *:not(.yith-wcwl-add-button) {
  display: none !important;
}
.solid-product-detail__wishlist .yith-wcwl-add-button {
  font-size: initial !important;
  display: block !important;
}

/* Same cleanup for the shop card heart — same plugin, same markup
   variability. */
.solid-shop-card__heart .yith-wcwl-add-to-wishlist {
  font-size: 0 !important;
}
.solid-shop-card__heart
  .yith-wcwl-add-to-wishlist
  > *:not(.yith-wcwl-add-button) {
  display: none !important;
}
.solid-shop-card__heart .yith-wcwl-add-button {
  font-size: initial !important;
  display: block !important;
}
.solid-product-detail__wishlist a {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 50px;
  padding: 0 28px !important;
  background: var(--brand-lime) !important;
  color: var(--brand-ink) !important;
  border: 0 !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: hidden;
  transition:
    background 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}
.solid-product-detail__wishlist a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(92, 101, 64, 0.35);
}
.solid-product-detail__wishlist a i,
.solid-product-detail__wishlist a svg,
.solid-product-detail__wishlist a .yith-wcwl-icon-svg,
.solid-product-detail__wishlist a span {
  display: none !important;
}

/* Once the product is already in the wishlist, YITH's React button
   (behaviour default "view" — no override is saved in this store's
   settings, confirmed via `wp option get
   yith_wcwl_after_add_to_wishlist_behaviour`) wraps the real
   <button> in <a class="yith-wcwl-add-to-wishlist-button-anchor-wrapper">
   so clicking navigates to the wishlist page. That wrapper is still
   an `a`, so it was matching the legacy chip rules above meant for
   YITH's older <a>-only markup: it got its OWN lime chip box
   (padding/width/height) plus its own outline-heart ::before,
   while the real button's SVG heart inside it got hidden by the
   `a svg` rule two blocks up. The result was two overlapping boxes
   — a synthetic heart plus an invisible empty button — competing
   for space, which shoved the visible heart to the left. Make the
   wrapper an inert pass-through so only the inner
   .yith-wcwl-add-to-wishlist-button (styled below) controls the
   box, and re-show its real icon. */
.solid-product-detail__wishlist a.yith-wcwl-add-to-wishlist-button-anchor-wrapper {
  all: unset !important;
  display: contents !important;
}
.solid-product-detail__wishlist a.yith-wcwl-add-to-wishlist-button-anchor-wrapper::before {
  content: none !important;
}
.solid-product-detail__wishlist
  a.yith-wcwl-add-to-wishlist-button-anchor-wrapper
  .yith-wcwl-icon-svg {
  display: block !important;
}

/* YITH 3.x renders the single-product wishlist as a
   <button class="yith-wcwl-add-to-wishlist-button"> (SVG heart + a text
   label), not the older <a> the chip rules above target. Left unstyled,
   the visible "Add to wishlist" label grew the button past its 25% track
   and overflowed the actions row ~52px on phones. Style the button as the
   lime heart chip and drop the label. */
.solid-product-detail__wishlist .yith-add-to-wishlist-button-block,
.solid-product-detail__wishlist .yith-wcwl-add-to-wishlist-button {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.solid-product-detail__wishlist .yith-wcwl-add-to-wishlist-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px;
  padding: 0 !important;
  background: var(--brand-lime) !important;
  border: 0 !important;
  border-radius: 3px !important;
  cursor: pointer;
  overflow: hidden;
}
.solid-product-detail__wishlist .yith-wcwl-add-to-wishlist-button__label {
  display: none !important;
}
.solid-product-detail__wishlist .yith-wcwl-icon-svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--brand-ink) !important;
}
.solid-product-detail__wishlist {
  min-width: 0;
  overflow: hidden;
}
/* Outlined heart (default) */
.solid-product-detail__wishlist a::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 19px !important;
  background-color: var(--brand-ink) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>")
    center/contain no-repeat !important;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>")
    center/contain no-repeat !important;
}
/* Filled heart (already in wishlist) — same dual selector list as
   the shop-card heart: legacy YITH wrapper classes plus the modern
   `--added` modifier YITH 3.x lands on the anchor itself. */
.solid-product-detail__wishlist .yith-wcwl-wishlistexistsbrowse a::before,
.solid-product-detail__wishlist .yith-wcwl-add-to-wishlist.exists a::before,
.solid-product-detail__wishlist a.yith-wcwl-add-to-wishlist-button--added::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>")
    center/contain no-repeat !important;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>")
    center/contain no-repeat !important;
}

/* D2 — visible review count next to the stars. WC's own .count /
   .woocommerce-review-link markup stays hidden (rule above); this is
   our own summary text so the rating reads as more than stars alone. */
.solid-product-detail__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.solid-product-detail__rating-count {
  font-family: "Inter", var(--font-sans);
  font-size: 13px;
  color: var(--brand-ink-soft);
}

/* D3 — gallery thumbnail strip. Only rendered when the product has
   more than one image; sits as a row of small squares below the main
   image, each swapping the main photo + zoom target on click. */
.solid-product-detail__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.solid-product-detail__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.solid-product-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.solid-product-detail__thumb:hover,
.solid-product-detail__thumb:focus-visible {
  border-color: var(--brand-lime);
  outline: none;
}
.solid-product-detail__thumb.is-active {
  border-color: var(--brand-ink);
}

/* D1 — specs / nutrition block. Sits below the buy box, filling what
   used to be an empty band before "Complementa tu rutina". Only
   renders rows/notes that actually exist on the product (see
   template-parts/product/specs.php) — a label/value list plus an
   optional free-form notes block sourced from the WC short
   description field. */
.solid-product-specs {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(31, 45, 161, 0.12);
}
.solid-product-specs__title {
  font-family: "Inter", var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin: 0 0 16px;
}
.solid-product-specs__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.solid-product-specs__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(31, 45, 161, 0.08);
  font-family: "Inter", var(--font-sans);
  font-size: 14px;
}
.solid-product-specs__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.solid-product-specs__label {
  margin: 0;
  color: var(--brand-ink-soft);
}
.solid-product-specs__value {
  margin: 0;
  color: var(--brand-ink);
  font-weight: 500;
  text-align: right;
}
.solid-product-specs__notes {
  margin-top: 16px;
  font-family: "Inter", var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-ink-soft);
}
.solid-product-specs__notes p {
  margin: 0 0 10px;
}
.solid-product-specs__notes p:last-child {
  margin-bottom: 0;
}

/* Extras band — "Complement your routine" related products. The
   warm-cream surface continues from the detail section above. */
.solid-product-extras {
  background-color: var(--brand-cream);
  padding: 80px 0;
}
.solid-product-extras__inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Section header — title left, "View all products" link right. The
   title block is tall (line-height 99.25px per spec) so we center
   the link vertically against it. */
.solid-product-extras__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
  flex-wrap: wrap;
}
.solid-product-extras__title {
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-size: 50px;
  font-weight: 600;
  font-style: normal;
  /* Tightened from 99.25px (≈ 2× the font size) to 1.1 so the
     title row doesn't dominate the section's vertical rhythm. */
  line-height: 1.1;
  letter-spacing: -1.8px;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0;
}

/* "Ver todos los productos" — same chrome as the homepage bestsellers
   "view all" link: 14px Inter 500 uppercase, no underline at rest,
   underline on hover, color var(--brand-ink). */
.solid-product-extras__view-all,
.solid-product-extras__view-all:link,
.solid-product-extras__view-all:visited {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-ink) !important;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}
.solid-product-extras__view-all:hover,
.solid-product-extras__view-all:focus-visible {
  color: var(--brand-ink) !important;
  border-bottom-color: var(--brand-ink);
}

/* 4-column grid of shop-grid cards (`.solid-shop-card`) — same
   component the main shop archive and the homepage strips use, so the
   visual is consistent everywhere. !important on display:grid so
   onsus's `.products li { float:left }` cascade can't sneak through if
   it ever leaks into this container. */
.solid-product-extras__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 30px 20px;
  /* This is a `<ul>` without the `.products` class, so it doesn't pick
     up WooCommerce core's `ul.products` margin/padding/list-style
     reset the way the main shop grid does — reset explicitly. List
     markers are handled by the `.solid-shop-card-li` reset elsewhere. */
  margin: 0;
  padding: 0;
}
/* Direct `<li>` children sit naturally as grid items — same
   `.solid-shop-card-li` the shop grid and homepage strips use.
   Resetting any width/float onsus might inject so the 4-column
   track-sizing wins. */
.solid-product-extras__grid > .solid-shop-card-li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* The third-party / upsells band below stays clean of the section
   header; just inherits the warm-cream surface and inner gutters. */
.solid-product-extras--hooks {
  padding-top: 0;
}

@media (max-width: 991px) {
  .solid-product-extras__title {
    font-size: 28px;
  }
  .solid-product-extras__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: convert the 4-card grid into a horizontal scroll-snap
   carousel so users can swipe through products one at a time
   instead of scrolling a tall stacked column. Each card snaps to
   the centre of the viewport with a peek of the next on the
   right edge. Native scrollbar hidden; touch-swipe handled by
   the browser's overflow-x: auto. */
@media (max-width: 480px) {
  .solid-product-extras__grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 4px 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .solid-product-extras__grid::-webkit-scrollbar {
    display: none;
  }
  .solid-product-extras__grid > .solid-shop-card-li {
    flex: 0 0 80%;
    max-width: 320px;
    scroll-snap-align: center;
  }
}

/* Responsive — tablet + mobile collapse to a single column. */
@media (max-width: 991px) {
  .solid-single-product__breadcrumb {
    padding-top: 20px;
  }
  .solid-single-product__breadcrumb-inner {
    padding: 0 24px;
  }
  .solid-product-detail {
    padding-top: 40px;
    padding-bottom: 64px;
  }
  .solid-product-detail__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 0 24px;
  }
  .solid-product-detail__image {
    flex: 0 0 auto;
    width: 100%;
  }
  .solid-product-detail__title {
    font-size: 36px;
    line-height: 1.05;
  }
  .solid-product-detail__price {
    font-size: 30px;
    line-height: 1.05;
  }
  .solid-product-extras {
    padding: 56px 0;
  }
  .solid-product-extras__inner {
    padding: 0 24px;
  }
}
@media (max-width: 640px) {
  .solid-product-detail__title {
    font-size: 28px;
  }
  .solid-product-detail__price {
    font-size: 24px;
    margin-bottom: 32px;
  }
  .solid-product-detail__description {
    margin-bottom: 32px;
  }
  .solid-product-detail__quantity {
    margin-bottom: 32px;
  }
}

/* JS for the +/- quantity buttons — added inline by the template's
   bottom script via JS. CSS-only setup above gives the visual; the
   button clicks need a small handler we wire from style.css's sibling
   home.js or via inline script. (Inline script lives at the bottom
   of content-single-product.php.) */

/* Onsus injects `.header-cart-wrapper .nav-shop-cart svg { margin:
   78px 0 23px !important }` (intended for their footer-shop cart
   icon block) which leaks into every SVG inside our drawer — close
   button, empty-state bag, trash icon. Reset margin on every SVG
   inside the drawer so none of them inherit those huge offsets. */
.header-cart-wrapper .nav-shop-cart.solid-mini-cart svg,
.solid-mini-cart svg {
  margin: 0 !important;
}

/* ── Mini-cart drawer (NUA design) ───────────────────────────────── */
/* Replaces onsus's default chrome inside .nav-shop-cart with the new
   two-state layout: empty state (centered bag icon + helper copy +
   shop CTA) and filled state (item rows with image / info / qty /
   line total / trash + total row + pay button). The wrapper itself
   still uses onsus's `.nav-shop-cart.active-minicart` toggle so
   add-to-cart fragment refreshes keep working. */

/* Drawer frame — clean white surface, 600px wide on desktop, 65px
   horizontal padding (per spec), 24px top, 0 bottom so the empty-
   state CTA hugs the very bottom of the viewport. Filled state's
   own footer band keeps its breathing room via internal padding. */
.solid-mini-cart {
  background: #ffffff !important;
  padding: 24px 65px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 70vh !important;
  /* Drawer is 100vh tall (from onsus's position:fixed top:0 bottom:0).
     overflow-y: auto lets the drawer scroll when items exceed
     viewport height; the footer below uses position: sticky so the
     Pay button stays visible at the drawer's bottom edge while the
     items list scrolls behind it. */
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Slim scrollbar — Firefox via `scrollbar-width: thin`, WebKit
     via the ::-webkit-scrollbar pseudos below. */
  scrollbar-width: thin;
  scrollbar-color: rgba(66, 72, 65, 0.4) transparent;
}
.solid-mini-cart::-webkit-scrollbar {
  width: 4px;
}
.solid-mini-cart::-webkit-scrollbar-track {
  background: transparent;
}
.solid-mini-cart::-webkit-scrollbar-thumb {
  background: rgba(66, 72, 65, 0.4);
  border-radius: 2px;
}
.solid-mini-cart::-webkit-scrollbar-thumb:hover {
  background: rgba(66, 72, 65, 0.6);
}
.header-cart-wrapper .nav-shop-cart.solid-mini-cart {
  width: 600px !important;
  max-width: 100% !important;
}

/* ── Mini-cart drawer positioning (replaces onsus's base layer) ─────
   onsus's stylesheet used to make `.header-cart-wrapper .nav-shop-cart`
   a fixed slide-in drawer and `.minicar-overlay` a fading backdrop.
   With onsus removed, the drawer was rendering inline as a 900px block
   inside <body>, pushing the homepage hero off-screen. Re-stating the
   minimum positioning rules below — matched 1:1 to the prod computed
   styles — so the drawer hides off the right edge until toggled. */
.header-cart-wrapper.nua-mini-cart-host {
  position: relative;
  height: 0;
}
.header-cart-wrapper .nav-shop-cart.solid-mini-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  will-change: transform;
}
.header-cart-wrapper .nav-shop-cart.solid-mini-cart.active-minicart {
  transform: translateX(0);
}
.header-cart-wrapper .minicar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: -9999;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s, z-index 0s linear 0.3s;
}
body.active-minicart .header-cart-wrapper .minicar-overlay {
  opacity: 1;
  visibility: visible;
  z-index: 999998;
  transition: opacity 0.3s ease, visibility 0s linear 0s, z-index 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .header-cart-wrapper .nav-shop-cart.solid-mini-cart,
  .header-cart-wrapper .minicar-overlay {
    transition: none;
  }
}

/* Header — "YOUR CART" title with logo-green underline + close X. */
.solid-mini-cart__header {
  position: relative;
  padding: 0 !important;
  margin: 0 0 24px !important;
  border-bottom: 1px solid var(--primary) !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.solid-mini-cart__title {
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-size: 40px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -1.8px;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}
.solid-mini-cart__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent !important;
  border: 0 !important;
  color: var(--primary) !important;
  cursor: pointer;
  padding: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
  /* Override onsus's `.minicart-close { ::before/::after }` pseudo
     "X" — we render an SVG inside instead. !important is needed
     because onsus's pseudos draw their own X glyph. */
}
.solid-mini-cart__close::before,
.solid-mini-cart__close::after {
  display: none !important;
  content: none !important;
}
.solid-mini-cart__close svg {
  display: block;
  width: 28px;
  height: 28px;
  stroke: currentColor;
}
.solid-mini-cart__close:hover {
  color: var(--brand-ink) !important;
}

.solid-mini-cart__content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* ── Filled state ───────────────────────────────────────────────── */
/* Item rows: 135px image left, 10px gap, content column right with
   brand on top, then [name | line total] row, then [unit | qty |
   trash] row. 60px between every item AND from the top + bottom of
   the list, per spec. */
.solid-mini-cart__items {
  list-style: none !important;
  margin: 0 !important;
  padding: 60px 0 !important;
  display: flex;
  flex-direction: column;
  gap: 60px;
  /* No internal scroll on the list — the drawer itself scrolls
     when content exceeds the viewport, and the sticky footer stays
     pinned to the visible bottom edge. flex: 1 still lets the list
     fill the drawer when content is short, so the footer stays at
     the bottom even with a single item. */
  flex: 1 1 auto;
  min-height: 0;
}
/* Each cart item — 2-column grid: 135px image | 10px gap | content.
   The aggressive `!important` chain here is to beat onsus's
   `.widget_shopping_cart_content ul li { display:inline-block;
   padding-left:134px !important; min-height:162px }` rule which
   was making the layout collapse to a single block with weird
   padding inside. */
.solid-mini-cart__item {
  display: grid !important;
  grid-template-columns: 135px 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  list-style: none !important;
  position: static !important;
}
.solid-mini-cart__item-thumb {
  width: 135px;
  height: 135px;
  display: block;
  background: var(--brand-cream);
  overflow: hidden;
  border-radius: 4px;
}
/* Image inside the thumb — has to beat onsus's
   `.widget_shopping_cart_content ul li a img { position: absolute; ... }`
   rule, which absolutely positions the img to top:20px / left:0 of
   the LI and would escape our 135x135 anchor entirely. We bump
   specificity with the full ancestor chain and reset every
   position-related property. */
.solid-mini-cart__item-thumb img,
.solid-mini-cart .solid-mini-cart__item-thumb img,
.nav-shop-cart .solid-mini-cart__item-thumb img,
.widget_shopping_cart_content ul li .solid-mini-cart__item-thumb img,
.widget_shopping_cart_content ul li a.solid-mini-cart__item-thumb img {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  float: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Thumb anchor itself — make sure it's a static-flow grid cell, not
   an inline element collapsed to zero by an absolute-positioned img.
   Onsus's `.widget_shopping_cart_content ul li a` rule applies; we
   override at the same selector specificity with the chained class. */
.solid-mini-cart__item-thumb,
.solid-mini-cart .solid-mini-cart__item-thumb,
.widget_shopping_cart_content ul li a.solid-mini-cart__item-thumb {
  position: relative !important;
  width: 135px !important;
  height: 135px !important;
  display: block !important;
  background: var(--brand-cream) !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  flex: 0 0 135px;
}

/* Override onsus's `.widget_shopping_cart_content ul li` rules which
   set padding-left:134px + min-height:162px (intended for their own
   absolute-positioned thumb layout). They conflict with our 2-column
   grid and would push content past the drawer's right edge. The
   `width: 100%` rule makes each item fill the drawer's available
   width (600px - 48px padding = 552px on desktop). */
.solid-mini-cart
  .widget_shopping_cart_content
  ul.solid-mini-cart__items
  > li.solid-mini-cart__item,
.solid-mini-cart__items > .solid-mini-cart__item {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 135px 1fr !important;
  column-gap: 10px !important;
  box-sizing: border-box !important;
}
.solid-mini-cart .solid-mini-cart__items {
  width: 100% !important;
}

/* Right column — brand stacked on top, then [name | total] row,
   then [unit | qty | trash] row, with 10px between each block. */
.solid-mini-cart__item .solid-mini-cart__item-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-width: 0;
  width: 100%;
}

/* Name + line total row — name truncates with ellipsis if too
   long; the title attribute on the <h3> shows the full name on
   hover. Both elements stay var(--brand-ink) with no hover color shift. */
.solid-mini-cart__item .solid-mini-cart__item-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100%;
}
.solid-mini-cart__item-brand {
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(66, 72, 65, 0.9); /* color-mix(in oklch, var(--brand-ink-soft) 90%, transparent) */
}
.solid-mini-cart__item-name,
.solid-mini-cart__item-total {
  font-family: "Inter", var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  line-height: 14.4px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-ink) !important;
  margin: 0;
}
.solid-mini-cart__item-name {
  /* Ellipsis truncation when the name is too long for the row.
     padding-right reserves a comfortable gap before the line total
     so the ellipsis appears earlier and the two never visually
     touch. The title attribute on the <h3> in the template
     surfaces the full name as a native browser tooltip on hover. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 24px;
}
.solid-mini-cart__item-name a,
.solid-mini-cart__item-name a:hover,
.solid-mini-cart__item-name a:focus,
.solid-mini-cart__item-name a:visited {
  color: var(--brand-ink) !important;
  text-decoration: none;
  /* Anchor inherits the parent's truncation rules — display:block
     keeps the ellipsis behavior intact. */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.solid-mini-cart__item-total {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.solid-mini-cart__item-total .woocommerce-Price-amount,
.solid-mini-cart__item-total ins,
.solid-mini-cart__item-total del {
  color: var(--brand-ink) !important;
}

/* Bottom row — three items spread across the row: unit price at
   the start, qty controls in the middle, trash at the end. */
.solid-mini-cart__item .solid-mini-cart__item-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100%;
}
/* Unit price — 12px Inter 400, color color-mix(in oklch, var(--brand-ink-soft) 90%, transparent). Onsus sets a bigger
   font-size on `.widget_shopping_cart_content ul li .amount`, so we
   force 12px on all the inner price spans too. */
.solid-mini-cart__item-unit,
.solid-mini-cart__item-unit .woocommerce-Price-amount,
.solid-mini-cart__item-unit .woocommerce-Price-currencySymbol,
.solid-mini-cart__item-unit ins,
.solid-mini-cart__item-unit del,
.solid-mini-cart__item-unit ins .woocommerce-Price-amount,
.solid-mini-cart__item-unit del .woocommerce-Price-amount {
  color: rgba(66, 72, 65, 0.9) !important; /* color-mix(in oklch, var(--brand-ink-soft) 90%, transparent) */
  font-family: "Inter", var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* Qty chip — bordered, compact (smaller padding than the product
   detail input so it stays on the same horizontal centerline as the
   12px unit price and 24px trash icon in the bottom row). */
.solid-mini-cart__item-qty {
  display: inline-flex;
  align-items: center;
  align-self: center;
  border: 1px solid rgba(66, 72, 65, 0.9);
  border-radius: 2px;
  padding: 2px 10px;
  width: max-content;
  height: auto;
  line-height: 1;
}
.solid-mini-cart__qty-btn,
.solid-mini-cart__qty-value {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: "Inter", var(--font-sans);
  font-size: 12px !important;
  line-height: 16px !important;
  height: 16px;
  color: rgba(66, 72, 65, 0.9);
}
.solid-mini-cart__qty-btn {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px !important;
}
.solid-mini-cart__qty-btn:hover {
  color: var(--primary);
}
.solid-mini-cart__qty-value {
  width: 20px;
  text-align: center;
  display: inline-block;
}

/* Trash — bottom row, end. Reset every margin / position rule
   that onsus or WC's default `.remove` styling might inject (their
   `.widget_shopping_cart_content ul li a.remove { position:
   absolute; top:50%; transform:translateY(-50%) }` is the main
   culprit when the WC fragment refreshes and re-adds the .remove
   class). align-self: center keeps it on the same horizontal
   centerline as the unit price + qty chip. */
.solid-mini-cart__item-remove,
.solid-mini-cart .solid-mini-cart__item-remove,
.widget_shopping_cart_content ul li a.solid-mini-cart__item-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  background: transparent !important;
  color: rgba(66, 72, 65, 0.7) !important;
  text-decoration: none !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  transition: color 200ms ease;
}
.solid-mini-cart__item-remove svg {
  display: block;
  width: 18px;
  height: 18px;
}
.solid-mini-cart__item-remove:hover {
  color: #c7364f;
}
/* WC's default .remove `&times;` glyph is hidden — our SVG renders
   instead. */
.solid-mini-cart__item-remove::before {
  display: none !important;
}

/* ── Mini-cart item structure (canonical, late in cascade so this
       block wins any earlier conflicts and onsus's selectors) ──────
   Layout per spec — switched to flex (was grid) because something
   in the cascade was breaking grid-template-columns and stacking
   the children vertically. Flex with `flex: 0 0 135px` on the thumb
   + `flex: 1 1 auto` on the content is bulletproof:
   - 135px image (left)  →  10px gap  →  content column (1fr right)
   - Content column: brand → [name | line total] → [unit | qty |
     trash], 10px between blocks.
   - 60px vertical gutter only (above/below/between items); never
     horizontal padding on items themselves. */
.solid-mini-cart
  .widget_shopping_cart_content
  ul.solid-mini-cart__items
  > li.solid-mini-cart__item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  list-style: none !important;
  position: static !important;
  float: none !important;
}

/* Image cell — fixed 135x135 flex item, won't grow or shrink. */
.solid-mini-cart__item > .solid-mini-cart__item-thumb {
  flex: 0 0 135px !important;
  width: 135px !important;
  height: 135px !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--brand-cream) !important;
  border-radius: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}

/* Right column — flex item that takes the remaining width, internal
   flex column with 10px between blocks. */
.solid-mini-cart__item > .solid-mini-cart__item-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Name + line total — same line, justify between, name truncates
   with ellipsis when overflowing, both var(--brand-ink) (no hover shift). */
.solid-mini-cart__item
  > .solid-mini-cart__item-content
  > .solid-mini-cart__item-top {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bottom row — three items spread across: unit price (start),
   qty controls (middle), trash (end). */
.solid-mini-cart__item
  > .solid-mini-cart__item-content
  > .solid-mini-cart__item-bottom {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer — total row + Pay button. `position: sticky; bottom: 0`
   keeps the Pay button pinned to the drawer's visible bottom edge
   even when the items list is taller than the viewport and the
   drawer scrolls. `margin-top: auto` keeps the footer at the
   bottom of short carts (single item case) where the drawer
   doesn't need to scroll. 80px padding-bottom (+ safe-area-inset-bottom)
   puts the wishlist link clear of the drawer's bottom edge and the iOS
   home-indicator / Android gesture bar. */
.solid-mini-cart__footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding-top: 16px;
  padding-bottom: 80px;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 5;
}
.solid-mini-cart__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.solid-mini-cart__total-label,
.solid-mini-cart__total-value {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.solid-mini-cart__total-value .woocommerce-Price-amount,
.solid-mini-cart__total-value ins,
.solid-mini-cart__total-value del {
  color: inherit;
}
/* Shared button typography for both the empty-state "Shop" CTA
   and the filled-state "Pay" button. Spec: Inter 400 / 12px /
   line-height 14.4px / 1.2px tracking / uppercase / white. */
.solid-mini-cart__checkout,
.solid-mini-cart__shop-cta {
  display: block;
  width: 100%;
  padding: 18px 18px !important;
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  font-family: "Inter", var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-style: normal;
  line-height: 14.4px !important;
  letter-spacing: 1.2px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 0 !important;
  border-radius: 3px !important;
  cursor: pointer;
  transition:
    background 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}
.solid-mini-cart__checkout:hover,
.solid-mini-cart__checkout:focus-visible,
.solid-mini-cart__shop-cta:hover,
.solid-mini-cart__shop-cta:focus-visible {
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(15, 20, 15, 0.4);
  outline: none;
}

/* "View wishlist" link below the Pay button — uppercase
   underlined primary-green text link, centered. */
.solid-mini-cart__wishlist-link,
.solid-mini-cart__wishlist-link:link,
.solid-mini-cart__wishlist-link:visited {
  display: block;
  width: 100%;
  margin-top: 32px;
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-ink);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 200ms ease;
}
.solid-mini-cart__wishlist-link:hover,
.solid-mini-cart__wishlist-link:focus-visible {
  color: var(--brand-ink);
  outline: none;
}

/* ── Empty state ────────────────────────────────────────────────── */
/* The drawer's outer .solid-mini-cart already provides the 65px
   side gutters and 35px bottom (where the CTA lands). Bag icon
   centered up top → 20px margin → two text lines styled identically,
   then `margin-top: auto` on the CTA pushes it against the drawer's
   bottom padding. */
.solid-mini-cart__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  align-items: center;
  text-align: center;
  padding: 0;
  min-height: 70vh;
}
/* Icon + text group — `margin: auto 0` on the message wrapper
   absorbs all available vertical space evenly above and below it,
   centering the group while the CTA naturally sits at the bottom. */
.solid-mini-cart__empty-message {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.solid-mini-cart__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green-500, var(--brand-lime));
  margin: 0 0 20px;
}
.solid-mini-cart__empty-line {
  font-family: "Inter", var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  /* Was 14.4px (below the font size itself, so wrapped lines
     overlapped). Bumped to 26px so wrapping text has comfortable
     breathing room between lines. */
  line-height: 26px;
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin: 0;
}
.solid-mini-cart__empty-line + .solid-mini-cart__empty-line {
  margin-top: 8px;
}
/* Empty-state CTA pinning — the shared typography rule above gives
   the look; this just pins the CTA to the bottom of the drawer
   column so it sits in the same place as the Pay button in the
   filled state. */
.solid-mini-cart__shop-cta {
  margin-top: auto;
}

/* ── Cart drawer + checkout page CTAs — brand green palette ─────────
   Onsus paints these with `var(--theme-accent-color)` (a teal-ish
   default) hovering to `var(--theme-primary-color)`. We override
   them to the NUA brand greens — base var(--brand-ink) lifting to var(--brand-ink)
   on hover — so the mini-cart sidebar, cart page checkout button,
   and the checkout page's "Place order" button all match the rest
   of the site's CTAs. */
.nav-shop-cart .woocommerce-mini-cart__buttons .button,
.nav-shop-cart .button.wc-forward,
.nav-shop-cart .button.checkout,
.woocommerce-page .wc-proceed-to-checkout .button,
.woocommerce-page #payment #place_order,
.woocommerce-cart .actions .button,
.woocommerce-checkout #place_order {
  background-color: var(--brand-ink) !important;
  color: #ffffff !important;
  border: 0 !important;
}
.nav-shop-cart .woocommerce-mini-cart__buttons .button:hover,
.nav-shop-cart .button.wc-forward:hover,
.nav-shop-cart .button.checkout:hover,
.woocommerce-page .wc-proceed-to-checkout .button:hover,
.woocommerce-page #payment #place_order:hover,
.woocommerce-cart .actions .button:hover,
.woocommerce-checkout #place_order:hover {
  background-color: var(--brand-ink) !important;
  color: #ffffff !important;
}

/* ── Shop archive page (NUA override) ─────────────────────────────── */

/* Banner under the header on the shop archive — full-bleed bg image
   with a subtle dark overlay for legibility, centered "Our Products"
   title in white. Image is admin-overridable via the
   solid_client_shop_banner option (set in archive-product.php). */
/* Shop archive (and product category / tag) page background — warm
   cream that matches the bestsellers section on the homepage so the
   shop reads as part of the same brand surface. Targets all the
   archive body classes WC adds. */
body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_tag,
body.archive.woocommerce {
  background-color: var(--brand-cream);
}

/* Banner: fixed 475px on desktop, butted up against the header (no
   margin/padding above the section). Onsus injects inline padding
   on #themesflat-content via Customizer (`content_controls` option)
   — a high-specificity inline style. We zero it out on any page that
   contains our banner using :has(), so the banner renders edge-to-
   edge under the header. Affects shop + product category/tag
   archives without touching other pages. */
#themesflat-content:has(> .solid-shop-banner),
#themesflat-content:has(.solid-shop-banner) {
  padding-top: 0 !important;
}
.woocommerce .solid-shop-banner,
.archive .solid-shop-banner {
  margin-top: 0;
}
.solid-shop-banner {
  position: relative;
  width: 100%;
  height: 475px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.solid-shop-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000000b5;
  z-index: 0;
}
.solid-shop-banner__inner {
  position: relative;
  z-index: 1;
  padding: 48px 24px;
  text-align: center;
}
.solid-shop-banner__title {
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-size: 50px;
  font-weight: 600;
  font-style: normal;
  line-height: 99.25px;
  letter-spacing: -1.8px;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--green-500, var(--brand-lime)); /* logo light green */
  margin: 0;
  text-shadow: 0 2px 16px rgba(15, 20, 15, 0.4);
}
@media (max-width: 991px) {
  .solid-shop-banner {
    height: 360px;
  }
  .solid-shop-banner__title {
    font-size: 40px;
    line-height: 1.15;
  }
}
@media (max-width: 640px) {
  .solid-shop-banner {
    height: 240px;
  }
  .solid-shop-banner__title {
    font-size: 28px;
    line-height: 1.15;
  }
}

/* More breathing room above the product categories carousel — the
   100px gap on desktop is enough that the banner reads as its own
   block before the categories begin. */
.wrap-product-category {
  margin-top: 100px;
}
@media (max-width: 991px) {
  .wrap-product-category {
    margin-top: 60px;
  }
}
@media (max-width: 640px) {
  .wrap-product-category {
    margin-top: 40px;
  }
}

/* Toolbar — single right-aligned column. Source order in the override
   template is view-as → sort → showing, so the visual order top-to-
   bottom matches what was requested. The 15px gap in the stack puts
   even vertical breathing room between the three rows.
   We force full container width + zero horizontal padding so the
   stack's right edge lines up with the categories carousel above
   and the products grid below — onsus's `.woocommerce-page
   #content-wrap .meta-wrap { padding:8px 0; border:1px solid... }`
   is the offending style we override. */
.solid-shop-toolbar {
  display: flex;
  justify-content: flex-end;
  /* Increased from 50px → 80px so the "Ver como / Sort / Showing" stack
     sits clearly below the category circles strip instead of crowding
     it. Per polish round 3 user feedback. */
  margin-bottom: 80px;
  margin-top: 24px;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.solid-shop-toolbar__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 15px;
  min-width: 220px;
}

/* View-as row — label + grid/list icons. Border on the icon buttons
   is removed (no chrome); icons get the requested olive color and the
   label gets the brand mid-green. !important is needed to win against
   onsus's `.woocommerce-page .content-woocommerce ...` cascade. */
.solid-shop-toolbar__view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.solid-shop-toolbar__view .label-toggle-products-layout {
  margin-right: 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-ink);
}
/* Both icons share the same 32×32 frame and 20×20 SVG glyph so
   they render at identical visual size. The PHP renders inline
   SVGs (replaced onsus's icon-font glyphs which had mismatched
   intrinsic sizes that font-size couldn't normalize). */
.solid-shop-toolbar__view .toggle-products-layout-button {
  border: 0 !important;
  background: transparent !important;
  color: var(--brand-ink) !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin-left: 4px !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.solid-shop-toolbar__view .toggle-products-layout-button::before {
  display: none !important;
}
.solid-shop-toolbar__view-icon {
  width: 20px;
  height: 20px;
  display: block;
}
/* Idle: primary forest green (var(--brand-ink)). Active + hover: brand
   lime (#c5d202) so the selected layout pops as the logo accent. */
.solid-shop-toolbar__view .toggle-products-layout-button:hover,
.solid-shop-toolbar__view .toggle-products-layout-button.active {
  color: var(--accent-lime, #c5d202) !important;
}

/* Sort dropdown — slimmer than onsus default; primary-green border;
   custom text color. The padding override is what shrinks the height
   (onsus uses 15px/17px vertical padding by default). */
.solid-shop-toolbar__sort .woocommerce-ordering {
  margin: 0;
}
.solid-shop-toolbar__sort .woocommerce-ordering select {
  min-width: 220px;
  height: auto !important;
  padding: 8px 28px 8px 14px !important;
  border: 1px solid var(--brand-ink) !important;
  border-radius: 2px !important;
  color: var(--brand-ink) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  background-color: var(--brand-cream) !important;
}

/* Showing X-Y of Z — same mid-green as the view-as label so the
   right-rail reads as one connected control group. */
.solid-shop-toolbar__count .woocommerce-result-count {
  margin: 0;
  font-size: 13px;
  text-align: right;
  color: var(--brand-ink);
}

/* On mobile, the stack still right-aligns its children but stretches
   to full width so the sort dropdown doesn't sit alone in a tiny
   220px column on the right edge of the viewport. */
@media (max-width: 640px) {
  .solid-shop-toolbar {
    justify-content: stretch;
  }
  .solid-shop-toolbar__stack {
    width: 100%;
    align-items: flex-end;
  }
  .solid-shop-toolbar__sort .woocommerce-ordering select {
    min-width: 0;
    width: 100%;
  }
}

/* ── Shop product cards (NUA image-overlay style) ─────────────────── */

/* The <li> wrapper (Homepage::renderShopCard()) inherits onsus's
   flex/grid sizing when it's a WooCommerce loop `<li>`; we make it
   relative + zero out onsus's default 15px padding on .inner (we don't
   render .inner anymore — but onsus's `.products li .inner { padding:
   15px }` rule still tries to win, so we reset our own card to its
   content edges). Also covers the homepage strips + related-products
   bands, which render the identical `<li class="solid-shop-card-li">`
   outside a `.products` ancestor. */
.products .solid-shop-card-li,
.home-bestsellers-v2__grid .solid-shop-card-li,
.solid-product-extras__grid .solid-shop-card-li {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  /* A grid item's automatic minimum size is its MIN-CONTENT, not zero —
     so one unbreakable child can force its whole track wider than the
     container. `.solid-shop-card__brand` is `white-space: nowrap`, and
     since the 2026-07-22 reorganization a product belongs to both its
     subcategory and its parent, so that line grew from "Hidratación y
     electrolitos" to "Hidratación y electrolitos, Tabletas y cápsulas"
     (~399px). Every column was pushed to 431px, five of them to 2155px
     inside a 1377px container, and the shop grid overflowed the page to
     the right. `min-width: 0` lets the tracks shrink as intended; the
     brand's existing overflow/ellipsis then does its job. */
  min-width: 0;
}

/* Card frame — fixed 3:4 portrait aspect so the image always fills
   without cropping the entire shape. The product's image becomes the
   card's background; text + actions are overlay layers above it. */
.solid-shop-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--brand-cream);
  border-radius: 0;
  isolation: isolate;
  transition:
    transform 240ms ease,
    box-shadow 240ms ease;
}
.solid-shop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(15, 20, 15, 0.35);
}

/* Whole-card link — the title/brand/price overlay sits inside this
   anchor so the entire card surface is clickable. The icon + CTA
   layers sit OUTSIDE the link so their own clicks don't bubble to
   the card permalink. */
.solid-shop-card__link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: inherit;
  z-index: 1;
}

.solid-shop-card__img {
  position: absolute;
  inset: 0;
  /* `!important` overrides WC core's
     `.woocommerce ul.products li.product a img { height: auto; }` from
     woocommerce.css, which is more specific than our class-only selector
     and would otherwise collapse the image to its natural aspect ratio
     (~341×342 square), leaving an empty band below it inside the 3:4
     card frame. */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.solid-shop-card:hover .solid-shop-card__img {
  transform: scale(1.04);
}

/* Top-left badges — sale percentage or "NEW" pill. Above all overlay
   layers (z-index 4 ≥ icons/CTA's 3) so they stay visible during
   hover too. pointer-events:none lets clicks pass through to the
   underlying card link. */
.solid-shop-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  pointer-events: none;
  line-height: 1;
  color: #ffffff;
}
.solid-shop-card__badge--sale {
  background: var(--primary); /* var(--brand-ink) brand dark green */
}
.solid-shop-card__badge--new {
  background: #bed100;
}

/* Permanent tone overlay — white-to-dark gradient blended onto the
   product image with mix-blend-mode: multiply. Sits above the <img>
   inside the link's local stacking context (z-index 1) so it darkens
   the photo, but below the text overlay (z-index 2) and the hover
   icons / CTA (z-index 3 outside the link), so those layers stay
   sharp and undimmed. Renders regardless of hover state. */
.solid-shop-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-ink-soft) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Bottom text overlay — gradient backdrop fades the image behind the
   text just enough to keep brand/name/price legible without making
   the whole image dark. Brand and price stay white; product name uses
   the brand light-green so it pops as the focal element. */
.solid-shop-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px 18px;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(15, 20, 15, 0.72) 0%,
    rgba(15, 20, 15, 0.45) 55%,
    rgba(15, 20, 15, 0) 100%
  );
  pointer-events: none;
  display: flex;
  flex-direction: column;
  transition: opacity 220ms ease;
}
/* On hover the bottom text overlay fades out so the CTA owns the
   bottom band instead of stacking under the brand/name/price. */
.solid-shop-card:hover .solid-shop-card__overlay,
.solid-shop-card:focus-within .solid-shop-card__overlay {
  opacity: 0;
}
/* Shop-bag icon inside the "Al carrito" CTA — sits to the left of
   the label with a 12px gap. The SVG ships with fill="white" so it
   matches the white CTA text on the green button. display: block
   on the icon strips the default <img> baseline alignment and
   line-height: 1 on the label removes the extra typographic
   leading, so the flex container's align-items: center can land
   both children on the same vertical centerline. */
.solid-shop-card__cta-icon {
  display: block;
  /* Same specificity battle as `.solid-shop-card__img` above: WC core's
     `.woocommerce ul.products li.product a img { height: auto }` is more
     specific than our class-only selector and otherwise stretches this
     tiny shopping-bag SVG to ~317×400 (fills the entire card on hover). */
  width: 15px !important;
  height: 19px !important;
  max-width: 15px !important;
  flex: 0 0 auto;
}
.solid-shop-card__cta-label {
  display: inline-block;
  line-height: 1;
}
.solid-shop-card__cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  line-height: 1;
}
.solid-shop-card__brand {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 10px;
}
.solid-shop-card__name {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--green-500, var(--brand-lime)); /* logo light green */
  margin: 0 0 10px;
}
.solid-shop-card__price {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.solid-shop-card__price .amount,
.solid-shop-card__price ins,
.solid-shop-card__price del {
  color: inherit;
}
.solid-shop-card__price del {
  opacity: 0.55;
}

/* Hover-only icons (heart + compare) — top-right stack. We hijack
   YITH's and Smart Compare's emitted markup with shape resets so the
   visual is two clean square chips; YITH/woosc still receive the
   click and run their own handlers. */
.solid-shop-card__icons {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 200ms ease,
    transform 200ms ease;
  pointer-events: none;
}
.solid-shop-card:hover .solid-shop-card__icons,
.solid-shop-card:focus-within .solid-shop-card__icons {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Heart chip — var(--brand-lime) background, #5C6540 strokes. We hide YITH's
   own Font Awesome glyph and any text, then paint the heart icon as
   a mask-image on ::before. Two states:
   - Not in wishlist: YITH renders `.yith-wcwl-add-button` → outlined heart
   - In wishlist:     YITH renders `.yith-wcwl-wishlistexistsbrowse.exists`
                      → filled heart
   The chip styling is identical in both states so the only thing
   that swaps on add/remove is the mask SVG. */
.solid-shop-card__heart {
  display: inline-flex;
}
.solid-shop-card__heart .yith-wcwl-add-to-wishlist,
.solid-shop-card__heart .yith-wcwl-add-button,
.solid-shop-card__heart .yith-wcwl-wishlistexistsbrowse {
  margin: 0 !important;
  padding: 0 !important;
}
.solid-shop-card__heart a,
.solid-shop-card__heart .yith-wcwl-add-button a,
.solid-shop-card__heart .yith-wcwl-wishlistexistsbrowse a {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--brand-lime) !important;
  color: var(--brand-ink) !important;
  border: 0 !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px -3px rgba(15, 20, 15, 0.25);
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: hidden;
}
/* Hide YITH's own icon glyph + label text — YITH actually emits an
   inline <svg class="yith-wcwl-icon-svg"> (not an <i>), plus a
   <span>Add to wishlist</span>. We hide every child element of the
   anchor so only our ::before mask is left to render. */
.solid-shop-card__heart a i,
.solid-shop-card__heart a svg,
.solid-shop-card__heart a .yith-wcwl-icon-svg,
.solid-shop-card__heart a span {
  display: none !important;
}
/* Outlined heart (default — product not in wishlist) */
.solid-shop-card__heart a::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 17px !important;
  background-color: var(--brand-ink) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>")
    center/contain no-repeat !important;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>")
    center/contain no-repeat !important;
}
/* Filled heart (product is already in wishlist). The outlined rule
   above uses !important on its mask, so this rule needs !important
   too — otherwise the outlined mask wins by !important precedence
   even though this selector is more specific.
   Two markup variants supported:
   - YITH ≤ 2.x:  `.yith-wcwl-wishlistexistsbrowse` / `.exists` (legacy)
   - YITH 3.x:    `.yith-wcwl-add-to-wishlist-button--added` (current) */
.solid-shop-card__heart .yith-wcwl-wishlistexistsbrowse a::before,
.solid-shop-card__heart .yith-wcwl-add-to-wishlist.exists a::before,
.solid-shop-card__heart a.yith-wcwl-add-to-wishlist-button--added::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>")
    center/contain no-repeat !important;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>")
    center/contain no-repeat !important;
}

/* Wishlist toast — page-level confirmation that an item was added
   or removed. Slides up from the bottom-right corner, lingers 3s,
   then fades out. Driven by wishlist.js (`solid-wishlist-toast`).
   YITH's own toast lives buried inside the heart's local wrapper
   and was hard to spot; this one is impossible to miss. */
.solid-wishlist-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  max-width: 360px;
  padding: 14px 20px;
  background: var(--brand-ink);
  color: #ffffff;
  font-family: "Inter", var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 6px;
  box-shadow: 0 12px 32px -10px rgba(15, 20, 15, 0.45);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.solid-wishlist-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.solid-wishlist-toast__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background-color: #ffffff;
}
/* Added state — filled heart icon. */
.solid-wishlist-toast.is-added {
  background: var(--brand-ink);
}
.solid-wishlist-toast.is-added .solid-wishlist-toast__icon {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>") center/contain no-repeat;
}
/* Removed state — outlined heart icon. Same chip color, just the
   icon swaps to communicate the action that just happened. */
.solid-wishlist-toast.is-removed .solid-wishlist-toast__icon {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>") center/contain no-repeat;
}
/* Error state — red chip + alert icon. */
.solid-wishlist-toast.is-error {
  background: #8a2222;
}
.solid-wishlist-toast.is-error .solid-wishlist-toast__icon {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/contain no-repeat;
}
@media (max-width: 480px) {
  .solid-wishlist-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    min-width: 0;
    max-width: none;
  }
}

/* Compare chip styling removed — the Smart Compare button was pulled
   from the card template (see content-product.php) because its icon
   refused to render reliably and the comparison modal never finished
   loading other products' data. If we revisit comparison later with
   a different plugin, restore the chip + mask CSS here. */

/* Hover-only "Al carrito" CTA — slides up from the bottom edge, dark
   green chip, full-width minus 24px gutter, white text. The
   .btn-add-to-cart class is also targeted by onsus's
   `.products li .btn-add-to-cart { left:50%; transform:translateX(-50%);
   width:80% }` rule (higher specificity than ours); we use !important
   on the positioning + transform here so our transition's translateY
   doesn't clobber onsus's translateX, which would push the button to
   the right of the card instead of centering it. */
.solid-shop-card__cta-wrap {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  width: auto !important;
  z-index: 3;
  opacity: 0;
  transform: translateY(8px) !important;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  pointer-events: none;
  visibility: visible !important;
}
.solid-shop-card:hover .solid-shop-card__cta-wrap,
.solid-shop-card:focus-within .solid-shop-card__cta-wrap {
  opacity: 1;
  transform: translateY(0) !important;
  pointer-events: auto;
}
/* CTA — onsus's `.products li .btn-add-to-cart .add_to_cart` rule has
   higher specificity and sets background: var(--theme-accent-color)
   on the default state, which shows through if we don't !important
   here. We force the brand dark green by default and the deeper
   shade on hover/focus. */
.solid-shop-card__cta {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 3px !important;
  cursor: pointer;
  transition: background 180ms ease;
}
.solid-shop-card__cta:hover,
.solid-shop-card__cta:focus-visible {
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  outline: none;
}
/* Disabled CTA — product can't be added (variable, out of stock,
   external/grouped, non-purchasable). Same layout as the active CTA
   so the bottom slot stays consistent across cards; reduced opacity
   + no-pointer + neutral hover communicate "not actionable" without
   removing the affordance entirely. */
.solid-shop-card__cta--disabled,
.solid-shop-card__cta--disabled:hover,
.solid-shop-card__cta--disabled:focus-visible {
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  opacity: 0.55;
  cursor: not-allowed !important;
  pointer-events: none;
  transform: none !important;
}

/* Touch devices have no hover — keep icons + CTA visible so the
   features are still discoverable. */
@media (hover: none) {
  .solid-shop-card__icons,
  .solid-shop-card__cta-wrap {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* "Ver detalle" link — hidden in grid view (the cover link already
   takes you to the product page). Made visible only in list view
   below, where it pairs with the cart button as one of two stacked
   actions under the text column. */
.solid-shop-card__detail-cta {
  display: none;
}

/* ── Shop list view ───────────────────────────────────────────────── */
/* `.products.list` toggles from a CSS Grid of cards to a vertical
   stack where each card is a 2-column layout: 200px image | 30px gap
   | content column. The content column holds the overlay text on
   row 1 and the actions row (Ver detalle + Al carrito) on row 2.
   The `.solid-shop-card__actions` wrapper from the template makes
   the actions row a single flex item that holds both buttons
   side-by-side. */
.products.list {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
.products.list .solid-shop-card-li {
  width: 100%;
  margin-bottom: 24px;
}
.products.list .solid-shop-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  column-gap: 30px;
  align-items: start;
  aspect-ratio: auto;
  height: auto;
  min-height: 320px;
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 2px 12px -4px rgba(15, 20, 15, 0.12);
  transition:
    transform 240ms ease,
    box-shadow 240ms ease;
}
.products.list .solid-shop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(15, 20, 15, 0.22);
}

/* Image (link) — column 1, spans both rows so it fills the card's
   full height. Wider (260px) than grid view and constrained to a
   3:4 portrait so the same crop the admins saw in grid mode is
   preserved. The image gets a subtle zoom on card hover, matching
   the grid-view treatment. */
.products.list .solid-shop-card__link {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: stretch;
  inset: auto;
  width: 260px;
  aspect-ratio: 3 / 4;
  display: block;
  overflow: hidden;
}
.products.list .solid-shop-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.products.list .solid-shop-card:hover .solid-shop-card__img {
  transform: scale(1.05);
}

/* Badge — anchored to the image (column 1) so it stays as a corner
   chip on the photo, not floating in the text column. */
.products.list .solid-shop-card__badge {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  z-index: 5;
}

/* Hover icon stack (heart) — hidden in list view since the actions
   row already gives the user a clear save/buy path. Easy to bring
   back later by removing the display:none if you want the heart
   surfaced here too. */
.products.list .solid-shop-card__icons {
  display: none;
}

/* Brand / name / price overlay — column 2, row 1. Positioned in
   normal flow (no absolute), no dark gradient bg, colors switched
   to readable values on the white card surface. The grid-view
   hover rule fades the overlay to opacity:0 — we override that for
   list view via !important so the text stays put on hover. */
.products.list .solid-shop-card__overlay {
  grid-column: 2;
  grid-row: 1;
  position: static !important;
  background: none !important;
  padding: 24px 24px 0 0;
  pointer-events: auto;
  display: block;
  opacity: 1 !important;
}
.products.list .solid-shop-card:hover .solid-shop-card__overlay,
.products.list .solid-shop-card:focus-within .solid-shop-card__overlay {
  opacity: 1 !important;
}
.products.list .solid-shop-card__brand {
  color: var(--brand-ink);
  margin: 0 0 10px;
}
.products.list .solid-shop-card__name {
  color: var(--green-500, var(--brand-lime)); /* logo light green */
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.products.list .solid-shop-card__price {
  color: var(--brand-ink); /* logo green */
  font-size: 18px;
  margin: 0;
}

/* Actions row — column 2, row 2. Flex-row with both CTAs visible
   (the cta-wrap is no longer hover-only in list view). */
.products.list .solid-shop-card__actions {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  padding: 16px 24px 24px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Outlined "Ver detalle" — fills with primary green on hover and
   lifts slightly so the button feels actionable, mirroring the
   filled CTA's lift treatment. */
.products.list .solid-shop-card__detail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background 280ms ease,
    color 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}
.products.list .solid-shop-card__detail-cta:hover,
.products.list .solid-shop-card__detail-cta:focus-visible {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(55, 86, 59, 0.45);
  outline: none;
}

/* Filled "Al carrito" in list view — adds the same lift/shadow
   treatment as the outlined button on hover. The base background +
   color come from the global .solid-shop-card__cta rule above
   (which is shared between grid and list views). */
.products.list .solid-shop-card__cta {
  transition:
    background 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}
.products.list .solid-shop-card__cta:hover,
.products.list .solid-shop-card__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(15, 20, 15, 0.35);
}

/* In list view the cart wrap is reset from absolute-bottom to
   inline-flow inside the actions row, and forced visible (the
   hover-fade transition rules are bypassed via !important). */
.products.list .solid-shop-card__cta-wrap {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.products.list .solid-shop-card__cta {
  width: auto;
  padding: 12px 24px;
}

@media (max-width: 640px) {
  .products.list .solid-shop-card {
    grid-template-columns: 130px 1fr;
    column-gap: 16px;
    min-height: 220px;
  }
  .products.list .solid-shop-card__link {
    width: 130px;
  }
  .products.list .solid-shop-card__overlay {
    padding: 16px 16px 0 0;
  }
  .products.list .solid-shop-card__name {
    font-size: 18px;
  }
  .products.list .solid-shop-card__actions {
    padding: 12px 16px 16px 0;
    flex-wrap: wrap;
  }
  .products.list .solid-shop-card__detail-cta {
    padding: 10px 14px;
  }
  .products.list .solid-shop-card__cta {
    padding: 10px 16px;
  }
}

/* ══════════════════════════════════════
   Wishlist Page (page-wishlist.php +
   yith-woocommerce-wishlist/* overrides)
   ══════════════════════════════════════ */

body.page-template-page-wishlist {
  background: var(--brand-cream) !important;
}
body.page-template-page-wishlist .home-page,
body.page-template-page-wishlist .page-header,
body.page-template-page-wishlist .page-title {
  background: transparent;
}
body.page-template-page-wishlist .page-header,
body.page-template-page-wishlist .page-title {
  display: none !important;
}
/* Onsus injects inline padding on #themesflat-content; zero it
   out only on the wishlist page so the banner butts the header
   and the complement section butts the footer. */
body.page-template-page-wishlist #themesflat-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Wishlist content wrapper — 130px gap from the banner above and a
   1515px reading column matching the header/footer width. */
.solid-wishlist {
  margin-top: 130px;
  padding: 0 0 80px;
}
.solid-wishlist__inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Empty state — friendly fallback so the page doesn't render blank
   when the wishlist has no items. */
.solid-wishlist__empty {
  font-family: "Inter", var(--font-sans);
  font-size: 16px;
  color: color-mix(in oklch, var(--brand-ink-soft) 90%, transparent);
  text-align: center;
  margin: 0;
  padding: 32px 0;
}

/* Item list — flat list of horizontal cards, 60px gap between
   rows. Default UL/LI styling cleared so the rows sit flush. */
.solid-wishlist__list {
  list-style: none;
  margin: 0 0 90px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.solid-wishlist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.solid-wishlist__item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.solid-wishlist__item-thumb {
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
}
.solid-wishlist__item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  margin: 0 !important;
}
.solid-wishlist__item-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.solid-wishlist__item-cat {
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: color-mix(in oklch, var(--brand-ink-soft) 90%, transparent);
}
.solid-wishlist__item-name {
  font-family: "Bricolage Grotesque", var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 25.6px;
  letter-spacing: 0;
  color: var(--brand-ink);
  margin: 0;
  text-transform: uppercase;
}
.solid-wishlist__item-name a,
.solid-wishlist__item-name a:link,
.solid-wishlist__item-name a:visited {
  color: inherit;
  text-decoration: none;
}
.solid-wishlist__item-name a:hover {
  color: var(--brand-ink);
}

/* Right group — price, ADD TO CART, trash. Stacked horizontally
   with a comfortable gap so the price doesn't crowd the button. */
.solid-wishlist__item-right {
  display: flex;
  align-items: center;
  gap: 80px;
  flex: 0 0 auto;
}
.solid-wishlist__item-price {
  font-family: "Bricolage Grotesque", var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 25.6px;
  letter-spacing: 0;
  color: var(--brand-ink);
  white-space: nowrap;
}
.solid-wishlist__item-price .woocommerce-Price-amount,
.solid-wishlist__item-price bdi {
  color: inherit;
  font: inherit;
}

/* "ADD TO CART" per-row button — primary green, 24×80 padding per
   spec. `:link/:visited` to beat onsus link defaults. */
.solid-wishlist__add-to-cart,
.solid-wishlist__add-to-cart:link,
.solid-wishlist__add-to-cart:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  padding: 24px 80px !important;
  font-family: "Inter", var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none !important;
  border-radius: 4px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
  white-space: nowrap;
}
.solid-wishlist__add-to-cart:hover {
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Trash — borderless icon button in the same forest green. */
.solid-wishlist__remove,
.solid-wishlist__remove:link,
.solid-wishlist__remove:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--brand-ink);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background 0.2s ease;
  text-decoration: none;
  flex-shrink: 0;
}
.solid-wishlist__remove:hover {
  color: #b04646;
  background: rgba(176, 70, 70, 0.06);
}

/* ── Footer actions row ────────────────────────────────────────── */
.solid-wishlist__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 80px;
}
.solid-wishlist__actions-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* "SHARE MY WISHLIST" — pale-lime bg, primary green text, same
   24×80 padding as the per-row Add to Cart for visual rhyme. */
/* Force uppercase down to the <span> children too, otherwise
   onsus's `.button span { text-transform: none }` rule wins. */
.solid-wishlist__share,
.solid-wishlist__share span,
.solid-wishlist__add-all,
.solid-wishlist__add-all span {
  text-transform: uppercase !important;
}

button.solid-wishlist__share,
.solid-wishlist__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--brand-lime) !important;
  color: var(--brand-ink) !important;
  padding: 24px 80px !important;
  font-family: "Inter", var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: none !important;
  border-radius: 0;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
  height: auto !important;
  line-height: normal !important;
}
.solid-wishlist__share:hover {
  background: #c9d49e !important;
  transform: translateY(-1px);
}

/* "Clean wishlist" — uppercase underlined link in primary green. */
/* Renders as a plain text link even though the underlying element
   is a <button> (so it can fire its click-cascade JS). Aggressive
   resets — onsus + WC both ship `.button` styles with light-green
   bg + radius + padding that we have to neutralize. */
.solid-wishlist__actions-right button.solid-wishlist__clean,
button.solid-wishlist__clean,
.solid-wishlist__clean,
.solid-wishlist__clean:link,
.solid-wishlist__clean:visited {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  height: auto !important;
  min-height: 0 !important;
  cursor: pointer;
  font-family: "Inter", var(--font-sans);
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 19.2px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: var(--brand-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.solid-wishlist__actions-right button.solid-wishlist__clean:hover {
  background: transparent !important;
  color: var(--brand-ink) !important;
}
.solid-wishlist__clean:hover {
  color: var(--brand-ink);
}

/* "ADD ALL TO CART" — primary green button matching per-row CTA. */
.solid-wishlist__add-all,
.solid-wishlist__add-all:link,
.solid-wishlist__add-all:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  padding: 24px 80px !important;
  font-family: "Inter", var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none !important;
  border-radius: 4px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.solid-wishlist__add-all:hover {
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Complement section — gives the upsell band 80px breathing room
   from the actions row, plus 110px below to mirror the bottom
   spacing on the contact/about pages. */
.solid-wishlist-complement {
  padding-bottom: 110px;
}

/* Custom Clean Wishlist confirmation modal — replaces window.confirm
   so the warning matches the rest of the design. Hidden by default,
   `.is-open` slides + fades it in. */
.solid-wishlist-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
}
.solid-wishlist-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}
body.solid-wishlist-modal-open {
  overflow: hidden;
}
.solid-wishlist-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 220ms ease;
}
.solid-wishlist-modal.is-open .solid-wishlist-modal__overlay {
  opacity: 1;
}
.solid-wishlist-modal__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 12px));
  width: calc(100% - 32px);
  max-width: 440px;
  background: var(--brand-cream);
  border-radius: 6px;
  padding: 36px 32px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition:
    opacity 220ms ease,
    transform 240ms cubic-bezier(0.22, 0.72, 0.3, 1);
  text-align: center;
}
.solid-wishlist-modal.is-open .solid-wishlist-modal__card {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.solid-wishlist-modal__title {
  font-family: "Bricolage Grotesque", var(--font-sans);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: var(--brand-ink);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.solid-wishlist-modal__body {
  font-family: "Inter", var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: color-mix(in oklch, var(--brand-ink-soft) 90%, transparent);
  margin: 0 0 48px;
}
.solid-wishlist-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.solid-wishlist-modal__btn,
button.solid-wishlist-modal__btn {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 14px 24px;
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  border: 1.5px solid transparent;
}
.solid-wishlist-modal__btn--cancel,
button.solid-wishlist-modal__btn--cancel {
  background: transparent !important;
  color: var(--brand-ink) !important;
  border-color: var(--brand-ink) !important;
}
.solid-wishlist-modal__btn--cancel:hover,
button.solid-wishlist-modal__btn--cancel:hover {
  background: rgba(79, 111, 82, 0.08) !important;
}
.solid-wishlist-modal__btn--confirm,
button.solid-wishlist-modal__btn--confirm {
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  border-color: var(--brand-ink) !important;
}
.solid-wishlist-modal__btn--confirm:hover,
button.solid-wishlist-modal__btn--confirm:hover {
  background: var(--brand-ink) !important;
  border-color: var(--brand-ink) !important;
  transform: translateY(-1px);
}
.solid-wishlist-modal__btn:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .solid-wishlist-modal__actions {
    flex-direction: column-reverse;
  }
  .solid-wishlist-modal__btn {
    width: 100%;
  }
}

/* Mobile: stack the row + actions, scale buttons down. */
@media (max-width: 991px) {
  .solid-wishlist {
    margin-top: 60px;
  }
  .solid-wishlist__inner {
    padding: 0 24px;
  }
  .solid-wishlist__list {
    gap: 32px;
    margin-bottom: 50px;
  }
  .solid-wishlist__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .solid-wishlist__item-right {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  .solid-wishlist__add-to-cart,
  .solid-wishlist__add-to-cart:link,
  .solid-wishlist__add-to-cart:visited,
  .solid-wishlist__add-all,
  .solid-wishlist__add-all:link,
  .solid-wishlist__add-all:visited,
  .solid-wishlist__share {
    padding: 16px 24px !important;
    font-size: 12px;
    flex: 1 1 auto;
  }
  .solid-wishlist__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .solid-wishlist__actions-right {
    flex-direction: column;
    gap: 16px;
  }
}

/* ══════════════════════════════════════
   Login Page (woocommerce/myaccount/form-login.php)
   ══════════════════════════════════════ */

/* Onsus injects inline padding on #themesflat-content via the
   Customizer; we zero it out on the my-account page so the login
   wrapper sits 25px below the header instead of well below it.
   Also kill any `.woocommerce` wrapper border/shadow/bg the theme
   adds around the my-account form — we want a flat surface, not
   a card. */
#themesflat-content:has(> .solid-login),
#themesflat-content:has(.solid-login) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.woocommerce-account {
  background: var(--brand-cream) !important;
}
body.woocommerce-account #themesflat-content,
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-notices-wrapper,
body.woocommerce-account .my-account-content,
body.woocommerce-account .ct-section,
body.woocommerce-account article:not(.solid-dashboard__order-card),
body.woocommerce-account .entry-content {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.solid-login {
  padding: 75px 0 100px;
  background: var(--brand-cream);
}
.solid-login__inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.solid-login__col {
  flex: 1 1 0%;
  overflow: hidden;
}

/* Left column — image fills the column; height matches the form
   column via flex stretch. min-height ensures the column stays
   readable if the form is unusually short. */
.solid-login__col--image {
  position: relative;
  background-color: var(--brand-ink-deep);
  background-size: cover;
  background-position: center;
  min-height: 600px;
}
.solid-login__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Right column — vertically + horizontally centered form, 75px
   horizontal padding per spec. */
.solid-login__col--form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 75px;
  background: transparent;
}
/* WC ships a 1px gray border + padding on `.woocommerce-form-login`
   (its default "card" treatment); zero it out so the form sits
   flat on the column. */
.solid-login-form,
form.solid-login-form,
form.woocommerce-form-login.solid-login-form {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.solid-login-form__title {
  font-family: "Bricolage Grotesque", var(--font-sans);
  font-size: 50px;
  font-weight: 600;
  line-height: 99.25px;
  letter-spacing: -1.8px;
  text-align: center;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 50px;
  /* Down-appear entrance per the entrance-animations skill —
     title leads the cascade, then the 2 fields, then the
     submit row, then the bottom links. Visible distance + a
     half-second duration so the entrance reads clearly. */
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-login-in 0.6s ease 0.10s forwards;
  will-change: opacity, transform;
}

/* Validation-summary slot inside the login form. WC's notices
   wrapper is server-rendered before <section.solid-login>; the
   IIFE in form-login.php moves it into [data-solid-notices-slot]
   on load. The two rules below: hide the outer wrapper so it
   doesn't flash before the JS runs, and style the relocated
   notices so they sit cleanly between the title and the first
   field. Empty wrapper collapses to zero height. */
.solid-login .woocommerce > .woocommerce-notices-wrapper {
  display: none;
}
.solid-login-form__notices:empty,
.solid-login-form__notices .woocommerce-notices-wrapper:empty {
  display: none;
}
.solid-login-form__notices {
  margin: -28px 0 24px;
}
.solid-login-form__notices .woocommerce-error,
.solid-login-form__notices .woocommerce-message,
.solid-login-form__notices .woocommerce-info {
  list-style: none;
  margin: 0;
  padding: 14px 18px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-ink);
  background: #f5efe6;
  border-left: 3px solid var(--brand-ink);
  /* WC focuses the alert (tabindex="-1") on load so SRs announce
     it; the browser's default focus ring then paints a blue
     outline around our flat error bar. Kill it — the element
     isn't keyboard-reachable so there's no accessibility loss. */
  outline: none;
}
.solid-login-form__notices .woocommerce-error {
  color: #8a2a2a;
  background: #fdecec;
  border-left-color: #c14545;
}
.solid-login-form__notices .woocommerce-error li,
.solid-login-form__notices .woocommerce-message li,
.solid-login-form__notices .woocommerce-info li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.solid-login-form__notices .woocommerce-error li + li,
.solid-login-form__notices .woocommerce-message li + li,
.solid-login-form__notices .woocommerce-info li + li {
  margin-top: 4px;
}
.solid-login-form__notices .button {
  display: none;
}
/* WC + themesflat inject an icon-font glyph via ::before on the
   notice list — kill it so our flat lime/red bar stays clean. */
.solid-login-form__notices .woocommerce-error::before,
.solid-login-form__notices .woocommerce-message::before,
.solid-login-form__notices .woocommerce-info::before,
.solid-login-form__notices .woocommerce-error::after,
.solid-login-form__notices .woocommerce-message::after,
.solid-login-form__notices .woocommerce-info::after {
  content: none !important;
  display: none !important;
}
.solid-login-form__field,
.solid-login-form__remember,
.solid-login-form__submit-row,
.solid-login-form__lost,
.solid-login-form__signup {
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-login-in 0.6s ease forwards;
  will-change: opacity, transform;
}
.solid-login-form__field:nth-of-type(1) { animation-delay: 0.25s; }
.solid-login-form__field:nth-of-type(2) { animation-delay: 0.35s; }
.solid-login-form__remember            { animation-delay: 0.45s; }
.solid-login-form__submit-row          { animation-delay: 0.55s; }
.solid-login-form__lost                { animation-delay: 0.65s; }
.solid-login-form__signup              { animation-delay: 0.75s; }
@keyframes solid-login-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .solid-login-form__title,
  .solid-login-form__field,
  .solid-login-form__remember,
  .solid-login-form__submit-row,
  .solid-login-form__lost,
  .solid-login-form__signup {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* E1 — Email + password fields: unified on the same lime-filled
   treatment as register/contact (was a bottom-border underline row —
   the one form on the site with a different field language). Leading
   icon + text input still share one flex row; the row itself is now
   the lime-filled pill instead of the input having its own fill,
   since the icon needs to sit inside the same surface.
   `!important` on display:flex because WC + onsus both ship rules
   that turn `.form-row` into a stacked block; without override the
   icon + label end up stacking ABOVE the input. */
p.solid-login-form__field.form-row,
.solid-login-form .solid-login-form__field.form-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 14px;
  padding: 12px 16px;
  margin: 0 0 50px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--brand-lime);
  box-sizing: border-box;
  transition: background 0.2s ease, border-color 0.2s ease;
}
p.solid-login-form__field.form-row:focus-within,
.solid-login-form .solid-login-form__field.form-row:focus-within {
  background: #c8d5a2;
  border-color: var(--brand-ink);
}
.solid-login-form__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-ink);
  flex: 0 0 auto;
  width: auto;
}

/* WC's own password-strength-meter JS wraps every WC password
   input in `<span class="password-input">` and appends a native
   `<button class="show-password-input">` toggle (a small eye
   icon at the trailing edge of the input). That doubles up with
   our own eye toggle on every NUA form that has a password
   field, so hide WC's globally on those forms. The
   `.password-input` span gets `display: contents` so it doesn't
   break the row's flex layout — our input + toggle stay direct
   flex children of the field row. */
.solid-login-form .password-input,
.solid-register-form .password-input,
.solid-profile-form .password-input {
  /* `!important` beats WC's `.woocommerce form .password-input
     { display: flex }` (specificity 0,2,1 vs our 0,2,0). Without
     this, the WC span becomes a flex item that wraps the input
     and shrink-fits its text, pushing our trailing eye toggle
     to the middle of the row instead of the right edge. */
  display: contents !important;
}
.solid-login-form .show-password-input,
.solid-register-form .show-password-input,
.solid-profile-form .show-password-input {
  display: none !important;
}

/* Show/hide password toggle. Sits at the trailing edge of the
   password row as a flex child (the field row is `display: flex`,
   so the button slots in beside the input without absolute
   positioning). Same eye / eye-off swap pattern register +
   edit-account use. */
.solid-login-form__pw-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  color: var(--brand-ink);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
  box-shadow: none !important;
}
.solid-login-form__pw-toggle:hover,
.solid-login-form__pw-toggle:focus-visible {
  color: var(--brand-ink);
  background: rgba(79, 111, 82, 0.08) !important;
}
.solid-login-form__pw-toggle svg {
  width: 18px;
  height: 18px;
}
/* Eye SVGs are stacked — only one is visible at a time. Default
   shows the "eye" (password hidden); `.is-shown` swaps to the
   crossed-out eye (password shown). */
.solid-login-form__pw-eye-off {
  display: none;
}
.solid-login-form__pw-toggle.is-shown .solid-login-form__pw-eye {
  display: none;
}
.solid-login-form__pw-toggle.is-shown .solid-login-form__pw-eye-off {
  display: block;
}

/* Beat WooCommerce's default `.input-text` width:100%; the input
   must shrink (flex:1) so the icon stays beside it instead of
   getting bumped to the next line. */
.solid-login-form__field input.woocommerce-Input,
.solid-login-form__field input.input-text,
.solid-login-form__field input[type="text"],
.solid-login-form__field input[type="password"] {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  font-family: "Inter", var(--font-sans) !important;
  font-size: 16px !important;
  color: #2a2a2a !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
}
/* E2 — 0.55 alpha read at ~2.7:1 against the (transparent, then
   cream-backed) underline field; now against the opaque lime fill
   it needs to be darker still. 0.8 alpha of the same dark neutral
   clears ~4.5:1 on `--brand-lime` (#dcea96). */
.solid-login-form__field input::placeholder {
  color: rgba(60, 60, 60, 0.8);
}

/* Remember me — small inline label with native checkbox styled to
   the brand accent via accent-color. */
.solid-login-form__remember {
  margin: 0 0 50px;
  padding: 0;
  text-align: left;
}
.solid-login-form__check.woocommerce-form__label,
.solid-login-form__check.woocommerce-form__label span,
.solid-login p.solid-login-form__remember .solid-login-form__check span {
  font-family: "Inter", var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 14.4px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  color: var(--brand-ink) !important;
}
.solid-login-form__check.woocommerce-form__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
/* Custom checkbox — `appearance: none` so we can paint a branded
   square. Recent feedback: a reviewer reported not seeing the box
   at all on her browser. The harden-up: thicker border, slightly
   bigger box, a soft white fill (not transparent) so the square is
   visible even against the cream form bg, and a forced-colors
   fallback that re-enables the system-rendered checkbox for users
   running Windows High Contrast Mode (where `appearance: none`
   strips OS-painted controls without our custom paint kicking in). */
.solid-login-form__check input[type="checkbox"] {
  /* `display: inline-block` is NON-NEGOTIABLE — onsus's vendor CSS
     ships `input[type="checkbox"] { display: inline }` at
     onsus/css/main.css:672, which makes the browser ignore width
     + height (since inline elements don't honor box dimensions).
     The checkbox then collapses to 0-width and only the left +
     right borders render — visible as a single thin green
     vertical line on most browsers (especially Firefox). !important
     so the vendor rule can't win the cascade. */
  display: inline-block !important;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--brand-ink);
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  /* Subtle outer ring so the box reads on the cream bg even when
     the user has a custom color scheme that desaturates greens. */
  box-shadow: 0 0 0 1px rgba(79, 111, 82, 0.12);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.solid-login-form__check input[type="checkbox"]:hover {
  box-shadow: 0 0 0 3px rgba(79, 111, 82, 0.18);
}
.solid-login-form__check input[type="checkbox"]:checked {
  background: var(--brand-ink);
}
.solid-login-form__check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.solid-login-form__check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
}
/* Forced colors / Windows High Contrast — `appearance: none` is the
   most common reason a custom checkbox vanishes in HC mode (the OS
   doesn't know to paint a checkbox shape). Revert to system controls
   only when HC is active so the user always sees something. */
@media (forced-colors: active) {
  .solid-login-form__check input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    border: revert;
    background: revert;
    box-shadow: none;
  }
  .solid-login-form__check input[type="checkbox"]::after {
    content: none;
  }
}

.solid-login-form__submit-row {
  margin: 0 0 50px;
  padding: 0;
  text-align: center;
}
.solid-login-form__submit,
button.solid-login-form__submit,
button.solid-login-form__submit:link,
button.solid-login-form__submit:visited {
  display: block;
  width: 100%;
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  padding: 16px 24px !important;
  font-family: "Inter", var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
button.solid-login-form__submit:hover {
  background: var(--brand-ink) !important;
  transform: translateY(-1px);
}

.solid-login-form__lost {
  margin: 0;
  padding: 0;
  text-align: left;
}
.solid-login-form__lost a,
.solid-login-form__lost a:link,
.solid-login-form__lost a:visited {
  font-family: "Inter", var(--font-sans);
  font-size: 14px;
  color: color-mix(in oklch, var(--brand-ink-soft) 90%, transparent);
  text-decoration: none;
  transition: color 0.2s;
}
.solid-login-form__lost a:hover {
  color: var(--brand-ink);
}

/* Sign-up row under the "Forgot password?" link.
   E2 — the ~50% alpha ink-soft read ~2.2:1 on the cream page bg,
   well under AA. Full-strength `--brand-ink` on `--brand-cream` is
   the documented ~8.5:1 pairing (see the palette note above), so use
   it directly instead of a low-alpha mix. */
.solid-login-form__signup {
  margin: 32px 0 0;
  text-align: left;
  font-family: "Inter", var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--brand-ink);
}
.solid-login-form__signup-prompt {
  color: var(--brand-ink);
  margin-right: 6px;
}
.solid-login-form__signup-link,
.solid-login-form__signup-link:link,
.solid-login-form__signup-link:visited {
  color: var(--brand-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.solid-login-form__signup-link:hover {
  color: var(--brand-ink-deep);
}

/* Mobile-only: center both the forgot-password link and the
   sign-up link beneath the SEND button. */
@media (max-width: 991px) {
  .solid-login-form__lost {
    text-align: center;
  }
  .solid-login-form__signup {
    text-align: center;
  }
}

@media (max-width: 991px) {
  .solid-login__inner {
    flex-direction: column;
  }
  .solid-login__col--image {
    min-height: 320px;
  }
  .solid-login__col--form {
    padding: 40px 24px;
  }
  .solid-login-form__title {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.6px;
    margin-bottom: 32px;
  }
  .solid-login-form__field.form-row,
  .solid-login-form__remember,
  .solid-login-form__submit-row {
    margin-bottom: 32px;
  }
}

/* ══════════════════════════════════════
   FAQ Page (page-faq.php)
   ══════════════════════════════════════ */

/* Cream page surface like the about + contact pages. We don't add
   a dedicated body class; targeting the shop-banner inside the
   page-template body class is enough to keep these scoped. */
body.page-template-page-faq {
  background: var(--brand-cream) !important;
}
/* Onsus injects inline padding-bottom on #themesflat-content via
   the Customizer; zero it out only on the FAQ page so the CTA
   band sits flush with the footer instead of leaving a gap. */
body.page-template-page-faq #themesflat-content {
  padding-bottom: 0 !important;
}
body.page-template-page-faq .home-page,
body.page-template-page-faq .page-header,
body.page-template-page-faq .page-title {
  background: transparent;
}
body.page-template-page-faq .page-header,
body.page-template-page-faq .page-title {
  display: none !important;
}

/* Q&A list — 760px reading column, 105px gap from the banner above
   and 75px gap to the CTA below. We render `the_content()` raw and
   style the existing h3/p markup so questions stay editable in
   wp-admin. The first <h2> ("Preguntas Frecuentes") in the seed
   content is the page heading; we hide it because the banner
   already shows the title. */
.solid-faq__qna {
  max-width: 760px;
  margin: 105px auto 150px;
  padding: 0 24px;
}
.solid-faq__qna > h2 {
  display: none;
}
.solid-faq__qna h3 {
  font-family: "Bricolage Grotesque", var(--font-sans);
  font-weight: 400;
  font-size: 33.33px;
  line-height: 40px;
  letter-spacing: 0;
  color: color-mix(in oklch, var(--brand-ink-soft) 90%, transparent);
  margin: 0 0 10px;
  text-transform: none;
}
/* Answer card — pale-lime wrapper at the same alpha as the contact
   form fields. 50px gap to the next question via margin-bottom on
   the answer (collapses cleanly with the heading's margin-top). */
.solid-faq__qna p {
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: color-mix(in oklch, var(--brand-ink-soft) 90%, transparent);
  background: color-mix(in oklch, var(--brand-lime) 63%, transparent);
  padding: 10px 15px;
  margin: 0 0 50px;
  border-radius: 4px;
}
.solid-faq__qna p:last-child {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .solid-faq__qna {
    margin: 60px auto 50px;
  }
  .solid-faq__qna h3 {
    font-size: 24px;
    line-height: 30px;
  }
  .solid-faq__qna p {
    margin-bottom: 32px;
  }
}

/* ══════════════════════════════════════
   "Consult with our experts" CTA band
   (template-parts/cta-consult.php)
   ══════════════════════════════════════ */

/* Full-bleed band: 4 portrait images flush together → dark scrim
   over all → centered lime headline + dark-green button. Sized by
   the images' aspect ratio so the row is visually a tall photo
   strip rather than a thin sliver. */
.solid-cta-consult {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.solid-cta-consult__images {
  display: flex;
  width: 100%;
}
.solid-cta-consult__img {
  flex: 1 1 0%;
  background-color: var(--brand-ink-deep);
  background-size: cover;
  background-position: center;
  aspect-ratio: 320 / 480;
}
.solid-cta-consult__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.solid-cta-consult__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 0 24px;
  text-align: center;
}
.solid-cta-consult__title {
  font-family: "Bricolage Grotesque", var(--font-sans);
  font-size: 60px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--accent-lime, #c5d202);
  margin: 0;
  max-width: 18ch;
}

/* :link / :visited included so onsus's link defaults don't win the
   specificity battle and recolor the button text. */
.solid-cta-consult__btn,
.solid-cta-consult__btn:link,
.solid-cta-consult__btn:visited {
  display: inline-block;
  background: var(--brand-ink);
  color: #ffffff;
  padding: 16px 56px;
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 14.4px;
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.solid-cta-consult__btn:hover {
  background: var(--brand-ink);
  color: #ffffff;
  transform: translateY(-1px);
}
.solid-cta-consult__btn:focus-visible {
  outline: 2px solid var(--accent-lime, #c5d202);
  outline-offset: 3px;
}

/* Mobile: 2x2 grid so each photo stays meaningful instead of
   becoming a thin vertical sliver. Title scales down too. */
@media (max-width: 991px) {
  .solid-cta-consult__images {
    flex-wrap: wrap;
  }
  .solid-cta-consult__img {
    flex: 0 0 50%;
    aspect-ratio: 1 / 1;
  }
  .solid-cta-consult__title {
    font-size: 36px;
    letter-spacing: -0.6px;
  }
  .solid-cta-consult__btn,
  .solid-cta-consult__btn:link,
  .solid-cta-consult__btn:visited {
    padding: 14px 40px;
  }
}

/* ══════════════════════════════════════
   My Account / Profile dashboard page
   ══════════════════════════════════════

   Two-column layout that mirrors the login page but FLIPPED — content
   on the left, full-bleed image with dark overlay on the right. The
   content column vertical-centers relative to the image column. */
.solid-profile {
  /* 25px top padding is the minimum the design allows — the
     profile image on the landing screen sits at exactly 25px from
     the page top. Every TEXT column (greeting+nav, dashboard,
     edit-profile form, addresses, orders) carries its own
     `padding-top: 75px` so their first content line lands at
     25 + 75 = 100px from the page top, in vertical alignment
     with the left-side nav. */
  padding: 25px 0 100px;
  background: var(--brand-cream);
}
.solid-profile__inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  /* 48px horizontal padding matches `.nua-header__inner` so the
     content column's left edge lines up with the topbar's left
     edge (the brand mark / left nav anchor). */
  padding: 0 48px;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  /* Gap clamps with the viewport so the content+gap+image row
     always fits inside the 96px-padded container:
       items_total = 350 + 590 = 940
       gap_max     = viewport - 96 - 940
     The clamp gives 24px minimum, scales linearly through the
     mid-desktop range, caps at 190 once the viewport is wide
     enough (≥ ~1230). Below the min-fit width (~1100) the layout
     stacks vertically via the media query at the bottom. */
  gap: clamp(24px, calc(100vw - 1040px), 80px);
}
/* Left column — fixed width matching the 350px links list inside
   (no empty space between the content and the image). On viewports
   wider than 1280px the column grows to absorb leftover space, so
   the content anchors further toward the viewport's left edge
   instead of drifting right next to the image. Content stays
   vertically centered relative to the taller image column. */
.solid-profile__col--content {
  flex: 0 0 350px;
  display: flex;
  flex-direction: column;
  /* Top-align so the greeting + nav line up with whatever right
     column is rendered next to it — every right column starts
     its content at 75px from the column top. */
  justify-content: flex-start;
  padding: 75px 0 0;
  background: transparent;
}
@media (min-width: 1100px) {
  .solid-profile__col--content {
    /* From the 2-column threshold up, the sidebar grows to fill the
       leftover width (instead of sitting pinned at 350px with a big
       empty gutter). max-width caps growth so it never sprawls on 4K. */
    flex: 1 1 350px;
    max-width: 760px;
  }
}
.solid-profile__col--image {
  flex: 1 1 0%;
  overflow: hidden;
}
/* Right column — fixed 590px width capped per spec, with a portrait
   aspect ratio so `background-size: cover` keeps the image filling
   the column. `background-position: 20% center` shifts the visible
   crop window left so a landscape source photo (subject framed in
   the left third) still presents the subject centered in the column
   instead of cropped to the right edge. */
.solid-profile__col--image {
  flex: 0 0 590px;
  width: 590px;
  max-width: 590px;
  aspect-ratio: 1152 / 1728;
  position: relative;
  background-color: var(--brand-ink-deep);
  background-size: cover;
  background-position: 20% center;
  /* Slide-in-from-right entrance — runs alongside the left
     column's down-appear cascade. Starts shifted 60px to the
     right and 0% opacity, then settles into place over 700ms
     starting at 150ms (roughly synced with the greeting's
     entrance so both sides feel like one composed motion). */
  opacity: 0;
  transform: translateX(60px);
  animation: solid-profile-image-in 0.7s ease 0.15s forwards;
  will-change: opacity, transform;
}
@keyframes solid-profile-image-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .solid-profile__col--image {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.solid-profile__overlay {
  position: absolute;
  inset: 0;
  background: #000000A1;
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Greeting block — eyebrow + name + email. Down-appear entrance
   so the block fades in on page mount (per the entrance-animations
   skill: new visible elements get an entrance). */
.solid-profile__greeting {
  margin: 0;
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-profile-in 0.6s ease 0.1s forwards;
  will-change: opacity, transform;
}
.solid-profile__name {
  margin: 0;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(66, 72, 65, 0.9); /* var(--brand-ink-soft) at 90% per the design (color-mix(in oklch, var(--brand-ink-soft) 90%, transparent)) */
}
.solid-profile__email {
  margin: 4px 0 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: rgba(66, 72, 65, 0.9);
}

/* Links section — 50px below the greeting, 350px wide on desktop
   (full width on mobile via the breakpoint below). Each row is a
   flexbox with icon (16×16) + label + trailing chevron, 25px of
   vertical + horizontal padding, divider line beneath. */
.solid-profile__nav {
  margin-top: 50px;
}
.solid-profile__links {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 1281px) {
  .solid-profile__links {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto !important;
    max-width: 100%;
  }
}

.solid-profile__link-item {
  margin: 0;
}
.solid-profile__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 25px;
  color: var(--brand-ink-soft);
  text-decoration: none;
  /* Divider line BELOW each link (so no line appears above the
     first link — only between and beneath). Spec color: var(--brand-ink) at
     25% opacity. */
  border-bottom: 1px solid rgba(79, 111, 82, 0.25);
  transition:
    background 0.2s ease,
    color 0.2s ease;
  /* Staggered down-appear entrance — links cascade in after the
     greeting. --solid-profile-i is set per-row in PHP so the delay
     ramps from 0.2s → 0.6s across the 5 links. */
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-profile-in 0.6s ease
    calc(0.3s + (var(--solid-profile-i, 0) * 100ms)) forwards;
  will-change: opacity, transform;
}
.solid-profile__link:hover,
.solid-profile__link:focus-visible {
  background: rgba(66, 72, 65, 0.04);
  color: var(--brand-ink-deep);
  outline: none;
}
.solid-profile__link-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Icons rendered in the primary brand green regardless of the
     link's text color (which is var(--brand-ink-soft) and shifts on hover). */
  color: var(--brand-ink);
}
.solid-profile__link-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.solid-profile__link-label {
  flex: 1 1 auto;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 14.4px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
}
/* Chevron — bolder + larger than the original 12×12, sits at the
   right edge of each link. stroke-width is bumped + opacity raised
   to make the affordance more noticeable. */
.solid-profile__link-chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-ink-soft);
  opacity: 1;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}
.solid-profile__link-chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}
.solid-profile__link:hover .solid-profile__link-chevron,
.solid-profile__link:focus-visible .solid-profile__link-chevron {
  transform: translateX(2px);
  opacity: 1;
}
/* Active link — the row corresponding to the current endpoint
   (e.g. "Mi perfil" while on /my-account/edit-account/). Subtle
   bold weight + darker label + nudged chevron, so the nav reads
   like a stateful sidebar without a heavy highlight bar. */
.solid-profile__link.is-active .solid-profile__link-label {
  color: var(--brand-ink-deep);
  font-weight: 600;
}
.solid-profile__link.is-active .solid-profile__link-icon {
  color: var(--brand-ink);
}
.solid-profile__link.is-active .solid-profile__link-chevron {
  transform: translateX(2px);
  color: var(--brand-ink);
}
/* Log-out row gets the red treatment for the destructive action.
   The icon override matches — `.solid-profile__link-icon` is
   hard-coded to primary green for the other 4 rows; only the
   logout row's icon flips to red to signal the destructive
   action visually. */
.solid-profile__link--logout {
  color: #b04646;
}
.solid-profile__link--logout .solid-profile__link-icon {
  color: #b04646;
}
.solid-profile__link--logout:hover,
.solid-profile__link--logout:focus-visible {
  background: rgba(176, 70, 70, 0.06);
  color: #8e3a3a;
}
.solid-profile__link--logout:hover .solid-profile__link-icon,
.solid-profile__link--logout:focus-visible .solid-profile__link-icon {
  color: #8e3a3a;
}

@keyframes solid-profile-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .solid-profile__greeting,
  .solid-profile__link {
    animation: none;
    opacity: 1;
    transform: none;
    transition:
      opacity 0.15s linear,
      background 0.2s ease,
      color 0.2s ease;
  }
}

/* Non-dashboard endpoints (orders, addresses, edit-account,
   view-order, downloads, …) — render WC's stock layout, full-width
   container with topbar-matching 48px padding. The my-account.php
   override short-circuits to this branch so e.g. /view-order/<id>/
   renders WC's default order-detail table cleanly, with onsus's
   stock styling carrying the visual. */
.solid-profile-endpoint {
  max-width: 1515px;
  margin: 0 auto;
  padding: 60px 48px 96px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
}
.solid-profile-endpoint .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.solid-profile-endpoint .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  font-family: "Inter", var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  border-bottom: 1px solid rgba(79, 111, 82, 0.18);
}
.solid-profile-endpoint .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--brand-ink);
  font-weight: 700;
}
.solid-profile-endpoint .woocommerce-MyAccount-content {
  min-width: 0;
}
@media (max-width: 991px) {
  .solid-profile-endpoint {
    grid-template-columns: 1fr;
    padding: 40px 24px 60px;
    gap: 24px;
  }
}

/* Legacy hook (the old `__endpoint` variant the previous template
   used for non-dashboard content inside the 2-col layout). Left in
   place in case any other consumer references it. */
.solid-profile__endpoint {
  margin-top: 24px;
}
.solid-profile__col--content .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.solid-profile__col--content .woocommerce-MyAccount-navigation a {
  text-decoration: none;
  font-family: "Inter", var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
}
.solid-profile__col--content .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--brand-ink);
  border-bottom: 1px solid var(--brand-ink);
  padding-bottom: 2px;
}

/* Narrow desktop + tablet + phone: stack columns (content on top,
   image on bottom), full-width link list, tighter padding. The
   threshold is 1099 (not the project's usual 991) because the
   profile's two columns need ~1100px of horizontal room to fit
   their fixed widths + the clamped gap minimum — below that the
   content column would overflow the topbar's 48px left padding,
   pushing the links off the viewport's left edge. */
@media (max-width: 1099px) {
  .solid-profile__inner {
    flex-direction: column;
    gap: 0;
    padding: 0 16px;
  }
  .solid-profile__col--content {
    padding: 40px 24px 24px;
    order: 1;
    /* Reset the desktop fixed-width / clamped-grow rules. */
    flex: 0 0 auto;
    max-width: 100%;
  }
  .solid-profile__col--image {
    order: 2;
    /* Reset the desktop 590px fixed width — on stacked-column
       mobile the image takes the full row, keeping its 1152:1728
       portrait aspect ratio via the inherited `aspect-ratio` rule. */
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .solid-profile__links {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .solid-profile__name {
    font-size: 30px;
    line-height: 36px;
  }
  .solid-profile__link {
    padding: 20px;
  }
}

/* ══════════════════════════════════════
   Dashboard content view
   ══════════════════════════════════════

   Right column of the solid-profile layout when the user clicks
   the Tablero/Dashboard link (`/my-account/?view=dashboard`).
   Three stacked blocks: HELLO greeting → LATEST ORDERS section
   → MY WISHLIST section, each separated by 50px. The left
   column stays the dashboard's greeting + 5-link nav.

   Order cards: 135×135 image + meta column + right-aligned
   actions, primary-green border. Status pill is color-coded
   inline from PHP. Wishlist cards: 3-up grid, 150×135 image
   stacked over centered name. */
.solid-profile__col--dashboard {
  flex: 0 0 590px;
  width: 590px;
  max-width: 590px;
  min-width: 0;
  /* 75px top padding so the HELLO heading lands 100px below
     the page top in lockstep with the left-side greeting. */
  padding: 75px 0 0;
  display: flex;
  flex-direction: column;
}
.solid-dashboard__hello {
  margin: 0;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 64px;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--brand-ink);
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-dashboard-in 0.6s ease 0.10s forwards;
  will-change: opacity, transform;
}
.solid-dashboard__section {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.solid-dashboard__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}
.solid-dashboard__section-title {
  margin: 0;
  flex: 1 1 auto;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 54px;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--brand-ink);
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-dashboard-in 0.6s ease 0.20s forwards;
  will-change: opacity, transform;
}
.solid-dashboard__section--wishlist .solid-dashboard__section-title {
  animation-delay: 0.50s;
}
.solid-dashboard__view-all {
  flex: 0 0 auto;
  align-self: center;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  color: var(--brand-ink);
}
/* `!important` on text-decoration because onsus + WC ship base
   `a:hover { text-decoration: none }` rules that strip the
   underline on rollover — we want the underline to STAY on
   hover/focus, just with the color shift. */
.solid-dashboard__view-all:hover,
.solid-dashboard__view-all:focus-visible {
  color: var(--brand-ink-deep);
  text-decoration: underline !important;
  text-underline-offset: 5px;
}
.solid-dashboard__orders {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.solid-dashboard__order-card {
  display: grid;
  grid-template-columns: 135px 1fr auto;
  gap: 20px;
  align-items: stretch;
  /* Uniform 10px padding so the product image keeps its 10px
     breathing room from every card edge. Right gutter stretched
     to 25px so the right column (VER DETALLES + TOTAL) doesn't
     sit flush against the edge. The TOTAL gets its own extra
     15px margin-bottom below so it sits 25px from the card's
     bottom edge while the image still hugs the 10px. */
  padding: 10px 25px 10px 10px;
  /* Onsus' base `article { margin-bottom: 60px }` stacks on top
     of the `.solid-dashboard__orders` flex `gap: 50px`, doubling
     the visible spacing between cards. Reset to 0 so the 50px
     parent gap is the only thing separating siblings. */
  margin: 0;
  background: transparent;
  /* Logo-green (lime) 1px border, painted via box-shadow inset
     so the woocommerce-account article reset earlier in this
     file can't strip it via a `border: 0` declaration. */
  border: 0;
  box-shadow: inset 0 0 0 1px var(--brand-lime);
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-dashboard-in 0.6s ease 0.30s forwards;
  will-change: opacity, transform, box-shadow;
  /* The animation's `forwards` fill-mode locks the opacity/
     transform at their end state, so a separate hover transition
     for box-shadow stays smooth without conflicting with the
     entrance animation. */
  transition: box-shadow 0.25s ease;
}
.solid-dashboard__order-card:hover,
.solid-dashboard__order-card:focus-within {
  /* Keep the inset logo-green ring + layer an outer soft shadow
     in the same lime tone for a gentle lift on hover. */
  box-shadow:
    inset 0 0 0 1px var(--brand-lime),
    0 10px 24px rgba(163, 187, 10, 0.22);
}
.solid-dashboard__section--orders
  .solid-dashboard__order-card:nth-of-type(1) {
  animation-delay: 0.30s;
}
.solid-dashboard__section--orders
  .solid-dashboard__order-card:nth-of-type(2) {
  animation-delay: 0.40s;
}
.solid-dashboard__order-image {
  width: 135px;
  height: 135px;
  display: block;
  object-fit: cover;
  background: var(--brand-cream);
}
.solid-dashboard__order-image--empty {
  background: var(--brand-cream);
}
.solid-dashboard__order-meta {
  display: flex;
  flex-direction: column;
  align-self: center;
  margin: 0;
}
.solid-dashboard__order-id {
  margin: 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: var(--brand-ink);
}
.solid-dashboard__order-status {
  align-self: flex-start;
  margin: 15px 0 0;
  padding: 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  background: transparent;
}
.solid-dashboard__order-date {
  margin: 10px 0 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0;
  color: var(--brand-ink);
}
.solid-dashboard__order-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
  margin: 0;
}
.solid-dashboard__view-details {
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  color: var(--brand-ink);
}
.solid-dashboard__view-details:hover,
.solid-dashboard__view-details:focus-visible {
  color: var(--brand-ink-deep);
  text-decoration: underline !important;
  text-underline-offset: 5px;
}
.solid-dashboard__order-total {
  /* 15px margin-bottom + the card's 10px bottom padding = 25px
     between the TOTAL text and the card's bottom edge, while
     the product image still sits 10px from the bottom (the
     card's regular padding). */
  margin: 0 0 15px;
  font-family: "Inter", var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 14.4px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.solid-dashboard__order-total bdi {
  font-style: normal;
}
.solid-dashboard__empty {
  margin: 0;
  padding: 18px 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(66, 72, 65, 0.7);
}
.solid-dashboard__wishlist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.solid-dashboard__wishlist-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  /* 10px padding so the box-shadow lift on hover has a visible
     ring of card "surface" around the image and label, instead
     of hugging the image edges. */
  padding: 10px;
  background: transparent;
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-dashboard-in 0.6s ease 0.60s forwards;
  will-change: opacity, transform, box-shadow;
  transition: box-shadow 0.25s ease;
}
.solid-dashboard__wishlist-card:hover,
.solid-dashboard__wishlist-card:focus-visible {
  /* Same lime-tinted lift as the order cards so both card types
     respond the same way on rollover. */
  box-shadow: 0 10px 24px rgba(163, 187, 10, 0.22);
  text-decoration: none;
}
.solid-dashboard__section--wishlist
  .solid-dashboard__wishlist-card:nth-of-type(1) {
  animation-delay: 0.60s;
}
.solid-dashboard__section--wishlist
  .solid-dashboard__wishlist-card:nth-of-type(2) {
  animation-delay: 0.70s;
}
.solid-dashboard__section--wishlist
  .solid-dashboard__wishlist-card:nth-of-type(3) {
  animation-delay: 0.80s;
}
.solid-dashboard__wishlist-image {
  width: 150px;
  height: 135px;
  display: block;
  object-fit: cover;
  background: var(--brand-cream);
}
.solid-dashboard__wishlist-image--empty {
  background: var(--brand-cream);
}
.solid-dashboard__wishlist-name {
  margin: 35px 0 0;
  padding: 0 15px;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 700;
  font-size: 21.05px;
  line-height: 26.94px;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
  color: var(--brand-ink);
}
.solid-dashboard__wishlist-card:hover .solid-dashboard__wishlist-name,
.solid-dashboard__wishlist-card:focus-visible .solid-dashboard__wishlist-name {
  color: var(--brand-ink-deep);
}
@keyframes solid-dashboard-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .solid-dashboard__hello,
  .solid-dashboard__section-title,
  .solid-dashboard__order-card,
  .solid-dashboard__wishlist-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@media (max-width: 1099px) {
  .solid-profile__col--dashboard {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .solid-dashboard__hello {
    margin-top: 25px;
    font-size: 36px;
    line-height: 1.15;
  }
  .solid-dashboard__section-title {
    font-size: 30px;
    line-height: 1.2;
  }
  .solid-dashboard__section-head {
    flex-wrap: wrap;
  }
  .solid-dashboard__order-card {
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto auto;
  }
  .solid-dashboard__order-image,
  .solid-dashboard__order-image--empty {
    width: 110px;
    height: 110px;
  }
  .solid-dashboard__order-right {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  .solid-dashboard__wishlist {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .solid-dashboard__wishlist-image,
  .solid-dashboard__wishlist-image--empty {
    width: 100%;
    height: auto;
    aspect-ratio: 150 / 135;
  }
  .solid-dashboard__wishlist-name {
    font-size: 17px;
    line-height: 22px;
  }
}

/* ══════════════════════════════════════
   Addresses listing view
   ══════════════════════════════════════

   Right column of the solid-profile layout when the current
   endpoint is `edit-address` AND no sub-action (no /billing/ or
   /shipping/ in the URL). Title + subtitle + 2-col card grid;
   each card links to the corresponding edit-address form, which
   itself keeps WC's default rendering. */
.solid-profile__col--addresses {
  flex: 0 0 590px;
  width: 590px;
  max-width: 590px;
  min-width: 0;
  /* 75px top padding so the title aligns with the left-side
     greeting (both land 100px from the page top). */
  padding: 75px 0 0;
  display: flex;
  flex-direction: column;
}
.solid-addresses__head {
  margin: 0;
}
.solid-addresses__title {
  margin: 0;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 54px;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--brand-ink);
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-addresses-in 0.6s ease 0.10s forwards;
  will-change: opacity, transform;
}
.solid-addresses__subtitle {
  margin: 50px 0 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(66, 72, 65, 0.85);
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-addresses-in 0.6s ease 0.20s forwards;
  will-change: opacity, transform;
}
.solid-addresses__grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.solid-addresses__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-addresses-in 0.6s ease 0.30s forwards;
  will-change: opacity, transform;
}
.solid-addresses__card--shipping {
  animation-delay: 0.40s;
}
.solid-addresses__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.solid-addresses__card-title {
  margin: 0;
  flex: 1 1 auto;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.solid-addresses__card-edit {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  color: var(--brand-ink);
  text-decoration: none !important;
  background: transparent;
  border: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}
.solid-addresses__card-edit svg {
  width: 18px;
  height: 18px;
  display: block;
}
.solid-addresses__card-edit:hover,
.solid-addresses__card-edit:focus-visible {
  color: var(--brand-ink-deep);
  transform: translateY(-1px);
  text-decoration: none !important;
}
.solid-addresses__card-body {
  /* 50px between the card title and its first body line per
     the spec (same rhythm as the rest of the profile pages). */
  margin: 50px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--brand-ink-soft);
  font-style: normal;
}
.solid-addresses__card-line {
  display: block;
}
/* Reinforce the "first line is the customer name" emphasis the
   design implies (Maria Perez in bold, address lines below in
   regular weight). The customer name is always the first line
   returned by `WC->countries->get_formatted_address()`. */
.solid-addresses__card-body .solid-addresses__card-line:first-child {
  font-weight: 700;
}
.solid-addresses__card-empty {
  margin: 50px 0 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: rgba(66, 72, 65, 0.7);
}
@keyframes solid-addresses-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .solid-addresses__title,
  .solid-addresses__subtitle,
  .solid-addresses__card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@media (max-width: 1099px) {
  .solid-profile__col--addresses {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .solid-addresses__title {
    margin-top: 25px;
    font-size: 30px;
    line-height: 1.2;
  }
  .solid-addresses__grid {
    grid-template-columns: 1fr;
  }
  .solid-addresses__card-title {
    font-size: 22px;
    line-height: 1.2;
  }
}

/* ══════════════════════════════════════
   Orders listing table
   ══════════════════════════════════════

   Right column of the solid-profile layout when the current
   endpoint is `orders`. WC's account-content callback loads
   `myaccount/orders.php` (overridden by this theme) which
   renders a 5-column table — Order / Date / Status / Total /
   Actions. The column is wider than the 590px text columns
   used elsewhere so all five cells fit comfortably without
   wrapping the labels. */
.solid-profile__col--orders {
  /* `flex: 0 1 800px` (no grow, allow shrink) so the table caps
     at 800px on wide viewports but squeezes down when there's
     not enough room — without shrink, on a 1280px viewport the
     fixed 350 left + 190 gap + 800 right = 1340px overflows the
     ~1184px inner and the flex-end alignment pushes the LEFT
     column offscreen. */
  flex: 0 1 800px;
  max-width: 800px;
  min-width: 0;
  padding: 75px 0 0;
  display: flex;
  flex-direction: column;
}
/* On the orders page the inner needs a tighter horizontal gap
   than the dashboard/edit views (190px cap) because the orders
   table itself is much wider. Cap the gap at 80px and let the
   table column absorb the extra room above the breakpoint. */
.solid-profile--orders .solid-profile__inner {
  gap: clamp(24px, calc(100vw - 1200px), 80px);
}
.solid-orders__title {
  margin: 0;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 54px;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--brand-ink);
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-orders-in 0.6s ease 0.10s forwards;
  will-change: opacity, transform;
}
.solid-orders__table {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
}
.solid-orders__row {
  display: grid;
  grid-template-columns:
    minmax(110px, 1.2fr)
    minmax(110px, 1fr)
    minmax(120px, 1.2fr)
    minmax(80px, 0.8fr)
    minmax(140px, 1.4fr);
  gap: 20px;
  align-items: center;
  /* Per spec — 40px top + 20px bottom inside every order row,
     so the cards breathe more above the content than below. */
  padding: 40px 16px 20px;
  border-bottom: 1px solid rgba(79, 111, 82, 0.18);
  /* Match the left-side links cascade — 0.6s duration, -24px
     translateY, 100ms stagger between siblings — so the right
     column entrance reads at the same pace as the nav links and
     doesn't flash past unnoticed. */
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-orders-in 0.6s ease forwards;
  will-change: opacity, transform;
}
.solid-orders__row--head {
  /* Header row sits tight against the title above and its
     divider — no 40px top padding, smaller bottom. */
  padding-top: 0;
  padding-bottom: 16px;
  border-bottom-color: rgba(79, 111, 82, 0.18);
  animation-delay: 0.20s;
}
.solid-orders__row:nth-of-type(2) { animation-delay: 0.30s; }
.solid-orders__row:nth-of-type(3) { animation-delay: 0.40s; }
.solid-orders__row:nth-of-type(4) { animation-delay: 0.50s; }
.solid-orders__row:nth-of-type(5) { animation-delay: 0.60s; }
.solid-orders__row:nth-of-type(6) { animation-delay: 0.70s; }
.solid-orders__row:nth-of-type(7) { animation-delay: 0.80s; }
.solid-orders__row:nth-of-type(8) { animation-delay: 0.90s; }
.solid-orders__row:nth-of-type(9) { animation-delay: 1.00s; }
.solid-orders__row:nth-of-type(10) { animation-delay: 1.10s; }
.solid-orders__row:nth-of-type(11) { animation-delay: 1.20s; }
.solid-orders__row:last-child {
  border-bottom: 1px solid rgba(79, 111, 82, 0.18);
}
.solid-orders__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: var(--brand-ink);
  text-align: center;
}
.solid-orders__cell--actions {
  align-items: flex-end;
}
.solid-orders__row--head .solid-orders__cell {
  font-weight: 700;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: var(--brand-ink);
  text-transform: none;
}
/* Order # + item-count subtitle inside the first cell. */
.solid-orders__order-num {
  display: block;
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: var(--brand-ink);
}
.solid-orders__order-items {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(79, 111, 82, 0.65);
}
/* Status text — color comes inline from the PHP palette. */
.solid-orders__status {
  font-family: "Inter", var(--font-sans);
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}
/* Action links — small text + trailing icon, no underline,
   primary green default. Two stacked rows inside the actions
   cell (View / Repeat order). */
.solid-orders__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--brand-ink);
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease;
}
.solid-orders__action + .solid-orders__action {
  margin-top: 4px;
}
.solid-orders__action:hover,
.solid-orders__action:focus-visible {
  color: var(--brand-ink-deep);
  transform: translateX(-2px);
  text-decoration: none !important;
}
.solid-orders__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
}
.solid-orders__action-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* Pagination — simple Prev/Next at the bottom of the table. */
.solid-orders__pagination {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
}
.solid-orders__page {
  font-family: "Inter", var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  color: var(--brand-ink);
}
.solid-orders__page:hover,
.solid-orders__page:focus-visible {
  color: var(--brand-ink-deep);
  text-decoration: underline !important;
  text-underline-offset: 5px;
}
.solid-orders__empty {
  margin: 50px 0 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(66, 72, 65, 0.7);
}
.solid-orders__shop-link {
  margin-left: 6px;
  font-weight: 500;
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
@keyframes solid-orders-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .solid-orders__title,
  .solid-orders__row {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@media (max-width: 1099px) {
  .solid-profile__col--orders {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 720px) {
  /* Below 720px the 5-col grid breaks down — collapse each row
     to a stack of label/value pairs so nothing wraps awkwardly. */
  .solid-orders__row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 8px 16px;
    padding: 20px 0;
  }
  .solid-orders__row--head {
    display: none;
  }
  .solid-orders__cell {
    text-align: left;
  }
  .solid-orders__cell--order { grid-column: 1 / 2; grid-row: 1; }
  .solid-orders__cell--date { grid-column: 2 / 3; grid-row: 1; text-align: right; }
  .solid-orders__cell--status { grid-column: 1 / 2; grid-row: 2; }
  .solid-orders__cell--total { grid-column: 2 / 3; grid-row: 2; text-align: right; }
  .solid-orders__cell--actions {
    grid-column: 1 / -1;
    grid-row: 3;
    align-items: stretch;
    flex-direction: row;
    justify-content: flex-start;
    gap: 24px;
    margin-top: 8px;
  }
  .solid-orders__action + .solid-orders__action {
    margin-top: 0;
  }
}

/* ══════════════════════════════════════
   Order Detail (view-order endpoint)
   ══════════════════════════════════════

   Right column when the user clicks a row's "Ver" action on the
   orders listing. Stacks: back link → DETALLE DEL PEDIDO →
   PEDIDO #N → 2-col items grid → totals stack → 2-col billing /
   shipping addresses → optional customer note. The wider 800px
   column is reused from the orders listing (so the items table
   has the same horizontal canvas to work in). */
.solid-profile__col--order-detail {
  flex: 0 1 800px;
  max-width: 800px;
  min-width: 0;
  padding: 75px 0 0;
  display: flex;
  flex-direction: column;
}
.solid-profile--order-detail .solid-profile__inner {
  gap: clamp(24px, calc(100vw - 1200px), 80px);
}
.solid-order-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin: 0;
  /* Text props per spec — var(--brand-ink-soft) body color, NOT primary green;
     the icon stays primary green via its own rule below so the
     bag glyph reads as the "orders" affordance. */
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: var(--brand-ink-soft);
  text-decoration: none !important;
  transition: color 0.2s ease, transform 0.2s ease;
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-order-detail-in 0.6s ease 0.05s forwards;
  will-change: opacity, transform;
}
.solid-order-detail__back:hover,
.solid-order-detail__back:focus-visible {
  color: var(--brand-ink-deep);
  transform: translateX(-2px) translateY(0);
  text-decoration: none !important;
}
.solid-order-detail__back-icon {
  /* Icon column — primary green via `color: var(--brand-ink)` so the SVG
     strokes (currentColor) inherit the brand green even though
     the label text is the warm grey var(--brand-ink-soft). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--brand-ink);
}
.solid-order-detail__back-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.solid-order-detail__title {
  margin: 30px 0 0;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 54px;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--brand-ink);
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-order-detail-in 0.6s ease 0.15s forwards;
  will-change: opacity, transform;
}
.solid-order-detail__order-id {
  /* 50px between "Detalle del pedido" and "Pedido / #NNNN"
     per the spec. The order-id renders as TWO stacked lines
     ("Pedido" above, "#NNNN" below) via the inner spans. */
  margin: 50px 0 0;
  display: flex;
  flex-direction: column;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--brand-ink);
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-order-detail-in 0.6s ease 0.25s forwards;
  will-change: opacity, transform;
}
.solid-order-detail__order-id-line {
  display: block;
}
.solid-order-detail__items {
  /* 50px under "Pedido / #NNNN" before the items grid starts. */
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-order-detail-in 0.6s ease 0.35s forwards;
  will-change: opacity, transform;
}
.solid-order-detail__items-head,
.solid-order-detail__item {
  /* 3-col grid: image+name on the left (auto), qty centered in
     the middle "filler" column (1fr stretches), total on the
     right (auto). Header row uses the same template with an
     empty middle cell so "Producto" and "Total" labels still
     align with the actual columns below. */
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(79, 111, 82, 0.18);
}
.solid-order-detail__items-head {
  padding: 0 0 14px;
}
.solid-order-detail__items-head-cell {
  font-family: "Inter", var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--brand-ink);
}
.solid-order-detail__items-head-cell--total {
  /* Force the Total label into the last (auto) column so it
     aligns with the item total cell below. */
  grid-column: 3 / 4;
  text-align: right;
}
.solid-order-detail__item-product {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.solid-order-detail__item-image {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  display: block;
  object-fit: cover;
  background: var(--brand-cream);
}
.solid-order-detail__item-image--empty {
  background: var(--brand-cream);
}
.solid-order-detail__item-name {
  margin: 0;
  flex: 0 1 auto;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 600;
  font-size: 27.5px;
  line-height: 33px;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--brand-ink-soft);
}
.solid-order-detail__item-qty {
  /* Middle column: centered horizontally inside the 1fr cell so
     the qty floats midway between the product name and the
     right-aligned price column. */
  justify-self: center;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 600;
  font-size: 27.5px;
  line-height: 33px;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--brand-ink-soft);
}
.solid-order-detail__item-total {
  font-family: "Inter", var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  vertical-align: middle;
  color: var(--brand-ink-soft);
  text-align: right;
}
.solid-order-detail__item-total bdi {
  font-style: normal;
}
.solid-order-detail__item-total bdi {
  font-style: normal;
}
.solid-order-detail__totals {
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-order-detail-in 0.6s ease 0.45s forwards;
  will-change: opacity, transform;
}
.solid-order-detail__totals-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
}
.solid-order-detail__totals-label {
  margin: 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: var(--brand-ink-soft);
}
.solid-order-detail__totals-value {
  margin: 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: var(--brand-ink-soft);
  text-align: right;
}
.solid-order-detail__totals-value bdi {
  font-style: normal;
}
.solid-order-detail__totals-row--grand .solid-order-detail__totals-label,
.solid-order-detail__totals-row--grand .solid-order-detail__totals-value {
  font-weight: 700;
}
.solid-order-detail__addresses {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-order-detail-in 0.6s ease 0.55s forwards;
  will-change: opacity, transform;
}
.solid-order-detail__address {
  display: flex;
  flex-direction: column;
}
.solid-order-detail__address-title {
  margin: 0;
  /* Render the two inner spans on stacked lines (Billing /
     Address, Shipping / Address — and the Spanish equivalents). */
  display: flex;
  flex-direction: column;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.solid-order-detail__address-title-line {
  display: block;
}
.solid-order-detail__address-body {
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: var(--brand-ink-soft);
  font-style: normal;
}
.solid-order-detail__address-line {
  display: block;
  margin: 0;
  padding: 4px 0;
}
.solid-order-detail__address-body
  .solid-order-detail__address-line:first-child {
  font-weight: 700;
}
.solid-order-detail__address-empty {
  margin: 30px 0 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: rgba(66, 72, 65, 0.7);
}
.solid-order-detail__note {
  margin-top: 50px;
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-order-detail-in 0.6s ease 0.65s forwards;
  will-change: opacity, transform;
}
.solid-order-detail__note-title {
  margin: 0;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.solid-order-detail__note-body {
  margin: 14px 0 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--brand-ink-soft);
}
.solid-order-detail__empty {
  margin: 60px 0 0;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: rgba(66, 72, 65, 0.7);
}
@keyframes solid-order-detail-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .solid-order-detail__back,
  .solid-order-detail__title,
  .solid-order-detail__order-id,
  .solid-order-detail__items,
  .solid-order-detail__totals,
  .solid-order-detail__addresses,
  .solid-order-detail__note {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@media (max-width: 1099px) {
  .solid-profile__col--order-detail {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .solid-order-detail__title {
    font-size: 30px;
    line-height: 1.15;
  }
  .solid-order-detail__items-head,
  .solid-order-detail__item {
    grid-template-columns: 1fr 60px 90px;
    gap: 10px;
  }
  .solid-order-detail__item-image {
    width: 60px;
    height: 60px;
  }
  .solid-order-detail__item-name {
    font-size: 16px;
    line-height: 20px;
  }
  .solid-order-detail__addresses {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ══════════════════════════════════════
   Edit Profile page (right column of the
   solid-profile layout when the active
   endpoint is `edit-account`). Reuses the
   D8E2B4 filled-input vocabulary from the
   register page so both forms feel like
   one system. Section heading uses the
   Afacad Flux dark-green wordmark color
   that the register page also uses. Two
   sections (Editar perfil + Cambiar
   contraseña) are separated by 50px to
   match the global section-spacing rule.
   ══════════════════════════════════════ */
/* Pin the form column to the same 590px width the image column
   uses on the dashboard. This keeps the content column's grow
   behavior identical across both endpoints — without a fixed
   right column, two flex-grow:1 siblings would split the row
   evenly and the left nav would balloon. */
.solid-profile__col--form {
  flex: 0 0 590px;
  width: 590px;
  max-width: 590px;
  min-width: 0;
  /* 75px top padding so the form heading sits 100px below the
     page top in line with the left-side greeting. */
  padding: 75px 0 0;
  /* Slide-in-from-right entrance — runs in sync with the left
     column's down-appear cascade so both halves feel like one
     composed motion. The interior heading/fields/submit still
     cascade inside the form via their own animations. */
  opacity: 0;
  transform: translateX(60px);
  animation: solid-profile-form-col-in 0.7s ease 0.15s forwards;
  will-change: opacity, transform;
}
@keyframes solid-profile-form-col-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .solid-profile__col--form {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.solid-profile-form {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.solid-profile-form__section {
  /* Block layout (not flex/gap) so we can give the heading
     a tighter bottom spacing than the 50px we want between
     fields. Heading → first field = 18px; field → field /
     field → row / row → field = 50px. The 2-col Name/Last-
     Name row counts as one row, so the 50px applies BELOW
     that row, never between Name and Last Name (horizontal
     column-gap is the 16px set on the row itself). */
  display: block;
  margin: 0;
  padding: 0;
}
.solid-profile-form__section > .solid-profile-form__field,
.solid-profile-form__section > .solid-profile-form__row {
  margin-top: 50px;
}
.solid-profile-form__section
  > .solid-profile-form__heading
  + .solid-profile-form__field,
.solid-profile-form__section
  > .solid-profile-form__heading
  + .solid-profile-form__row {
  margin-top: 18px;
}
.solid-profile-form__section + .solid-profile-form__section {
  margin-top: 50px;
}
.solid-profile-form__heading {
  margin: 0;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 64px;
  letter-spacing: 0;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--brand-ink);
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-profile-form-in 0.6s ease 0.10s forwards;
  will-change: opacity, transform;
}
.solid-profile-form__row--cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.solid-profile-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-profile-form-in 0.6s ease 0.25s forwards;
  will-change: opacity, transform;
}
/* Per-field stagger inside each section so the inputs cascade
   in instead of all dropping together. Resets per section via
   nth-of-type — the first field of section 2 starts its own
   cascade slightly behind the section-2 heading. */
.solid-profile-form__section
  > .solid-profile-form__field:nth-of-type(1) {
  animation-delay: 0.25s;
}
.solid-profile-form__section
  > .solid-profile-form__field:nth-of-type(2) {
  animation-delay: 0.35s;
}
.solid-profile-form__section
  > .solid-profile-form__field:nth-of-type(3) {
  animation-delay: 0.45s;
}
.solid-profile-form__section
  > .solid-profile-form__field:nth-of-type(4) {
  animation-delay: 0.55s;
}
.solid-profile-form__row {
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-profile-form-in 0.6s ease 0.25s forwards;
  will-change: opacity, transform;
}
.solid-profile-form__label {
  font-family: "Inter", var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 14.4px;
  letter-spacing: 0;
  vertical-align: middle;
  color: rgba(66, 72, 65, 0.9); /* color-mix(in oklch, var(--brand-ink-soft) 90%, transparent) — var(--brand-ink-soft) at 90% alpha */
  margin: 0;
}
.solid-profile-form__req {
  color: #b04646;
  margin-left: 2px;
}
.solid-profile-form__helper {
  margin-left: 4px;
  font-weight: 400;
  font-size: 12px;
  color: rgba(66, 72, 65, 0.65);
  font-style: italic;
}
.solid-profile-form__input,
.solid-profile-form input.solid-profile-form__input {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  background: var(--brand-lime) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--brand-ink-deep);
  appearance: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* E2 — 0.5 alpha only read ~2.7:1 against the lime fill; 0.8 clears
   ~6.75:1 on `--brand-lime` (#dcea96), matching the register fix. */
.solid-profile-form__input::placeholder {
  color: rgba(43, 51, 41, 0.8);
}
.solid-profile-form__input:focus,
.solid-profile-form__input:focus-visible,
.solid-profile-form input.solid-profile-form__input:focus {
  background: #c8d5a2 !important;
  border-color: var(--brand-ink) !important;
  outline: none !important;
}
/* Red invalid border only after a submit attempt — matches
   the register-page pattern so the form looks calm on first
   render and only flags problems after the user tried. */
.solid-profile-form.is-submitted .solid-profile-form__input:invalid {
  border-color: rgba(176, 70, 70, 0.6) !important;
}
.solid-profile-form__pw {
  position: relative;
}
.solid-profile-form__pw .solid-profile-form__input {
  padding-right: 44px;
}
.solid-profile-form__pw-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  /* Dark primary green for stronger contrast against the lime
     input bg — the lighter `var(--brand-ink)` previously sat near the
     contrast floor and disappeared visually on some screens. */
  color: var(--brand-ink-deep) !important;
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
  box-shadow: none !important;
  z-index: 2;
}
.solid-profile-form__pw-toggle:hover,
.solid-profile-form__pw-toggle:focus-visible {
  color: #000000 !important;
  background: rgba(43, 51, 41, 0.08) !important;
}
.solid-profile-form__pw-toggle svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
}
.solid-profile-form__pw-eye-off {
  display: none;
}
.solid-profile-form__pw-toggle.is-shown .solid-profile-form__pw-eye {
  display: none;
}
.solid-profile-form__pw-toggle.is-shown .solid-profile-form__pw-eye-off {
  display: block;
}
.solid-profile-form__submit-row {
  display: flex;
  justify-content: flex-start;
  margin: 32px 0 0;
}
.solid-profile-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 32px;
  background: var(--brand-ink);
  color: #ffffff;
  font-family: "Inter", var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--brand-ink);
  border-radius: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-24px);
  animation: solid-profile-form-in 0.6s ease 0.75s forwards;
  will-change: opacity, transform;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.solid-profile-form__submit:hover,
.solid-profile-form__submit:focus-visible {
  background: var(--brand-ink);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(79, 111, 82, 0.22);
}
.solid-profile-form__submit-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
@keyframes solid-profile-form-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .solid-profile-form__heading,
  .solid-profile-form__field,
  .solid-profile-form__submit {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}
@media (max-width: 1099px) {
  /* Below the stack breakpoint, let the form column take the
     full row width. The content column already drops its fixed
     basis at this breakpoint via the shared `.solid-profile`
     stacked-mobile rule, so no override is needed for it. */
  .solid-profile__col--form {
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .solid-profile-form__row--cols-2 {
    grid-template-columns: 1fr;
  }
  .solid-profile-form__heading {
    /* Scale the 52/64 desktop heading down on phones so it
       doesn't overflow the column or wrap awkwardly. */
    font-size: 36px;
    line-height: 1.15;
  }
  .solid-profile-form__submit {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════
   Register / sign-up page
   ══════════════════════════════════════

   Two-column layout — form LEFT, full-bleed image RIGHT. Form
   column is centered with a 480px max-width inner; inputs are
   lime-tinted filled boxes (no border) with labels above. Two
   password fields ship a show/hide eye toggle (swaps `type` between
   `password` and `text` via the inline JS at the bottom of
   page-register.php). */

/* Make the whole page (body + onsus wrapper chain) share the
   register bg so there's no white seam between the topbar and the
   .solid-register section. Scoped to this template via the body
   class WP auto-adds for the page-register.php template. */
body.page-template-page-register-php,
body.page-template-page-register-php .themesflat-boxed,
body.page-template-page-register-php #main-content,
body.page-template-page-register-php #themesflat-content {
  background: var(--brand-cream) !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.solid-register {
  background: var(--brand-cream);
}
.solid-register__inner {
  width: 100%;
  max-width: 1515px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 87px);
  min-height: calc(100dvh - 87px);
}
.solid-register__col {
  flex: 1 1 0%;
  overflow: hidden;
}
.solid-register__col--form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 25px breathing room under the topbar + extra bottom padding
     so the form doesn't crowd the footer below. Horizontal stays
     at 48px to align with the topbar / footer container. */
  padding: 25px 48px 96px;
  background: transparent;
}
.solid-register__col--image {
  position: relative;
  background-color: var(--brand-ink-deep);
  background-size: cover;
  background-position: center;
  min-height: 540px;
}
.solid-register__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.20);
  pointer-events: none;
}

/* NUA wordmark at the top of the form column. 40px of breathing
   room before the headline below it. */
.solid-register__logo {
  display: inline-block;
  margin: 0 auto 40px;
  /* Down-appear entrance (per the entrance-animations skill). */
  opacity: 0;
  transform: translateY(-10px);
  animation: solid-register-in 0.4s ease 0.05s forwards;
  will-change: opacity, transform;
}
.solid-register__logo img {
  display: block;
  width: 160px;
  height: auto;
}

/* "Únete a la / comunidad Nua" two-line headline per spec —
   Afacad Flux 400 / 62 / 76 / 0 letter-spacing / center. 50px
   gap below the title before the form fields. */
.solid-register__title {
  margin: 0 0 50px;
  font-family: "Bricolage Grotesque", "Newsreader", Cambria, Georgia, serif;
  font-weight: 400;
  font-size: 62px;
  line-height: 76px;
  letter-spacing: 0;
  color: var(--brand-ink);
  text-align: center;
  opacity: 0;
  transform: translateY(-10px);
  animation: solid-register-in 0.4s ease 0.12s forwards;
  will-change: opacity, transform;
}

/* The form itself — single column, 380px max so it has the same
   visual rhythm as the design (input rows + CTA + bottom link).
   50px gap between fields per the spec. */
.solid-register-form {
  width: 100%;
  max-width: 380px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* Each field: label above, input below. The required asterisk
   floats inline after the label text in red. */
.solid-register-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(-10px);
  animation: solid-register-in 0.4s ease
    calc(0.2s + (var(--solid-register-i, 0) * 60ms)) forwards;
  will-change: opacity, transform;
}
.solid-register-form__field:nth-child(1) { --solid-register-i: 0; }
.solid-register-form__field:nth-child(2) { --solid-register-i: 1; }
.solid-register-form__field:nth-child(3) { --solid-register-i: 2; }
.solid-register-form__field:nth-child(4) { --solid-register-i: 3; }
.solid-register-form__field:nth-child(5) { --solid-register-i: 4; }

.solid-register-form__label {
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  color: var(--brand-ink-soft);
  margin: 0;
}
.solid-register-form__req {
  color: #b04646;
  margin-left: 2px;
}

/* Lime-tinted filled input — no visible border by default, full
   width. The red error border only appears AFTER the user attempts
   to submit (the `.is-submitted` class is toggled by the inline
   JS at the bottom of page-register.php), so the form looks
   neutral on first render and only flags problems on a real
   submit attempt. */
.solid-register-form__input,
.solid-register-form input.solid-register-form__input {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  background: var(--brand-lime) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: var(--brand-ink-deep);
  appearance: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
/* E2 — 0.5 alpha only read ~2.7:1 against the lime fill; 0.8 clears
   ~6.75:1 on `--brand-lime` (#dcea96). */
.solid-register-form__input::placeholder {
  color: rgba(43, 51, 41, 0.8);
}
.solid-register-form__input:focus,
.solid-register-form__input:focus-visible,
.solid-register-form input.solid-register-form__input:focus {
  background: #c8d5a2 !important;
  border-color: var(--brand-ink) !important;
  outline: none !important;
}
/* Red invalid border only after a submit attempt — scoped to
   `.solid-register-form.is-submitted`. The JS adds the class
   inside the form's submit handler (which fires before HTML5
   validation runs, so by the time `:invalid` is queried, the
   class is already attached). */
.solid-register-form.is-submitted .solid-register-form__input:invalid {
  border-color: rgba(176, 70, 70, 0.6) !important;
}

/* Password fields — wrap input + eye toggle in a relative box. */
.solid-register-form__pw {
  position: relative;
}
.solid-register-form__pw .solid-register-form__input {
  padding-right: 44px;
}
.solid-register-form__pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  color: var(--brand-ink);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
  box-shadow: none !important;
}
.solid-register-form__pw-toggle:hover,
.solid-register-form__pw-toggle:focus-visible {
  color: var(--brand-ink);
  background: rgba(79, 111, 82, 0.08) !important;
}
.solid-register-form__pw-toggle svg {
  width: 18px;
  height: 18px;
}
/* Eye SVGs are stacked — only one is visible at a time. Default
   shows the "eye" (password hidden); `.is-shown` swaps to the
   crossed-out eye (password shown). */
.solid-register-form__pw-eye-off {
  display: none;
}
.solid-register-form__pw-toggle.is-shown .solid-register-form__pw-eye {
  display: none;
}
.solid-register-form__pw-toggle.is-shown .solid-register-form__pw-eye-off {
  display: block;
}

/* "Registrarse" CTA — dark green, NOT full column width. Sizes
   to its content + 25px/80px padding, horizontally centered in
   the form column. Typography per spec: Inter 400 / 16 / 19.2 /
   0 letter-spacing / center / white. No border radius. */
.solid-register-form__submit {
  align-self: center;
  margin: 0;
  padding: 25px 80px;
  background: var(--brand-ink);
  color: #ffffff;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  border: 1px solid var(--brand-ink);
  border-radius: 0;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  opacity: 0;
  transform: translateY(-10px);
  animation: solid-register-in 0.4s ease 0.55s forwards;
  will-change: opacity, transform;
}
.solid-register-form__submit:hover,
.solid-register-form__submit:focus-visible {
  background: var(--brand-ink);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(79, 111, 82, 0.22);
}

/* Submit label / loading swap. Shared shape across every form on
   the site (contact, newsletter homepage, footer newsletter,
   login, register, edit-account): hide the loading span by
   default, swap on `.is-submitting`. The button also goes
   disabled, so cursor + opacity communicate the in-flight state. */
.solid-login-form__submit[disabled],
.solid-register-form__submit[disabled],
.solid-profile-form__submit[disabled],
.solid-login-form.is-submitting .solid-login-form__submit,
.solid-register-form.is-submitting .solid-register-form__submit,
.solid-profile-form.is-submitting .solid-profile-form__submit {
  cursor: progress;
  opacity: 0.7;
  transform: none;
}
.solid-login-form__submit-loading,
.solid-register-form__submit-loading,
.solid-profile-form__submit-loading {
  display: none;
}
.solid-login-form.is-submitting .solid-login-form__submit-label,
.solid-register-form.is-submitting .solid-register-form__submit-label,
.solid-profile-form.is-submitting .solid-profile-form__submit-label,
.solid-profile-form.is-submitting .solid-profile-form__submit-icon {
  display: none;
}
.solid-login-form.is-submitting .solid-login-form__submit-loading,
.solid-register-form.is-submitting .solid-register-form__submit-loading,
.solid-profile-form.is-submitting .solid-profile-form__submit-loading {
  display: inline-block;
}

/* Bottom "Already have an account? Log in" row. */
.solid-register-form__bottom {
  margin: 12px 0 0;
  text-align: center;
  font-family: "Inter", var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--brand-ink-soft);
  opacity: 0;
  transform: translateY(-10px);
  animation: solid-register-in 0.4s ease 0.65s forwards;
  will-change: opacity, transform;
}
.solid-register-form__login-link {
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: none;
  margin-left: 4px;
}
.solid-register-form__login-link:hover,
.solid-register-form__login-link:focus-visible {
  color: var(--brand-ink-deep);
  text-decoration: underline;
}

@keyframes solid-register-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .solid-register__logo,
  .solid-register__title,
  .solid-register-form__field,
  .solid-register-form__submit,
  .solid-register-form__bottom {
    animation: none;
    opacity: 1;
    transform: none;
    transition: opacity 0.15s linear;
  }
}

/* Mobile / narrow desktop: stack columns. */
@media (max-width: 991px) {
  .solid-register__inner {
    flex-direction: column;
    min-height: 0;
  }
  .solid-register__col--form {
    padding: 40px 24px;
    order: 1;
  }
  .solid-register__col--image {
    order: 2;
    min-height: 320px;
    aspect-ratio: 4 / 5;
  }
  .solid-register__title {
    font-size: 44px;
    line-height: 1.15;
  }
}
@media (max-width: 640px) {
  .solid-register__col--form {
    padding: 32px 20px;
  }
  .solid-register__title {
    font-size: 34px;
    line-height: 1.15;
    margin-bottom: 36px;
  }
}

/* ══════════════════════════════════════
   CTA shape — flat (no border-radius)
   ══════════════════════════════════════

   Applied site-wide so every primary/secondary CTA in the theme
   uses sharp 90° corners. Targets the custom NUA CTA classes
   (registered/login/profile/contact submits, hero / product /
   shop card / mini-cart / promo / wide-banner / category CTAs,
   newsletter submit, header lang/icon buttons) AND the
   WooCommerce/WP `.button` family so any vendor-rendered button
   matches. Uses `!important` because most of these rules already
   set their own radius alongside other base button styling. */
.solid-profile-form__submit,
.solid-login-form__submit,
.solid-register-form__submit,
.solid-contact-form__submit,
.solid-cta-consult,
.solid-confirmation__cta,
.solid-product-detail__cta,
.solid-product-detail__qty-btn,
.solid-mini-cart__qty-btn,
.solid-mini-cart__shop-cta,
.solid-mini-cart__close,
.solid-mini-qty__btn,
.solid-shop-card__cta,
.solid-shop-card__detail-cta,
.home-product-card__cart-btn,
.home-hero__cta,
.home-hero-cta,
.home-hero-slider__cta,
.home-manifesto__cta,
.home-promo-card__cta,
.home-tabs__btn,
.home-cat-card__cta,
.home-wide-banner__cta,
.home-cat-banner-nav__btn,
.home-cat-banner__cta,
.home-footer__newsletter-submit,
.home-newsletter__btn,
.product-card-v2__back-cta,
.product-card-v2__back-cta--primary,
.product-card-v2__back-cta--secondary,
.nua-header__lang-btn,
.nua-header__dropdown-toggle,
.nua-header__hamburger,
.nua-mobile-drawer__close,
.modal-menu__close,
.nua-search-modal__submit,
.woosc-bar-btn,
.woosc-bar-print,
.woosc-bar-share,
.woosc-bar-search,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-Button,
.button,
button.button,
input[type="submit"].button {
  border-radius: 0 !important;
}

/* ── Cookie consent banner (B4) ───────────────────────────────────────
   Fixed bottom bar. Slides up via transform/opacity only (GPU). Hidden
   until the inline JS adds .is-visible after first paint. */
.solid-cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 99990;
  width: min(960px, calc(100% - 32px));
  transform: translate(-50%, calc(100% + 24px));
  opacity: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 18px 22px;
  background: #1F2A1B;
  color: var(--brand-cream);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.solid-cookie-banner.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.solid-cookie-banner__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}
.solid-cookie-banner__text a {
  color: #cde0c4;
  text-decoration: underline;
}
.solid-cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.solid-cookie-banner__btn {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.solid-cookie-banner__btn--accept {
  background: var(--brand-ink);
  color: #fff;
}
.solid-cookie-banner__btn--accept:hover {
  background: #5e8262;
}
.solid-cookie-banner__btn--ghost {
  background: transparent;
  color: var(--brand-cream);
  border-color: rgba(244, 241, 234, 0.5);
}
.solid-cookie-banner__btn--ghost:hover {
  border-color: var(--brand-cream);
}
.solid-cookie-banner__btn:focus-visible {
  outline: 2px solid #cde0c4;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .solid-cookie-banner {
    bottom: 0;
    width: 100%;
    border-radius: 12px 12px 0 0;
  }
  .solid-cookie-banner__actions {
    width: 100%;
  }
  .solid-cookie-banner__btn {
    flex: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .solid-cookie-banner {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}


/* ── Price pill ──────────────────────────────────────────────────
   Royal-ink rounded-rectangle pill carrying every WC price across
   the site (shop archive, product detail, cart, mini-cart, order
   summary, order-received). Wrapped automatically by a single
   `woocommerce_get_price_html` filter in functions.php — the markup
   is `<span class="solid-price-pill">22.99</span>`, the CSS supplies
   the visual envelope. Per docs/design/2026-06-15-nua-brand-audit.md
   §3 Tier A item 4: the most distinctive single brand move, hits the
   largest surface area for the least code touched. */
.solid-price-pill {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  padding: 0.45em 1.15em 0.5em;
  background: var(--brand-ink);
  color: #fff;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(0.95rem, 0.5rem + 1vw, 1.15rem);
  line-height: 1;
  letter-spacing: 0.005em;
  border-radius: 9999px;
  white-space: nowrap;
  text-decoration: none;
  /* Defensively undo any inherited text-decoration/underline from
     WC's price markup wrappers (which sometimes nest the pill inside
     an <a> on product cards). */
}
/* Currency symbol comes from WC's actual store-currency config
   (resolved through `woocommerce_get_price_html` in functions.php),
   not hardcoded here. The pill is shape + color + type; the symbol
   respects WC (₡ on the CRC-base store since NUA-29), so it works
   for any store currency without touching this file. */
/* When the original WC `.amount` markup contains a discounted price
   inside a <del>/<ins> pair (sale price), the filter strips the
   wrapping but the strikethrough text leaks through if we don't reset
   it. The pill is one decisive value; if the merchant needs to show
   crossed-out original alongside, that lives outside the pill (above
   it as a small struck-out line). */
.solid-price-pill del,
.solid-price-pill ins {
  background: none;
  color: inherit;
  text-decoration: none;
  font-style: italic;
}
/* When the pill sits inline next to other text (e.g. in a sentence
   "ahora ₡22.99"), give it a small horizontal breathing room. */
:where(p, li, h1, h2, h3, h4) .solid-price-pill {
  margin: 0 0.25em;
  vertical-align: baseline;
}
/* Reduced-motion / a11y: no animation needed, but ensure focus
   outline is visible if the pill ever wraps an interactive element. */
.solid-price-pill:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ──────────────────────────────────────────────────────────────────
   Tier A polish round 1 — three user fixes, per the visual review on
   the design/nua-brand-audit branch:

     a) Header, drawer, footer and register logos are the client's vector
        wordmark, rendered inline from assets/img/nua-suplementos-wordmark.svg
        via template-parts/brand/logo.php. The ink comes from `color`
        (the SVG uses currentColor); the old raster logo was removed.
     b) Hover/active states that used to flip to logo-lime
        (--accent-lime #c5d202) now flip to IG deep navy
        (--brand-ink-deep var(--brand-ink-deep)) so the brand stays in-hue. White
        text on navy keeps WCAG AA.
     c) Sale prices render as "small struck-out original + pill new
        price" — the verbose "Original price was: …" / "Current price
        is: …" screen-reader copy is dropped from the visible markup
        in favor of the visual strike-through. (a11y note: WC's
        screen-reader labels are present on the underlying product
        markup elsewhere; the pill is a price *display*, not the only
        product affordance.)
   ────────────────────────────────────────────────────────────────── */

/* (a) Vector wordmark. The link is a flex box that centers the inline SVG;
       its `color` is the logo ink. Height is set per context below and
       width follows the intrinsic ratio (the SVG carries width/height
       attributes, so no layout shift). */
.nua-header__logo--wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--brand-ink);
  line-height: 1;
  padding: 4px 8px;
}
.nua-header__logo--wordmark:hover,
.nua-header__logo--wordmark:focus-visible {
  color: var(--brand-ink-deep);
  text-decoration: none;
}
.nua-logo {
  display: block;
  width: auto;
  height: 46px;
}
/* For navy/ink/lime surfaces; unused today. */
.nua-header__logo--wordmark.is-lime {
  color: var(--accent-lime);
}
.nua-mobile-drawer__logo .nua-logo {
  height: 36px;
}
.home-footer__logo .nua-logo {
  height: 52px;
}
.solid-register__logo .nua-logo {
  height: 60px;
}
@media (max-width: 767px) {
  .nua-header__logo .nua-logo {
    height: 30px;
  }
}
@media (max-width: 419px) {
  .nua-header__logo .nua-logo {
    height: 26px;
  }
}

/* (b) Hover sweep — every interactive surface that previously flipped
       to --accent-lime as a hover/active background now flips to
       --brand-ink-deep with white text. List the actual offenders by
       class name so we don't accidentally re-color a *surface* (which
       should keep lime if it was a lime surface). The original
       hover-lime rules from earlier in the file still load; these
       come later in the cascade and win on specificity. */
/* Homepage product cards (.product-card-v2):
     primary "al carrito"  hover → keep the brand-ink bg/color, just pop-up
     secondary "ver detalle" hover → flip to brand-ink bg + white text + pop-up
   Plus the shop archive card "Al carrito" (.solid-shop-card__cta) and the
   shared checkout/shop CTA utility classes — same pop-up, no color flip. */
.product-card-v2__back-cta--primary:hover,
.product-card-v2__back-cta--primary:focus-visible {
  background: var(--brand-ink); /* same as default — explicit so the
                                   earlier "flip to lime" rule loses */
  color: #ffffff;
  border-color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 45, 161, 0.32);
}
.product-card-v2__back-cta--secondary:hover,
.product-card-v2__back-cta--secondary:focus-visible {
  background: var(--brand-ink);
  color: #ffffff;
  border-color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 45, 161, 0.32);
}
.solid-checkout-cta:hover,
.solid-checkout-cta:focus-visible,
.solid-shop-cta:hover,
.solid-shop-cta:focus-visible,
.solid-shop-card__cta:hover,
.solid-shop-card__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(31, 45, 161, 0.32);
  outline: none;
}
/* Navigation: active link reads as the same accent-lime that the
   hover currently uses, with no underline (was a 1px border-bottom
   from the original .nua-header__menu a.is-active rule earlier in
   this file — overridden here). The polish-1 .nua-header__nav-link
   rules above didn't match real markup (the menu uses .nua-header__menu a,
   not .nua-header__nav-link) so they never fired — keeping the
   accurate selectors here. The lang-btn rules above are no longer
   needed since the lang-btn block at line ~7170 carries the right
   color directly. */
.nua-header__menu a.is-active,
.nua-header__menu a:hover,
.nua-header__menu a:focus-visible,
.nua-header__dropdown-toggle.is-active,
.nua-header__dropdown-toggle:hover,
.nua-header__dropdown-toggle:focus-visible,
.nua-header__dropdown-toggle[aria-expanded="true"] {
  color: var(--accent-lime);
  border-bottom: 0; /* nuke the legacy 1px underline on .is-active */
}
/* Focus rings: brand-ink-deep is the right "high attention" color
   against lime / cream / white surfaces. Overrides the legacy
   --accent-lime focus outlines from earlier in the file. */
*:focus-visible {
  outline-color: var(--brand-ink-deep);
}

/* (c) Sale price — small struck-out original price followed by the
       brand pill carrying the sale price. The original WC markup
       wrapped both prices in nested spans + included screen-reader
       labels ("Original price was: $X.XX. Current price is: $Y.YY.")
       that leaked through wp_strip_all_tags. The pill filter in
       functions.php now branches on $product->is_on_sale() and emits
       this shape directly: <span class="solid-price-old">…</span>
       <span class="solid-price-pill">…</span>. */
.solid-price-old {
  font-family: var(--font-sans);
  font-size: 0.85em;
  font-weight: 500;
  color: var(--brand-ink-soft);
  text-decoration: line-through;
  text-decoration-color: var(--brand-ink-soft);
  text-decoration-thickness: 1.5px;
  margin-right: 0.5em;
  vertical-align: baseline;
  white-space: nowrap;
}
/* Slightly tighter inline rhythm when the old + pill sit next to each
   other on a single line in a product card. */
.solid-price-old + .solid-price-pill {
  margin-left: 0;
}

/* ──────────────────────────────────────────────────────────────────
   Tier A polish round 3 — user-specific tweaks after the round-2
   palette sweep landed. Small surgical rules, no architectural change.
   ────────────────────────────────────────────────────────────────── */

/* Shop archive: WC orderby <select> + the ordering-form wrapper. The
   text in the dropdown was inheriting a muted/forest color from the
   old onsus theme cascade; force brand-ink so it reads coherent with
   the rest of the toolbar. Targets the rendered output of
   woocommerce_catalog_ordering() — which is
   <form class="woocommerce-ordering"><select class="orderby">…</select></form>. */
.solid-shop-toolbar__sort .orderby,
.woocommerce-ordering .orderby,
.solid-shop-toolbar__sort select,
.solid-shop-toolbar__sort {
  color: var(--brand-ink) !important;
}
.solid-shop-toolbar__sort .orderby option,
.woocommerce-ordering .orderby option {
  color: var(--brand-ink);
  background: #ffffff;
}

/* Shop archive product-card CTA — align the cart icon + label so they
   share a baseline. The label is text + the icon is a 15×19 img which
   creates an asymmetric baseline by default; `align-items: center` on
   the flex container (.solid-shop-card__cta) is already declared at
   line ~10743, but the icon's own implicit baseline pulls it down
   ~2px under the label. Lock the icon's vertical center to the label
   row by setting `align-self: center` + a tiny adjusted line-height
   on the label. */
.solid-shop-card__cta {
  align-items: center !important;
}
.solid-shop-card__cta-icon {
  align-self: center;
  display: block;
  flex: 0 0 auto;
}
.solid-shop-card__cta-label {
  line-height: 1; /* drop the default 1.4ish that was pushing the text down */
  display: inline-block;
}

/* Sale-strikethrough price (the original price next to the pill on a
   discounted product) — user wants light green at 0.8 opacity instead
   of the soft-ink we shipped in polish round 1. Uses --accent-lime
   (the saturated logo chartreuse #c5d202), which is the brightest
   green in the brand. 80% opacity dims it enough to read as a
   secondary value without losing the strike-through legibility. */
.solid-price-old {
  color: color-mix(in oklch, var(--accent-lime) 80%, transparent);
  text-decoration-color: color-mix(in oklch, var(--accent-lime) 80%, transparent);
}

/* Sobre Nosotros — scroll-inside-image parallax.
   `home.js::initImageParallax` writes a `--parallax-y` (0 → 1) on
   each `[data-parallax-image]` based on the element's progress through
   the viewport. We translate that into `background-position-y` so the
   visible window into the image moves from top → bottom as the section
   travels past — the image content appears to slide upward.

   The image is sized to 130% of container height so there's 30% of
   vertical overflow to scroll through. With `background-size: auto 130%`
   the width scales proportionally and `background-color` covers any
   edge reveal on portrait sources. */
.solid-about-philo__col--image[data-parallax-image],
.solid-about-why__col--image[data-parallax-image] {
  background-size: auto 130%;
  background-position: center calc(var(--parallax-y, 0.5) * 100%);
  will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
  .solid-about-philo__col--image[data-parallax-image],
  .solid-about-why__col--image[data-parallax-image] {
    background-size: cover;
    background-position: center center;
    will-change: auto;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Polish round 4 — shop archive fixes after the round-3 ride along

   1) Parallax effect was too subtle (only 30% overflow). Bump the
      image overscale to 160% so the visible window travels ~60% of
      container height across the section — clearly visible motion.
   2) Categories circles wrap to 2-3 rows on wide viewports. Convert
      to a horizontal scroll slider (overflow-x: auto + nowrap) so
      overflow stays on one row + becomes draggable / scrollable.
   3) Add 80px gap between categories block and the "Ver como"
      filter toolbar — currently they nearly touch.
   4) Shop product card heart had a lime chip background — the user
      wants it to match the homepage heart (icon-only, no chip).
      Match `.product-card-v2__wishlist`'s style: transparent bg,
      svg-based outline/fill heart.
   5) Shop card price pill: font too large + a 0.25em horizontal
      margin from the `:where(li) .solid-price-pill` rule pushes it
      ~5px to the right of the name. Reduce font + zero margin.
   6) Shop card image used `object-fit: cover` on tall portrait
      product photos → looks zoomed in + shows the photo's
      gradient/textured background as a band. Switch to
      `object-fit: contain` (matches homepage card) so the whole
      product shows on a clean cream surface.
   ────────────────────────────────────────────────────────────── */

/* 1 — Stronger parallax */
.solid-about-philo__col--image[data-parallax-image],
.solid-about-why__col--image[data-parallax-image] {
  background-size: auto 160%;
}
@media (prefers-reduced-motion: reduce) {
  .solid-about-philo__col--image[data-parallax-image],
  .solid-about-why__col--image[data-parallax-image] {
    background-size: cover;
  }
}

/* 2 — Categories: horizontal slider, never wrap.
   The markup is `.wrap-product-category > .owl-carousel > .item`. The
   `.owl-carousel` div is NOT actually initialized as Owl JS here — it
   just gets the class and renders the items flex-wrapped. We hijack
   that with a CSS-only horizontal scroller: nowrap, overflow-x: auto,
   plus scroll-snap for a polished feel and a thin themed scrollbar. */
.wrap-product-category .owl-carousel {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 16px;
  padding: 8px 4px 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--brand-ink) 35%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
}
.wrap-product-category .owl-carousel > .item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* Reset the staggered slide-in transition-delay set inline on each
     item (designed for the Owl carousel reveal). The CSS scroller has
     no entrance animation; the inline delay causes a brief flicker on
     first paint. */
  transition-delay: 0ms !important;
}
.wrap-product-category .owl-carousel::-webkit-scrollbar {
  height: 6px;
}
.wrap-product-category .owl-carousel::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--brand-ink) 35%, transparent);
  border-radius: 4px;
}
.wrap-product-category .owl-carousel::-webkit-scrollbar-track {
  background: transparent;
}

/* 3 — Breathing room between categories and the "Ver como" toolbar.
   Existing `.solid-shop-toolbar.meta-wrap` rule at line ~175 uses
   `margin: 0 0 !important`, so we need !important too — and we keep
   the original side margins unchanged, only adding top spacing. */
.solid-shop-toolbar.meta-wrap,
.meta-wrap.solid-shop-toolbar {
  /* 20px gap below the category rail (which sits directly above). */
  margin-top: 20px !important;
}

/* 4 — Shop card heart: icon-only, match the homepage wishlist style.
   YITH 3.x emits `<button class="yith-wcwl-add-to-wishlist-button">`
   inside `.yith-add-to-wishlist-button-block` — NOT an `<a>`. Both
   targets are covered below. The original lime-chip rule (line ~10832)
   only targeted `a`; on the block markup it never fired, but a fresh
   `<button>` ships with browser-default styling we need to reset. */
.solid-shop-card__heart a,
.solid-shop-card__heart .yith-wcwl-add-button a,
.solid-shop-card__heart .yith-wcwl-wishlistexistsbrowse a,
.solid-shop-card__heart .yith-wcwl-add-to-wishlist-button,
.solid-shop-card__heart button.yith-wcwl-add-to-wishlist-button {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px !important;
  margin: 0 !important;
  color: var(--brand-ink) !important;
  line-height: 0 !important;
  cursor: pointer;
  transition: transform 150ms ease;
}
.solid-shop-card__heart a::before,
.solid-shop-card__heart button::before {
  display: none !important;
}
/* Show YITH's svg (we previously hid <svg>) and style it like the
   homepage. The icon wrapper is `.yith-wcwl-icon-svg__wrapper` on
   the 3.x block markup. */
.solid-shop-card__heart svg,
.solid-shop-card__heart .yith-wcwl-icon-svg,
.solid-shop-card__heart .yith-wcwl-icon-svg__wrapper svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  stroke: var(--brand-ink) !important;
  fill: transparent !important;
  color: var(--brand-ink) !important;
  transition: fill 150ms ease, transform 150ms ease;
}
/* Re-show the span hidden earlier? No — keep label hidden (icon-only). */
.solid-shop-card__heart a > span,
.solid-shop-card__heart button > span,
.solid-shop-card__heart .yith-wcwl-add-to-wishlist-button-label {
  display: none !important;
}
.solid-shop-card__heart a:hover,
.solid-shop-card__heart button:hover {
  transform: scale(1.15);
}
.solid-shop-card__heart a:hover svg,
.solid-shop-card__heart button:hover svg {
  fill: color-mix(in oklch, var(--brand-ink) 20%, transparent) !important;
}
/* Filled (added) state — solid heart in brand ink. */
.solid-shop-card__heart .yith-wcwl-wishlistexistsbrowse a svg,
.solid-shop-card__heart .yith-wcwl-add-to-wishlist.exists a svg,
.solid-shop-card__heart a.yith-wcwl-add-to-wishlist-button--added svg,
.solid-shop-card__heart button.yith-wcwl-add-to-wishlist-button--added svg,
.solid-shop-card__heart .yith-add-to-wishlist-button-block--added svg {
  fill: var(--brand-ink) !important;
  stroke: var(--brand-ink) !important;
}

/* 5 — Shop card price pill: smaller + flush-left.
   The `:where(li) .solid-price-pill { margin: 0 0.25em }` rule from
   the brand pill base styles applies because the pill sits inside
   a WC `<li class="product">`. That margin pushes the pill ~5px to
   the right of the name baseline. Zero it for in-card pills and
   shrink the font. */
.solid-shop-card .solid-price-pill,
:where(li.product) .solid-shop-card .solid-price-pill {
  margin: 0;
  font-size: 13px;
  padding: 0.4em 0.95em 0.45em;
}

/* 6 — Image fit: contain on a consistent cream surface in a fixed top
   region. The user reported:
   (a) some PNGs (e.g. Activator) have transparent backgrounds and
       the cream card showed the checker artifact behind the bottle,
   (b) different aspect ratios make products render at visibly
       different heights even under `contain`.
   Fix: give the card one consistent brand-cream surface (image area
   AND text band — was white behind the image, cream only behind the
   text), constrain the image to the top 65% of the card with
   `inset: 0 0 35% 0`, leaving the bottom 35% as a dedicated text band.
   Every card now reserves an identical image area regardless of
   source aspect ratio, and heterogeneous product photography (white
   bg, black tubs, busy manufacturer packaging) all sit on the same
   brand surface instead of clashing white-vs-cream tiles. */
.solid-shop-card {
  background: var(--brand-cream) !important;
}
.solid-shop-card__img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: 65% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center;
  padding: 18px;
  background: var(--brand-cream);
  box-sizing: border-box;
}
/* The link's `::after` gradient was a tinted multiply that darkened
   the image to keep text legible against it. The new layout puts
   text in its own cream band below the image — no need to darken
   the photo. Remove the overlay so the white surface stays clean. */
.solid-shop-card__link::after {
  content: none !important;
}
/* Restyle the text band to sit in the bottom 35% as a cream block,
   not as a gradient over the image. White brand label, ink name +
   price. */
.solid-shop-card__overlay {
  top: 65% !important;
  bottom: 0 !important;
  background: var(--brand-cream) !important;
  padding: 14px 16px 16px !important;
  gap: 6px;
}
.solid-shop-card__brand {
  color: var(--brand-ink-soft) !important;
  margin: 0 !important;
}
.solid-shop-card__name {
  color: var(--brand-ink) !important;
  margin: 0 !important;
}
/* Title is now a real link (product title clickable on hover, not
   just the image/detail button) — inherit the h3's color/weight
   instead of the browser's default blue-underline, and only show
   the underline as a hover/focus affordance. */
.solid-shop-card__name-link {
  color: inherit;
  text-decoration: none;
}
.solid-shop-card__name-link:hover,
.solid-shop-card__name-link:focus-visible {
  text-decoration: underline;
}
/* Hover overlay-fade rule (the round-1 design wanted the overlay to
   fade out so the CTA could own the bottom band). With the new
   layout there's no CTA-on-image; keep the overlay visible always. */
.solid-shop-card:hover .solid-shop-card__overlay,
.solid-shop-card:focus-within .solid-shop-card__overlay {
  opacity: 1 !important;
}

/* ── Polish round 4.1 — additional tweaks per user feedback ──

   a) Cats slider first item gets clipped on resize / page restore
      because scroll-snap-type was proximity (loose snap). Switch to
      `mandatory` so any half-clipped first item snaps fully into
      view. Also shrink the per-item title to 10px so circles read
      as a tighter strip.
   b) Add prev/next buttons to the slider — injected via JS in
      `initShopCatSlider()` (home.js). Buttons sit absolute over the
      left/right edges of the strip with a brand-ink fill.
   c) Filter toolbar → product grid currently has a ~90px gap from
      the stacked cat-header (results count) + auto margins. The
      user wants a tight 40px. Collapse the cat-header margin and
      set 40px on .products-content explicitly. */
.wrap-product-category .owl-carousel {
  scroll-snap-type: x mandatory !important;
  scroll-padding-left: 4px;
  /* room on the right so the prev/next buttons don't sit on top of
     the trailing item */
  padding-right: 56px !important;
  padding-left: 56px !important;
  position: relative;
  /* The onsus/owl-carousel vendor CSS sets `justify-content: center`
     on this same element. With overflow + center alignment, flex
     items get centered around the container's midpoint — meaning
     the first 4-6 items are positioned with NEGATIVE offsetLeft
     (off-screen to the left). User saw this as "first category
     half-visible at the start". Force flex-start so the strip
     starts with item #1 at the left edge regardless of overflow. */
  justify-content: flex-start !important;
}
/* Smaller circle titles — was 12px, looked dense on a single row. */
.wrap-product-category .item .title,
.wrap-product-category .item .title a {
  font-size: 10px !important;
  letter-spacing: 0.04em;
}
/* Position the wrapper as relative so the injected JS buttons can
   absolute-position over it. */
.wrap-product-category {
  position: relative;
}
/* Prev/Next buttons (injected by initShopCatSlider in home.js).
   Hidden by default — only fade in when the user hovers or
   keyboard-focuses anywhere inside the category strip. Per user
   feedback: the buttons shouldn't distract until interaction. */
.solid-cats-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 9999px;
  background: var(--brand-ink);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(15, 20, 15, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: transform 150ms ease, opacity 200ms ease;
}
.wrap-product-category:hover .solid-cats-nav,
.wrap-product-category:focus-within .solid-cats-nav {
  opacity: 1;
  pointer-events: auto;
}
.solid-cats-nav:hover {
  transform: translateY(-50%) scale(1.08);
}
/* `.is-hidden` from the JS (at-the-edge state) wins over the
   hover-shows rule so the buttons stay hidden when there's nothing
   to scroll to in that direction, even mid-hover. */
.solid-cats-nav[disabled],
.wrap-product-category:hover .solid-cats-nav.is-hidden,
.wrap-product-category:focus-within .solid-cats-nav.is-hidden,
.solid-cats-nav.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}
.solid-cats-nav--prev { left: 4px; }
.solid-cats-nav--next { right: 4px; }

/* ── Polish round 4.3 — three more tweaks ──
   a) Manifesto image gets the scroll-inside-image effect. The existing
      home.js writes --parallax-y (0→1) on any [data-parallax-image];
      for an <img> we translate it on the Y axis instead of the bg-pos
      trick we use for div bg-images on the about page.
   b) Homepage product card images filled the entire 1:1 box edge-to-edge,
      reading as "zoomed in". Add 18px padding + white surface for the
      same visual breathing room the shop cards have.
   c) Shop card hover: paint the cream text band lime so the hover state
      signals brand-forward (image area stays white). */
/* Manifesto scroll-inside-image: a clipped frame (overflow:hidden,
   inset:0 on the figure) holds an oversized img (130% height). As
   --parallax-y goes 0→1, the img translates upward so the visible
   window scrolls DOWN through the image content. The frame is a
   sibling of the inset, so the inset can still break out of the
   figure's edges (the figure stays overflow:visible). */
.home-manifesto__main-frame {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 4px;
}
.home-manifesto__main-frame .home-manifesto__image {
  width: 100%;
  height: 160%;
  object-fit: cover;
  /* parallax-y range 0..1 → translateY 0% → -37.5% (= 60% / 1.60 to
     reveal the full bottom of the oversize image at the end). */
  transform: translateY(calc(var(--parallax-y, 0.5) * -37.5%));
  transition: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .home-manifesto__main-frame .home-manifesto__image {
    transform: translateY(-18.75%);
  }
}

.product-card-v2__image {
  background: #ffffff;
}
.product-card-v2__image img {
  padding: 18px;
  box-sizing: border-box;
}

.solid-shop-card:hover .solid-shop-card__overlay,
.solid-shop-card:focus-within .solid-shop-card__overlay {
  background: var(--brand-lime) !important;
}
.solid-cats-nav svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Filter row → product grid gap — user wants 40px. The current
   stack is: .solid-shop-toolbar + .solid-shop-cat-header (results
   count) + .products-content. Collapse the header's auto margin and
   give the grid its own 40px top margin so the spacing reads as
   one deliberate gap. */
.solid-shop-cat-header {
  margin: 0 !important;
  min-height: 0 !important;
}
/* 50px gap between the title and the product grid. Targets the grid
   inside the .solid-shop-results AJAX wrapper (it is no longer a direct
   child of .content-woocommerce). */
.solid-shop-results > .products-content {
  margin-top: 50px !important;
}

/* Shop pagination — earlier the active page rendered in logo lime
   (low contrast on cream) and the trailing block sat tight against
   the footer. User wants:
   - active page: solid brand-ink (royal indigo)
   - inactive pages: same blue at 70% opacity
   - 80px breathing room below the pagination block before the
     footer starts. */
.woocommerce-pagination {
  margin-bottom: 80px;
}
.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a {
  color: color-mix(in oklch, var(--brand-ink) 70%, transparent) !important;
}
.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li a.current,
.woocommerce-pagination ul li .current {
  color: var(--brand-ink) !important;
  font-weight: 800 !important;
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li *:hover {
  color: var(--brand-ink) !important;
}

/* ─────────────────────────────────────────────────────────────────
   Polish round 4.2 — four follow-up tweaks

   a) Footer bg should match the topbar (sticky header is #f9f7f0).
      The original footer was hard #ffffff so the seam between
      content cream and footer felt jarring.
   b) Shop card hover CTA was overlapping the price pill. Restructure
      the card so the image takes 55% of the height and the cream
      text band takes 45% — giving room for brand/name/price PLUS
      a 15px gap then the CTA that slides in on hover.
   c) Homepage product card hovers (Al carrito + Ver detalle) need
      WHITE text only on hover. The "Al carrito" rule already says
      color: #fff on hover but a later cascade override was painting
      it the same as bg. Add a high-specificity rule with
      `!important` on both background AND color.
   d) Cats slider was still showing the first item half-clipped on
      reload. The browser was restoring scrollLeft via bfcache before
      `initShopCatSlider`'s DOMContentLoaded reset could fire. Move
      the reset into the JS init's window.load + a fallback rAF.
   ────────────────────────────────────────────────────────────── */

/* (a) Footer bg → topbar cream */
footer.home-footer {
  background: #f9f7f0 !important;
}

/* (b) Shop card layout — make room for CTA below price.
   Image: top 55%, text band: bottom 45% (was 65% / 35%).
   Price reads as the closing element of the visible card, and the
   CTA fades in 15px below it on hover. */
.solid-shop-card__img {
  height: 55% !important;
}
.solid-shop-card__overlay {
  top: 55% !important;
}
/* Push the CTA wrap up so it sits 15px below the price. The price
   pill sits as the last child of the overlay's flex column, so the
   CTA's `bottom` value needs to reserve enough room to clear it.
   The overlay padding-bottom is 16px; price height ~24px; we want
   15px of breathing room — set bottom to 14px and rely on the
   45%-tall band to keep the CTA fully inside the card. */
.solid-shop-card__cta-wrap {
  bottom: 14px !important;
}
/* Add room INSIDE the text band so the price doesn't sit on top of
   the CTA. Adding margin-bottom to the price reserves the lane. */
.solid-shop-card__overlay {
  padding-bottom: 70px !important;  /* 15px gap + 37px CTA + 18px breathing */
}

/* C1 — Mobile shop-card price was invisible. The overlay above is
   pinned to a FIXED 45%-tall band (`top: 55% !important` + `bottom: 0`),
   so its available height scales with the card's own pixel height. On
   desktop-sized cards that's plenty of room for brand + name + price +
   the 70px CTA reserve; on narrow 2-up mobile cards (`ul.products` drops
   to `--products-cols: 2` at 767px, see line ~537) the card is short
   enough, and product names wrap to 2 lines often enough, that the
   content (~169px) exceeds the 45% band (~97px on a 161×215px mobile
   card) — the price (last flex child) gets pushed past the band and is
   clipped by `.solid-shop-card`'s own `overflow: hidden`. Un-pin the
   overlay's height on mobile so it grows UP from the card's bottom edge
   to fit its content instead of clipping it — a short name barely grows
   into the image area, a wrapped 2-line name grows further, but the
   price is always rendered and visible either way. */
@media (max-width: 767px) {
  .solid-shop-card__overlay {
    top: auto !important;
    height: auto !important;
  }
}

/* (c) Homepage CTA hover text — both buttons must read white on hover.
   The existing rules at line 15178 already specify color: #ffffff
   but an earlier rule wins on cascade in some places. Force it. */
.product-card-v2__back-cta--primary:hover,
.product-card-v2__back-cta--primary:focus-visible,
.product-card-v2__back-cta--secondary:hover,
.product-card-v2__back-cta--secondary:focus-visible {
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  border-color: var(--brand-ink) !important;
}
.product-card-v2__back-cta--primary:hover .product-card-v2__back-cta-label,
.product-card-v2__back-cta--secondary:hover .product-card-v2__back-cta-label,
.product-card-v2__back-cta--primary:hover *,
.product-card-v2__back-cta--secondary:hover * {
  color: #ffffff !important;
}
/* Secondary "Ver detalle" default state — keep transparent bg, ink
   text, ink outline; on hover only does it flip to filled ink + white
   text per (c). */
.product-card-v2__back-cta--secondary,
.product-card-v2__back-cta--secondary:link,
.product-card-v2__back-cta--secondary:visited {
  background: transparent !important;
  color: var(--brand-ink) !important;
  border-color: var(--brand-ink) !important;
}

/* ============================================================
   Add-to-cart button fixes (2026-06-18)
   ------------------------------------------------------------
   1) Homepage flip-card "Al carrito" CTA stays WHITE in every
      state. Resting CSS was already #fff, but WooCommerce's AJAX
      `.added` state left the label dark-on-navy (invisible). Lock
      the loading/added states to white too.
   2) On add, WC injects an unstyled "View cart" (.added_to_cart)
      link right after the button. Our mini-cart drawer already
      opens on add, so it is redundant — and as an extra flex item
      it reflowed the CTA row TALLER and showed an orphan "View
      cart" label. Hide it in both card types so the button keeps
      its height.
   3) Shop-archive CTA: lock the bag icon + label into one centered
      row with a balanced gap so they read as aligned.
   ============================================================ */
.product-card-v2__back-cta--primary,
.product-card-v2__back-cta--primary:link,
.product-card-v2__back-cta--primary:visited,
.product-card-v2__back-cta--primary.added,
.product-card-v2__back-cta--primary.loading {
  color: #ffffff !important;
}
.product-card-v2__back-ctas .added_to_cart,
.solid-shop-card .added_to_cart {
  display: none !important;
}
.solid-shop-card__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.solid-shop-card__cta-icon {
  flex: 0 0 auto;
  align-self: center !important;
  /* WooCommerce core sets `.woocommerce ul.products li.product a img
     { margin: 0 0 1em }`, which also hits this little bag icon and, in
     the centered flex row, pushed it ~8px above the label (the reported
     misalignment). Zero it out — the icon needs no margin. */
  margin: 0 !important;
}
.solid-shop-card__cta-label {
  line-height: 1;
}

/* ── Polish round 6 — white container card + hover CTA no longer
   overlaps the price ──

   Scoped to three container contexts, never to `.products.list`:
   `ul.products:not(.list)` (the main shop grid + category archives),
   `.home-bestsellers-v2__grid` (homepage Más Vendidos / Ofertas /
   Packs strips), `.solid-product-extras__grid` (the "Complementa tu
   rutina" related-products band on single-product + the wishlist
   page) — every place Homepage::renderShopCard() renders this same
   card. List view already fully redeclares display/position/
   grid-placement for every element below, so it's never touched by
   this block regardless.

   User feedback (2026-07-21):
   a) Shop cards should read as one white "container" with consistent
      padding, not a cream photo band stitched to a hover-lime text
      band, and every card should render at the same size.
   b) The hover "Al carrito" CTA visibly sat on top of the price.
   c) The two homepage-strip / related-products sections used a
      SEPARATE flip-card component (`.product-card-v2`) with the same
      class of hover bug — rather than patch it twice, every product
      listing on the site now renders this one card via
      Homepage::renderShopCard(), so a fix here fixes it everywhere.

   Root cause of (b): the CTA (`.solid-shop-card__cta-wrap`) and the
   text overlay (`.solid-shop-card__overlay`) are DOM siblings, each
   independently absolutely-positioned with hand-guessed pixel
   offsets (the overlay reserved a `padding-bottom`, the CTA sat at a
   fixed `bottom`). That only holds for a name that wraps to exactly
   the line count the guess assumed — a 2-line product name pushes
   the price past the reserved gap and the CTA lands on top of it.

   Fix: stop guessing pixel offsets. Turn the card into a column
   flexbox (image band → text band → actions row) so the CTA is
   normal-flow content that renders AFTER the price — it reserves its
   own space at all times (still invisible via opacity until hover)
   and can never overlap a sibling above it. Clamp the eyebrow to one
   line and the name to two so the text band's height is bounded
   either way. Badges and the wishlist heart stay absolutely
   positioned over the image band — they were never part of the
   vertical stack to begin with, so the flex conversion doesn't touch
   them. `aspect-ratio: 3/4` on the card (unchanged, set at the base
   rule) plus the fixed 55% image band keep every card the same size
   regardless of how much text a given product has. */

ul.products:not(.list) .solid-shop-card,
.home-bestsellers-v2__grid .solid-shop-card,
.solid-product-extras__grid .solid-shop-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface) !important;
  border-radius: 12px !important;
}
ul.products:not(.list) .solid-shop-card__link,
.home-bestsellers-v2__grid .solid-shop-card__link,
.solid-product-extras__grid .solid-shop-card__link {
  position: relative !important;
  /* 50% (was a hardcoded 55%) — measured against a real 2-line product
     name ("Betafuel polvo SIS strawberry & lime y Naranja"), 55% left
     the text band ~8px short, clipping the bottom edge of the hover
     CTA button against the card's own `overflow: hidden`. 50/50 gives
     the text band enough headroom for a 2-line name with margin. */
  flex: 0 0 50%;
  overflow: hidden;
}
ul.products:not(.list) .solid-shop-card__img,
.home-bestsellers-v2__grid .solid-shop-card__img,
.solid-product-extras__grid .solid-shop-card__img {
  height: 100% !important;
  background: var(--surface) !important;
}
ul.products:not(.list) .solid-shop-card__overlay,
.home-bestsellers-v2__grid .solid-shop-card__overlay,
.solid-product-extras__grid .solid-shop-card__overlay {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  flex: 1 1 auto;
  background: var(--surface) !important;
  padding: 14px 16px 0 !important;
}
ul.products:not(.list) .solid-shop-card:hover .solid-shop-card__overlay,
ul.products:not(.list) .solid-shop-card:focus-within .solid-shop-card__overlay,
.home-bestsellers-v2__grid .solid-shop-card:hover .solid-shop-card__overlay,
.home-bestsellers-v2__grid .solid-shop-card:focus-within .solid-shop-card__overlay,
.solid-product-extras__grid .solid-shop-card:hover .solid-shop-card__overlay,
.solid-product-extras__grid .solid-shop-card:focus-within .solid-shop-card__overlay {
  background: var(--surface) !important;
}
ul.products:not(.list) .solid-shop-card__brand,
.home-bestsellers-v2__grid .solid-shop-card__brand,
.solid-product-extras__grid .solid-shop-card__brand {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
ul.products:not(.list) .solid-shop-card__name,
.home-bestsellers-v2__grid .solid-shop-card__name,
.solid-product-extras__grid .solid-shop-card__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Belt-and-suspenders: measured in Chromium that `-webkit-line-clamp`
     correctly SIZES this box to 2 lines (confirmed via
     getBoundingClientRect) but doesn't reliably CLIP the paint of a
     3rd line when the text lives inside a nested `<a>` (the "..." on
     line 2 rendered, but a sliver of the 3rd word still visibly
     peeked out below it). An explicit max-height forces the clip.

     2.4em (a naive font-size × line-height × 2 guess) was WRONG and
     clipped real 2-line names ("Creatina Monohidrato 500g 151 Serv") —
     -webkit-box's internal line box for this font is taller than the
     declared `line-height: 1.15` suggests. Measured directly (both via
     a genuinely-2-line name's scrollHeight and a 3-line name's clamped
     getBoundingClientRect): 2 real lines need ~53px. 3.5em (56px)
     covers that with a few px of margin, while staying far short of
     what a 3rd line would add (~79px+), so the paint-bleed fix above
     still holds. */
  max-height: 3.5em;
}
ul.products:not(.list) .solid-shop-card__actions,
.home-bestsellers-v2__grid .solid-shop-card__actions,
.solid-product-extras__grid .solid-shop-card__actions {
  padding: 10px 16px 16px;
}
ul.products:not(.list) .solid-shop-card__cta-wrap,
.home-bestsellers-v2__grid .solid-shop-card__cta-wrap,
.solid-product-extras__grid .solid-shop-card__cta-wrap {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
}

/* ════════════════════════════════════════════════════════════════════
   Shop selectors — Categories (circles)
   Ported from the nua-selectores prototype. Scoped to .nua-cats so
   nothing else on the page is affected. The outer .wrap-product-category
   still owns the scroll-reveal + top margin.
   ════════════════════════════════════════════════════════════════════ */

/* ── Categories: circular scroll rail ───────────────────────────────── */
.nua-cats {
  font-family: var(--font-sans);
}
.nua-cats__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.nua-cats__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
}
.nua-cats__nav {
  display: flex;
  gap: 8px;
}
.nua-cats__btn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand-ink);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31, 45, 161, 0.1);
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}
.nua-cats__btn svg {
  width: 20px;
  height: 20px;
}
/* Prev is the secondary (white) button; next is the filled primary. */
.nua-cats__btn--prev {
  background: #ffffff;
  color: var(--brand-ink);
}
.nua-cats__btn:hover:not([disabled]) {
  transform: scale(1.06);
}
.nua-cats__btn[disabled] {
  background: #e3e5f5;
  color: #9aa1da;
  box-shadow: none;
  cursor: default;
}
.nua-cats__rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nua-cats__rail::-webkit-scrollbar {
  display: none;
}
.nua-cats__item {
  flex: 0 0 116px;
  width: 116px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  text-decoration: none;
}
.nua-cats__thumb {
  position: relative;
  width: 86px;
  height: 86px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(31, 45, 161, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 200ms ease;
}
.nua-cats__item:hover .nua-cats__thumb {
  box-shadow: 0 6px 20px rgba(31, 45, 161, 0.14);
}
.nua-cats__item.is-active .nua-cats__thumb {
  box-shadow: 0 0 0 2.5px var(--brand-ink);
}
.nua-cats__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background: #ffffff;
}
.nua-cats__initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #f0f1fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--brand-ink);
}
.nua-cats__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--accent-lime);
  color: #131b5e;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--brand-cream);
}
.nua-cats__item.is-active .nua-cats__count {
  background: var(--brand-ink);
  color: #ffffff;
}
.nua-cats__label {
  max-width: 108px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  color: var(--brand-ink-soft);
}
.nua-cats__item.is-active .nua-cats__label {
  color: var(--brand-ink);
}
.nua-cats__underline {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background 200ms ease;
}
.nua-cats__item.is-active .nua-cats__underline {
  background: var(--accent-lime);
}
@media (prefers-reduced-motion: reduce) {
  .nua-cats__btn,
  .nua-cats__thumb,
  .nua-cats__underline {
    transition: none;
  }
}

/* Dim the grid while an AJAX filter/category change is in flight. */
.products-content.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 150ms ease;
}

/* ── Collection archive header (Deportes / Colecciones) ───────────────
   Functional only — prints the term name + description above the grid
   on a /{base}/{slug}/ archive. Final visual treatment is Spec 3. */
.collection-archive-header {
  margin: 30px 0 20px;
  text-align: center;
}
.collection-archive-header__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-ink);
}
.collection-archive-header__desc {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-ink-soft);
}

/* ── Homepage "Colecciones" strip ──────────────────────────────────────
   Functional only — a horizontal row of collection cards (thumbnail +
   label) below the home-section spacing tokens already used elsewhere on
   the page. Final visual treatment is Spec 3. */
.collection-strip {
  padding: 48px 0;
}
.collection-strip__grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.collection-strip__grid::-webkit-scrollbar {
  display: none;
}
.collection-strip__item {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}
.collection-strip__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  /* `cover` cropped non-square product photos — same class of bug fixed
     on the shop card and the category tiles. `contain` + padding shows
     the whole product, letterboxed, on every collection-strip consumer
     (Colecciones and Deportes alike), not just the ones with their own
     override below. White background matches the rest of the site's
     product-photo surfaces. */
  object-fit: contain;
  padding: 10%;
  box-sizing: border-box;
  background: var(--surface);
  /* Same fixed-height-attribute trap as the category tiles: the <img>
     carries `height="200"` as an HTML attribute, which beats
     `aspect-ratio` whenever the rendered width isn't already 200px
     (true here on any row that isn't the old fixed-200px carousel).
     Hand sizing back to aspect-ratio unconditionally. */
  height: auto;
}
.collection-strip__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--brand-ink);
}

/* Category-tiles (NUA-22 / Spec 3) — reuses the collection-strip markup;
   this is the only delta, the small muted product-count line under the
   label. */
.category-tiles__count {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: var(--home-text-muted, #6b7280);
  margin-top: -4px;
}

/* Tile treatment — shared by `.category-tiles` ("Compra por categoría")
   and `.sport-tiles` ("Deportes") (2026-07-21 / 2026-07-22). Both are
   fixed, structural taxonomies — not a variable promotional list like
   Colecciones, which keeps the original scroll-carousel row below
   untouched. The crop fix (object-fit: contain, white bg) now lives on
   the base `.collection-strip__thumb` rule above and applies everywhere,
   including Colecciones; what's scoped here is the layout: a
   stretching grid instead of a horizontal scroll (dead space on
   anything wider than ~1000px otherwise), a hover ring, and a bigger
   title so the section reads as real shop navigation, not a caption. */
.category-tiles .collection-strip__grid,
.sport-tiles .collection-strip__grid {
  display: grid;
  /* auto-fit + minmax rather than a fixed column count: category-tiles
     has 9 items (wraps to two rows) and sport-tiles has 6 (fits one on
     desktop) — this one rule serves both, and either count can change
     again without another CSS edit. Tiles keep stretching to fill the
     row, so a short final row stays aligned to the left edge instead
     of centring oddly. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px 20px;
  overflow-x: visible;
}
@media (min-width: 992px) {
  /* Cap category-tiles at 5 per row so its 9 items read as a
     deliberate 5 + 4 rather than stretching into one very wide row on
     a large monitor. */
  .category-tiles .collection-strip__grid {
    grid-template-columns: repeat(5, 1fr);
  }
  /* Sport-tiles' 6 items fit a single row at their natural width. */
  .sport-tiles .collection-strip__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.category-tiles .collection-strip__item,
.sport-tiles .collection-strip__item {
  flex: none;
  width: auto;
  /* anchor for the hover ring pseudo-element below */
  position: relative;
}

/* Hover affordance — an indigo ring that springs in around the image.
   Deliberately DIFFERENT from the product-card hover (which lifts the
   card and reveals an "Al carrito" CTA): these tiles navigate to an
   archive, they have no cart action, so they get their own quieter
   vocabulary. The ring lives on a pseudo-element of the <a> rather
   than a border on the <img>, because a border on the image would
   change its box and re-letterbox the `contain` fit on hover.
   Animating opacity + transform only (per the perf rule) keeps this
   on the compositor — no layout, no repaint of the photo. */
.category-tiles .collection-strip__item::after,
.sport-tiles .collection-strip__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* matches .collection-strip__thumb's own square box, so the ring
     frames the image only — never the label/count below it */
  aspect-ratio: 1 / 1;
  border: 2px solid var(--primary);
  border-radius: 12px;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 200ms ease-out,
    transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}
.category-tiles .collection-strip__item:hover::after,
.category-tiles .collection-strip__item:focus-visible::after,
.sport-tiles .collection-strip__item:hover::after,
.sport-tiles .collection-strip__item:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .category-tiles .collection-strip__item::after,
  .sport-tiles .collection-strip__item::after {
    transition: none;
  }
}
.category-tiles .collection-strip__label,
.sport-tiles .collection-strip__label {
  font-size: 20px;
}
@media (max-width: 767px) {
  /* Stretched columns are too cramped on mobile — revert to the
     original horizontal-scroll row, still with the contain/padding
     crop fix and the bigger title. */
  .category-tiles .collection-strip__grid,
  .sport-tiles .collection-strip__grid {
    display: flex;
    overflow-x: auto;
  }
  .category-tiles .collection-strip__item,
  .sport-tiles .collection-strip__item {
    flex: 0 0 160px;
    width: 160px;
  }
  .category-tiles .collection-strip__label,
  .sport-tiles .collection-strip__label {
    font-size: 16px;
  }
}

/* ── Product Bundles (NUA-21) ──────────────────────────────────────────
   Loop-card "Paquete" badge, PDP savings line + included-products list,
   and the order-side / cart component list shared by the mini-cart drawer
   and the my-account order detail. See
   docs/plans/done/2026-07-17-product-bundles.md. */
.solid-shop-card__badge--bundle {
  /* Deep-lime green — distinct from the sale badge (var(--primary)) and
     the "new" badge (#bed100). */
  background: var(--success);
}

.solid-bundle-savings {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: -30px 0 24px;
  font-family: var(--font-sans);
}
.solid-bundle-savings__was {
  font-size: 15px;
  color: var(--brand-ink-soft);
  text-decoration: line-through;
  opacity: 0.7;
}
.solid-bundle-savings__was .woocommerce-Price-amount {
  color: inherit;
}
.solid-bundle-savings__amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--success);
}
.solid-bundle-savings__amount .woocommerce-Price-amount {
  color: inherit;
  font-weight: inherit;
}

.solid-bundle-components {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.solid-bundle-components__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.solid-bundle-components__thumb {
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--brand-cream);
}
.solid-bundle-components__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.solid-bundle-components__name {
  flex: 1 1 auto;
  font-size: 14px;
  color: var(--brand-ink);
  text-decoration: none;
}
.solid-bundle-components__name:hover {
  text-decoration: underline;
}
.solid-bundle-components__qty {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--brand-ink-soft);
}

/* Order-side components list (admin order screen, emails, thank-you,
   my-account view-order) — rendered by Bundles::renderComponentsList(). */
.solid-bundle-order-components__label {
  margin: 6px 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink-soft);
}
.solid-bundle-order-components {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  font-size: 13px;
  color: var(--brand-ink-soft);
}

/* Mini-cart drawer — WC's own wc_get_formatted_cart_item_data() renders a
   generic <dl class="variation">; restyle it to match the drawer's small
   muted-text rhythm instead of WC's default table-ish spacing. */
.solid-mini-cart__item-data dl.variation {
  margin: 2px 0 4px;
  font-size: 12px;
  color: var(--brand-ink-soft);
}
.solid-mini-cart__item-data dl.variation dt,
.solid-mini-cart__item-data dl.variation dd {
  display: inline;
  margin: 0;
  font-weight: 400;
}
.solid-mini-cart__item-data dl.variation dt::after {
  content: ": ";
}
.solid-mini-cart__item-data dl.variation p {
  margin: 0;
}

/* ── Store mode banner (NUA-35, StoreMode::renderBanner) ──
   Slim full-width strip above the header while SOLID_STORE_MODE is
   coming_soon. Deep navy with lime accent, AA contrast. */
.solid-store-mode-banner {
  background: var(--brand-ink-deep);
  color: #ffffff;
  text-align: center;
  padding: 10px 16px;
}
.solid-store-mode-banner__text {
  margin: 0 auto;
  max-width: 960px;
  font-size: 14px;
  line-height: 1.45;
}
.solid-store-mode-banner__text strong {
  color: var(--brand-lime);
  margin-right: 4px;
}