/* ─────────────────────────────────────────────────────────────────────────
   Trigo Decoración — theme styles
   Ported 1:1 from the Claude Design prototype ("Trigo — Web") styles.css.
   Editorial, aspirational, lifestyle-magazine feel.
   Palette: Brisa (warm cream + refined teal + orange ember) — baked in as
   the single production look (the prototype's "vibe/palette" switcher was
   a design-time tool only, not part of the shipped site).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg:           #f6f2ea;
  --bg-tint:      #ecf0f0;
  --paper:        #ffffff;
  --ink:          #1a1f22;
  --ink-2:        #3a4145;
  --muted:        #7a8186;
  --line:         rgba(26, 31, 34, 0.10);
  --line-2:       rgba(26, 31, 34, 0.18);
  --primary:      #2f8a9d;
  --primary-deep: #1e6573;
  --primary-soft: #d3e4e7;
  --accent:       #d97326;
  --accent-soft:  #f4dcc5;

  --font-display: "Instrument Serif", "EB Garamond", Georgia, serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --maxw:    1280px;
  --gutter:  clamp(20px, 4vw, 56px);
  --radius:  4px;
  --radius-lg: 12px;
}

/* ── reset (scoped to the theme's own content, WP/admin bar untouched) ── */
body.trigo-theme {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.trigo-theme img { display: block; max-width: 100%; }
.trigo-theme button { font: inherit; cursor: pointer; }
.trigo-theme a { color: inherit; text-decoration: none; }
.trigo-theme *, .trigo-theme *::before, .trigo-theme *::after { box-sizing: border-box; }

/* ── shell ── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--wide { max-width: 1480px; }
.container--narrow { max-width: 940px; }

/* ── type system ── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.eyebrow--dim { color: rgba(246, 242, 234, 0.55); }
.kicker {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary-deep);
}
.trigo-theme h1, .trigo-theme h2, .trigo-theme h3, .trigo-theme h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
.trigo-theme h1 { font-size: clamp(48px, 7vw, 104px); }
.trigo-theme h2 { font-size: clamp(36px, 5vw, 64px); }
.trigo-theme h3 { font-size: clamp(24px, 2.6vw, 36px); }
.trigo-theme h4 { font-size: clamp(20px, 2vw, 26px); }
.display-serif-italic { font-style: italic; }
.trigo-theme p { text-wrap: pretty; max-width: 62ch; }
.muted { color: var(--muted); }
.mt-xs { margin-top: 6px; } .mt-sm { margin-top: 10px; } .mt-md { margin-top: 18px; }

/* ── header top (optional widget area) ── */
.header-top {
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
}
.header-top__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding-block: 8px;
}
.header-top a { color: var(--bg); text-decoration: underline; text-underline-offset: 2px; }
.header-top .widget { margin: 0; }
.header-top__item { display: inline-flex; align-items: center; }

/* ── nav ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(246, 242, 234, 0.78);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 78px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--ink-2);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s;
  display: inline-block;
}
.nav-link:hover { color: var(--primary-deep); }
.nav-link.is-active, .current-menu-item > .nav-link, .current-menu-ancestor > .nav-link { color: var(--primary-deep); }
.nav-link.is-active::after,
.current-menu-item > .nav-link::after,
.current-menu-ancestor > .nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--primary);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* Scoped with the #site-nav ancestor + full class chain so these always
   win over a same-named ".icon-btn"/".nav-burger" utility class that
   another plugin's global stylesheet (Elementor, UAE, WooCommerce…) might
   also define — generic class names collide easily, and a plain
   single-class rule here can lose that fight depending on load order. */
/* !important because this exact element was the one that turned out to
   need it before (see the note above): a plugin's own same-named class
   was still winning without it. */
#site-nav .nav-actions .nav-burger { display: none !important; }
#site-nav .nav-actions .icon-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  transition: all 0.2s;
}
#site-nav .nav-actions .icon-btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}
/* !important: confirmed live that this still lost to some other button
   style without it — same class of collision as #site-nav .icon-btn
   earlier in this file. */
