*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font: "Inter", system-ui, sans-serif;
  --font-display: "DM Serif Display", Georgia, serif;
  --bg: #ffffff;
  --bg-subtle: #f7f8fa;
  --text-primary: #111318;
  --text-secondary: #2d3240;
  --text-muted: #5b6375;
  --border: #dde1e9;
  --accent: #b8391c;
  --accent-hover: color-mix(in srgb, var(--accent) 82%, black);
  --accent-light: color-mix(in srgb, var(--accent) 12%, white);
  --radius: 8px;
  --max-w: 960px;
}

[data-theme="dark"] {
  --bg: #161b26;
  --bg-subtle: #1d2333;
  --text-primary: #edf0f7;
  --text-secondary: #9ba3b8;
  --text-muted: #8a91a4;
  --border: #252d3f;
  --accent: #d94f2e;
  --accent-hover: color-mix(in srgb, var(--accent) 82%, white);
  --accent-light: color-mix(in srgb, var(--accent) 18%, black);
}

body {
  transition:
    background 0.2s,
    color 0.2s;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 1rem;
}

/* NAV */
.site-nav {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.2s;
}
.site-nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
}
.site-logo-placeholder {
  width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition:
    color 150ms,
    background 150ms;
}
.site-nav-icon-btn:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}
.site-nav-links {
  display: flex;
  gap: 0.25rem;
}
.site-nav-toggle {
  display: none;
}
.site-nav-link {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition:
    color 150ms,
    background 150ms;
}
.site-nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}
.site-nav-link.active {
  color: var(--accent);
}

/* HERO */
.site-hero {
  min-height: calc(100dvh - 56px);
  display: flex;
  align-items: center;
  padding: 4rem 1.5rem;
}
.site-hero-compact {
  min-height: auto;
  padding: 6rem 1.5rem;
}
.site-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.site-hero-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.site-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  max-width: 60ch;
}
.site-hero-desc {
  color: var(--text-muted);
  max-width: 55ch;
  margin-bottom: 2rem;
}
.site-hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* INTERIOR PAGES */
.site-page {
  padding: 4rem 1.5rem;
}
.site-page-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.site-page-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.site-page-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}
.site-page-body {
  max-width: 68ch;
  color: var(--text-secondary);
  line-height: 1.8;
}
.site-page-desc {
  color: var(--text-muted);
  margin-bottom: 2rem;
  max-width: 55ch;
}

/* Contact page business info (address / phone / hours) — driven by the
   biz_* config fields, shown above the form when present. */
.site-contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin: 1.5rem 0 2rem;
}
.site-contact-info-item {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
.site-contact-info-item strong {
  color: var(--text-primary);
}
.site-contact-info-item a {
  color: var(--accent);
}

/* RENDERED MARKDOWN (page bodies + blog posts) — the *_html fields and blog
   contentHtml go through the same marked+sanitize pipeline, so both share these
   prose styles. Without them the global reset zeroes all margins and headings/
   lists render flat ("looks like plain text"). */
.site-page-body > :first-child,
.site-post-body > :first-child {
  margin-top: 0;
}
.site-page-body p,
.site-post-body p {
  margin: 0 0 1.15rem;
}
.site-page-body h2,
.site-post-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 2.25rem 0 0.85rem;
}
.site-page-body h3,
.site-post-body h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1.75rem 0 0.6rem;
}
.site-page-body h4,
.site-post-body h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1.4rem 0 0.5rem;
}
.site-page-body ul,
.site-page-body ol,
.site-post-body ul,
.site-post-body ol {
  margin: 0 0 1.15rem;
  padding-left: 1.4rem;
}
.site-page-body li,
.site-post-body li {
  margin-bottom: 0.4rem;
}
.site-page-body a,
.site-post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-page-body strong,
.site-post-body strong {
  color: var(--text-primary);
  font-weight: 600;
}
.site-page-body blockquote,
.site-post-body blockquote {
  margin: 0 0 1.15rem;
  padding-left: 1rem;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
}
/* Infographics inserted into article bodies by the Infographic Engineer
   agent — either code-drawn SVG (inherits currentColor, so `color` here is
   what themes it) or a Muse-generated raster <img> (carries its own colours
   baked in; the raster case gets no dark-mode adaptation, only sizing). */
.site-page-body .article-infographic,
.site-post-body .article-infographic {
  margin: 1.75rem 0;
  padding: 0;
  color: var(--text-primary);
}
.site-page-body .article-infographic svg,
.site-post-body .article-infographic svg,
.site-page-body .article-infographic img,
.site-post-body .article-infographic img {
  display: block;
  width: 100%;
  height: auto;
}
.site-page-body .article-infographic figcaption,
.site-post-body .article-infographic figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
}
.site-page-body table,
.site-post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.15rem;
  font-size: 0.9375rem;
}
.site-page-body th,
.site-page-body td,
.site-post-body th,
.site-post-body td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: left;
}

/* BUTTONS */
.site-btn {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms;
}
.site-btn:hover {
  background: var(--accent-hover);
}
.site-btn-ghost {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 150ms,
    color 150ms;
}
.site-btn-ghost:hover {
  border-color: var(--text-muted);
}

