/*
 * Shop: /tienda/ landing, category archives, search and the front-page shop section. Cards =
 * Product Collection + trioni/product-card* patterns (well, type, name = the only tab stop,
 * trioni/product-facts, trioni/product-offer). No white cards: text sits on the paper.
 */

/* AA on stone bands: --muted gives 4.45:1 there, --text-soft 9.84:1 (research diseno.md §9). */
.shop-family--stone,
.page-hero {
  --muted: var(--text-soft);
}

/* ---------- Chips: one row that scrolls sideways when it does not fit ---------- */
.shop__chips {
  display: flex;
  gap: var(--s-2);
  margin: 0 -3px var(--s-4);
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.shop__chips::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.chip:hover {
  border-color: var(--ink);
}

.chip[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.chip__count {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}

.chip[aria-current="page"] .chip__count {
  color: var(--on-ink-muted);
}

/* ---------- Product grid ---------- */
/* WooCommerce's empty store-notices slot keeps a 24 px margin above every collection. */
.products > .wc-block-components-notices:not(:has(*)) {
  margin: 0;
}

.products ul.wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.products .wc-block-product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  width: auto;
  min-width: 0;
  margin: 0;
  text-align: left;
}

/*
 * Cards in a row share their row tracks (image, label, title, facts, price), so the prices line
 * up even when one title or tax note wraps (on phones they started at different heights).
 */
@supports (grid-template-rows: subgrid) {
  .products .wc-block-product {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: var(--s-1);
    align-content: start;
  }

  .products .wc-block-product > .product__offer {
    align-self: start;
    margin-top: 0;
  }
}

.products .product__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin: 0 0 var(--s-3);
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(170deg, #f3f0e9, #e7e2d7);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.products .product__media img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--dur-slow) var(--ease);
}

.products .wc-block-product:hover .product__media {
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

.products .wc-block-product:hover .product__media img {
  transform: scale(1.04);
}

.products .product__type {
  color: var(--gold-text);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.products .product__name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

/* The title link covers the whole card: one tab stop per product. */
.products .product__name a::before {
  content: '';
  position: absolute;
  inset: 0;
}

.products .product__name a:focus-visible {
  outline: none;
}

.products .wc-block-product:has(.product__name a:focus-visible) {
  outline: 2px solid var(--focus, var(--ink));
  outline-offset: 4px;
  border-radius: 6px;
}

.products .product__facts {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-1) 0 var(--s-3);
}

.product__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.products .product__meta {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.products .product__offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.products .product__price {
  min-width: 0;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 0.9rem + 0.9vw, 1.5rem);
  line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* «Consultar en tienda» is words, not a figure: it may wrap instead of running into the arrow. */
.products .product__price:has(.trioni-price-blocked) {
  white-space: normal;
}

.product__unit {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
}

.products .product__go {
  width: 16px;
  height: 16px;
  color: var(--gold-ui);
  transition: transform var(--dur-fast) var(--ease);
}

.products .wc-block-product:hover .product__go {
  transform: translateX(3px);
}

.products .product__tax {
  grid-column: 1 / -1;
  margin-top: var(--s-1);
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* Availability (card and product page): dot + text, never colour alone. */
.product__stock {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--open);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.products .product__stock {
  align-items: flex-start;
  margin: var(--s-2) 0 0;
}

/* When the text wraps (two-column grid on phones) the dot stays on the first line. */
.products .product__stock .status-dot {
  margin-top: calc((1lh - 8px) / 2);
}

.product__stock .status-dot {
  background: currentColor;
}

.product__stock:is(.is-order, .is-single) {
  color: var(--gold-text);
}

.product__stock:is(.is-out, .is-paused) {
  color: var(--muted);
}

.products.products--duo ul.wc-block-product-template {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
}

.shop__empty {
  flex: 1 1 100%;
  max-width: 60ch;
  color: var(--text-soft);
}

.shop__empty-state {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  padding-block: var(--s-5);
}

.shop__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
  color: var(--muted);
  font-size: var(--fs-xs);
}

/*
 * ---------- One-row product strips ----------
 * .products--rail (front page) keeps advancing with product-rail.js; .products--compact
 * («Otros productos» on the product page) is the same row without motion. Cards per view:
 * 2 below 360 px, 3 on phones, 4 on tablets, 5 from 1100 px. Without JS the row scrolls with
 * snap; product-rail.js drops the snap while it runs (.is-running). A card here is photo, name,
 * price and the VAT line (never hidden: it is the legal line).
 */
.products:is(.products--rail, .products--compact) {
  --rail-n: 3;
  --rail-gap: var(--s-2);
  margin-bottom: 0;
}

.products:is(.products--rail, .products--compact) ul.wc-block-product-template {
  position: relative;
  grid-template-columns: none;
  grid-auto-columns: calc((100% - (var(--rail-n) - 1) * var(--rail-gap)) / var(--rail-n));
  grid-auto-flow: column;
  gap: 0 var(--rail-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.products:is(.products--rail, .products--compact) ul.wc-block-product-template::-webkit-scrollbar {
  display: none;
}

.products:is(.products--rail, .products--compact) ul.wc-block-product-template.is-running {
  scroll-snap-type: none;
}

.products:is(.products--rail, .products--compact) .wc-block-product {
  grid-row: span 3;
  scroll-snap-align: start;
}

.products:is(.products--rail, .products--compact) :is(.product__type, .product__facts, .product__stock, .product__go) {
  display: none;
}

.products:is(.products--rail, .products--compact) .product__media {
  margin-bottom: var(--s-2);
}

/* No lift inside the scroller (it would be clipped); the focus ring sits inside the card. */
.products:is(.products--rail, .products--compact) .wc-block-product:hover .product__media {
  box-shadow: none;
  transform: none;
}

.products:is(.products--rail, .products--compact) .wc-block-product:has(.product__name a:focus-visible) {
  outline-offset: -2px;
}

.products:is(.products--rail, .products--compact) .product__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.78125rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.products:is(.products--rail, .products--compact) .product__offer {
  grid-template-columns: minmax(0, 1fr);
  padding-top: var(--s-1);
  border-top: 0;
}

.products:is(.products--rail, .products--compact) .product__price {
  font-size: var(--fs-sm);
  line-height: 1.25;
}

.products:is(.products--rail, .products--compact) .product__tax {
  margin-top: 2px;
  font-size: var(--fs-2xs);
}

/* «Consultar en tienda» is words, not a figure: small sans so it keeps to one line. */
.products:is(.products--rail, .products--compact) .product__price:has(.trioni-price-blocked) {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.products:is(.products--rail, .products--compact) .product__price .trioni-price-blocked {
  font-size: inherit;
}

/* Under the rail: «Ver toda la tienda» on the left, the arrows and the pause button on the right.
   The pause button precedes the rail in the DOM (a keyboard reaches it before the products) and
   is placed on the controls row; the row keeps its place free while the button shows. */
.rail__controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  margin-top: var(--s-3);
}

.shop > .wrap {
  position: relative;
}

.shop > .wrap > .rail__toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  grid-column: auto;
}

.rail__toggle:not([hidden]) ~ .rail__controls {
  padding-right: calc(44px + var(--s-2));
}

/* A 44 px target whose underline stays under the words. */
.rail__all {
  min-height: 44px;
  margin-right: auto;
  padding-bottom: 0;
  background-position: left bottom 10px;
}

.rail__toggle,
.rail__nav {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.rail__toggle:hover,
.rail__nav:hover {
  border-color: var(--ink);
  background: var(--stone);
}

.rail__toggle:focus-visible,
.rail__nav:focus-visible {
  outline: 2px solid var(--focus, var(--ink));
  outline-offset: 2px;
}

.rail__toggle svg,
.rail__nav svg {
  width: 16px;
  height: 16px;
}

.rail__nav--prev svg {
  transform: scaleX(-1);
}

.rail__toggle[hidden],
.rail__nav[hidden] {
  display: none;
}

@media (min-width: 600px) {
  .products:is(.products--rail, .products--compact) {
    --rail-n: 4;
    --rail-gap: var(--s-4);
  }

  .products:is(.products--rail, .products--compact) .product__name {
    font-size: var(--fs-sm);
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .products:is(.products--rail, .products--compact) .product__price {
    font-size: var(--fs-md);
  }

  .products:is(.products--rail, .products--compact) .product__price:has(.trioni-price-blocked) {
    font-size: var(--fs-sm);
  }
}

@media (min-width: 1100px) {
  .products:is(.products--rail, .products--compact) {
    --rail-n: 5;
  }

  /* Wide screens: the category chips sit on the heading's line, right-aligned. */
  .shop > .wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-6);
  }

  .shop > .wrap > * {
    grid-column: 1 / -1;
  }

  .shop > .wrap > .section-head {
    grid-column: 1;
  }

  .shop > .wrap > .shop__chips {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
    justify-content: flex-end;
    margin-bottom: var(--s-5);
  }
}

/* The arrows are for wide screens with reduced motion or a paused rail; phones swipe. */
@media (max-width: 1099px) {
  .rail__nav {
    display: none;
  }
}

@media (max-width: 359px) {
  .products:is(.products--rail, .products--compact) {
    --rail-n: 2;
  }
}

/* ---------- Page heads: /tienda/ and categories ---------- */
.shop-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin: var(--s-4) 0;
  padding: 0;
  list-style: none;
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.shop-hero__facts li,
.brand-line {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}

.shop-hero__facts svg,
.brand-line svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--gold-text);
}

.brand-line {
  max-width: 72ch;
  margin: var(--s-4) 0 0;
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

/* ---------- /tienda/ families ---------- */
.shop-family .section-head {
  margin-bottom: var(--s-4);
}

.shop-family .brand-line {
  margin: 0 0 var(--s-4);
}

.shop-family > .wrap > .products,
.shop-family .weight-index + .products {
  margin-top: var(--s-5);
}

.site-main .shop-family--stone,
.site-main .shop-family--stone + .section {
  padding-block: var(--section-pad);
}

.shop-family--stone {
  background: var(--stone);
}

.weight-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--s-2);
}

.weight-chip {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 44px;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.weight-chip:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.weight-chip__w {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}

.weight-chip__pg {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Grain teaser: ink panel (tg-cta) with the tier strip; two columns from 960px. */
.shop-grain__panel {
  display: grid;
  gap: var(--s-5);
}

.shop-grain__panel .eyebrow {
  color: var(--gold-on-ink);
}

.shop-grain__text > * + * {
  max-width: 52ch;
  margin-top: var(--s-3);
  color: var(--on-ink-muted);
}

.tier-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tier-strip li {
  padding: var(--s-2) var(--s-3);
  border: 1px solid #4a473d;
  border-radius: 6px;
  color: var(--on-ink);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tier-strip .tier-strip__note {
  padding-inline: 0;
  border: 0;
  color: var(--on-ink-muted);
  font-size: var(--fs-xs);
  white-space: normal;
  align-self: center;
}

.shop-grain__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.shop-landing__foot {
  padding-top: var(--section-pad);
}

/* ---------- Archive toolbar and filters ---------- */
.shop-archive__body {
  padding-top: var(--s-5);
}

.shop-archive__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.shop-archive__toolbar select {
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
}

.shop-filters {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.shop-filters .chip {
  min-height: 44px;
}

.shop-archive .shop-faq {
  margin-top: clamp(var(--s-7), 6vw, var(--s-8));
}

@media (min-width: 960px) {
  .shop-grain__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s-8);
  }

  .shop-grain__actions {
    grid-column: 1 / -1;
  }
}

@media (min-width: 860px) and (max-width: 1099px) {
  .shop-archive .products:not(.products--duo) .wc-block-product-template {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1099px) {
  .products ul.wc-block-product-template {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .products ul.wc-block-product-template {
    gap: var(--s-5) var(--s-3);
  }

  /* Phones: the weights run in one row that scrolls sideways. */
  .weight-index {
    display: flex;
    margin-inline: -3px;
    padding: 3px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .weight-index::-webkit-scrollbar {
    display: none;
  }

  .weight-chip {
    flex: none;
    min-width: 64px;
  }

  .products .product__name {
    font-size: var(--fs-base);
  }

  .products.products--duo ul.wc-block-product-template {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-grain__actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .products .product__media,
  .products .product__media img,
  .products .product__go,
  .weight-chip {
    transition: none;
  }

  .products .wc-block-product:hover :is(.product__media, .product__media img, .product__go),
  .weight-chip:hover {
    transform: none;
  }
}