.cart-pill.js-cart-toggle { border: 1px solid var(--ink) !important; color: var(--ink) !important; }
.cart-pill:hover, .cart-pill.js-cart-toggle:hover {
  border-color: var(--ink) !important; background: var(--ink) !important; color: var(--bg) !important;
}
.cart-pill .cart-count {
  background: var(--accent);
  color: #fff;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center; justify-content: center;
}
/* ── mini-cart dropdown ── */
.mini-cart { position: relative; }
.mini-cart-panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 90;
  width: min(360px, 90vw);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  padding: 20px;
}
@media (max-width: 480px) { .mini-cart-panel { position: fixed; top: 84px; right: 12px; left: 12px; width: auto; } }
.widget_shopping_cart_content .woocommerce-mini-cart {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
  max-height: 50vh; overflow-y: auto;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item {
  position: relative; display: flex; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.widget_shopping_cart_content .woocommerce-mini-cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
.widget_shopping_cart_content .woocommerce-mini-cart-item img {
  width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); background: var(--bg-tint); flex-shrink: 0;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item a:not(.remove) {
  font-family: var(--font-display); font-size: 16px; color: var(--ink); display: block; padding-right: 20px;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item .quantity { border: 0; font-size: 12px; color: var(--muted); font-family: var(--font-mono); display: block; }
.widget_shopping_cart_content .woocommerce-mini-cart-item dl.variation { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.widget_shopping_cart_content .woocommerce-mini-cart-item dl.variation dt,
.widget_shopping_cart_content .woocommerce-mini-cart-item dl.variation dd { display: inline; margin: 0; font-weight: 400; }
.widget_shopping_cart_content .woocommerce-mini-cart-item .remove {
  position: absolute; top: 0; right: 0; color: var(--muted); font-size: 18px; line-height: 1;
}
.widget_shopping_cart_content .woocommerce-mini-cart-item .remove:hover { color: var(--accent); }
.widget_shopping_cart_content .woocommerce-mini-cart__total {
  display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 18px;
  padding-top: 14px; border-top: 1px solid var(--line); margin-bottom: 16px;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.wc-forward { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.checkout { background: var(--ink); color: var(--bg); }
.widget_shopping_cart_content .woocommerce-mini-cart__empty-message { color: var(--muted); font-size: 14px; text-align: center; padding: 20px 0; margin: 0; }

/* logo */
.trigo-logo { display: inline-flex; flex-direction: column; gap: 2px; color: currentColor; text-decoration: none; }
.trigo-logo svg { display: block; }
.trigo-logo .trigo-finial { fill: var(--accent); }
.trigo-logo__word {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.trigo-logo--footer { color: rgba(246, 242, 234, 0.95); }

/* ── buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover {
  background: var(--primary-deep);
  color: var(--bg);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.btn--accent {
  background: var(--accent);
  color: #fff;
}
.btn--accent:hover {
  filter: brightness(0.92);
}
.btn--link {
  padding: 6px 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 14px;
  display: inline-flex;
}
.btn--link:hover { color: var(--primary-deep); border-bottom-color: var(--primary-deep); }
.btn .arrow {
  display: inline-block;
  transition: transform 0.2s;
}
.btn:hover .arrow {
  transform: translateX(3px);
}

/* ── hero ── */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-slide {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  min-height: clamp(520px, 78vh, 800px);
}
/* .hero-bg carries the shared ".media" class too (position:relative, for
   the other places that class is used — category/split photos sized by
   their own aspect-ratio). Both rules set `position`, and .media — being
   defined later in this file — was winning that fight, which silently
   turned .hero-bg from "absolutely fill the whole slide" into a normal
   relatively-positioned box with no content of its own to size itself by
   (its image is itself absolutely positioned, so it doesn't count), so it
   collapsed to almost no height. The image inside, sized to fill THAT
   collapsed box, ended up as the thin sliver at the top seen in the
   screenshot — everything below it was just the slide's dark gradient
   overlay with nothing behind it. Chaining the class name here to
   `.hero-bg.media` (two classes) beats `.media` alone regardless of which
   comes later in the file. */
.hero-bg.media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 90px;
  padding-top: 80px;
  color: #fff;
  height: 100%;
}
.hero h1 {
  color: #fff;
  max-width: 14ch;
  margin-bottom: 28px;
}
.hero h1 em { font-style: italic; color: rgba(255,255,255,0.85); }
.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.hero-meta::before {
  content: "";
  width: 32px; height: 1px;
  background: rgba(255,255,255,0.7);
}
.hero-sub {
  max-width: 38ch;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 32px;
  color: rgba(255,255,255,0.92);
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-ctas .btn--primary { background: #fff; color: var(--ink); }
.hero-ctas .btn--primary:hover { background: var(--accent); color: #fff; }
.hero-ctas .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
.hero-ctas .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

.hero-rail {
  position: absolute;
  z-index: 5;
  bottom: 32px;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
}
.hero-counter { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.85); }
.hero-dots { display: flex; gap: 6px; }
.hero-dot { width: 26px; height: 2px; background: rgba(255,255,255,0.35); border: 0; padding: 0; cursor: pointer; transition: background 0.25s; }
.hero-dot.is-active { background: #fff; }
.hero-arrows { display: flex; gap: 6px; }
.hero-arrow {
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,0.4);
  background: transparent;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: all 0.2s;
}
.hero-arrow:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-slide { display: none; }
.hero-slide.is-active { display: grid; }

/* ── image / placeholder system ── */
.media { position: relative; overflow: hidden; }
.ph {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, var(--ph-a, #e6dcc6) 0%, var(--ph-b, #b09c75) 100%);
}
.ph-linen    { --ph-a:#e6dcc6; --ph-b:#b09c75; }
.ph-sage     { --ph-a:#c4ccb8; --ph-b:#8c997a; }
.ph-sky      { --ph-a:#cdd9de; --ph-b:#6c8694; }
.ph-clay     { --ph-a:#dec0a5; --ph-b:#a0795a; }
.ph-smoke    { --ph-a:#cdcfd0; --ph-b:#7c8085; }
.ph-teal     { --ph-a:#a8c7cd; --ph-b:#476f78; }
.ph-cream    { --ph-a:#efe7d6; --ph-b:#bda988; }
.ph-ember    { --ph-a:#e0bca3; --ph-b:#a96b3b; }
.ph-midnight { --ph-a:#506872; --ph-b:#1f323b; }
.ph-espresso { --ph-a:#52443a; --ph-b:#241c16; }
.ph-label {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; padding: 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  z-index: 1;
}
.media-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}

/* ── product grid ── */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; }
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .product-grid { grid-template-columns: 1fr; } }
.product-card { display: flex; flex-direction: column; gap: 16px; cursor: pointer; position: relative; }
.stretched-link { position: absolute; inset: 0; z-index: 1; }
.product-media { position: relative; aspect-ratio: 4 / 5; background: var(--bg-tint); border-radius: var(--radius); overflow: hidden; }
.product-media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(0,0,0,0.04); border-radius: inherit; pointer-events: none; }
.product-media img, .product-media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.3,1); }
.product-card:hover .product-media img, .product-card:hover .product-media .ph { transform: scale(1.04); }
.product-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255,255,255,0.95); color: var(--primary-deep);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.product-tag--accent { background: var(--accent); color: #fff; }
.product-fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s;
}
.product-card:hover .product-fav { opacity: 1; transform: translateY(0); }
.product-fav.is-active { opacity: 1; transform: translateY(0); color: var(--accent); }
.product-info { display: flex; flex-direction: column; gap: 4px; }
.product-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.product-name { font-family: var(--font-display); font-size: 22px; line-height: 1.1; color: var(--ink); }
.product-price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.product-price strong { font-weight: 600; }
.product-price .from { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.product-price-max { color: var(--muted); }

/* ── section ── */
.section { padding-block: clamp(72px, 10vw, 140px); }
.section--bg { background: var(--primary-soft); position: relative; }
.section--bg::before {
  content: ""; position: absolute; inset: 0; opacity: 0.4; pointer-events: none;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,255,255,0.6), transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(255,255,255,0.5), transparent 50%);
}
.section--bg > * { position: relative; z-index: 1; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; flex-wrap: wrap; }
.section-head h2 { max-width: 18ch; }
.section-head__l { max-width: 620px; display: flex; flex-direction: column; gap: 18px; }
.section-head__r { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; max-width: 340px; }
.section-head__r p { color: var(--ink-2); text-align: right; }

/* ── editorial split ── */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split--reverse { grid-template-columns: 1fr 1.05fr; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) {
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
}
.split-text { display: flex; flex-direction: column; gap: 22px; }
.split-text p { color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.split-media { aspect-ratio: 4 / 5; background: var(--bg-tint); border-radius: var(--radius); overflow: hidden; position: relative; }

/* ── service / specialty grid ── */
.spec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
@media (max-width: 900px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .spec-grid { grid-template-columns: 1fr; } }
.spec { background: var(--bg); padding: 36px 28px; display: flex; flex-direction: column; gap: 14px; position: relative; min-height: 240px; }
.spec-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); font-weight: 600; }
.spec h4 { font-size: 22px; }
.spec p { font-size: 14px; color: var(--ink-2); }

/* ── categories ── */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 800px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-card { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: var(--radius); cursor: pointer; background: var(--bg-tint); display: block; }
/* `aspect-ratio: auto` here (instead of a real ratio) meant a wide card had
   no height of its own to compute — its image is absolutely positioned, so
   it doesn't count as content either — leaving it to whatever the grid row
   happened to stretch it to, which wasn't reliably the full card height
   (hence some photos not filling their space). 5/3 is exactly double the
   width of the normal 5/6 card for the same height, matching a 2-column
   span at the same row height. */
.cat-card.cat-card--wide { aspect-ratio: 5 / 3; grid-column: span 2; }
@media (max-width: 800px) { .cat-card.cat-card--wide { grid-column: span 1; aspect-ratio: 5/6; } }
/* Same two-class fix as .hero-bg.media above, applied pre-emptively: this
   currently wins its position fight with .media purely because it happens
   to come later in the file, which would silently break the same way
   .hero-bg did if this file's rules ever get reordered. */
.cat-bg.media { position: absolute; inset: 0; transition: transform 0.6s cubic-bezier(.2,.7,.3,1); }
.cat-card:hover .cat-bg { transform: scale(1.05); }
.cat-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(20,60,70,0.65) 100%); z-index: 1; }
.cat-body { position: absolute; inset: auto 0 0 0; padding: 28px; color: #fff; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; }
.cat-body h3 { color: #fff; font-size: 30px; }
.cat-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.cat-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.4); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.25s;
}
.cat-card:hover .cat-arrow { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── editorial / journal ── */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .journal-grid { grid-template-columns: 1fr; } }
.journal-card { display: block; cursor: pointer; }
.journal-card .journal-media { aspect-ratio: 4 / 3; background: var(--bg-tint); overflow: hidden; border-radius: var(--radius); margin-bottom: 18px; position: relative; }
.journal-card .journal-cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.journal-card h3 { font-size: 26px; margin-bottom: 10px; }
.journal-card .journal-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; margin-top: 12px; }

/* ── testimonials ── */
.quote { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 48px); line-height: 1.18; color: var(--ink); text-wrap: balance; letter-spacing: -0.01em; }
.quote-cite { margin-top: 28px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.06em; }
.quote-cite::before { content: ""; width: 28px; height: 1px; background: var(--ink); }
.quote-cite--center { justify-content: center; }
.text-center { text-align: center; }

/* ── newsletter / cta strip ── */
.cta-strip { background: var(--ink); color: var(--bg); padding-block: clamp(64px, 8vw, 120px); }
.cta-strip h2 { color: var(--bg); margin-top: 14px; }
.cta-strip p { color: rgba(246,242,234,0.7); }
.cta-strip__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 800px) { .cta-strip__inner { grid-template-columns: 1fr; } }
.cta-strip__sub { margin-top: 18px; font-size: 16px; }
.cta-strip__note { margin-top: 14px; font-size: 12px; color: rgba(246,242,234,0.45); font-family: var(--font-mono); }
.input-pill { display: flex; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 6px 6px 6px 22px; max-width: 460px; align-items: center; }
.input-pill input { flex: 1; background: transparent; border: 0; color: var(--bg); font: inherit; font-size: 14px; outline: none; min-width: 0; }
.input-pill input::placeholder { color: rgba(246,242,234,0.5); }
.input-pill .btn { padding: 12px 22px; font-size: 12px; background: var(--bg); color: var(--ink); border: 0; }
.input-pill .btn:hover { background: var(--accent); color: #fff; }
.input-pill--light { background: transparent; border-color: var(--line-2); }
.input-pill--light input { color: var(--ink); }
.input-pill--light input::placeholder { color: var(--muted); }
.input-pill--light .btn { background: var(--ink); color: var(--bg); }
.input-pill--light .btn:hover { background: var(--primary-deep); }

/* ── footer ── */
.footer { background: var(--ink); color: rgba(246,242,234,0.72); padding-top: 80px; padding-bottom: 32px; }
.footer h5 { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,242,234,0.55); margin: 0 0 18px; font-weight: 500; }
.footer-about p { margin-top: 18px; font-size: 14px; color: rgba(246,242,234,0.6); line-height: 1.6; max-width: 32ch; }
.footer-about .widget { margin-top: 18px; }
.footer-about .widget-title { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,242,234,0.55); font-weight: 500; margin: 0 0 10px; }
.footer-about .widget a { color: rgba(246,242,234,0.95); text-decoration: underline; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(246,242,234,0.2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 0.1em; color: rgba(246,242,234,0.7);
}
.footer-social a:hover { background: rgba(246,242,234,0.1); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(246,242,234,0.12); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-grid a:hover { color: var(--bg); }
.footer-grid a { color: rgba(246,242,234,0.95); }
.footer-grid li { color: rgba(246,242,234,0.72); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; font-size: 12px; color: rgba(246,242,234,0.45); font-family: var(--font-mono); letter-spacing: 0.04em; flex-wrap: wrap; gap: 12px; }
.footer-bottom-r { display: flex; gap: 24px; }

/* ── tienda / catalogue page ── */
.catalogue { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-block: 56px; }
@media (max-width: 900px) { .catalogue { grid-template-columns: 1fr; } }
.cat-sidebar h5 { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 14px; }
.cat-sidebar ul { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.cat-sidebar li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.cat-sidebar li a { color: var(--ink-2); transition: color 0.15s; flex: 1; }
.cat-sidebar li:hover a, .cat-sidebar li.is-active a { color: var(--primary-deep); }
.cat-sidebar li.is-active a { font-weight: 600; }
.cat-sidebar li .count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cat-sidebar .swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.cat-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.cat-toolbar-meta { display: flex; align-items: baseline; gap: 14px; }
.cat-toolbar-meta h2 { font-size: 40px; }
.cat-toolbar-meta span { color: var(--muted); font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.select-pill {
  border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 36px 8px 16px;
  font: inherit; font-size: 13px; background: transparent; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
}

.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 64px; }
.pagination .page-numbers { width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; background: transparent; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; }
.pagination .page-numbers:hover { border-color: var(--line-2); }
.pagination .page-numbers.current { background: var(--ink); color: var(--bg); }

/* ── ficha de producto ── */
.product-detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; padding-block: 48px 96px; }
@media (max-width: 960px) { .product-detail { grid-template-columns: 1fr; } }
/* Product gallery: WooCommerce's own multi-image carousel (flexslider) is
   deliberately not used (see the 'wc-product-gallery-slider' comment in
   inc/setup.php — it measured its own size via JS and got that wrong
   under this grid, permanently wrecking the layout with a huge inline
   height). Instead trigo.js (trigoInitProductGallery) reads WooCommerce's
   plain image output and builds this thumb rail + single visible main
   image itself — plain, predictable CSS, no carousel JS involved. */
.gallery { display: grid; grid-template-columns: 80px 1fr; gap: 18px; align-items: start; }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } .gallery-thumbs { flex-direction: row; order: 2; overflow-x: auto; } }
.gallery-thumbs { display: flex; flex-direction: column; gap: 12px; }
/* Scoped through .gallery-thumbs (not just .gallery-thumb alone) for the
   same reason as #site-nav .nav-actions .icon-btn above: a same-named
   single-class button style from another plugin can otherwise win the
   cascade and show through (that's what caused the stray magenta/red
   border seen on these thumbs before this was scoped). */
.gallery-thumbs .gallery-thumb { aspect-ratio: 1; width: 100%; border-radius: var(--radius); background: var(--bg-tint); overflow: hidden; border: 1px solid transparent; cursor: pointer; position: relative; padding: 0; }
.gallery-thumbs .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs .gallery-thumb.is-active { border-color: var(--ink); }
.gallery-main .badge { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.detail-body { display: flex; flex-direction: column; gap: 24px; }
.crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.crumb a { color: var(--muted); } .crumb a:hover { color: var(--ink); }
.crumb strong { color: var(--ink); }
.detail-body h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; }
.detail-desc { color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.detail-price { display: flex; align-items: baseline; gap: 14px; font-size: 24px; font-family: var(--font-display); }
.detail-price small { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.detail-stars { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.detail-stars .stars { color: var(--accent); letter-spacing: 2px; }

.option-group { display: flex; flex-direction: column; gap: 10px; }
.option-group label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.option-value { color: var(--ink); text-transform: none; font-weight: 500; letter-spacing: normal; }

/* ── dimension-based price tables (inc/price-tables.php) ── */
.trigo-dimensions { display: flex; flex-direction: column; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.trigo-dimensions .option-group input[type="number"] {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-2); background: transparent;
  padding: 8px 0; font: inherit; font-size: 16px; color: var(--ink); outline: none;
}
.trigo-dimensions .option-group input[type="number"]:focus { border-bottom-color: var(--ink); }
.trigo-dimensions__price { font-size: 18px; padding-top: 10px; border-top: 1px solid var(--line); }
.trigo-dimensions__amount { font-weight: 500; }
/* The dimension calculator's price is the real one — hide WooCommerce's own
   per-variation price line so only one number shows, instead of two that
   can disagree (see trigo_price_table_price_html() in inc/price-tables.php). */
body.trigo-has-price-table .woocommerce-variation-price { display: none; }
.swatch-row, .size-row { display: flex; gap: 10px; flex-wrap: wrap; }
/* The selected state must read clearly regardless of the swatch's own
   fill colour, so it's a two-tone ring (a gap in --bg, then --ink) sitting
   outside the swatch via box-shadow rather than a 1px outline, which was
   too faint to notice as "selected" against most colours. */
.swatch {
  width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 1px solid var(--line-2);
  cursor: pointer; position: relative; padding: 0;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.swatch:hover { border-color: var(--ink); }
.swatch.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink);
  transform: scale(1.04);
}

/* ── WooCommerce attribute swatches (color/image types) ── */
.trigo-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.trigo-swatches-select { display: none; }
.trigo-swatch--image { overflow: hidden; background: var(--bg-tint); display: inline-flex; align-items: center; justify-content: center; }
.trigo-swatch--image img { width: 100%; height: 100%; object-fit: cover; }
.trigo-swatch--image span { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--ink-2); }
.size-chip { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.size-chip:hover { border-color: var(--ink); }
.size-chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.qty-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.qty button { width: 44px; height: 44px; background: transparent; border: 0; font-size: 16px; }
.qty input { width: 44px; border: 0; text-align: center; background: transparent; font: inherit; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.detail-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-cta .btn--primary { padding: 16px 32px; flex: 1; min-width: 220px; border: 0; }

.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--line); }
.detail-meta .item { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; }
.detail-meta .item svg { margin-top: 2px; flex-shrink: 0; color: var(--primary); }
.detail-meta .item strong { display: block; font-weight: 600; color: var(--ink); font-size: 13px; }
.detail-meta .item span { color: var(--muted); font-size: 12px; }

.detail-tabs { margin-top: 18px; border-top: 1px solid var(--line); }
.detail-tab { border-bottom: 1px solid var(--line); padding: 18px 0; }
.detail-tab summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.04em;
}
.detail-tab summary::-webkit-details-marker { display: none; }
.detail-tab summary::after { content: "+"; font-size: 18px; color: var(--muted); transition: transform 0.2s; }
.detail-tab[open] summary::after { content: "\2212"; }
.detail-tab .detail-tab__body { margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.detail-tab .detail-tab__body p { max-width: none; }

/* ── about / sobre nosotros ── */
.about-hero { padding-block: 100px 80px; }
.about-hero h1 { font-size: clamp(56px, 8vw, 132px); line-height: 0.95; margin-bottom: 32px; max-width: 14ch; }
.about-hero h1 em { font-style: italic; color: var(--primary-deep); }
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 48px; align-items: end; }
@media (max-width: 800px) { .about-intro { grid-template-columns: 1fr; } }
.about-intro p { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.about-hero-media { position: relative; aspect-ratio: 16 / 7; border-radius: var(--radius); overflow: hidden; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border-block: 1px solid var(--line-2); margin-block: 64px; }
@media (max-width: 700px) { .stats-row { grid-template-columns: 1fr 1fr; } }
.stat { padding: 36px 24px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.stat-num { font-family: var(--font-display); font-size: clamp(48px, 5vw, 72px); line-height: 1; color: var(--ink); }
.stat-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-row { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); align-items: start; }
.timeline-row:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 800px) { .timeline-row { grid-template-columns: 100px 1fr; } .timeline-row .timeline-img { display: none; } }
.timeline-year { font-family: var(--font-display); font-size: 32px; color: var(--primary-deep); }
.timeline-row h4 { font-size: 24px; margin-bottom: 6px; }
.timeline-row p { color: var(--ink-2); font-size: 15px; }
.timeline-img { aspect-ratio: 4/3; background: var(--bg-tint); border-radius: var(--radius); overflow: hidden; position: relative; }

/* ── contacto ── */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; padding-block: 80px 100px; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 40px; } }
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-info h1 { font-size: clamp(48px, 6vw, 84px); line-height: 0.98; }
.contact-info h1 em { font-style: italic; color: var(--primary-deep); }
.contact-info p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.contact-block { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.contact-block .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.contact-block .value { font-size: 18px; }
.contact-block .value strong { font-family: var(--font-display); font-size: 26px; font-weight: 400; display: block; line-height: 1.1; margin-bottom: 4px; }

.form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; display: flex; flex-direction: column; gap: 22px; }
/* Scoped to the contact form's own markup (a <div class="form-row"> pairing
   two <div class="field">) — WooCommerce reuses the bare class name
   "form-row" for a different, single-field <p> pattern (form-row-first /
   form-row-last), styled separately below in the WooCommerce bridge. */
.form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field input, .field textarea, .field select { border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: 10px 0; font: inherit; outline: none; font-size: 16px; color: var(--ink); width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--ink); }
.field textarea { resize: vertical; min-height: 100px; }
.form .btn { align-self: flex-start; border: 0; }
.field-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.field-check input { margin-top: 3px; accent-color: var(--ink); width: auto; }
.form-notice { padding: 14px 18px; border-radius: var(--radius); font-size: 14px; }
.form-notice--ok { background: var(--primary-soft); color: var(--primary-deep); }
.form-notice--err { background: var(--accent-soft); color: var(--accent); }

.map-section { position: relative; height: 380px; overflow: hidden; }
.map-section iframe { z-index: 1; }
.map-card {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--bg); padding: 20px 28px; border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex; align-items: center; gap: 18px; max-width: calc(100% - 32px);
  pointer-events: auto;
}
.map-card__pin { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.map-card__name { font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.map-card__addr { font-size: 13px; color: var(--muted); }

/* ── badges ── */
.badge-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; padding-block: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.badge-row--flush { border-top: none; }
.badge-row .b { display: flex; align-items: center; gap: 10px; }
.badge-row .b strong { font-weight: 600; }

/* ── wave divider ── */
.wave-divider { width: 100%; overflow: visible; display: block; }

/* ── brand ribbon (scrolling marquee) ── */
.brand-ribbon { background: var(--ink); color: var(--bg); overflow: hidden; border-block: 1px solid var(--ink); position: relative; }
.brand-ribbon--accent { background: var(--primary-deep); border-color: var(--primary-deep); }
.brand-ribbon__track { display: inline-flex; align-items: center; gap: 56px; padding: 22px 0; white-space: nowrap; animation: ribbon-scroll 42s linear infinite; }
.brand-ribbon__item { display: inline-flex; align-items: center; gap: 56px; font-family: var(--font-display); font-size: 24px; letter-spacing: -0.01em; font-style: italic; }
.brand-ribbon__star { color: var(--accent); font-size: 12px; font-style: normal; }
@keyframes ribbon-scroll { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }

/* ── local / andújar ── */
.local { padding-block: clamp(72px, 10vw, 140px); background: var(--bg); position: relative; }
.local-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (max-width: 900px) { .local-grid { grid-template-columns: 1fr; } }
.local-text { display: flex; flex-direction: column; gap: 18px; max-width: 50ch; }
.local-text h2 { margin-block: 4px 6px; }
.local-text p { color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.local-ctas { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.local-media { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 5 / 4; }
.local-media__main { grid-row: span 2; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-tint); }
.local-media__side-top, .local-media__side-bot { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bg-tint); }

/* ── customer grid — true masonry (CSS columns), any number/order of items ── */
.customer-grid { column-count: 3; column-gap: 12px; }
@media (max-width: 900px) { .customer-grid { column-count: 2; } }
@media (max-width: 500px) { .customer-grid { column-count: 2; column-gap: 8px; } }
.customer-card {
  position: relative; display: block; break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: 12px; border-radius: var(--radius); overflow: hidden; background: var(--bg-tint); cursor: pointer;
}
.customer-card img { width: 100%; height: auto; display: block; }
.customer-overlay { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 14px; color: #fff; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%); display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity 0.25s; }
.customer-card:hover .customer-overlay { opacity: 1; }
.customer-handle { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.9); }
.customer-caption { font-family: var(--font-display); font-size: 16px; line-height: 1.1; }

/* ── manifesto ── */
.manifesto { padding-block: clamp(80px, 12vw, 160px); background: var(--bg); text-align: center; }
.manifesto-body { padding-block: clamp(40px, 6vw, 80px); }
.manifesto-head { font-size: clamp(48px, 8vw, 132px); line-height: 1.0; letter-spacing: -0.02em; text-wrap: balance; }
.manifesto-head em { font-style: italic; }
.mf-primary { color: var(--primary); }
.mf-accent { color: var(--accent); }
.manifesto-meta { display: flex; justify-content: space-between; align-items: end; margin-top: 72px; gap: 64px; text-align: left; flex-wrap: wrap; }
.manifesto-signature { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink); }
.manifesto-place { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.manifesto-sticker {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1.5px solid var(--accent); color: var(--accent); padding: 14px 22px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; transform: rotate(-3deg);
}
.manifesto-sticker strong { font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: 0; color: var(--accent); }

/* ── generic content pages (blog, search, 404) ── */
.entry-content { max-width: 72ch; }
.entry-content p { max-width: none; }
/* Cart/checkout/my-account use page.php's own .container--wide (see
   page.php) precisely so their tables/columns get the full width — but
   that only widens the OUTER container; .entry-content is a narrower
   child inside it and was still clamping to 72ch regardless, squeezing
   the cart table and forcing the totals box below it instead of beside
   it. */
.container--wide .entry-content { max-width: none; }
.trigo-page-header { padding-block: 64px 40px; }

/* ── header search popover ── */
.nav-search-pop {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding-block: 18px;
}
.nav-search-pop form { display: flex; }
.nav-search-pop input[type="search"] {
  width: 100%;
  border: 0; border-bottom: 1px solid var(--line-2);
  background: transparent; font: inherit; font-size: 20px;
  font-family: var(--font-display); padding: 8px 0; outline: none; color: var(--ink);
}
.nav-search-pop input[type="search"]:focus { border-bottom-color: var(--ink); }

/* ── WooCommerce bridge ──────────────────────────────────────────────────
   Restyles WooCommerce's own generated markup (ordering dropdown, pagination,
   price HTML, notices, quantity input, gallery, tabs, forms) to match the
   design system, instead of overriding every WC template file. ── */
.woocommerce-ordering select.orderby { border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 36px 8px 16px; font: inherit; font-size: 13px; background: transparent; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.woocommerce-result-count { color: var(--muted); font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.04em; margin: 0; }
.woocommerce-pagination { margin-top: 64px; }
.woocommerce-pagination ul.page-numbers { display: flex; align-items: center; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0; }
.woocommerce-pagination .page-numbers li { list-style: none; }
.woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span { width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; background: transparent; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; }
.woocommerce-pagination .page-numbers a:hover { border-color: var(--line-2); }
.woocommerce-pagination .page-numbers span.current { background: var(--ink); color: var(--bg); }
.price { font-variant-numeric: tabular-nums; }
.price ins { text-decoration: none; }
.price del { color: var(--muted); opacity: 0.7; margin-right: 6px; }
.star-rating { color: var(--accent); letter-spacing: 2px; font-size: 13px; }
.woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-noreviews, p.no-comments {
  padding: 16px 20px; border: 0; border-top: 0; border-radius: var(--radius); font-size: 14px; list-style: none; margin: 0 0 24px;
  background: var(--primary-soft); color: var(--primary-deep);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
/* WooCommerce's own stylesheet prepends an icon-font glyph via ::before,
   positioned assuming the large left padding its own CSS also sets — since
   we override that padding to match this theme's spacing, the icon was
   left overlapping the first word instead. Simpler to drop it: the coloured
   background+left accent already reads as a notice without it. */
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { display: none; }
.woocommerce-error { background: var(--accent-soft); color: var(--accent); }
.woocommerce-error li, .woocommerce-message li { list-style: none; }
.woocommerce-message svg, .woocommerce-error svg, .woocommerce-info svg { width: 16px; height: 16px; flex-shrink: 0; }
/* WooCommerce's own stylesheet floats this button right, which — combined
   with the box above becoming flex — would otherwise leave it wrapping
   oddly against the notice text. */
.woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button { float: none; margin-left: auto; }
.quantity { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.quantity .qty { width: 44px; border: 0; text-align: center; background: transparent; font: inherit; font-variant-numeric: tabular-nums; outline: none; height: 44px; -moz-appearance: textfield; }
.quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity button { width: 44px; height: 44px; background: transparent; border: 0; font-size: 16px; color: var(--ink); }
.quantity button:hover { background: var(--ink); color: var(--bg); }
.single_add_to_cart_button, button.checkout, #place_order {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg) !important;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.single_add_to_cart_button:hover, button.checkout:hover, #place_order:hover { background: var(--primary-deep); }
.woocommerce-tabs ul.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); list-style: none; padding: 0; margin: 18px 0 0; }
.woocommerce-tabs ul.tabs li { list-style: none; margin: 0; }
.woocommerce-tabs ul.tabs li a { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; padding-bottom: 14px; display: inline-block; color: var(--muted); }
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom: 2px solid var(--ink); }
.woocommerce-tabs .panel { padding-top: 24px; font-size: 14px; line-height: 1.65; color: var(--ink-2); max-width: 72ch; }
.woocommerce-Reviews-title, .woocommerce-tabs h2 { font-family: var(--font-display); font-size: 28px; font-weight: 400; }
.wc-tabs-wrapper, .woocommerce-tabs { margin-top: 18px; }

/* ── WooCommerce: cart / checkout / my-account ─────────────────────────────
   WooCommerce's own default stylesheet still loads (dequeuing it caused
   more regressions than it fixed — several unrelated things, from the
   product gallery's flexslider sizing to header icon buttons elsewhere in
   this file, turned out to depend on rules in it). These selectors instead
   mirror WooCommerce's own compound class names (`.woocommerce
   button.button`, etc.) so they match at equal-or-higher specificity and
   win the cascade without removing WooCommerce's base CSS. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border: 1px solid var(--line-2); border-radius: 999px;
  background: transparent; color: var(--ink) !important;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { border-color: var(--ink); background: var(--ink); color: var(--bg) !important; }
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt { border-color: var(--ink); background: var(--ink); color: var(--bg) !important; }
.woocommerce .button.alt:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
/* A disabled/unavailable add-to-cart button (out of stock, no variation
   picked yet) otherwise falls back to WooCommerce's own grey — this keeps
   it on-brand instead. */
.woocommerce a.button.alt:disabled, .woocommerce a.button.alt.disabled,
.woocommerce button.button.alt:disabled, .woocommerce button.button.alt.disabled,
.woocommerce input.button.alt:disabled, .woocommerce input.button.alt.disabled { background-color: var(--ink); }
/* Confirmed live: some other stylesheet was still striping/highlighting
   table rows with its own background regardless of which table these
   are — WooCommerce's default zebra styling clashing with the flat design. */
table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th,
table tbody tr:hover > td, table tbody tr:hover > th { background-color: unset !important; }
/* Same "another stylesheet keeps winning" pattern as the header icon
   buttons earlier in this file — a bare `button` element selector without
   scoping was overriding these before !important was added. */
[type="button"], [type="submit"], button { border: 1px solid transparent !important; color: var(--ink); }
/* The product-gallery lightbox trigger (the small magnifying-glass button
   WooCommerce overlays on the main image) duplicated the existing
   hover-to-zoom affordance, so it's hidden rather than restyled. */
a.woocommerce-product-gallery__trigger { display: none; }
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { vertical-align: middle; }
.woocommerce table.shop_table td.product-name a { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.woocommerce table.shop_table td.product-thumbnail img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); background: var(--bg-tint); }
.woocommerce table.shop_table td.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: var(--muted) !important; font-size: 16px; text-decoration: none;
}
.woocommerce table.shop_table td.product-remove a.remove:hover { background: var(--accent-soft); color: var(--accent) !important; }
.woocommerce table.shop_table td.product-subtotal, .woocommerce table.shop_table td .amount { font-variant-numeric: tabular-nums; }
.woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { font-family: var(--font-body); font-weight: 600; }
.woocommerce-cart-form .coupon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.woocommerce-cart-form .coupon label { display: none; }
.woocommerce-cart-form .coupon #coupon_code {
  border: 1px solid var(--line-2); border-radius: 999px; padding: 10px 18px; font: inherit; font-size: 14px;
  background: transparent; outline: none; min-width: 180px;
}
.woocommerce-cart-form .coupon #coupon_code:focus { border-color: var(--ink); }
.woocommerce-cart-form table.shop_table { margin-bottom: 24px; }
.cart-collaterals { display: grid; gap: 32px; margin-top: 32px; }
.cart-collaterals .cart_totals { max-width: none; }
/* WooCommerce renders the cart table and .cart-collaterals (the totals
   box) as plain siblings inside the shortcode's own .woocommerce wrapper
   — this puts the totals box beside the table on desktop, as in the
   reference design, instead of stacked full-width below it. */
