/* Hoja principal: vida_natural/assets/css/style.css */
:root {
  --green-950: #073d2b;
  --green-900: #0f4f38;
  --green-800: #176844;
  --green-700: #28744d;
  --green-500: #5f8a58;
  --sage-300: #b9d0bd;
  --sage-100: #eef4ef;
  --cream: #f6f2e9;
  --paper: #fff;
  --page: #fafbf8;
  --ink: #252a27;
  --muted: #68766e;
  --line: #e1e7e2;
  --shadow: 0 14px 34px rgba(15, 79, 56, 0.12);
  --header-height: 128px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--page);
  font-family: "Open Sans", Arial, sans-serif;
  line-height: 1.55;
}

body.menu-locked {
  overflow: hidden;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Encabezado */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 5px 20px rgba(7, 61, 43, 0.06);
  backdrop-filter: blur(14px);
}

.container {
  width: min(1640px, calc(100% - 56px));
  margin-inline: auto;
}

.main-nav {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(440px, 1fr) minmax(320px, 420px) auto;
  align-items: center;
  gap: 32px;
  min-height: var(--header-height);
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.header-brand-logo {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.brand-text {
  color: var(--green-900);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.55rem, 2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.menu > a,
.menu > button {
  min-height: 50px;
  padding: 14px 16px;
  color: var(--green-900);
  background: transparent;
  border: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition:
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.menu > a:hover,
.menu > a:focus-visible,
.menu > button:hover,
.menu > button:focus-visible,
.menu > button.active {
  color: var(--green-700);
  outline: none;
  box-shadow: inset 0 -2px 0 var(--green-700);
}

.categories-menu {
  position: absolute;
  top: calc(100% + 16px);
  z-index: 20;
  display: none;
  max-height: min(70vh, 580px);
  overflow: auto;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(7, 61, 43, 0.18);
}

.categories-menu.active {
  display: block;
}

.areas-menu {
  left: 0;
  width: min(820px, calc(100vw - 48px));
  padding: 20px;
}

#socialMenu {
  right: 0;
  width: 210px;
  padding: 8px;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.area-column {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.area-column a,
.categories-menu li a {
  display: block;
  padding: 9px 10px;
  color: var(--muted);
  border-radius: 7px;
  font-size: 0.82rem;
  line-height: 1.35;
}

.area-column a:hover,
.area-column a:focus-visible,
.categories-menu li a:hover,
.categories-menu li a:focus-visible {
  color: var(--green-800);
  background: var(--sage-100);
  outline: none;
}

.categories-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.close-menu {
  display: none;
}

/* Buscador */
.search-wrap,
.search-wrap form {
  position: relative;
  width: 100%;
}

.search-wrap input {
  width: 100%;
  height: 54px;
  padding: 0 60px 0 20px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  outline: none;
}

.search-wrap input:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 4px rgba(40, 116, 77, 0.1);
}

.search-submit {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #fff;
  background: var(--green-800);
  border: 0;
  border-radius: 50%;
}

.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 30;
  display: none;
  max-height: 360px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.search-suggest.is-open {
  display: block;
}

.search-suggest__item {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.search-suggest__item:last-child {
  border-bottom: 0;
}

.search-suggest__item:hover,
.search-suggest__item:focus-visible {
  background: var(--sage-100);
  outline: none;
}

.search-suggest__item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.search-suggest__item strong,
.search-suggest__item small {
  display: block;
}

.search-suggest__item small,
.search-suggest__empty {
  color: var(--muted);
  font-size: 0.72rem;
}

.search-suggest__empty {
  margin: 0;
  padding: 14px;
  text-align: center;
}

.mobile-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  color: var(--green-900);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

/* Carrusel: proporción original, sin recortes. */
.hero-slider,
.hero-slider .swiper,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide,
.hero-picture {
  width: 100%;
  min-height: 0;
  margin: 0;
}

.hero-slider {
  overflow: hidden;
  background: #fff;
}

.hero-picture {
  display: block;
  line-height: 0;
}

.hero-picture img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* Solo computadora: ocupa todo el ancho con un recorte mínimo y centrado. */
@media (min-width: 901px) {
  .hero-slider,
  .hero-slider .swiper,
  .hero-slider .swiper-wrapper,
  .hero-slider .swiper-slide,
  .hero-picture {
    height: clamp(430px, 30vw, 580px) !important;
    min-height: 0 !important;
    max-height: 580px !important;
  }

  .hero-slider .swiper-slide,
  .hero-picture {
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .hero-slider .hero-picture > img.fondo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
  }
}

.swiper-button-prev,
.swiper-button-next {
  width: 42px;
  height: 42px;
  color: var(--green-800);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 50%;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 1rem;
  font-weight: 800;
}

.swiper-pagination-bullet-active {
  background: var(--green-700);
}

/* Catálogo */
.shop-section {
  padding: clamp(42px, 6vw, 82px) clamp(18px, 5vw, 78px);
  background: var(--page);
}

.shop-layout {
  width: min(1480px, 100%);
  margin-inline: auto;
}

.shop-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 7px 24px;
  margin-bottom: 24px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.shop-heading > p,
.product-results-heading > p,
.featured-eyebrow {
  margin: 0;
  color: var(--green-500);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.shop-heading h2,
.product-results-heading h2,
.featured-heading h2 {
  margin: 0;
  color: var(--green-900);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.1rem, 4vw, 3.55rem);
  font-weight: 600;
  line-height: 1.05;
}

.show-all-products {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-height: 48px;
  padding: 0 18px;
  color: var(--green-800);
  background: #fff;
  border: 1px solid var(--sage-300);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 750;
  transition: 0.2s ease;
}

.show-all-products b {
  display: inline-grid;
  min-width: 28px;
  min-height: 28px;
  margin-left: 7px;
  place-items: center;
  color: #fff;
  background: var(--green-800);
  border-radius: 50%;
}

.show-all-products:hover,
.show-all-products:focus-visible,
.show-all-products.active {
  color: #fff;
  background: var(--green-800);
  border-color: var(--green-800);
  outline: none;
  box-shadow: var(--shadow);
}

.show-all-products.active b {
  color: var(--green-800);
  background: #fff;
}

.category-showcase {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 clamp(52px, 7vw, 92px);
}

.category-choice {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(72px, 0.8fr) minmax(90px, 1fr) 28px;
  align-items: center;
  min-width: 0;
  min-height: 128px;
  padding: 12px 12px 12px 7px;
  overflow: hidden;
  color: var(--green-800);
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: 12px;
  text-align: left;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.category-choice:nth-child(even) {
  background: color-mix(in srgb, var(--sage-300) 30%, white);
}

.category-choice__image {
  display: grid;
  height: 104px;
  place-items: center;
}

.category-choice__image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 105px;
  object-fit: contain;
  object-position: center;
  filter: none;
  transition: transform 0.25s ease;
}

.category-choice__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: clamp(0.86rem, 1.15vw, 1.05rem);
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.category-choice__text b {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: none;
}

.category-choice__arrow {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  background: var(--green-800);
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-6px);
  transition: 0.25s ease;
}

.category-choice:hover,
.category-choice:focus-visible,
.category-choice.active {
  border-color: var(--green-500);
  outline: none;
  box-shadow: 0 17px 34px rgba(22, 74, 53, 0.16);
  transform: translateY(-5px);
}

.category-choice:hover .category-choice__image img,
.category-choice:focus-visible .category-choice__image img,
.category-choice.active .category-choice__image img {
  transform: scale(1.07) translateY(-2px);
}

.category-choice:hover .category-choice__arrow,
.category-choice:focus-visible .category-choice__arrow,
.category-choice.active .category-choice__arrow {
  opacity: 1;
  transform: translateX(0);
}

.product-results-heading {
  margin-bottom: 34px;
  scroll-margin-top: calc(var(--header-height) + 22px);
  text-align: center;
}

.product-results-heading > p {
  margin-bottom: 7px;
}

.product-results-heading h2 {
  margin-bottom: 8px;
}

.product-results-heading > span {
  color: var(--muted);
  font-size: 0.86rem;
}

/* Tarjetas: una sola regla de imagen para las cinco categorías. */
.category-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(20px, 2.2vw, 32px);
  width: 100%;
}

.category-card {
  --product-accent: #28744d;
  --product-accent-rgb: 40, 116, 77;
  --product-text: #225f40;
  display: grid;
  grid-template-columns: minmax(145px, 42%) minmax(0, 58%);
  grid-template-rows: auto auto 1fr auto;
  gap: 7px 10px;
  min-width: 0;
  min-height: 330px;
  padding: 18px;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  border: 3px solid rgba(var(--product-accent-rgb), 0.78);
  border-top: 8px solid var(--product-accent);
  border-radius: 12px;
  box-shadow:
    0 7px 0 -3px rgba(var(--product-accent-rgb), 0.38),
    0 17px 25px -8px rgba(25, 33, 29, 0.42),
    0 22px 38px -9px rgba(var(--product-accent-rgb), 0.66),
    inset 0 0 0 2px rgba(var(--product-accent-rgb), 0.12);
  filter: drop-shadow(0 12px 9px rgba(var(--product-accent-rgb), 0.26));
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.category-card:hover,
.category-card:focus-within {
  border-color: var(--product-accent);
  box-shadow:
    0 9px 0 -3px rgba(var(--product-accent-rgb), 0.48),
    0 21px 31px -8px rgba(25, 33, 29, 0.5),
    0 28px 48px -8px rgba(var(--product-accent-rgb), 0.76),
    inset 0 0 0 2px rgba(var(--product-accent-rgb), 0.18);
  filter: drop-shadow(0 16px 11px rgba(var(--product-accent-rgb), 0.36));
  transform: translateY(-5px);
}

.category-card.is-entire-card-link {
  cursor: pointer;
}

.category-card.is-entire-card-link:focus-visible {
  border-color: var(--product-accent);
  outline: 3px solid rgba(var(--product-accent-rgb), 0.42);
  outline-offset: 4px;
}

.product-image-wrap {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  display: grid;
  min-width: 0;
  min-height: 292px;
  padding: 16px;
  place-items: center;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.product-image-wrap img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 270px;
  margin: auto;
  padding: 0;
  object-fit: contain;
  object-position: center;
  clip: auto;
  clip-path: none;
  transform: none;
  background: transparent;
  box-shadow: none;
  filter: none;
}

/* Ingredientes principales: máximo tres, en columna y con fotos realistas. */
.product-ingredient-list {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  justify-self: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
  max-width: 230px;
  margin: 6px 0 0 -8px;
}

.ingredient-item {
  display: grid;
  grid-template-columns: 51px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: var(--product-text);
  background: transparent;
  border: 0;
  text-align: left;
}

.ingredient-item:nth-child(n + 4) {
  display: none;
}

.ingredient-photo {
  display: block;
  width: 51px;
  height: 51px;
  overflow: hidden;
  background-color: transparent;
  background-image: url("../img/ingredientes/ingredientes-realistas-transparente.png");
  background-repeat: no-repeat;
  background-size: 400% 400%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  flex: 0 0 auto;
}

/* En tabletas, los ingredientes quedan recortados y sin círculos de fondo. */
.product-card[data-category="tabletas"] .ingredient-photo {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 5px 5px rgba(var(--product-accent-rgb), 0.22));
}

.product-card[data-category="tabletas"] .ingredient-name {
  color: var(--product-text);
}

.ingredient-photo[data-icon="chinese-garlic"],
.ingredient-photo[data-icon="moringa"],
.ingredient-photo[data-icon="juniper"],
.ingredient-photo[data-icon="chanca-piedra"],
.ingredient-photo[data-icon="doradilla"],
.ingredient-photo[data-icon="tamarisk"],
.ingredient-photo[data-icon="soursop"],
.ingredient-photo[data-icon="orange-blossom"],
.ingredient-photo[data-icon="lemon-balm"],
.ingredient-photo[data-icon="artichoke"],
.ingredient-photo[data-icon="mallow"],
.ingredient-photo[data-icon="mint"] {
  background-image: url("../img/ingredientes/ingredientes-especificos-v2-transparente.png");
}

.ingredient-photo[data-icon="chinese-garlic"] { background-position: 0% 0%; }
.ingredient-photo[data-icon="moringa"] { background-position: 33.333% 0%; }
.ingredient-photo[data-icon="juniper"] { background-position: 66.667% 0%; }
.ingredient-photo[data-icon="chanca-piedra"] { background-position: 100% 0%; }
.ingredient-photo[data-icon="doradilla"] { background-position: 0% 33.333%; }
.ingredient-photo[data-icon="tamarisk"] { background-position: 33.333% 33.333%; }
.ingredient-photo[data-icon="soursop"] { background-position: 66.667% 33.333%; }
.ingredient-photo[data-icon="orange-blossom"] { background-position: 100% 33.333%; }
.ingredient-photo[data-icon="lemon-balm"] { background-position: 0% 66.667%; }
.ingredient-photo[data-icon="artichoke"] { background-position: 33.333% 66.667%; }
.ingredient-photo[data-icon="mallow"] { background-position: 66.667% 66.667%; }
.ingredient-photo[data-icon="mint"] { background-position: 100% 66.667%; }

.ingredient-photo[data-icon="glucosamine-refined"],
.ingredient-photo[data-icon="msm-refined"],
.ingredient-photo[data-icon="chondroitin-refined"],
.ingredient-photo[data-icon="turmeric-plant"],
.ingredient-photo[data-icon="calcium-refined"],
.ingredient-photo[data-icon="magnesium-refined"],
.ingredient-photo[data-icon="zinc-refined"],
.ingredient-photo[data-icon="iron-refined"],
.ingredient-photo[data-icon="vitamin-b1-refined"],
.ingredient-photo[data-icon="vitamin-b2-refined"],
.ingredient-photo[data-icon="vitamin-b12-refined"],
.ingredient-photo[data-icon="vitamin-b-complex-refined"],
.ingredient-photo[data-icon="vitamin-b9-refined"],
.ingredient-photo[data-icon="vitamin-c-refined"],
.ingredient-photo[data-icon="vitamin-d-refined"],
.ingredient-photo[data-icon="vitamin-powder-refined"],
.ingredient-photo[data-icon="collagen-refined"],
.ingredient-photo[data-icon="lysine-refined"],
.ingredient-photo[data-icon="mannose-refined"],
.ingredient-photo[data-icon="cartilage-refined"] {
  background-image: url("../img/ingredientes/ingredientes-refinados-v4.png");
}

.ingredient-photo[data-icon="glucosamine-refined"] { background-position: 0% 0%; }
.ingredient-photo[data-icon="msm-refined"] { background-position: 33.333% 0%; }
.ingredient-photo[data-icon="chondroitin-refined"] { background-position: 66.667% 0%; }
.ingredient-photo[data-icon="turmeric-plant"] { background-position: 100% 0%; }
.ingredient-photo[data-icon="calcium-refined"],
.ingredient-photo[data-icon="vitamin-c-refined"] { background-position: 0% 33.333%; }
.ingredient-photo[data-icon="magnesium-refined"] { background-position: 33.333% 33.333%; }
.ingredient-photo[data-icon="zinc-refined"] { background-position: 66.667% 33.333%; }
.ingredient-photo[data-icon="iron-refined"] { background-position: 100% 33.333%; }
.ingredient-photo[data-icon="vitamin-b1-refined"],
.ingredient-photo[data-icon="vitamin-b9-refined"] { background-position: 0% 66.667%; }
.ingredient-photo[data-icon="vitamin-b2-refined"],
.ingredient-photo[data-icon="vitamin-b-complex-refined"] { background-position: 33.333% 66.667%; }
.ingredient-photo[data-icon="vitamin-b12-refined"] { background-position: 66.667% 66.667%; }
.ingredient-photo[data-icon="vitamin-d-refined"],
.ingredient-photo[data-icon="vitamin-powder-refined"] { background-position: 100% 66.667%; }
.ingredient-photo[data-icon="collagen-refined"] { background-position: 0% 100%; }
.ingredient-photo[data-icon="lysine-refined"] { background-position: 33.333% 100%; }
.ingredient-photo[data-icon="mannose-refined"] { background-position: 66.667% 100%; }
.ingredient-photo[data-icon="cartilage-refined"] { background-position: 100% 100%; }

.ingredient-photo[data-icon="beetroot-plant"] {
  background-image: url("../img/ingredientes/betabel-planta-v4.png");
  background-position: center;
  background-size: contain;
}

.ingredient-photo[data-icon="herb"] { background-position: 0% 0%; }
.ingredient-photo[data-icon="white-flower"] { background-position: 33.333% 0%; }
.ingredient-photo[data-icon="lavender"] { background-position: 66.667% 0%; }
.ingredient-photo[data-icon="hibiscus"] { background-position: 100% 0%; }
.ingredient-photo[data-icon="blueberry"] { background-position: 0% 33.333%; }
.ingredient-photo[data-icon="red-berries"] { background-position: 33.333% 33.333%; }
.ingredient-photo[data-icon="pomegranate"] { background-position: 66.667% 33.333%; }
.ingredient-photo[data-icon="noni"] { background-position: 100% 33.333%; }
.ingredient-photo[data-icon="ginger"] { background-position: 0% 66.667%; }
.ingredient-photo[data-icon="turmeric"] { background-position: 33.333% 66.667%; }
.ingredient-photo[data-icon="black-garlic"] { background-position: 66.667% 66.667%; }
.ingredient-photo[data-icon="cinnamon"] { background-position: 100% 66.667%; }
.ingredient-photo[data-icon="nopal"] { background-position: 0% 100%; }
.ingredient-photo[data-icon="corn-silk"] { background-position: 33.333% 100%; }
.ingredient-photo[data-icon="seeds"] { background-position: 66.667% 100%; }
.ingredient-name {
  max-width: none;
  overflow-wrap: anywhere;
  color: #4c5751;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.22;
  text-transform: none;
}

.category-label {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 12px 0 0;
  color: var(--product-text);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.category-card h3 {
  grid-column: 2;
  grid-row: 2;
  margin: 3px 0;
  color: var(--product-text);
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
  font-weight: 800;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.category-link {
  grid-column: 2;
  grid-row: 4;
  align-self: end;
  justify-self: start;
  margin: 14px 0 8px;
  padding: 10px 14px;
  color: var(--product-text);
  background: transparent;
  border: 1px solid var(--product-text);
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.category-link span {
  display: none;
}

.category-link:hover,
.category-link:focus-visible {
  color: #fff;
  background: var(--product-text);
  outline: none;
}

.category-card.is-hidden,
.category-card[hidden] {
  display: none;
}

/* Colores fijos de cada envase: funcionan incluso abriendo index.html como archivo local. */
.product-card[data-accent="#c87154"] { --product-accent: #c87154; --product-accent-rgb: 200, 113, 84; --product-text: #c87154; }
.product-card[data-accent="#5b8f4b"] { --product-accent: #5b8f4b; --product-accent-rgb: 91, 143, 75; --product-text: #5b8f4b; }
.product-card[data-accent="#1b7949"] { --product-accent: #1b7949; --product-accent-rgb: 27, 121, 73; --product-text: #1b7949; }
.product-card[data-accent="#da562b"] { --product-accent: #da562b; --product-accent-rgb: 218, 86, 43; --product-text: #d7562b; }
.product-card[data-accent="#248893"] { --product-accent: #248893; --product-accent-rgb: 36, 136, 147; --product-text: #248893; }
.product-card[data-accent="#c90e13"] { --product-accent: #c90e13; --product-accent-rgb: 201, 14, 19; --product-text: #c90e13; }
.product-card[data-accent="#442d79"] { --product-accent: #442d79; --product-accent-rgb: 68, 45, 121; --product-text: #442d79; }
.product-card[data-accent="#0d8f4d"] { --product-accent: #0d8f4d; --product-accent-rgb: 13, 143, 77; --product-text: #0d8f4d; }
.product-card[data-accent="#806b97"] { --product-accent: #806b97; --product-accent-rgb: 128, 107, 151; --product-text: #806b97; }
.product-card[data-accent="#ce2a28"] { --product-accent: #ce2a28; --product-accent-rgb: 206, 42, 40; --product-text: #ce2a28; }
.product-card[data-accent="#2b7740"] { --product-accent: #2b7740; --product-accent-rgb: 43, 119, 64; --product-text: #2b7740; }
.product-card[data-accent="#d6a620"] { --product-accent: #d6a620; --product-accent-rgb: 214, 166, 32; --product-text: #d6a620; }
.product-card[data-accent="#aeb637"] { --product-accent: #aeb637; --product-accent-rgb: 174, 182, 55; --product-text: #aeb637; }
.product-card[data-accent="#684c2f"] { --product-accent: #684c2f; --product-accent-rgb: 104, 76, 47; --product-text: #684c2f; }
.product-card[data-accent="#8c3d41"] { --product-accent: #8c3d41; --product-accent-rgb: 140, 61, 65; --product-text: #8c3d41; }
.product-card[data-accent="#cb7423"] { --product-accent: #cb7423; --product-accent-rgb: 203, 116, 35; --product-text: #cb7423; }
.product-card[data-accent="#454688"] { --product-accent: #454688; --product-accent-rgb: 69, 70, 136; --product-text: #454688; }
.product-card[data-accent="#233a91"] { --product-accent: #233a91; --product-accent-rgb: 35, 58, 145; --product-text: #233a91; }
.product-card[data-accent="#dba73a"] { --product-accent: #dba73a; --product-accent-rgb: 219, 167, 58; --product-text: #d7a73a; }
.product-card[data-accent="#6b871f"] { --product-accent: #6b871f; --product-accent-rgb: 107, 135, 31; --product-text: #6b871f; }
.product-card[data-accent="#deaf23"] { --product-accent: #deaf23; --product-accent-rgb: 222, 175, 35; --product-text: #d7af23; }
.product-card[data-accent="#902b2a"] { --product-accent: #902b2a; --product-accent-rgb: 144, 43, 42; --product-text: #902b2a; }
.product-card[data-accent="#40802b"] { --product-accent: #40802b; --product-accent-rgb: 64, 128, 43; --product-text: #40802b; }
.product-card[data-accent="#03a344"] { --product-accent: #03a344; --product-accent-rgb: 3, 163, 68; --product-text: #03a344; }
.product-card[data-accent="#d8704b"] { --product-accent: #d8704b; --product-accent-rgb: 216, 112, 75; --product-text: #d7704b; }
.product-card[data-accent="#a5c241"] { --product-accent: #a5c241; --product-accent-rgb: 165, 194, 65; --product-text: #a5c241; }
.product-card[data-accent="#6f5034"] { --product-accent: #6f5034; --product-accent-rgb: 111, 80, 52; --product-text: #6f5034; }
.product-card[data-accent="#3d8b23"] { --product-accent: #3d8b23; --product-accent-rgb: 61, 139, 35; --product-text: #3d8b23; }
.product-card[data-accent="#532b71"] { --product-accent: #532b71; --product-accent-rgb: 83, 43, 113; --product-text: #532b71; }
.product-card[data-accent="#213c8d"] { --product-accent: #213c8d; --product-accent-rgb: 33, 60, 141; --product-text: #213c8d; }
.product-card[data-accent="#e0973e"] { --product-accent: #e0973e; --product-accent-rgb: 224, 151, 62; --product-text: #d7973e; }
.product-card[data-accent="#8e292b"] { --product-accent: #8e292b; --product-accent-rgb: 142, 41, 43; --product-text: #8e292b; }
.product-card[data-accent="#fbbe04"] { --product-accent: #fbbe04; --product-accent-rgb: 251, 190, 4; --product-text: #d7be04; }
.product-card[data-accent="#deac29"] { --product-accent: #deac29; --product-accent-rgb: 222, 172, 41; --product-text: #d7ac29; }
.product-card[data-accent="#786589"] { --product-accent: #786589; --product-accent-rgb: 120, 101, 137; --product-text: #786589; }
.product-card[data-accent="#da5e36"] { --product-accent: #da5e36; --product-accent-rgb: 218, 94, 54; --product-text: #d75e36; }
.product-card[data-accent="#632373"] { --product-accent: #632373; --product-accent-rgb: 99, 35, 115; --product-text: #632373; }
.product-card[data-accent="#6f4d2e"] { --product-accent: #6f4d2e; --product-accent-rgb: 111, 77, 46; --product-text: #6f4d2e; }
.product-card[data-accent="#d41413"] { --product-accent: #d41413; --product-accent-rgb: 212, 20, 19; --product-text: #d41413; }
.product-card[data-accent="#ddae22"] { --product-accent: #ddae22; --product-accent-rgb: 221, 174, 34; --product-text: #d7ae22; }
.product-card[data-accent="#828125"] { --product-accent: #828125; --product-accent-rgb: 130, 129, 37; --product-text: #828125; }
.product-card[data-accent="#359dc5"] { --product-accent: #359dc5; --product-accent-rgb: 53, 157, 197; --product-text: #359dc5; }
.product-card[data-accent="#2490b9"] { --product-accent: #2490b9; --product-accent-rgb: 36, 144, 185; --product-text: #2490b9; }
.product-card[data-accent="#059d47"] { --product-accent: #059d47; --product-accent-rgb: 5, 157, 71; --product-text: #059d47; }
.product-card[data-accent="#346f47"] { --product-accent: #346f47; --product-accent-rgb: 52, 111, 71; --product-text: #346f47; }
.product-card[data-accent="#ca120e"] { --product-accent: #ca120e; --product-accent-rgb: 202, 18, 14; --product-text: #ca120e; }
.product-card[data-accent="#d1d117"] { --product-accent: #d1d117; --product-accent-rgb: 209, 209, 23; --product-text: #d1d117; }
.product-card[data-accent="#0b593b"] { --product-accent: #0b593b; --product-accent-rgb: 11, 89, 59; --product-text: #0b593b; }
.product-card[data-accent="#31556b"] { --product-accent: #31556b; --product-accent-rgb: 49, 85, 107; --product-text: #31556b; }
.product-card[data-accent="#245d38"] { --product-accent: #245d38; --product-accent-rgb: 36, 93, 56; --product-text: #245d38; }
.product-card[data-accent="#087b87"] { --product-accent: #087b87; --product-accent-rgb: 8, 123, 135; --product-text: #087b87; }
.product-card[data-accent="#d34f87"] { --product-accent: #d34f87; --product-accent-rgb: 211, 79, 135; --product-text: #c43873; }
.product-card[data-accent="#173987"] { --product-accent: #173987; --product-accent-rgb: 23, 57, 135; --product-text: #173987; }
.product-card[data-accent="#08974b"] { --product-accent: #08974b; --product-accent-rgb: 8, 151, 75; --product-text: #08974b; }
.product-card[data-accent="#5b206f"] { --product-accent: #5b206f; --product-accent-rgb: 91, 32, 111; --product-text: #5b206f; }
.product-card[data-accent="#32996c"] { --product-accent: #32996c; --product-accent-rgb: 50, 153, 108; --product-text: #32996c; }
.product-card[data-accent="#4682b8"] { --product-accent: #4682b8; --product-accent-rgb: 70, 130, 184; --product-text: #4682b8; }
.product-card[data-accent="#1b8aa2"] { --product-accent: #1b8aa2; --product-accent-rgb: 27, 138, 162; --product-text: #1b8aa2; }
.product-card[data-accent="#3b4669"] { --product-accent: #3b4669; --product-accent-rgb: 59, 70, 105; --product-text: #3b4669; }
.product-card[data-accent="#344472"] { --product-accent: #344472; --product-accent-rgb: 52, 68, 114; --product-text: #344472; }
.product-card[data-accent="#5b6936"] { --product-accent: #5b6936; --product-accent-rgb: 91, 105, 54; --product-text: #5b6936; }
.product-card[data-accent="#453a6a"] { --product-accent: #453a6a; --product-accent-rgb: 69, 58, 106; --product-text: #453a6a; }
.product-card[data-accent="#a02426"] { --product-accent: #a02426; --product-accent-rgb: 160, 36, 38; --product-text: #a02426; }
.product-card[data-accent="#354470"] { --product-accent: #354470; --product-accent-rgb: 53, 68, 112; --product-text: #354470; }
.product-card[data-accent="#4e6438"] { --product-accent: #4e6438; --product-accent-rgb: 78, 100, 56; --product-text: #4e6438; }
.product-card[data-accent="#215c6d"] { --product-accent: #215c6d; --product-accent-rgb: 33, 92, 109; --product-text: #215c6d; }
.product-card[data-accent="#285171"] { --product-accent: #285171; --product-accent-rgb: 40, 81, 113; --product-text: #285171; }
.product-card[data-accent="#2b4864"] { --product-accent: #2b4864; --product-accent-rgb: 43, 72, 100; --product-text: #2b4864; }
.product-card[data-accent="#1d4c64"] { --product-accent: #1d4c64; --product-accent-rgb: 29, 76, 100; --product-text: #1d4c64; }
.product-card[data-accent="#2b455f"] { --product-accent: #2b455f; --product-accent-rgb: 43, 69, 95; --product-text: #2b455f; }
.product-card[data-accent="#c13a5b"] { --product-accent: #c13a5b; --product-accent-rgb: 193, 58, 91; --product-text: #c13a5b; }
.product-card[data-accent="#30407a"] { --product-accent: #30407a; --product-accent-rgb: 48, 64, 122; --product-text: #30407a; }
.product-card[data-accent="#2b2896"] { --product-accent: #2b2896; --product-accent-rgb: 43, 40, 150; --product-text: #2b2896; }
.product-card[data-accent="#a2201f"] { --product-accent: #a2201f; --product-accent-rgb: 162, 32, 31; --product-text: #a2201f; }
.product-card[data-accent="#2b567e"] { --product-accent: #2b567e; --product-accent-rgb: 43, 86, 126; --product-text: #2b567e; }
.product-card[data-accent="#566816"] { --product-accent: #566816; --product-accent-rgb: 86, 104, 22; --product-text: #566816; }
.product-card[data-accent="#4e0894"] { --product-accent: #4e0894; --product-accent-rgb: 78, 8, 148; --product-text: #4e0894; }
.product-card[data-accent="#b91f21"] { --product-accent: #b91f21; --product-accent-rgb: 185, 31, 33; --product-text: #b91f21; }
.product-card[data-accent="#c0772e"] { --product-accent: #c0772e; --product-accent-rgb: 192, 119, 46; --product-text: #c0772e; }
.product-card[data-accent="#6f904d"] { --product-accent: #6f904d; --product-accent-rgb: 111, 144, 77; --product-text: #6f904d; }
.product-card[data-accent="#256ea8"] { --product-accent: #256ea8; --product-accent-rgb: 37, 110, 168; --product-text: #256ea8; }
.product-card[data-accent="#a7bf64"] { --product-accent: #a7bf64; --product-accent-rgb: 167, 191, 100; --product-text: #a7bf64; }
.product-card[data-accent="#9f292a"] { --product-accent: #9f292a; --product-accent-rgb: 159, 41, 42; --product-text: #9f292a; }
.product-card[data-accent="#1a9739"] { --product-accent: #1a9739; --product-accent-rgb: 26, 151, 57; --product-text: #1a9739; }
.product-card[data-accent="#875f2b"] { --product-accent: #875f2b; --product-accent-rgb: 135, 95, 43; --product-text: #875f2b; }
.product-card[data-accent="#6b268f"] { --product-accent: #6b268f; --product-accent-rgb: 107, 38, 143; --product-text: #6b268f; }
.product-card[data-accent="#c82c76"] { --product-accent: #c82c76; --product-accent-rgb: 200, 44, 118; --product-text: #c82c76; }
.product-card[data-accent="#775941"] { --product-accent: #775941; --product-accent-rgb: 119, 89, 65; --product-text: #775941; }
.product-card[data-accent="#a12424"] { --product-accent: #a12424; --product-accent-rgb: 161, 36, 36; --product-text: #a12424; }
.product-card[data-accent="#1a87b5"] { --product-accent: #1a87b5; --product-accent-rgb: 26, 135, 181; --product-text: #1a87b5; }
.product-card[data-accent="#3e4770"] { --product-accent: #3e4770; --product-accent-rgb: 62, 71, 112; --product-text: #3e4770; }
.product-card[data-accent="#c09f36"] { --product-accent: #c09f36; --product-accent-rgb: 192, 159, 54; --product-text: #c09f36; }
.product-card[data-accent="#0999ce"] { --product-accent: #0999ce; --product-accent-rgb: 9, 153, 206; --product-text: #0999ce; }
.product-card[data-accent="#9d2323"] { --product-accent: #9d2323; --product-accent-rgb: 157, 35, 35; --product-text: #9d2323; }
.product-card[data-accent="#4a3262"] { --product-accent: #4a3262; --product-accent-rgb: 74, 50, 98; --product-text: #4a3262; }
.product-card[data-accent="#ddb02e"] { --product-accent: #ddb02e; --product-accent-rgb: 221, 176, 46; --product-text: #d7b02e; }
.product-card[data-accent="#ac494e"] { --product-accent: #ac494e; --product-accent-rgb: 172, 73, 78; --product-text: #ac494e; }
.product-card[data-accent="#1a4972"] { --product-accent: #1a4972; --product-accent-rgb: 26, 73, 114; --product-text: #1a4972; }
.product-card[data-accent="#56497e"] { --product-accent: #56497e; --product-accent-rgb: 86, 73, 126; --product-text: #56497e; }
.product-card[data-accent="#ac232a"] { --product-accent: #ac232a; --product-accent-rgb: 172, 35, 42; --product-text: #ac232a; }
.product-card[data-accent="#851a4b"] { --product-accent: #851a4b; --product-accent-rgb: 133, 26, 75; --product-text: #851a4b; }
.product-card[data-accent="#77c3e6"] { --product-accent: #77c3e6; --product-accent-rgb: 119, 195, 230; --product-text: #51859c; }
.product-card[data-accent="#d04848"] { --product-accent: #d04848; --product-accent-rgb: 208, 72, 72; --product-text: #d04848; }
.product-card[data-accent="#7a529c"] { --product-accent: #7a529c; --product-accent-rgb: 122, 82, 156; --product-text: #7a529c; }
.product-card[data-accent="#526f48"] { --product-accent: #526f48; --product-accent-rgb: 82, 111, 72; --product-text: #526f48; }
.product-card[data-accent="#9ccb60"] { --product-accent: #9ccb60; --product-accent-rgb: 156, 203, 96; --product-text: #9ccb60; }
.product-card[data-accent="#3d8883"] { --product-accent: #3d8883; --product-accent-rgb: 61, 136, 131; --product-text: #3d8883; }
.product-card[data-accent="#cf6b9f"] { --product-accent: #cf6b9f; --product-accent-rgb: 207, 107, 159; --product-text: #cf6b9f; }
.product-card[data-accent="#f4ab58"] { --product-accent: #f4ab58; --product-accent-rgb: 244, 171, 88; --product-text: #d7ab58; }
.product-card[data-accent="#32a9d4"] { --product-accent: #32a9d4; --product-accent-rgb: 50, 169, 212; --product-text: #32a9d4; }
.product-card[data-accent="#b9141d"] { --product-accent: #b9141d; --product-accent-rgb: 185, 20, 29; --product-text: #b9141d; }
.product-card[data-accent="#345171"] { --product-accent: #345171; --product-accent-rgb: 52, 81, 113; --product-text: #345171; }
.product-card[data-accent="#09964b"] { --product-accent: #09964b; --product-accent-rgb: 9, 150, 75; --product-text: #09964b; }
.product-card[data-accent="#206869"] { --product-accent: #206869; --product-accent-rgb: 32, 104, 105; --product-text: #206869; }
.product-card[data-accent="#084c95"] { --product-accent: #084c95; --product-accent-rgb: 8, 76, 149; --product-text: #084c95; }
.product-card[data-accent="#eab61e"] { --product-accent: #eab61e; --product-accent-rgb: 234, 182, 30; --product-text: #d7b61e; }
.product-card[data-accent="#2968a0"] { --product-accent: #2968a0; --product-accent-rgb: 41, 104, 160; --product-text: #2968a0; }

/* Productos destacados */
.featured-section {
  padding: clamp(58px, 7vw, 100px) clamp(18px, 5vw, 78px);
  background: #fff;
  border-top: 1px solid var(--line);
}

.featured-container {
  width: min(1280px, 100%);
  margin-inline: auto;
}

.featured-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.featured-heading h2 {
  margin-block: 7px 12px;
}

.featured-heading > p:last-child {
  margin: 0;
  color: var(--muted);
}

.featured-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: stretch;
}

.featured-preview {
  position: relative;
  display: grid;
  min-height: 470px;
  padding: 30px;
  place-items: center;
  overflow: hidden;
  background: var(--sage-100);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(16, 51, 34, 0.1);
}

.featured-preview img {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: contain;
  object-position: center;
  transition: transform 0.3s ease;
}

.featured-preview:hover img {
  transform: scale(1.04);
}

.featured-preview > span {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 10px 14px;
  color: #fff;
  background: var(--green-800);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.featured-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.featured-item {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(180px, 1.15fr);
  align-items: center;
  gap: 18px;
  padding: 24px 18px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.featured-item span,
.featured-item strong,
.featured-item small {
  display: block;
}

.featured-item strong {
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
}

.featured-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
}

.featured-item em {
  font-size: 0.82rem;
  font-style: normal;
}

.featured-item:hover,
.featured-item:focus-visible,
.featured-item.active {
  color: var(--green-800);
  background: var(--sage-100);
  outline: none;
}

/* Pie de página */
footer {
  color: var(--muted);
  background: #fff;
  border-top: 1px solid var(--line);
}

.footer-container {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 34px;
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto;
  padding: 58px 0 0;
}

.footer-col h3,
.footer-col h4 {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col li {
  margin-bottom: 8px;
}

.footer-col a,
.footer-link,
.contact-info a {
  color: var(--green-700);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  text-decoration: underline;
}

.footer-description,
.footer-copyright,
.footer-subsidiary,
.contact-info p {
  margin-top: 0;
}

.footer-copyright,
.footer-subsidiary {
  font-size: 0.72rem;
}

.footer-social:empty {
  display: none;
}

.footer-disclaimer,
.footer-bottom {
  grid-column: 1 / -1;
  padding: 16px 20px;
  background: var(--page);
  border-top: 1px solid var(--line);
  text-align: center;
}

.footer-disclaimer p {
  margin: 0;
}

.footer-bottom {
  margin-top: -34px;
  font-size: 0.75rem;
}

@media (max-width: 1180px) {
  .main-nav {
    grid-template-columns: auto 1fr minmax(210px, 260px) auto;
    gap: 14px;
  }

  .brand-text {
    display: none;
  }

  .category-showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .category-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root {
    --header-height: 78px;
  }

  .container {
    width: min(100% - 26px, 1480px);
  }

  .main-nav {
    grid-template-columns: auto 1fr auto;
    min-height: var(--header-height);
  }

  .header-brand-logo {
    width: 62px;
    height: 62px;
  }

  .mobile-menu-button {
    display: block;
    grid-column: 3;
    grid-row: 1;
  }

  .search-wrap {
    grid-column: 2;
    grid-row: 1;
  }

  .menu {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid var(--line);
  }

  .site-header.menu-open .menu {
    display: flex;
  }

  .menu > a,
  .menu > button {
    width: 100%;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }

  .categories-menu {
    position: static;
    width: 100%;
    max-height: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  .areas-menu,
  #socialMenu {
    width: 100%;
    padding: 14px;
  }

  .areas-grid {
    grid-template-columns: 1fr;
  }

  .featured-layout {
    grid-template-columns: 1fr;
  }

  .featured-preview {
    min-height: 420px;
  }

  .footer-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .shop-section,
  .featured-section {
    padding-inline: 13px;
  }

  .shop-heading {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .shop-heading > p,
  .show-all-products {
    grid-column: 1;
  }

  .show-all-products {
    grid-row: auto;
    justify-self: center;
    margin-top: 12px;
  }

  .category-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-card-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .category-card {
    grid-template-columns: minmax(125px, 42%) minmax(0, 58%);
    min-height: 280px;
    padding: 13px;
    gap: 6px 9px;
  }

  .product-image-wrap {
    min-height: 250px;
    padding: 12px;
  }

  .product-image-wrap img {
    max-height: 226px;
  }

  .featured-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-disclaimer,
  .footer-bottom {
    grid-column: 1;
  }
}

@media (max-width: 480px) {
  .main-nav {
    gap: 8px;
  }

  .header-brand-logo {
    width: 54px;
    height: 54px;
  }

  .search-wrap input {
    padding-left: 13px;
    font-size: 0.82rem;
  }

  .category-showcase {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .category-choice {
    grid-template-columns: 100px 1fr 30px;
    min-height: 108px;
  }

  .category-choice__image {
    height: 88px;
  }

  .category-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    text-align: center;
  }

  .product-image-wrap {
    grid-column: 1;
    grid-row: 1;
    min-height: 235px;
  }

  .product-image-wrap img {
    max-height: 215px;
  }

  .category-label,
  .category-card h3,
  .product-ingredient-list,
  .category-link {
    grid-column: 1;
    justify-self: center;
    text-align: center;
  }

  .category-label {
    grid-row: 2;
  }

  .category-card h3 {
    grid-row: 3;
  }

  .product-ingredient-list {
    grid-row: 4;
    width: min(100%, 260px);
    max-width: 260px;
    margin-left: 0;
    justify-self: center;
    text-align: left;
  }

  .category-link {
    grid-row: 5;
  }

  .featured-preview {
    min-height: 340px;
    padding: 18px;
  }

  .featured-preview img {
    height: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}