/* CONSTRUCTION */
.construction-wrap {
  min-height: calc(100dvh - 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.construction-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}
.construction-wrap h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}
.construction-wrap p {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* BLOG */
.site-post-card {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.site-post-card:last-child {
  border-bottom: none;
}
.site-post-card h2,
.site-post-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.site-post-card h2 a,
.site-post-card h3 a {
  text-decoration: none;
  color: var(--text-primary);
}
.site-post-card h2 a:hover,
.site-post-card h3 a:hover {
  color: var(--accent);
}
.site-post-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.site-post-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.site-post-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.site-post-badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}
.site-post-cta {
  display: inline-block;
  margin-top: 2rem;
}
.site-post-summary {
  font-size: 1.125rem;
  color: var(--text-secondary);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1rem 0 1.5rem;
}
.site-post-toc {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
}
.site-post-toc-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.site-post-toc ol {
  list-style: decimal;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.site-post-toc-sub {
  list-style: none;
  margin-left: 1rem;
}
.site-post-toc a {
  color: var(--text-secondary);
  text-decoration: none;
}
.site-post-toc a:hover {
  color: var(--accent);
}
.site-related-posts {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.site-related-posts h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.site-related-posts ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-related-posts a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}
.site-related-posts a:hover {
  color: var(--accent);
}

/* AI-generated / uploaded imagery — blog covers, index/page hero images and
   blog-card thumbnails. All served as optimized WebP from /uploads and
   lazy-loaded. Widths are fluid (max 100%) so pages stay responsive. */
.site-post-cover,
.site-page-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.75rem 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.site-page-image {
  max-width: 68ch;
}
.site-post-card-media {
  display: block;
  margin-bottom: 0.9rem;
}
.site-post-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.site-empty,
.site-loading {
  color: var(--text-muted);
  padding: 2rem 0;
}

/* CONTACT FORM */
.site-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 480px;
  margin-top: 1.5rem;
}
.site-contact-form input,
.site-contact-form textarea {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg);
  outline: none;
  transition:
    border-color 150ms,
    background 0.2s,
    color 0.2s;
}
.site-contact-form input:focus,
.site-contact-form textarea:focus {
  border-color: var(--accent);
}
.site-contact-form textarea {
  resize: vertical;
}

.blog-grid {
  display: grid;
  gap: 1rem;
}
.blog-card {
  margin-bottom: 0;
}