@media (min-width: 900px) {
  body.woocommerce-cart .woocommerce { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
  body.woocommerce-cart .cart-collaterals { margin-top: 0; }
}
.cart_totals h2 { font-family: var(--font-display); font-size: 24px; font-weight: 400; margin-bottom: 14px; }
.cart_totals table.shop_table th { color: var(--muted); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; width: 40%; }
.wc-proceed-to-checkout { margin-top: 18px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; padding-block: 16px; }
.shipping-calculator-button { color: var(--primary-deep) !important; font-size: 13px; }

/* Checkout. #customer_details (billing | shipping+notes) and form.checkout
   itself (customer details | order review) are two SEPARATE 2-column
   layouts, nested inside each other — both used to get the same
   `grid-template-columns: 1fr 1fr`, which quartered the actual field width
   instead of halving it (a grid inside a grid, each dividing by 2, is
   dividing by 4 overall) and left #order_review with nowhere sensible to
   land. form.checkout's own grid now uses an explicit, different column
   size, and places #customer_details / the order-review heading+table
   into it by name rather than by relying on both grids agreeing. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) {
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr 1fr; }
  .woocommerce-checkout form.checkout {
    display: grid; grid-template-columns: 1fr 400px; gap: 0 48px; align-items: start;
  }
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review { grid-column: 2; }
}
.woocommerce-checkout .col-1, .woocommerce-checkout .col-2 { width: auto; float: none; }
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3,
#order_review_heading { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin-bottom: 18px; }
.woocommerce-checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout .form-row label {
  display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
.woocommerce-checkout .form-row .required { color: var(--accent); text-decoration: none; }
/* Covers checkout AND every my-account form (edit account, edit address —
   .woocommerce-EditAccountForm / .woocommerce-address-fields don't share a
   common wrapper class, but body carries "woocommerce-account" on every
   my-account endpoint, so scoping to that catches all of them at once). */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-selection,
.woocommerce-checkout .form-row select,
.woocommerce-account input.input-text,
.woocommerce-account textarea,
.woocommerce-account select {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent;
  padding: 12px 16px; font: inherit; font-size: 14px; outline: none; color: var(--ink);
}
.woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row textarea:focus,
.woocommerce-account input.input-text:focus, .woocommerce-account textarea:focus { border-color: var(--ink); }
.woocommerce-account form .form-row, .woocommerce-account p.form-row { margin-bottom: 16px; }
.woocommerce-account form .form-row label, .woocommerce-account p.form-row label {
  display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
@media (min-width: 600px) {
  .woocommerce-account .form-row-first, .woocommerce-account .form-row-last { width: 48%; float: left; }
  .woocommerce-account .form-row-last { float: right; }
}
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 20px 0 0; }
fieldset legend { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0 8px; }
@media (min-width: 600px) {
  .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 48%; float: left; }
  .woocommerce-checkout .form-row-last { float: right; }
}
#order_review table.shop_table { margin-bottom: 20px; }
.woocommerce-checkout-payment { background: var(--bg-tint); border-radius: var(--radius-lg); padding: 22px; margin-top: 20px; }
ul.wc_payment_methods { list-style: none; margin: 0; padding: 0; }
ul.wc_payment_methods li.wc_payment_method { border-bottom: 1px solid var(--line); padding: 14px 0; }
ul.wc_payment_methods li.wc_payment_method:last-child { border-bottom: 0; }
ul.wc_payment_methods label { font-weight: 600; cursor: pointer; }
ul.wc_payment_methods .payment_box { background: transparent; padding: 12px 0 0 28px; font-size: 13px; color: var(--ink-2); }
ul.wc_payment_methods .payment_box p { max-width: none; }
.woocommerce-terms-and-conditions-wrapper { margin: 20px 0; font-size: 13px; }

