:root {
  --ug-green: #8eba3e;
  --ug-acid: #c7ea00;
  --ug-green-dark: #52751e;
  --ug-ink: #1d2b18;
  --ug-ink-deep: #213818;
  --ug-muted: #657060;
  --ug-line: #dfe7d7;
  --ug-surface: #ffffff;
  --ug-wash: #f4f7ef;
  --ug-soft: #eef4e7;
  --ug-warning: #b95f00;
  --ug-shadow: 0 18px 48px rgba(29, 43, 24, 0.08);
  --ug-radius: 8px;
  --ug-radius-sm: 6px;
}

html {
  scroll-padding-top: 88px;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

body.landing {
  background: #fff;
  color: var(--ug-ink);
  letter-spacing: 0;
}

body, input, select, textarea, button {
  letter-spacing: 0;
}

body input[type="checkbox"]:focus,
body input[type="radio"]:focus {
  outline: 2px solid rgba(142, 186, 62, 0.42);
  outline-offset: 2px;
  box-shadow: none !important;
}

a {
  color: var(--ug-green-dark);
}

a:hover,
a:focus {
  color: var(--ug-green);
}

.site-header#header a,
.site-menu#menu a,
.site-footer a,
.commerce-hero a,
.media-hub__actions a,
.catalog-header a,
.catalog-sidebar a,
.storefront-product-grid a,
.product-detail__media,
.product-detail__brand,
.storefront-breadcrumb a,
.cart-panel a,
.contact-links a,
.storefront-button {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

.site-header#header a:hover,
.site-header#header a:focus,
.site-menu#menu a:hover,
.site-menu#menu a:focus,
.site-footer a:hover,
.site-footer a:focus,
.commerce-hero a:hover,
.commerce-hero a:focus,
.media-hub__actions a:hover,
.media-hub__actions a:focus,
.catalog-header a:hover,
.catalog-header a:focus,
.catalog-sidebar a:hover,
.catalog-sidebar a:focus,
.storefront-product-grid a:hover,
.storefront-product-grid a:focus,
.product-detail__media:hover,
.product-detail__media:focus,
.product-detail__brand:hover,
.product-detail__brand:focus,
.storefront-breadcrumb a:hover,
.storefront-breadcrumb a:focus,
.cart-panel a:hover,
.cart-panel a:focus,
.contact-links a:hover,
.contact-links a:focus,
.storefront-button:hover,
.storefront-button:focus {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header#header {
  height: 72px;
  line-height: normal;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(82, 117, 30, 0.16);
  box-shadow: 0 10px 30px rgba(23, 32, 23, 0.08);
  backdrop-filter: blur(12px);
}

.site-header#header *,
.site-header#header *::before,
.site-header#header *::after {
  box-sizing: border-box;
}

.site-header#header.alt {
  background: rgba(255, 255, 255, 0.94);
}

.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(240px, 460px) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  width: min(1360px, calc(100% - 32px));
  height: 100%;
  margin: 0 auto;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ug-ink);
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

.site-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.site-brand span {
  color: var(--ug-ink);
  font-size: 18px;
  line-height: 1;
}

.site-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  margin: 0;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #f9fbf6;
}

.site-search:focus-within {
  border-color: var(--ug-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(142, 186, 62, 0.2);
}

.site-search i {
  color: var(--ug-muted);
}

.site-search input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--ug-ink);
  font-size: 14px;
  box-shadow: none;
}

.site-search input[type="search"]:focus {
  border: 0 !important;
  box-shadow: none !important;
}

.site-search input[type="search"]::placeholder {
  color: #7c8976;
  opacity: 1;
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
  white-space: nowrap;
}

.site-header#header .site-header__nav {
  position: static;
  top: auto;
  right: auto;
  width: auto;
  height: auto;
  line-height: normal;
}

.site-header__nav a,
.site-menu-toggle,
.site-cart {
  float: none;
  position: static;
  border: 0;
  color: var(--ug-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
}

.site-cart {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 58px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--ug-radius);
  background: var(--ug-ink);
  color: #fff;
}

.site-cart:hover,
.site-cart:focus {
  color: #fff;
  background: var(--ug-green-dark);
}

.site-menu-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--ug-radius);
  background: var(--ug-soft);
}

.site-menu-toggle i {
  display: none;
}

#header .site-menu-toggle:after {
  display: none;
}

.site-menu#menu {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: min(360px, 92vw);
  height: 100vh;
  padding: 22px;
  background: #182016;
  color: #fff;
  transform: translateX(100%);
  transition: transform 180ms ease;
  z-index: 10002;
}

body.is-menu-visible .site-menu#menu {
  transform: translateX(0);
}

.site-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
}

.site-menu__close {
  color: #fff;
  border: 0;
}

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

.site-menu#menu li {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-menu#menu li a {
  display: block;
  padding: 13px 0;
  border: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