/* PRODUCTOS */
.product-search {
  margin-bottom: 1.5rem;
}
.product-search-input {
  width: 100%;
  max-width: 24rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 0.9375rem;
}
.category-pills-wrap {
  margin-bottom: 1.5rem;
}
.category-pills-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.category-pill {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 150ms,
    color 150ms,
    background 150ms;
}
.category-pill:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.category-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
.product-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-card-image {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bg-subtle);
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-card-body {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  /* Fill the leftover height of a stretched grid item, so the auto margin on
     the button below has room to push against. Without it the body is only as
     tall as its text and the buttons never line up. */
  flex: 1;
}
.product-card-body h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.product-card-body h2 a {
  text-decoration: none;
  color: var(--text-primary);
}
.b2b-banner {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  padding: 0.875rem 1.125rem;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.b2b-banner a {
  color: var(--accent);
  font-weight: 600;
}
.product-price {
  font-weight: 600;
  color: var(--accent);
}
.price-vat-note {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}
.product-stock-badge.out {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.product-add-btn {
  width: 100%;
  /* auto, not a fixed gap: product names are feed copy and run one to four
     lines, so a fixed margin leaves the buttons at four different heights
     across a row. The flex gap still keeps it off the price. */
  margin-top: auto;
  text-align: center;
}
.product-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.pager-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.pager-status {
  color: var(--text-muted);
  font-size: 0.875rem;
}
.cart-count-badge {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  border-radius: 999px;
}
.cart-icon-link {
  position: relative;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 2rem;
  align-items: start;
}
.product-detail-image {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-detail-image-main {
  background: var(--bg-subtle);
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
}
.product-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0.25rem;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.product-gallery-thumb.is-active {
  border-color: var(--text-muted);
}
.product-gallery-thumb:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.product-specs {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.product-specs caption {
  text-align: left;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.product-specs th,
.product-specs td {
  text-align: left;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.product-specs th {
  font-weight: 400;
  color: var(--text-muted);
  width: 45%;
}

.product-documents {
  margin: 1.5rem 0;
}
.product-documents h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
.product-documents ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-documents a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-primary);
}
.product-documents a:hover {
  background: var(--bg-subtle);
}
.product-document-type {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.product-detail-category {
  display: inline-block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.product-detail-price {
  display: block;
  font-size: 1.5rem;
  margin: 0.5rem 0;
}
.product-detail-desc {
  margin: 1rem 0;
}
.product-detail-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.product-qty-input {
  width: 4rem;
  padding: 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  text-align: center;
}

/* TIENDA — PORTADA DEL CATÁLOGO */
/* Full-bleed band: the hero sits outside .site-page so it can span the viewport
   while its contents stay on the same 960px column as the rest of the page. */
.shop-hero {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  padding: 3rem 1.5rem 2.5rem;
}
.shop-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.shop-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.shop-hero-subtitle {
  font-size: 1.0625rem;
  color: var(--text-muted);
  max-width: 52ch;
  margin-bottom: 1.5rem;
}
/* The search is the band's payload, not a footnote to the heading. */
.shop-hero .product-search {
  margin-bottom: 0;
}
.shop-hero .product-search-input {
  max-width: 30rem;
  padding: 0.75rem 1.125rem;
  font-size: 1rem;
}
/* The hero already carries the top spacing for the page. */
.shop-hero + .site-page {
  padding-top: 2rem;
}

#shop-blocks {
  margin: 0 0 1rem;
}
.shop-block {
  margin-bottom: 3rem;
}
.shop-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.125rem;
}
.shop-block-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.shop-block-more {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.shop-block-more:hover {
  text-decoration: underline;
}
/* The lead blocks (best sellers, featured) get fewer, larger cards. Without this
   a hand-picked product rendered identically to row 47 of the grid below. */
.product-grid-lg {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.product-grid-lg .product-card-body {
  padding: 1.125rem;
  gap: 0.5rem;
}
.product-grid-lg .product-card-body h2 {
  font-size: 1.0625rem;
}
.product-grid-lg .product-price {
  font-size: 1.125rem;
}
/* New arrivals: one scrollable row, so a long tail does not push the catalogue
   further down the page. */
.product-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.75rem;
  /* Bleed to the page gutter so the row reads as continuing off-screen. */
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
}
.product-strip > .product-card {
  scroll-snap-align: start;
}
.product-strip::-webkit-scrollbar {
  height: 6px;
}
.product-strip::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
/* Category tiles. The first version put the photo behind the label as a
   backdrop; on the real catalogue that failed. Feed photos are busy — many have
   dimensions burned into the image — so at tile size the picture collided with
   the label instead of sitting behind it. Photo on top, label below: the photo
   is legible as a photo and the label is legible as a label.

   Uniform tiles, no promoted lead tile either. A 2x2 lead needs the item count
   to match the column count to avoid stranding one tile alone on a last row,
   and the column count is responsive, so no fixed count ever fit. Equal tiles
   fill at any width. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.category-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 150ms,
    transform 150ms;
}
.category-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.category-card-image {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
}
.category-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem;
}
.category-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.7rem 0.8rem 0.8rem;
}
.category-card-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}
.category-card-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.brand-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color 150ms,
    color 150ms;
}
.brand-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.brand-chip-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}
@media (max-width: 600px) {
  .shop-hero {
    padding: 2rem 1.5rem;
  }
  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

/* CARRITO */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.cart-table th,
.cart-table td {
  text-align: left;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.cart-table tfoot td {
  font-weight: 700;
}
.cart-table tfoot .price-vat-note {
  display: table-cell;
  font-weight: 400;
  border-bottom: none;
  padding-top: 0;
}
.cart-item-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8125rem;
  text-decoration: underline;
}
.cart-item-qty {
  width: 3.5rem;
  padding: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-primary);
  text-align: center;
}

/* COOKIE BANNER */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 1000;
}
#cookie-banner p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
}
#cookie-banner .site-btn {
  white-space: nowrap;
}
@media (max-width: 640px) {
  #cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  #cookie-banner p {
    flex: none;
  }
}

/* FOOTER */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 1.5rem;
  margin-top: auto;
}
.site-footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.site-footer-links {
  display: flex;
  gap: 1.5rem;
}
.site-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer-links a:hover {
  color: var(--text-primary);
}
.site-footer-ai {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.site-footer-ai p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.site-footer-ai a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer-ai a:hover {
  color: var(--text-primary);
}
.site-footer-credit {
  margin-top: 1rem;
  justify-content: center;
  font-size: 0.75rem;
}
.site-footer-credit p {
  margin: 0;
}
.site-footer-credit a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer-credit a:hover {
  color: var(--text-primary);
}

/* WHATSAPP FLOAT */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #25d366;
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.whatsapp-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .site-nav-links {
    display: none;
  }
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .site-nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }
  .site-nav-links.open {
    display: flex;
  }
  .site-nav-toggle {
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--text-primary, #1a1a1a);
  }
  .site-nav {
    position: relative;
  }

  .site-hero {
    padding: 3rem 1rem;
  }
  .site-hero h1,
  .site-hero-inner h1 {
    font-size: clamp(1.6rem, 5vw, 2.5rem);
  }
  .site-hero-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  .site-hero-actions a {
    width: 100%;
    text-align: center;
  }
  .site-page {
    padding: 2rem 1rem;
  }
  .site-page-inner {
    padding: 0;
  }
  .site-footer-inner {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-card,
  .site-post-card {
    margin-bottom: 1rem;
  }

  .product-detail {
    grid-template-columns: 1fr;
  }

  .contact-form,
  .site-contact-form {
    padding: 1.5rem 1rem;
  }
  .contact-form input,
  .contact-form textarea,
  .site-contact-form input,
  .site-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 769px) {
  .site-nav-toggle {
    display: none;
  }
}