/* My account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2) !important;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--bg-tint); color: var(--ink) !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--ink); color: var(--bg) !important; }
.woocommerce-account .woocommerce-MyAccount-content { max-width: 72ch; }
.woocommerce-account .woocommerce-MyAccount-content mark { background: none; color: inherit; font-weight: 600; }
@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 220px; }
  .woocommerce-account .woocommerce-MyAccount-content { float: right; width: calc(100% - 260px); max-width: none; }
}
.woocommerce-MyAccount-orders, .woocommerce-orders-table { width: 100%; border-collapse: collapse; }
.woocommerce-MyAccount-orders th, .woocommerce-orders-table th {
  text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600;
  padding: 10px 8px; border-bottom: 1px solid var(--line);
}
.woocommerce-MyAccount-orders td, .woocommerce-orders-table td { padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword {
  max-width: 420px; display: flex; flex-direction: column; gap: 16px;
}
.woocommerce-form-login p, .woocommerce-form-register p, .woocommerce-ResetPassword p { margin: 0; }
.woocommerce-form-login label, .woocommerce-form-register label, .woocommerce-ResetPassword label {
  display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
.woocommerce-form-login input.input-text, .woocommerce-form-register input.input-text, .woocommerce-ResetPassword input.input-text {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent;
  padding: 12px 16px; font: inherit; font-size: 14px; outline: none; color: var(--ink);
}
.woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.woocommerce-form-login .lost_password, .u-columns .col-2 { font-size: 13px; }
.u-columns { display: grid; gap: 40px; }
@media (min-width: 800px) { .u-columns { grid-template-columns: 1fr 1fr; } }
.woocommerce-address-fields address { line-height: 1.7; font-style: normal; }
.woocommerce-Addresses { display: grid; gap: 32px; }
@media (min-width: 800px) { .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
/* WooCommerce renders this as a <header class="woocommerce-Address-title
   title"> wrapping an <h2> plus the "edit/add address" link — not an h3,
   which is why this rule wasn't matching and the heading was falling back
   to the site's full-size page-title styling, with the link running into
   it unstyled. */