body #footer.site-footer,
body.landing #footer.site-footer,
body.is-mobile.landing #footer.site-footer {
  --footer-splash-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20132%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M0%2076%20C58%2060%20112%2074%20168%2064%20C237%2052%20287%2082%20355%2064%20C424%2046%20485%2074%20552%2060%20C631%2044%20690%2081%20760%2062%20C834%2042%20894%2079%20965%2061%20C1034%2044%201095%2079%201165%2061%20C1243%2042%201307%2073%201372%2064%20C1402%2060%201421%2065%201440%2071%20L1440%20132%20L0%20132%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M108%2055%20c24%20-10%2067%20-1%2075%2017%20c-18%2012%20-62%2011%20-91%205%20c-17%20-4%20-16%20-15%2016%20-22%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M251%2062%20c16%20-28%2068%20-31%2091%20-8%20c-13%2025%20-54%2037%20-86%2025%20c-13%20-5%20-15%20-9%20-5%20-17%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M384%2057%20c9%20-24%2044%20-29%2061%20-12%20c-9%2023%20-38%2030%20-58%2021%20c-5%20-2%20-6%20-5%20-3%20-9%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M620%2052%20c24%20-20%2071%20-14%2086%2012%20c-20%2021%20-63%2025%20-91%209%20c-14%20-8%20-12%20-12%205%20-21%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M869%2052%20c16%20-25%2066%20-27%2089%20-6%20c-12%2028%20-58%2036%20-88%2022%20c-9%20-4%20-9%20-9%20-1%20-16%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M1047%2055%20c20%20-20%2061%20-15%2076%208%20c-17%2019%20-54%2021%20-78%207%20c-9%20-6%20-9%20-9%202%20-15%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M1264%2059%20c28%20-23%2086%20-13%2098%2015%20c-28%2020%20-74%2018%20-105%205%20c-14%20-6%20-12%20-12%207%20-20%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M196%2033%20c15%20-10%2036%20-3%2039%2013%20c-11%2012%20-35%2011%20-43%20-2%20c-3%20-5%20-2%20-8%204%20-11%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M520%2039%20c11%20-12%2035%20-9%2042%205%20c-10%2014%20-34%2015%20-44%202%20c-3%20-3%20-2%20-5%202%20-7%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M760%2031%20c15%20-15%2045%20-9%2050%2010%20c-14%2016%20-44%2016%20-52%200%20c-3%20-5%20-2%20-8%202%20-10%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M1136%2032%20c13%20-11%2039%20-6%2042%2010%20c-13%2013%20-36%2012%20-43%20-1%20c-3%20-4%20-3%20-7%201%20-9%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M323%2075%20c9%200%2016%207%2016%2017%20c0%2013%20-9%2022%20-16%2034%20c-7%20-12%20-16%20-21%20-16%20-34%20c0%20-10%207%20-17%2016%20-17%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M704%2072%20c8%200%2015%206%2015%2016%20c0%2016%20-10%2027%20-15%2040%20c-6%20-13%20-15%20-24%20-15%20-40%20c0%20-10%206%20-16%2015%20-16%20Z%22%2F%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M1191%2072%20c9%200%2017%207%2017%2018%20c0%2015%20-11%2027%20-17%2039%20c-7%20-12%20-17%20-24%20-17%20-39%20c0%20-11%208%20-18%2017%20-18%20Z%22%2F%3E%3C%2Fsvg%3E");
  position: relative;
  margin-top: 0;
  padding: 102px 0 24px;
  background: var(--ug-ink-deep) !important;
  background-color: var(--ug-ink-deep) !important;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
  overflow: visible;
  isolation: isolate;
}

.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}

.site-footer::before {
  top: -116px;
  height: 156px;
  background: var(--ug-ink-deep);
  clip-path: polygon(
    -1% 59%,
    1% 52%,
    4% 47%,
    7% 54%,
    11% 43%,
    14% 51%,
    18% 39%,
    22% 57%,
    27% 42%,
    31% 55%,
    36% 40%,
    41% 57%,
    46% 43%,
    52% 58%,
    57% 39%,
    62% 56%,
    68% 42%,
    73% 59%,
    79% 41%,
    84% 55%,
    90% 43%,
    95% 52%,
    101% 48%,
    101% 100%,
    -1% 100%
  );
}