/* Confirmed live: needed !important to actually win, and flex-start (the
   link sitting right next to the title) over space-between (which pushed
   it to the far edge of a wide column, reading as unrelated to the
   heading). */
.woocommerce-Address-title { display: flex !important; align-items: baseline !important; justify-content: flex-start !important; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; margin: 0; }
.woocommerce-Address-title a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-deep);
}
/* Variations table — strip WooCommerce's own default table chrome (borders,
   shaded header cells) and lay it out as stacked option-groups matching the
   rest of the product page, instead of a plain HTML table. */
table.variations,
table.variations tbody { display: block; width: 100%; }
table.variations tr { display: block; margin-bottom: 20px; }
table.variations tr:last-child { margin-bottom: 0; }
table.variations th,
table.variations td {
  display: block; width: 100%; border: 0; background: transparent; padding: 0; margin: 0; text-align: left; vertical-align: top;
}
table.variations th label {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; display: block; margin-bottom: 10px;
}
table.variations td { margin-top: 0; }
table.variations td select {
  width: 100%; max-width: 320px; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 10px 36px 10px 16px; font: inherit; font-size: 14px; background-color: transparent; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
}
.reset_variations { font-size: 12px; color: var(--muted); font-family: var(--font-mono); margin-left: 10px; }
.woocommerce-variation { margin: 20px 0; }
.woocommerce-variation-price .price { font-family: var(--font-display); font-size: 24px; }
.woocommerce-variation-description p { color: var(--ink-2); font-size: 14px; max-width: none; }
.woocommerce-variation-availability { font-size: 13px; color: var(--muted); }