.site-footer::after {
  top: -136px;
  height: 150px;
  background:
    linear-gradient(100deg, transparent 0 30%, var(--ug-ink-deep) 31% 70%, transparent 71%) -2% 72% / 138px 26px no-repeat,
    linear-gradient(70deg, transparent 0 28%, var(--ug-ink-deep) 29% 68%, transparent 69%) 5% 63% / 124px 22px no-repeat,
    linear-gradient(112deg, transparent 0 32%, var(--ug-ink-deep) 33% 66%, transparent 67%) 12% 66% / 156px 27px no-repeat,
    linear-gradient(79deg, transparent 0 31%, var(--ug-ink-deep) 32% 65%, transparent 66%) 22% 61% / 118px 24px no-repeat,
    linear-gradient(121deg, transparent 0 32%, var(--ug-ink-deep) 33% 68%, transparent 69%) 31% 68% / 150px 25px no-repeat,
    linear-gradient(84deg, transparent 0 30%, var(--ug-ink-deep) 31% 66%, transparent 67%) 42% 62% / 132px 22px no-repeat,
    linear-gradient(112deg, transparent 0 31%, var(--ug-ink-deep) 32% 68%, transparent 69%) 52% 69% / 166px 28px no-repeat,
    linear-gradient(72deg, transparent 0 29%, var(--ug-ink-deep) 30% 66%, transparent 67%) 64% 62% / 136px 23px no-repeat,
    linear-gradient(109deg, transparent 0 33%, var(--ug-ink-deep) 34% 68%, transparent 69%) 75% 66% / 154px 26px no-repeat,
    linear-gradient(78deg, transparent 0 31%, var(--ug-ink-deep) 32% 67%, transparent 68%) 86% 62% / 132px 23px no-repeat,
    linear-gradient(116deg, transparent 0 30%, var(--ug-ink-deep) 31% 69%, transparent 70%) 101% 69% / 142px 25px no-repeat,
    radial-gradient(7px 5px at 2% 49%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(9px 6px at 7% 43%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(6px 4px at 15% 48%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(8px 5px at 21% 44%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(5px 4px at 26% 51%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(9px 6px at 37% 45%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(6px 4px at 45% 50%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(8px 5px at 56% 43%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(5px 4px at 61% 52%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(9px 6px at 72% 45%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(6px 4px at 79% 51%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(8px 5px at 91% 44%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(7px 5px at 98% 50%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(58px 22px at -1% 78%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(42px 16px at 4% 70%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(74px 27px at 9% 80%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(32px 12px at 13% 58%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(64px 26px at 19% 72%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(12px 32px at 24% 70%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(86px 31px at 28% 79%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(44px 16px at 34% 63%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(66px 25px at 40% 75%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(12px 34px at 47% 69%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(92px 32px at 53% 80%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(36px 13px at 58% 60%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(72px 26px at 64% 73%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(11px 32px at 70% 69%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(82px 30px at 76% 78%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(48px 17px at 82% 64%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(78px 28px at 88% 76%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(14px 36px at 93% 70%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(66px 24px at 98% 72%, var(--ug-ink-deep) 0 96%, transparent 100%),
    radial-gradient(54px 21px at 101% 80%, var(--ug-ink-deep) 0 96%, transparent 100%);
  opacity: 0.98;
}

.site-footer__inner,
.site-footer__bottom {
  position: relative;
  z-index: 1;
  width: min(1360px, calc(100% - 32px));
  margin: 0 auto;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  margin: 0 0 22px;
  color: #fff;
}

.site-footer__brand img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

.site-footer__brand span {
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer h2 {
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.95;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer p {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.65;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.9);
  border: 0;
  text-decoration: none;
}

.site-footer__links,
.site-footer__contact {
  display: grid;
  gap: 8px;
  align-content: start;
}

.site-footer__links a,
.site-footer__contact a {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
}

.site-footer__links a {
  position: relative;
  padding-right: 26px;
}

.site-footer__links a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 14px;
  height: 2px;
  background: var(--ug-green);
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.site-footer__links a:hover::after,
.site-footer__links a:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.site-footer__contact a {
  width: min(100%, 320px);
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  border-color: rgba(206, 255, 0, 0.46);
  color: #fff;
}

.site-footer__contact i {
  width: 20px;
  color: var(--ug-green);
  text-align: center;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-top: 28px;
  margin-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
}

.storefront-page {
  padding: 96px 0 58px;
  background:
    linear-gradient(180deg, var(--ug-wash) 0, var(--ug-wash) 310px, #fff 310px, #fff 100%);
}

#listadoProductos.storefront-page {
  padding-top: 96px;
  border-top: 0;
  background:
    linear-gradient(180deg, var(--ug-wash) 0, var(--ug-wash) 310px, #fff 310px, #fff 100%);
}

#listadoProductos.catalog-page {
  padding-top: 72px;
  background: #fff;
}

.storefront-container {
  width: min(1360px, calc(100% - 32px));
  margin: 0 auto;
}

.storefront-button,
.button.storefront-button,
button.storefront-button,
input.storefront-button {
  display: inline-flex;
  clear: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--ug-green);
  border-radius: var(--ug-radius-sm);
  background: var(--ug-green);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow-wrap: anywhere;
  box-shadow: none;
}

.storefront-button:hover,
.storefront-button:focus {
  background: var(--ug-green-dark);
  border-color: var(--ug-green-dark);
  color: #fff !important;
}

.storefront-button--secondary {
  background: #fff;
  border-color: var(--ug-line);
  color: var(--ug-ink) !important;
}

.storefront-button--light {
  background: #fff;
  border-color: #fff;
  color: var(--ug-ink) !important;
}

.storefront-button--dark {
  background: var(--ug-ink);
  border-color: var(--ug-ink);
}

.storefront-button--availability {
  background: var(--ug-ink);
  border-color: var(--ug-ink);
}

.storefront-button--availability:hover,
.storefront-button--availability:focus {
  background: var(--ug-green-dark);
  border-color: var(--ug-green-dark);
}

.storefront-button--disabled,
.storefront-button[disabled] {
  background: #7b8580;
  border-color: #7b8580;
  cursor: not-allowed;
}

.commerce-hero {
  position: relative;
  isolation: isolate;
  padding: 72px 0 68px;
  background: var(--ug-ink-deep);
  color: #fff;
  overflow: hidden;
}

.commerce-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(118deg, rgba(199, 234, 0, 0.22) 0 24%, transparent 24% 100%),
    linear-gradient(90deg, rgba(82, 117, 30, 0.42), transparent 58%);
  content: "";
}

.commerce-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: 38px;
  align-items: center;
}

.commerce-hero__copy {
  max-width: 780px;
}

.commerce-hero__kicker {
  margin: 0 0 12px;
  color: var(--ug-acid);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.commerce-hero h1 {
  max-width: 820px;
  margin: 0;
  color: #fff;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.commerce-hero__copy > p:not(.commerce-hero__kicker) {
  max-width: 660px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 18px;
  line-height: 1.55;
}

.commerce-hero__actions,
.media-hub__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.commerce-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
  margin-top: 38px;
}

.commerce-hero__stats div {
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.commerce-hero__stats strong,
.commerce-hero__stats span {
  display: block;
}

.commerce-hero__stats strong {
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
}

.commerce-hero__stats span {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.commerce-hero__products {
  position: relative;
  min-height: 430px;
  overflow: visible;
}

.commerce-hero-product {
  position: absolute;
  top: 46px;
  left: 50%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 31%;
  min-height: 360px;
  padding: 18px;
  border-radius: var(--ug-radius);
  background: #fff;
  color: var(--ug-ink);
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  transform: translate3d(-50%, 24px, 0) scale(0.84);
  transition:
    opacity 420ms ease,
    transform 720ms cubic-bezier(0.2, 0.78, 0.22, 1),
    box-shadow 420ms ease;
  will-change: transform, opacity;
}

.commerce-hero-product.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.commerce-hero-product.is-left {
  z-index: 1;
  transform: translate3d(-166%, 20px, 0) scale(0.92);
}

.commerce-hero-product.is-center {
  z-index: 3;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
  transform: translate3d(-50%, -22px, 0) scale(1.03);
}

.commerce-hero-product.is-right {
  z-index: 1;
  transform: translate3d(66%, 20px, 0) scale(0.92);
}

.commerce-hero-product.is-hidden {
  z-index: 0;
}

.commerce-hero-product.is-exiting-left {
  opacity: 0;
  transform: translate3d(-232%, 30px, 0) scale(0.84);
}

.commerce-hero-product.is-entering-right {
  opacity: 0;
  transform: translate3d(134%, 30px, 0) scale(0.84);
}

.commerce-hero-slider__status {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 7px;
}

.commerce-hero-slider__status span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
}

.commerce-hero-slider__status span:nth-child(2) {
  width: 18px;
  background: var(--ug-acid);
}

.commerce-hero-product span {
  color: var(--ug-green-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.commerce-hero-product img {
  width: 100%;
  height: 230px;
  object-fit: contain;
}

.commerce-hero-product strong {
  min-height: 42px;
  color: var(--ug-ink);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.catalog-header {
  display: grid;
  gap: 18px;
  margin-bottom: 26px;
}

.catalog-header--home {
  grid-template-columns: minmax(0, 1fr) minmax(560px, 620px);
  align-items: start;
  gap: 22px 32px;
}

.catalog-header > *,
.catalog-layout > *,
.storefront-product-grid > * {
  min-width: 0;
}

.catalog-kicker {
  margin: 0 0 6px;
  color: var(--ug-green-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.catalog-title {
  margin: 0;
  color: var(--ug-ink);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-transform: none;
}

.catalog-copy {
  max-width: 720px;
  margin: 4px 0 0;
  color: var(--ug-muted);
  font-size: 16px;
  line-height: 1.5;
}

.catalog-promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-self: start;
  margin-top: 6px;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}

.catalog-promises div {
  display: block;
  min-height: 70px;
  padding: 13px 15px 12px;
  border-left: 1px solid var(--ug-line);
  border-top: 0;
}

.catalog-promises div:first-child {
  border-left: 0;
}

.catalog-promises span {
  display: block;
  margin-bottom: 9px;
  color: var(--ug-green-dark);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.catalog-promises strong {
  display: block;
  color: var(--ug-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.28;
}

.catalog-category-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
  padding: 4px 0 0;
  overflow-x: auto;
}

.catalog-chip {
  flex: 0 0 auto;
  padding: 10px 15px;
  border: 1px solid var(--ug-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ug-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.catalog-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-top: 4px;
}

.catalog-sidebar {
  position: sticky;
  top: 92px;
  padding: 16px;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
}

.catalog-filter-toggle,
.storefront-button.catalog-filter-toggle {
  display: none;
  width: 100%;
  margin-bottom: 16px;
}

.catalog-sidebar form {
  margin: 0;
}

.catalog-sidebar p {
  margin: 0 0 12px;
}

.catalog-sidebar input,
.catalog-sidebar select {
  height: 42px;
  margin: 0;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius-sm);
  color: var(--ug-ink);
  background-color: #fff;
}

.catalog-sidebar .storefront-button {
  width: 100%;
  margin-top: 4px;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.active-filter {
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff;
  color: var(--ug-muted);
  font-size: 13px;
}

.storefront-product-section {
  margin-bottom: 42px;
}

.storefront-section-title {
  margin: 0 0 18px;
  color: var(--ug-ink);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.storefront-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  justify-content: start;
  gap: 22px;
}

.product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
  box-shadow: 0 8px 26px rgba(23, 32, 23, 0.045);
  overflow: hidden;
}

.product-card--out {
  color: #526050;
}

.product-card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 18px;
  background: #fff;
  border-bottom: 1px solid #eef2ea;
}

.product-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e8f4dc;
  color: var(--ug-green-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.product-card__badge--muted {
  background: #eef1ed;
  color: #6c756c;
}

.product-card__media img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  padding: 17px 18px 18px;
}

.product-card__brand {
  color: var(--ug-green-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.product-card__title {
  margin: 0;
  color: var(--ug-ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.34;
  overflow-wrap: anywhere;
  text-transform: none;
}

.product-card__title a {
  color: inherit;
  border: 0;
  text-decoration: none;
}

.product-card__meta {
  min-height: 48px;
}

.price-stack {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--ug-ink);
}

.price-stack__main {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.18;
}

.price-stack__label,
.price-stack__small {
  color: var(--ug-muted);
  font-size: 12px;
  line-height: 1.35;
}

.price-stack__discount {
  color: var(--ug-green-dark);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.price-grid {
  display: grid;
  gap: 7px;
}

.price-grid__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ug-muted);
  font-size: 13px;
}

.price-grid__row strong {
  color: var(--ug-ink);
  font-weight: 600;
}

.product-card__actions {
  display: grid;
  gap: 7px;
  margin-top: auto;
}

.product-card__actions .storefront-button {
  width: 100%;
}

.product-card__actions .storefront-button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cart-feedback {
  min-height: 18px;
  color: var(--ug-green-dark);
  font-size: 12px;
  font-weight: 650;
}

.product-card__cart-state {
  display: grid;
  gap: 8px;
}

.product-card__cart-state.is-hidden {
  display: none;
}

.product-card__cart-state.is-loading {
  opacity: 0.7;
}

.product-card__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  margin: 0;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--ug-line);
  border-radius: 8px;
  background: #f8fbf4;
}

.product-card__qty span {
  color: var(--ug-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  text-transform: uppercase;
}

.product-card__qty input[type="number"] {
  width: 76px;
  min-height: 30px;
  margin: 0 !important;
  padding: 3px 6px;
  border: 1px solid rgba(83, 112, 67, 0.28);
  border-radius: 7px;
  background: #fff;
  color: var(--ug-ink);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.1;
  text-align: center;
}

.product-card__qty input[type="number"]:focus {
  border-color: var(--ug-green);
  box-shadow: 0 0 0 3px rgba(143, 194, 55, 0.18);
  outline: none;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 34px;
  align-items: start;
}

.product-detail__media {
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 36px;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
}

.product-detail__media img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
}

.product-detail__panel {
  padding: 24px;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
  box-shadow: var(--ug-shadow);
}

.product-detail__brand {
  color: var(--ug-green-dark);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.product-detail__title {
  margin: 8px 0 16px;
  color: var(--ug-ink);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.08;
}

.product-detail__description {
  margin-top: 28px;
  color: #2e382d;
  line-height: 1.75;
}

.quantity-control {
  display: grid;
  gap: 8px;
  margin: 18px 0 12px;
}

.quantity-control label {
  margin: 0;
  color: var(--ug-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.quantity-control input {
  width: 110px;
  height: 46px;
  margin: 0;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius-sm);
  color: var(--ug-ink);
}

.breadcrumb.storefront-breadcrumb,
.storefront-breadcrumb {
  margin: 0 0 22px;
  padding: 0;
  background: transparent;
  color: var(--ug-muted);
}

.storefront-breadcrumb a {
  color: var(--ug-muted);
  border: 0;
}

.home-hero {
  min-height: min(760px, 92vh);
  padding: 152px 0 92px;
  background:
    linear-gradient(90deg, rgba(16, 28, 14, 0.82), rgba(16, 28, 14, 0.42)),
    url("../../images/background_productos_home.webp") center / cover no-repeat;
  color: #fff;
}

#banner.home-hero {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  cursor: default;
  height: auto;
  min-height: min(760px, 92vh);
}

#banner.home-hero:after {
  display: none;
}

.home-hero__inner {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.home-hero h1 {
  max-width: 720px;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(44px, 7vw, 82px);
  line-height: 0.98;
}

.home-hero p {
  max-width: 620px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 19px;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home-section,
.blog-page,
.auth-page,
.policy-page {
  padding: 72px 0;
  background: var(--ug-wash);
}

.spotlight {
  overflow: hidden;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
}

.spotlight .content h2 {
  color: var(--ug-ink);
}

.spotlight .content p {
  color: var(--ug-muted);
}

.wrapper.style3,
.wrapper.style4,
.wrapper.style1 {
  background: var(--ug-wash);
  color: var(--ug-ink);
}

.wrapper.style3 h2,
.wrapper.style3 h3,
.wrapper.style4 h2,
.wrapper.style1 h2,
.wrapper.style1 h3,
.wrapper.style1 h4 {
  color: var(--ug-ink);
}

.wrapper.style3 .features li {
  border-radius: var(--ug-radius);
  background: #fff;
  color: var(--ug-muted);
}

.wrapper.style3 .features li h3 {
  color: var(--ug-ink);
}

#cta .inner {
  border-radius: var(--ug-radius);
  background: #fff;
  box-shadow: var(--ug-shadow);
}

section#contacto.contact-section,
.contact-section {
  padding: 0 0 84px;
  background: var(--ug-wash);
  color: var(--ug-ink);
}

.contact-map-band {
  position: relative;
  height: 340px;
  border-top: 0;
  border-bottom: 5px solid var(--ug-acid);
  background: #dfe7d7;
  overflow: hidden;
}

.contact-map-band::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 5px;
  background: var(--ug-green);
  pointer-events: none;
}

.contact-map-band iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-hours {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  width: min(860px, calc(100% - 32px));
  margin: -34px auto 30px;
  padding: 16px 20px;
  border-radius: var(--ug-radius);
  background: var(--ug-ink-deep);
  color: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

.contact-hours span {
  color: var(--ug-acid);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.contact-hours strong {
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  text-align: right;
}

.contact-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 26px;
  align-items: stretch;
  margin-top: 0;
}

.contact-info-panel,
.contact-form-panel {
  position: relative;
  border-radius: var(--ug-radius);
  box-shadow: var(--ug-shadow);
}

.contact-info-panel {
  padding: 34px;
  background: var(--ug-ink-deep);
  color: #fff;
}

.contact-info-panel h2 {
  max-width: 620px;
  margin: 0;
  color: #fff;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: uppercase;
}

.contact-info-panel p:not(.catalog-kicker) {
  max-width: 560px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.55;
}

.contact-links {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.contact-links a,
#contacto .contact-links a.contact-social-a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ug-radius-sm);
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}

.contact-links a:hover,
.contact-links a:focus {
  border-color: var(--ug-acid);
  background: rgba(199, 234, 0, 0.08);
}

.contact-links i {
  display: inline-flex;
  justify-content: center;
  width: 20px;
  color: var(--ug-acid);
  font-size: 17px;
}

.contact-form-panel {
  padding: 34px;
  border: 1px solid var(--ug-line);
  background: #fff;
}

.contact-form-panel header {
  margin-bottom: 22px;
}

.contact-form-panel h3,
#contacto .contact-form-panel h3 {
  margin: 0;
  color: var(--ug-ink);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

#contacto form.contact-form {
  display: grid;
  gap: 12px;
  margin: 0;
}

#contacto form.contact-form h3 {
  margin: 0 0 8px;
  color: var(--ug-green-dark);
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}

#contacto form.contact-form input,
#contacto form.contact-form textarea,
#contacto form.contact-form select {
  width: 100%;
  min-height: 48px;
  margin: 0;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius-sm);
  background: #f9fbf6;
  color: var(--ug-ink);
  font-size: 14px;
  box-shadow: none;
}

#contacto form.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

#contacto form.contact-form input::placeholder,
#contacto form.contact-form textarea::placeholder {
  color: #687466 !important;
  opacity: 1;
}

#contacto form.contact-form button {
  justify-self: start;
  min-width: 190px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.blog-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
  box-shadow: 0 10px 34px rgba(23, 32, 23, 0.05);
}

.blog-card__cover {
  display: block;
  aspect-ratio: 16 / 9;
  background: #f8faf5;
}

.blog-card__cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.blog-card__body {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.blog-card h2 {
  margin: 0;
  color: var(--ug-ink);
  font-size: 24px;
  line-height: 1.18;
}

.blog-card p {
  margin: 0;
  color: var(--ug-muted);
  line-height: 1.6;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.media-card {
  overflow: hidden;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
  box-shadow: 0 10px 34px rgba(23, 32, 23, 0.05);
}

.media-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #fff;
}

.media-card__body {
  padding: 14px;
}

.media-card__body a {
  color: var(--ug-ink);
  font-weight: 800;
  text-decoration: none;
}

.content-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: 28px;
  align-items: start;
}

.content-detail__image,
.content-detail__body {
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
  box-shadow: var(--ug-shadow);
}

.content-detail__image {
  overflow: hidden;
}

.content-detail__image img {
  width: 100%;
  display: block;
}

.content-detail__body {
  padding: 28px;
}

.blog-article-cover {
  display: block;
  background: var(--ug-ink-deep);
}

.blog-article-cover img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--ug-ink-deep);
}

.blog-article {
  max-width: 860px;
  padding: 42px 0 70px;
  color: #273126;
  line-height: 1.78;
}

.blog-article h1,
.blog-article h2,
.blog-article h3 {
  color: var(--ug-ink);
}

.auth-card,
.policy-card,
.cart-panel {
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
  box-shadow: var(--ug-shadow);
}

.auth-card {
  max-width: 620px;
  padding: 30px;
  margin: 0 auto;
}

.auth-card h1,
.auth-card h3 {
  color: var(--ug-ink);
  font-size: 28px;
}

.auth-card input,
.auth-card select,
.auth-card textarea {
  border-color: var(--ug-line);
  color: var(--ug-ink);
}

.auth-card label {
  color: var(--ug-ink);
  font-weight: 700;
}

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

.signup-type {
  display: grid;
  gap: 8px;
  min-height: 130px;
  padding: 20px;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: var(--ug-wash);
  color: var(--ug-ink);
  text-align: center;
  text-decoration: none;
}

.cart-page {
  padding: 92px 0 56px;
  background: var(--ug-wash);
}

.cart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.cart-toolbar h1 {
  margin: 0;
  color: var(--ug-ink);
}

.cart-toolbar select {
  width: auto;
  min-width: 220px;
  height: 44px;
  margin: 0;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius-sm);
  color: var(--ug-ink);
}

.cart-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  gap: 22px;
  align-items: start;
}

#cart-table {
  min-width: 0;
}

.cart-panel {
  padding: 18px;
}

.cart-panel__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ug-line);
}

.cart-panel__header h2 {
  margin: 2px 0 0;
  color: var(--ug-ink);
  font-size: 26px;
  line-height: 1.05;
}

.cart-panel__header span {
  padding: 7px 12px;
  border-radius: 999px;
  background: #e9f4dd;
  color: var(--ug-green-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.cart-list-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 92px 112px;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--ug-line);
}

.cart-item-main {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.cart-item-main img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius-sm);
  background: #fff;
}

.cart-item-brand {
  display: inline-block;
  margin-bottom: 3px;
  color: var(--ug-olive);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.cart-item-main h4 {
  max-width: 46ch;
}

.cart-item-main h4,
.cart-item-main h4 a,
.cart-price {
  margin: 0;
  color: var(--ug-ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.3;
  text-decoration: none;
  text-transform: none;
}

.cart-qty-cell,
.cart-price-cell {
  display: grid;
  gap: 5px;
}

.cart-qty-cell span,
.cart-price-cell span {
  color: var(--ug-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.qtyInput {
  width: 84px;
  height: 38px;
  margin: 0;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius-sm);
  color: var(--ug-ink);
  font-size: 16px;
  font-weight: 650;
  text-align: center;
}

.qtyInput:focus {
  border-color: var(--ug-green);
  box-shadow: 0 0 0 3px rgba(143, 194, 55, 0.18);
  outline: none;
}

.deleteCartItem {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 152, 0, 0.24);
  border-radius: 8px;
  background: rgba(255, 152, 0, 0.08);
  color: var(--ug-warning);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.deleteCartItem:hover,
.deleteCartItem:focus {
  background: var(--ug-warning);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.cart-summary {
  display: grid;
  gap: 7px;
  max-width: 360px;
  padding: 14px 16px;
  margin: 16px 0 0 auto;
  border: 1px solid rgba(83, 112, 67, 0.18);
  border-radius: var(--ug-radius-sm);
  background: #f8fbf4;
}

.cart-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  color: var(--ug-muted);
  font-size: 15px;
}

.cart-summary-row strong {
  color: var(--ug-ink);
  font-weight: 700;
  text-align: right;
}

.payment_methods,
.shipping,
.cartActions {
  margin-top: 22px;
}

.payment_methods {
  padding: 20px;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
}

.checkout-panel {
  position: sticky;
  top: 124px;
  padding: 20px;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius);
  background: linear-gradient(180deg, #fff 0%, #fbfdf8 100%);
  box-shadow: var(--ug-shadow);
}

.checkout-panel h2 {
  margin: 2px 0 6px;
  color: var(--ug-ink);
  font-size: 28px;
  line-height: 1.05;
}

.checkout-panel__intro {
  margin: 0 0 16px;
  color: var(--ug-muted);
  font-size: 14px;
  line-height: 1.45;
}

.checkout-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkout-field {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}

.checkout-field--full {
  grid-column: 1 / -1;
}

.checkout-field label,
.checkout-label {
  margin: 0;
  color: var(--ug-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.checkout-field input,
.checkout-field select {
  width: 100%;
  min-height: 42px;
  margin: 0;
  border: 1px solid var(--ug-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ug-ink);
  font-size: 14px;
}

.checkout-field input:focus,
.checkout-field select:focus {
  border-color: var(--ug-green);
  box-shadow: 0 0 0 3px rgba(143, 194, 55, 0.18);
  outline: none;
}

.checkout-payment {
  margin-top: 4px;
}

.checkout-payment #id_payment_method {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.checkout-payment #id_payment_method > div {
  min-width: 0;
}

.checkout-payment label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px;
  border: 1px solid var(--ug-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ug-ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.checkout-payment input[type="radio"] {
  width: 16px;
  min-height: auto;
  height: 16px;
  margin: 0;
  accent-color: var(--ug-green);
}

.checkout-submit {
  width: 100%;
  margin-top: 4px;
}

.guest-form-error,
.checkout-field .text-danger {
  margin-top: 2px;
  color: #a9431d !important;
  font-size: 12px;
  font-weight: 650;
}

.shipping select,
.shipping input {
  border-color: var(--ug-line);
  color: var(--ug-ink);
}

.cartActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.catalog-empty {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px dashed var(--ug-line);
  border-radius: var(--ug-radius);
  background: #fff;
  color: var(--ug-muted);
}

.catalog-empty h2 {
  margin-top: 0;
  color: var(--ug-ink);
}

.media-hub {
  padding: 76px 0;
  background: #f5f7f1;
}

.media-hub__inner {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
  gap: 42px;
  align-items: center;
}

.media-hub__copy h2 {
  max-width: 520px;
  margin: 0;
  color: var(--ug-ink);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
  text-transform: uppercase;
}

.media-hub__copy p:not(.catalog-kicker) {
  max-width: 520px;
  margin: 18px 0 0;
  color: var(--ug-muted);
  font-size: 17px;
  line-height: 1.6;
}

.media-hub__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 10px solid var(--ug-ink-deep);
  border-radius: var(--ug-radius);
  background: var(--ug-ink-deep);
  overflow: hidden;
}

.media-hub__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.newsletter-section {
  position: relative;
  isolation: isolate;
  padding: 82px 0;
  border-top: 5px solid var(--ug-acid);
  background: var(--ug-ink-deep);
  color: #fff;
  overflow: hidden;
}

.newsletter-section::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(112deg, rgba(199, 234, 0, 0.24) 0 17%, transparent 17% 100%),
    linear-gradient(270deg, rgba(82, 117, 30, 0.24) 0, transparent 48%);
  content: "";
}

.newsletter-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 42px;
  align-items: center;
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ug-radius);
  background: rgba(255, 255, 255, 0.04);
}

.newsletter-copy h2 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: 54px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.newsletter-copy p:not(.catalog-kicker) {
  max-width: 650px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.55;
}

.newsletter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.newsletter-tags span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.newsletter-tags i {
  color: var(--ug-acid);
  font-size: 15px;
}

.newsletter-form {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--ug-radius);
  background: #fff;
  color: var(--ug-ink);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.22);
}

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

.newsletter-field,
form[name="mc-embedded-subscribe-form"].newsletter-form .newsletter-field {
  margin: 0;
}

.newsletter-field--wide {
  grid-column: 1 / -1;
}

.newsletter-form input.form-control,
form[name="mc-embedded-subscribe-form"].newsletter-form input.form-control {
  width: 100%;
  height: 46px;
  margin: 0;
  border: 1px solid var(--ug-line);
  border-radius: var(--ug-radius-sm);
  background: #f9fbf6 !important;
  color: var(--ug-ink);
  font-size: 14px;
  box-shadow: none;
}

.newsletter-form input.form-control::placeholder {
  color: #687466 !important;
  opacity: 1;
}

.newsletter-submit {
  width: 100%;
}

.newsletter-note {
  margin: 0;
  color: var(--ug-muted);
  font-size: 13px;
  line-height: 1.45;
}

.newsletter-responses .response {
  margin: 0;
  color: var(--ug-ink);
  font-size: 13px;
}

div#mailchimp-aria-hidden {
  position: absolute;
  left: -5000px;
}

@media screen and (max-width: 1060px) {
  .site-header__inner {
    grid-template-columns: auto minmax(220px, 1fr) auto auto;
  }

  .site-header__nav {
    display: none;
  }

  .site-menu-toggle {
    display: inline-flex;
  }

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

  .catalog-header--home {
    grid-template-columns: 1fr;
  }

  .catalog-promises {
    width: 100%;
  }

  .commerce-hero__inner,
  .media-hub__inner,
  .contact-shell,
  .newsletter-panel {
    grid-template-columns: 1fr;
  }

  .contact-info-panel h2 {
    max-width: none;
  }

  .newsletter-panel {
    padding: 30px;
  }

  .commerce-hero__products {
    max-width: 720px;
    min-height: 360px;
  }
}

@media screen and (max-width: 820px) {
  .site-header#header {
    height: auto;
    min-height: 72px;
  }

  .site-header__inner {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "brand brand cart menu"
      "search search search search";
    gap: 10px;
    padding: 10px 0;
  }

  .site-brand {
    grid-area: brand;
  }

  .site-search {
    grid-area: search;
    width: 100%;
  }

  .site-cart {
    grid-area: cart;
  }

  .site-menu-toggle {
    grid-area: menu;
  }

  .storefront-page,
  .cart-page {
    padding-top: 136px;
  }

  #listadoProductos.catalog-page {
    padding-top: 132px;
  }

  .commerce-hero {
    padding: 46px 0 42px;
  }

  .commerce-hero h1 {
    font-size: 42px;
  }

  .commerce-hero__copy > p:not(.commerce-hero__kicker) {
    font-size: 16px;
  }

  .commerce-hero__stats {
    grid-template-columns: 1fr;
  }

  .commerce-hero__stats {
    gap: 0;
    margin-top: 28px;
  }

  .commerce-hero__products {
    min-height: 330px;
  }

  .commerce-hero-product {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 14px;
    align-items: center;
    top: 18px;
    width: 84%;
    min-height: 132px;
    padding: 16px;
  }

  .commerce-hero-product.is-left {
    transform: translate3d(-84%, 120px, 0) scale(0.82);
  }

  .commerce-hero-product.is-center {
    transform: translate3d(-50%, 0, 0) scale(1);
  }

  .commerce-hero-product.is-right {
    transform: translate3d(-16%, 224px, 0) scale(0.82);
  }

  .commerce-hero-product.is-exiting-left {
    transform: translate3d(-132%, 128px, 0) scale(0.78);
  }

  .commerce-hero-product.is-entering-right {
    transform: translate3d(24%, 228px, 0) scale(0.78);
  }

  .commerce-hero-product img {
    grid-row: 1 / 3;
    height: 92px;
  }

  .media-hub {
    padding: 48px 0;
  }

  .media-hub__copy h2 {
    font-size: 34px;
  }

  section#contacto.contact-section,
  .contact-section {
    padding-bottom: 54px;
  }

  .contact-map-band {
    height: 300px;
  }

  .contact-hours {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: min(100% - 32px, 1360px);
    margin-bottom: 24px;
  }

  .contact-hours strong {
    text-align: left;
  }

  .contact-shell {
    gap: 18px;
    margin-top: 0;
  }

  .contact-info-panel,
  .contact-form-panel {
    padding: 26px;
  }

  .contact-info-panel h2 {
    font-size: 32px;
  }

  .newsletter-section {
    padding: 54px 0;
  }

  .newsletter-copy h2 {
    font-size: 38px;
  }

  body #footer.site-footer,
  body.landing #footer.site-footer,
  body.is-mobile.landing #footer.site-footer {
    margin-top: 0;
    padding-top: 92px;
  }

  .site-footer::before {
    top: -96px;
    height: 126px;
    clip-path: polygon(
      -1% 58%,
      4% 49%,
      10% 56%,
      16% 42%,
      23% 60%,
      31% 43%,
      40% 59%,
      49% 41%,
      59% 60%,
      69% 43%,
      80% 61%,
      90% 45%,
      101% 56%,
      101% 100%,
      -1% 100%
    );
  }

  .site-footer::after {
    top: -110px;
    height: 116px;
    background:
      linear-gradient(99deg, transparent 0 30%, var(--ug-ink-deep) 31% 69%, transparent 70%) -2% 70% / 96px 20px no-repeat,
      linear-gradient(72deg, transparent 0 29%, var(--ug-ink-deep) 30% 67%, transparent 68%) 8% 63% / 96px 18px no-repeat,
      linear-gradient(114deg, transparent 0 32%, var(--ug-ink-deep) 33% 68%, transparent 69%) 22% 66% / 118px 21px no-repeat,
      linear-gradient(81deg, transparent 0 30%, var(--ug-ink-deep) 31% 66%, transparent 67%) 39% 61% / 98px 18px no-repeat,
      linear-gradient(113deg, transparent 0 31%, var(--ug-ink-deep) 32% 68%, transparent 69%) 56% 67% / 122px 22px no-repeat,
      linear-gradient(74deg, transparent 0 29%, var(--ug-ink-deep) 30% 66%, transparent 67%) 75% 62% / 106px 19px no-repeat,
      linear-gradient(116deg, transparent 0 31%, var(--ug-ink-deep) 32% 69%, transparent 70%) 101% 68% / 104px 20px no-repeat,
      radial-gradient(6px 4px at 3% 48%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(8px 5px at 12% 43%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(5px 4px at 18% 51%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(7px 5px at 34% 45%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(5px 4px at 48% 50%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(8px 5px at 63% 44%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(5px 4px at 73% 51%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(7px 5px at 88% 45%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(6px 4px at 98% 50%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(44px 17px at -1% 78%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(50px 19px at 8% 75%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(27px 11px at 13% 58%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(58px 22px at 22% 77%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(10px 28px at 31% 69%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(60px 23px at 41% 78%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(31px 12px at 50% 60%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(64px 24px at 59% 76%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(10px 29px at 70% 69%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(56px 21px at 78% 77%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(29px 11px at 86% 59%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(52px 20px at 94% 75%, var(--ug-ink-deep) 0 96%, transparent 100%),
      radial-gradient(42px 16px at 101% 78%, var(--ug-ink-deep) 0 96%, transparent 100%);
  }

  .site-footer__brand {
    gap: 12px;
  }

  .site-footer__brand img {
    width: 56px;
    height: 56px;
  }

  .newsletter-fields {
    grid-template-columns: 1fr;
  }

  .catalog-header--home {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 14px;
  }

  .catalog-title {
    font-size: clamp(30px, 8vw, 40px);
  }

  .catalog-promises {
    width: 100%;
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .catalog-promises div {
    min-height: 0;
    padding: 13px 14px;
    border-top: 1px solid var(--ug-line);
    border-left: 0;
  }

  .catalog-promises div:first-child {
    border-top: 0;
  }

	  .catalog-layout,
	  .product-detail,
	  .content-detail,
	  .site-footer__inner,
	  .blog-grid,
	  .cart-checkout-layout,
	  .cartActions {
	    grid-template-columns: 1fr;
	  }

	  .checkout-panel {
	    position: static;
	  }

  .blog-article-cover img {
    aspect-ratio: 2 / 3;
  }

  .catalog-filter-toggle,
  .storefront-button.catalog-filter-toggle {
    display: inline-flex;
  }

  .catalog-sidebar {
    display: none;
    position: static;
    margin-bottom: 18px;
  }

  body.catalog-filters-open .catalog-sidebar {
    display: block;
  }

  .product-detail__media {
    min-height: 340px;
    padding: 22px;
  }

  .home-hero {
    min-height: auto;
    padding: 160px 0 72px;
    background-image:
      linear-gradient(90deg, rgba(16, 28, 14, 0.86), rgba(16, 28, 14, 0.52)),
      url("../../images/background_productos_home_mobile.webp");
  }

	  .cart-list-row {
	    grid-template-columns: 32px minmax(0, 1fr) 88px 104px;
	  }

	  .cart-item-main {
	    grid-template-columns: 64px minmax(0, 1fr);
  }

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

@media screen and (max-width: 560px) {
  .storefront-product-grid,
  .media-grid,
  .signup-type-grid {
    grid-template-columns: 1fr;
  }

  .site-brand span {
    font-size: 16px;
  }

  .home-hero h1 {
    font-size: 42px;
  }

  .commerce-hero h1 {
    font-size: 30px;
    line-height: 1.04;
  }

	  .commerce-hero__copy {
	    max-width: 360px;
	  }

	  .cart-page {
	    padding-bottom: 40px;
	  }

	  .cart-toolbar {
	    align-items: stretch;
	    flex-direction: column;
	  }

	  .cart-toolbar select {
	    width: 100%;
	  }

	  .cart-panel,
	  .checkout-panel {
	    padding: 14px;
	  }

	  .cart-panel__header {
	    align-items: start;
	  }

	  .cart-list-row {
	    grid-template-columns: 32px minmax(0, 1fr);
	    gap: 10px;
	    padding: 14px 0;
	  }

	  .cart-qty-cell,
	  .cart-price-cell {
	    grid-column: 2;
	    grid-template-columns: minmax(0, 1fr) auto;
	    align-items: center;
	  }

	  .cart-summary {
	    max-width: none;
	    margin-left: 0;
	  }

	  .checkout-field-grid,
	  .checkout-payment #id_payment_method {
	    grid-template-columns: 1fr;
	  }

  .contact-map-band {
    height: 250px;
  }

  .contact-info-panel,
  .contact-form-panel {
    padding: 22px;
  }

  .contact-info-panel h2 {
    font-size: 28px;
  }

  .contact-links a,
  #contacto .contact-links a.contact-social-a {
    align-items: flex-start;
  }

  #contacto form.contact-form button {
    justify-self: stretch;
    width: 100%;
  }

  .site-header__inner {
    width: min(1360px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "brand cart menu"
      "search search search";
    padding-right: 0;
  }

  .site-brand {
    min-width: 0;
  }

  .site-cart {
    position: static;
    min-width: 52px;
    padding: 0 12px;
  }

  .site-menu-toggle {
    position: static;
    width: 44px;
    padding: 0 12px;
  }

  .site-search input[type="search"] {
    font-size: 13px;
    text-overflow: ellipsis;
  }

  .site-search {
    min-width: 0;
    max-width: 100%;
  }

  .product-card__body {
    min-width: 0;
  }

  .product-card__actions .storefront-button {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
    line-height: 1.15;
  }

  .product-card__actions .storefront-button i {
    flex: 0 0 auto;
  }

  .product-card__actions .storefront-button span {
    flex: 0 1 auto;
  }

  .site-menu-toggle i {
    display: inline-block;
  }

  .site-menu-toggle span {
    display: none;
  }

  .commerce-hero__actions,
  .media-hub__actions {
    display: grid;
  }

  .commerce-hero__stats strong {
    font-size: 24px;
  }

  .media-hub__copy h2 {
    font-size: 30px;
  }

  .newsletter-copy h2 {
    font-size: 32px;
  }

  .media-hub__video {
    border-width: 6px;
  }

  .cart-toolbar {
    display: grid;
  }
}

body input[type="text"]:focus,
body input[type="search"]:focus,
body input[type="password"]:focus,
body input[type="email"]:focus,
body input[type="number"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body input:not([type]):focus,
body .form-control:focus,
body select:focus,
body textarea:focus {
  outline: 0 !important;
  border-color: var(--ug-green) !important;
  box-shadow: 0 0 0 3px rgba(142, 186, 62, 0.24) !important;
}

.site-search input[type="search"]:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.whatsapp-assistant-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border: 0 !important;
  border-radius: 999px;
  background: var(--ug-green);
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 16px 36px rgba(18, 40, 16, 0.24);
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.whatsapp-assistant-fab:hover,
.whatsapp-assistant-fab:focus {
  background: var(--ug-green-dark);
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(18, 40, 16, 0.32);
}

.whatsapp-assistant-fab:focus-visible {
  outline: 3px solid rgba(199, 234, 0, 0.55);
  outline-offset: 4px;
}

.whatsapp-assistant-fab i {
  font-size: 32px;
  line-height: 1;
}

@media screen and (max-width: 736px) {
  .whatsapp-assistant-fab {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
  }

  .whatsapp-assistant-fab i {
    font-size: 29px;
  }
}