/* WooCommerce still renders .woocommerce-product-gallery >
   .woocommerce-product-gallery__wrapper > one .woocommerce-product-gallery__image
   per photo even without slider support — trigo.js just shows one at a
   time and builds the .gallery-thumbs rail from their data-thumb URLs. */
.gallery .woocommerce-product-gallery {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--bg-tint);
}
.gallery .woocommerce-product-gallery__wrapper { width: 100%; height: 100%; }
.gallery .woocommerce-product-gallery__image { width: 100%; height: 100%; }
.gallery .woocommerce-product-gallery__image[hidden] { display: none; }
.gallery .woocommerce-product-gallery__image a,
.gallery .woocommerce-product-gallery__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.onsale {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px; min-width: 0; height: auto; line-height: 1;
}
.woocommerce-breadcrumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce-breadcrumb a:hover { color: var(--ink); }
.related.products { padding-top: 0; }
.woocommerce-mini-cart__total, .cart_totals table, table.shop_table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
table.shop_table th, table.shop_table td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.woocommerce-error a.button, .woocommerce-info a.button { color: var(--ink); text-decoration: underline; }
/* WC's own "products" loop (related/upsell/shortcodes) gets the same grid as .product-grid */
ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; list-style: none; padding: 0; margin: 0; }
ul.products li.product { list-style: none; }
@media (max-width: 1024px) { ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { ul.products { grid-template-columns: 1fr; } }

/* ── Elementor bridge ─────────────────────────────────────────────────────
   Inicio/Sobre nosotros/Contacto are seeded as one Elementor Section per
   design block, each holding a Shortcode widget (see inc/blocks.php +
   inc/elementor-seed.php). Every block already defines its own full-bleed
   layout and internal .container padding — so Elementor's own section
   wrapper (max-width + padding) must get out of the way, or everything
   renders double-boxed. ── */
.elementor-section { padding: 0; margin: 0; }
.elementor-section > .elementor-container { max-width: none; width: 100%; padding: 0; margin: 0; }
.elementor-column > .elementor-widget-wrap { padding: 0; align-items: stretch; }
.elementor-widget-shortcode .elementor-widget-container,
.elementor-widget-html .elementor-widget-container { margin: 0; }
.elementor-widget-shortcode .elementor-shortcode { display: contents; }

/* ── Elementor native-widget style bridge ────────────────────────────────
   Inicio/Sobre nosotros/Contacto are seeded with real Elementor widgets
   (Heading, Text Editor, Button, Icon List, Icon Box, Image Box,
   Testimonial, Counter, Image Gallery) so every text and image is directly
   clickable/editable — not shortcodes. Headings/paragraphs already inherit
   Trigo's type system from the global h1–h4/p rules above (no class
   needed); this section covers the widget-specific markup Elementor adds
   around everything else, so anything built with these widgets — on these
   pages or new ones you add yourself — looks on-brand automatically. ── */
.elementor-widget-container .elementor-button {
  background: var(--ink); color: var(--bg);
  border-radius: 999px; padding: 14px 26px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: background 0.2s;
}
.elementor-widget-container .elementor-button:hover { background: var(--primary-deep); color: var(--bg); }
.elementor-widget-container .elementor-button.elementor-button-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.elementor-widget-container .elementor-button.elementor-button-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.elementor-icon-list-item { color: var(--ink-2); font-size: 14px; }
.elementor-icon-list-icon { color: var(--accent); }
.elementor-icon-list-text { font-weight: 500; }

.elementor-icon-box-title { font-family: var(--font-display); font-size: 22px; margin: 14px 0 8px; }
.elementor-icon-box-description { color: var(--ink-2); font-size: 14px; }
.elementor-icon-box-icon .elementor-icon { color: var(--accent); }

.elementor-image-box-title { font-family: var(--font-display); font-size: 22px; margin: 14px 0 4px; }
.elementor-image-box-description { color: var(--ink-2); font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.elementor-image-box-img { border-radius: var(--radius); overflow: hidden; }
.elementor-image-box-img img { aspect-ratio: 4/5; object-fit: cover; }

.elementor-testimonial-content { font-family: var(--font-display); font-size: clamp(24px, 3vw, 40px); line-height: 1.2; color: var(--ink); font-style: normal; }
.elementor-testimonial-name { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; margin-top: 20px; }
.elementor-testimonial-job { color: var(--muted); }
.elementor-testimonial-meta { justify-content: center; }

.elementor-counter-number-wrapper { font-family: var(--font-display); font-size: clamp(48px, 5vw, 72px); color: var(--ink); line-height: 1; justify-content: center; }
.elementor-counter-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: center; margin-top: 8px; }

.elementor-gallery-item__overlay { background: rgba(20,31,34,0.55); }

/* full-bleed photo sections — background image set via the Section's own
   Style ▸ Background control, no extra Image widget needed */
.trigo-photo-section { min-height: 60vh; display: flex; align-items: center; }
.trigo-photo-section .elementor-heading-title,
.trigo-photo-section .elementor-widget-text-editor { color: #fff; }
.trigo-photo-section .elementor-heading-title { font-size: clamp(48px, 7vw, 104px); max-width: 16ch; }
/* Confirmed live fix for a WooCommerce product-grid widget (likely
   Header Footer Elementor's, given hfe-woo-product-grid-css loads
   site-wide) whose own layout expects its price element to size as a
   table cell alongside its siblings. */
.product-price { display: table-cell; }

/* ── mobile nav ── */
@media (max-width: 860px) {
  .nav-links { display: none; }
  #site-nav .nav-actions .nav-burger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 999px; background: transparent;
  }
  #site-nav .nav-actions .icon-btn:first-of-type { display: none; }
  .nav.is-open .nav-links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
  }
  .nav.is-open .nav-links .nav-link { padding: 12px 0; width: 100%; }
  .product-detail { padding-top: 24px; }
}