/* ==========================================================================
   Gladiatrix · Menú — the site's current look, better organised.
   Works on the header Astra prints. The plugin adds body.gx-menu on every
   page; gx-menu.js adds body.gx-js once it runs (until then, and without
   JS, panels still open on hover and keyboard focus).

   Menu classes (Apariencia → Menús → "Clases CSS"):
     gx-mega            top item that opens a full-width panel with columns
     gx-mega--compact   ...a smaller panel under its own item
     gx-col             2nd-level item = a column (a "#" link becomes its title)
     gx-level           a column whose links are cards
     gx-desc            show the item's "Descripción" under its name
     gx-feature         a photo card (image chosen in the item's settings)
     gx-all             the "see everything" pill at the bottom of the panel
   Full-width panels share one height (set by gx-menu.js) and a 4-column grid:
   columns first, photo cards after them on the right.
   ========================================================================== */
body.gx-menu {
  --gx-teal: #304f5a;
  --gx-fucsia: #f62dae;
  --gx-blush: #ffe4f2;
  --gx-blush-soft: #fff2f9;
  --gx-disc: #ffcdea;
  --gx-line: rgba(48, 79, 90, .14);
  --gx-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */

/* top items: capitals, and a fucsia line that draws in on hover / open / current */
body.gx-menu.ast-desktop .main-header-menu > li.menu-item > .menu-link {
  position: relative;
  text-transform: uppercase;
}
body.gx-menu.ast-desktop .main-header-menu > li.menu-item > .menu-link::after {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: calc(50% - 17px);
  height: 2px;
  border-radius: 2px;
  background: var(--gx-fucsia);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .28s var(--gx-ease);
  pointer-events: none;
}
body.gx-menu.ast-desktop .main-header-menu > li.menu-item-has-children > .menu-link::after { right: 36px; }
body.gx-menu.ast-desktop .main-header-menu > li.menu-item:hover > .menu-link::after,
body.gx-menu.ast-desktop .main-header-menu > li.menu-item > .menu-link:focus-visible::after,
body.gx-menu.ast-desktop .main-header-menu > li.gx-open > .menu-link::after,
body.gx-menu.ast-desktop .main-header-menu > li.current-menu-item > .menu-link::after,
body.gx-menu.ast-desktop .main-header-menu > li.current-menu-ancestor > .menu-link::after { transform: scaleX(1); }
body.gx-menu.ast-desktop .main-header-menu > li > .menu-link .dropdown-menu-toggle .ast-icon { display: flex; transition: transform .28s var(--gx-ease); }
body.gx-menu.ast-desktop .main-header-menu > li.gx-open > .menu-link .dropdown-menu-toggle .ast-icon { transform: rotate(180deg); }

/* ---------- the panel (the closed state beats Astra's :hover rules) ---------- */
body.gx-menu.ast-desktop .main-header-menu > li.gx-mega > ul.sub-menu {
  position: absolute;
  top: 100%;
  left: calc(var(--gx-shift, 0px) * -1);
  right: auto;
  width: var(--gx-vw, 100vw);
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(24px, 3.2vw, 52px);
  row-gap: 22px;
  padding: 34px max(40px, calc((var(--gx-vw, 100vw) - 1140px) / 2)) 36px;
  background: var(--gx-blush-soft);
  border: 0;
  border-top: 1px solid var(--gx-line);
  border-radius: 0 0 26px 26px;
  box-shadow: 0 28px 44px -24px rgba(48, 79, 90, .38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .28s var(--gx-ease), visibility 0s linear .28s;
  z-index: 99999;
}
body.gx-menu.ast-desktop .main-header-menu > li.gx-mega.gx-open > ul.sub-menu,
body.gx-menu:not(.gx-js).ast-desktop .main-header-menu > li.gx-mega:hover > ul.sub-menu,
body.gx-menu:not(.gx-js).ast-desktop .main-header-menu > li.gx-mega:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* without the script the panel can't measure the page: keep it under its item */
body.gx-menu:not(.gx-js).ast-desktop .main-header-menu > li.gx-mega > ul.sub-menu { left: 0; width: min(94vw, 1100px); padding: 30px 34px; }
/* smaller panel, under its own item */
body.gx-menu.ast-desktop .main-header-menu > li.gx-mega.gx-mega--compact > ul.sub-menu {
  left: 0;
  width: max-content;
  min-width: 480px;
  max-width: 640px;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  padding: 28px 34px 30px;
  border-radius: 0 0 22px 22px;
}

/* columns: plain blocks, appearing one after another once the script runs */
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-col { grid-row: 1; }
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.menu-item {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
body.gx-menu.gx-js.ast-desktop li.gx-mega > ul.sub-menu > li.menu-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .35s var(--gx-ease);
  transition-delay: calc(var(--gx-i, 0) * 45ms);
}
body.gx-menu.gx-js.ast-desktop li.gx-mega.gx-open > ul.sub-menu > li.menu-item { opacity: 1; transform: none; }

/* Astra's little arrows have no job inside the panel */
body.gx-menu.ast-desktop li.gx-mega .sub-menu .ast-icon.icon-arrow,
body.gx-menu.ast-desktop li.gx-mega .sub-menu .dropdown-menu-toggle,
body.gx-menu.ast-desktop li.gx-mega .sub-menu .ast-menu-toggle { display: none !important; }

/* column title */
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-col > .menu-link {
  display: block;
  min-height: 0;
  margin: 0 0 8px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 2px solid var(--gx-disc);
  background: none;
  color: var(--gx-teal);
  font-family: "Shrikhand", Georgia, serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: .3px;
  text-transform: none;
}
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-col > a.menu-link:hover { color: var(--gx-fucsia); }

/* links inside a column: a plain list, no flyouts */
body.gx-menu.ast-desktop li.gx-mega ul.sub-menu ul.sub-menu {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  display: block;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
  visibility: inherit;
  transform: none;
}
body.gx-menu.ast-desktop li.gx-mega ul.sub-menu ul.sub-menu > li.menu-item { margin: 0; border: 0; }
body.gx-menu.ast-desktop li.gx-mega ul.sub-menu ul.sub-menu > li > .menu-link {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--gx-teal);
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.3;
  text-transform: none;
  transition: color .2s linear, transform .25s var(--gx-ease);
}
body.gx-menu.ast-desktop li.gx-mega ul.sub-menu ul.sub-menu > li > .menu-link:hover,
body.gx-menu.ast-desktop li.gx-mega ul.sub-menu ul.sub-menu > li > .menu-link:focus-visible,
body.gx-menu.ast-desktop li.gx-mega ul.sub-menu ul.sub-menu > li.current-menu-item > .menu-link { color: var(--gx-fucsia); transform: translateX(4px); }
body.gx-menu li.gx-mega .menu-text { display: inline-flex; align-items: center; gap: 10px; }
body.gx-menu li.gx-mega .astra-mm-icon-label { display: inline-flex; margin: 0; }
body.gx-menu li.gx-mega .astra-mm-icon-label img { width: 22px; height: 22px; }

/* "Según tu nivel": cards with a short line under each */
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-level > ul.sub-menu > li > .menu-link {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 0 0 10px;
  padding: 13px 16px 14px;
  border: 1px solid rgba(48, 79, 90, .2);
  border-radius: 16px;
  background: #fff;
  transition: border-color .2s linear, box-shadow .3s var(--gx-ease), transform .3s var(--gx-ease);
}
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-level > ul.sub-menu > li > .menu-link .menu-text { font-weight: 800; }
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-level > ul.sub-menu > li > .menu-link:hover,
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-level > ul.sub-menu > li > .menu-link:focus-visible {
  color: var(--gx-teal);
  border-color: var(--gx-teal);
  box-shadow: 0 10px 20px -12px rgba(48, 79, 90, .45);
  transform: translateY(-2px);
}
body.gx-menu .gx-desc {
  display: block;
  font-family: "Karla", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(48, 79, 90, .85);
}

/* photo card */
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-feature { grid-row: 1 / span 2; }
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-feature > .menu-link {
  display: block;
  min-height: 0;
  padding: 10px 10px 16px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 28px -14px rgba(48, 79, 90, .4);
  color: var(--gx-teal);
  text-transform: none;
}
body.gx-menu li.gx-feature .gx-thumb-wrap { display: block; overflow: hidden; border-radius: 14px; }
body.gx-menu li.gx-feature .gx-thumb { display: block; width: 100%; aspect-ratio: 5 / 4; height: auto; object-fit: cover; transition: transform .7s var(--gx-ease); }
body.gx-menu.ast-desktop li.gx-feature > .menu-link .menu-text {
  display: block;
  margin: 14px 6px 4px;
  font-family: "Shrikhand", Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  transition: color .2s linear;
}
body.gx-menu li.gx-feature .gx-desc { margin: 0 6px; }
body.gx-menu.ast-desktop li.gx-feature > .menu-link:hover .gx-thumb { transform: scale(1.05); }
body.gx-menu.ast-desktop li.gx-feature > .menu-link:hover .menu-text { color: var(--gx-fucsia); }

/* "Ver toda la tienda" pill */
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-all { grid-column: 1 / -2; grid-row: 2; align-self: end; justify-self: start; }
body.gx-menu.ast-desktop li.gx-mega > ul.sub-menu > li.gx-all > .menu-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 15px 26px;
  border: 1px solid var(--gx-teal);
  border-radius: 999px;
  background: var(--gx-teal);
  color: #fff;
  font-family: "Karla", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background-color .2s linear, border-color .2s linear;
}
body.gx-menu li.gx-all > .menu-link::after { content: "\2192"; letter-spacing: 0; transition: transform .25s var(--gx-ease); }
body.gx-menu.ast-desktop li.gx-all > .menu-link:hover,
body.gx-menu.ast-desktop li.gx-all > .menu-link:focus-visible { background: var(--gx-fucsia); border-color: var(--gx-fucsia); color: #fff; }
body.gx-menu li.gx-all > .menu-link:hover::after { transform: translateX(4px); }

/* the page dims a little behind an open panel */
.gx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(48, 79, 90, .16);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
html.gx-menu-open .gx-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }

/* right side of the header (1.8): search, language, account and cart side
   by side, in that order */
body.gx-menu.ast-desktop .site-header-primary-section-right-center { justify-content: flex-end; gap: 4px; }

/* search: a bigger magnifier in a round button that lights up on hover */
body.gx-menu.ast-desktop .ast-header-search .astra-search-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--gx-teal);
  transition: background-color .2s linear;
}
body.gx-menu.ast-desktop .ast-header-search .astra-search-icon .ast-icon,
body.gx-menu.ast-desktop .ast-header-search .astra-search-icon .ahfb-svg-iconset { display: grid; place-items: center; line-height: 0; }
body.gx-menu.ast-desktop .ast-header-search .astra-search-icon svg { width: 26px; height: 26px; margin: 0; transition: transform .3s var(--gx-ease); }
body.gx-menu.ast-desktop .ast-header-search .astra-search-icon:hover,
body.gx-menu.ast-desktop .ast-header-search .astra-search-icon:focus-visible { background: var(--gx-disc); color: var(--gx-teal); }
body.gx-menu.ast-desktop .ast-header-search .astra-search-icon:hover svg { transform: scale(1.08) rotate(-10deg); }

/* language switcher: the full name ("Español") and a small arrow, in a pill
   that lights up on hover; the other languages open as a card.
   (1.7 fixed Weglot's arrow sitting on the letters; 1.8 brings the full
   names back, as the site had them.) */
body.gx-menu.ast-desktop .site-header-primary-section-right .weglot-container { display: flex; align-items: center; }
body.gx-menu .weglot-container .weglot_switcher.default_dropdown { background: transparent; border: 0; min-width: 0; }
body.gx-menu.ast-desktop .weglot-container .language-option > a {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  color: var(--gx-teal);
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .2px;
  white-space: nowrap;
}
/* Weglot widens the switcher to the list when it opens (inline width): keep its own width, so nothing moves */
body.gx-menu.ast-desktop .weglot-container .weglot_switcher.default_dropdown { width: auto !important; }
body.gx-menu.ast-desktop .weglot-container .weglot_switcher.default_dropdown .wgcurrent { position: relative; top: 0; left: 0; border: 0; } /* Weglot's own offsets on it only showed once it was positioned */
body.gx-menu.ast-desktop .weglot-container .weglot_switcher.default_dropdown .wgcurrent > a {
  padding: 0 34px 0 14px;
  border-radius: 999px;
  transition: background-color .2s linear;
}
body.gx-menu.ast-desktop .weglot-container .weglot_switcher.default_dropdown .wgcurrent:hover > a,
body.gx-menu.ast-desktop .weglot-container .weglot_switcher.default_dropdown:not(.closed) .wgcurrent > a { background: var(--gx-disc); }
body.gx-menu.ast-desktop .weglot-container .weglot_switcher.default_dropdown .wgcurrent::after,
body.gx-menu.ast-desktop .weglot-container .weglot_switcher.default_dropdown.closed .wgcurrent::after {
  top: 50%;
  bottom: auto;
  right: 15px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  background: none;
  border: 0;
  border-right: 2px solid var(--gx-teal);
  border-bottom: 2px solid var(--gx-teal);
  box-sizing: border-box;
  transform: rotate(45deg);
  transition: transform .25s var(--gx-ease), margin-top .25s var(--gx-ease);
  pointer-events: none;
}
body.gx-menu.ast-desktop .weglot-container .weglot_switcher.default_dropdown:not(.closed) .wgcurrent::after { margin-top: -2px; transform: rotate(-135deg); }
body.gx-menu.ast-desktop .weglot-container .weglot_switcher.default_dropdown div.language-list {
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  min-width: 170px;
  padding: 8px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 44px -24px rgba(48, 79, 90, .6);
  transform: none;
  animation: gx-lang-in .22s var(--gx-ease);
}
@keyframes gx-lang-in { from { opacity: 0; transform: translateY(-6px); } }
body.gx-menu.ast-desktop .weglot-container .language-list .language-option { display: block; }
body.gx-menu.ast-desktop .weglot-container .language-list .language-option > a { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; transition: background-color .2s linear, color .2s linear; }
body.gx-menu.ast-desktop .weglot-container .language-list .language-option > a:hover,
body.gx-menu.ast-desktop .weglot-container .language-list .language-option > a:focus-visible { background: var(--gx-blush-soft); color: var(--gx-fucsia); }

/* ==========================================================================
   MOBILE (Astra's breakpoint, 921px)
   ========================================================================== */
html.gx-lock, html.gx-lock body { overflow: hidden; }
body.gx-menu.ast-header-break-point.ast-main-header-nav-open .ast-mobile-header-wrap .ast-mobile-header-content {
  position: fixed;
  top: var(--gx-mtop, 76px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 20px 36px;
  background: var(--gx-blush);
  border-top: 1px solid var(--gx-line);
}
body.gx-menu.ast-header-break-point .ast-mobile-header-content > * { width: 100%; }
/* search goes first */
body.gx-menu.ast-header-break-point .ast-mobile-header-content > .ast-header-search { order: -1; margin: 0 0 8px; }
body.gx-menu.ast-header-break-point .ast-mobile-header-content .search-field {
  width: 100%;
  padding: 14px 52px 14px 20px;
  border: 1px solid rgba(48, 79, 90, .35);
  border-radius: 999px;
  background: #fff;
  color: var(--gx-teal);
  font: 500 16px/1.2 "Karla", sans-serif;
}
body.gx-menu.ast-header-break-point .ast-mobile-header-content .search-submit { right: 6px; color: var(--gx-teal); }

/* rows */
body.gx-menu.ast-header-break-point .ast-mobile-header-content .main-header-menu { background: transparent; }
body.gx-menu.ast-header-break-point .ast-mobile-header-content .main-header-menu > li.menu-item { border-bottom: 1px solid var(--gx-line); }
body.gx-menu.gx-js.ast-header-break-point .ast-mobile-header-content .main-header-menu > li.menu-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .35s var(--gx-ease);
  transition-delay: calc(var(--gx-i, 0) * 50ms + 60ms);
}
body.gx-menu.gx-js.ast-header-break-point .ast-mobile-header-content.gx-in .main-header-menu > li.menu-item { opacity: 1; transform: none; }
body.gx-menu.ast-header-break-point .ast-mobile-header-content .main-header-menu > li > .menu-link {
  padding: 18px 56px 18px 2px;
  font-family: "Karla", sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gx-teal);
  border: 0;
}
body.gx-menu.ast-header-break-point .ast-mobile-header-content .main-header-menu > li > .ast-menu-toggle {
  top: 6px;
  right: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gx-teal);
  background: transparent;
}
body.gx-menu.ast-header-break-point .ast-mobile-header-content .main-header-menu > li > .ast-menu-toggle .ast-icon { display: flex; transition: transform .28s var(--gx-ease); }
body.gx-menu.ast-header-break-point .ast-mobile-header-content .main-header-menu > li.ast-submenu-expanded > .ast-menu-toggle .ast-icon { transform: rotate(180deg); }
body.gx-menu.ast-header-break-point .ast-mobile-header-content .ast-arrow-svg { width: 12px; height: 8px; }

/* an open section shows its groups right away (no second tap) */
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-mega > .sub-menu { background: transparent; padding: 0 0 18px; }
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-col > .sub-menu { display: block !important; background: transparent; }
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-col > .ast-menu-toggle,
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-mega .sub-menu .ast-icon.icon-arrow { display: none !important; }
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-col > .menu-link {
  display: block;
  padding: 16px 2px 4px;
  font-family: "Shrikhand", Georgia, serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  text-transform: none;
  color: var(--gx-teal);
}
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-col .sub-menu .menu-link {
  display: flex;
  align-items: center;
  padding: 11px 2px;
  font-family: "Karla", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  text-transform: none;
  color: var(--gx-teal);
}
/* level links become two cards side by side */
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-level > .sub-menu {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 8px;
}
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-level .sub-menu .menu-link {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(48, 79, 90, .25);
  border-radius: 16px;
  background: #fff;
}
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-level .gx-desc { font-size: 13px; }
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-feature { display: none; }
body.gx-menu.ast-header-break-point .ast-mobile-header-content li.gx-all > .menu-link {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: 999px;
  background: var(--gx-teal);
  color: #fff;
  font-family: "Karla", sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* bottom: language (when the header has none) + social */
.gx-m-extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 26px;
}
.gx-m-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-m-langs a {
  padding: 8px 14px;
  border: 1px solid rgba(48, 79, 90, .35);
  border-radius: 999px;
  color: #304f5a;
  font: 800 13px/1 "Karla", sans-serif;
  letter-spacing: 1px;
  text-decoration: none;
}
.gx-m-langs a[aria-current="true"] { background: #304f5a; border-color: #304f5a; color: #fff; }
.gx-m-social { display: flex; gap: 16px; margin-left: auto; }
.gx-m-social a { color: #304f5a; display: inline-flex; }
.gx-m-social svg { width: 20px; height: 20px; fill: currentColor; }

/* ==========================================================================
   MOBILE MENU (1.1; opens on the shop and type reviewed in 1.7) — full
   screen, printed by the plugin in the footer; only used up to 921px.
   The first screen is the shop; "Sobre nosotras" slides in as its own.
   Type: Shrikhand for headings and for category and photo-card names (like
   the site's product names and its old mobile menu); Karla for the rest:
   800 in capitals for the sections, 700 for links, 500 in capitals for the
   pill. Nothing smaller than 13px.
   ========================================================================== */
.gx-mnav[hidden] { display: none !important; }
.gx-mnav {
  --gx-teal: #304f5a;
  --gx-fucsia: #f62dae;
  --gx-blush: #ffe4f2;
  --gx-blush-soft: #fff2f9;
  --gx-disc: #ffcdea;
  --gx-soft-ink: rgba(48, 79, 90, .85);
  --gx-line: rgba(48, 79, 90, .14);
  --gx-ease: cubic-bezier(.2, .8, .2, 1);
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: var(--gx-blush);
  color: var(--gx-teal);
  font: 400 16px/1.3 "Karla", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .4s var(--gx-ease), visibility 0s linear .4s;
}
.gx-mnav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
@media (min-width: 922px) { .gx-mnav { display: none !important; } }
/* Klaviyo's chat button and its message float above everything (z-index near
   the maximum): out of the way while the menu is open, back when it closes */
html.gx-lock .kl-hub-launcher-container { display: none !important; }
.gx-mnav *, .gx-mnav *::before, .gx-mnav *::after { box-sizing: border-box; }
/* none of the theme's link, list, paragraph or button look. These resets
   weigh little on purpose (:where), so every rule below keeps its own
   margins, colours and fonts in every state. */
.gx-mnav :where(a), .gx-mnav :where(a):hover, .gx-mnav :where(a):focus { color: inherit; text-decoration: none; }
.gx-mnav :where(ul) { list-style: none; margin: 0; padding: 0; }
.gx-mnav :where(p) { margin: 0; }
.gx-mnav :where(button),
.gx-mnav :where(button):hover,
.gx-mnav :where(button):focus {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--gx-teal);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}
.gx-mnav :focus-visible { outline: 2px dotted currentColor; outline-offset: 3px; }
.gx-mnav svg { display: block; fill: currentColor; }

/* top bar */
.gx-mnav__bar {
  flex: none;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  height: 64px;
  padding: 0 10px;
  border-bottom: 1px solid var(--gx-line);
}
.gx-mnav .gx-mnav__icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; }
.gx-mnav__icon svg { width: 24px; height: 24px; }
.gx-mnav__logo { justify-self: center; display: block; }
.gx-mnav__logo img { display: block; width: 56px; height: auto; }
.gx-mnav__logo-text { font: 400 20px/1 "Shrikhand", Georgia, serif; }
.gx-mnav__count {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gx-teal);
  color: var(--gx-blush);
  font: 800 11px/18px "Karla", sans-serif;
  text-align: center;
}

/* screens */
.gx-mnav__viewport { position: relative; flex: 1; overflow: hidden; }
.gx-mnav__panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 36px;
  background: var(--gx-blush);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .36s var(--gx-ease), visibility 0s linear .36s;
}
.gx-mnav__panel.is-current { transform: none; visibility: visible; transition-delay: 0s; }
.gx-mnav__panel.is-behind { transform: translateX(-28%); visibility: visible; transition-delay: 0s; }
.gx-mnav.is-open [data-panel="root"] > * { animation: gx-mnav-in .45s var(--gx-ease) both; animation-delay: calc(var(--gx-i, 0) * 45ms + 120ms); }
@keyframes gx-mnav-in { from { opacity: 0; transform: translateY(12px); } }

/* search */
.gx-mnav .gx-mnav__search { position: relative; margin: 0; }
.gx-mnav .gx-mnav__search input[type="search"] {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 58px 0 20px;
  border: 1px solid rgba(48, 79, 90, .35);
  border-radius: 999px;
  background: #fff;
  color: var(--gx-teal);
  font: 500 16px/1 "Karla", sans-serif;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
.gx-mnav .gx-mnav__search input[type="search"]::placeholder { color: rgba(48, 79, 90, .6); opacity: 1; }
.gx-mnav .gx-mnav__search button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gx-teal);
  color: #fff;
}
.gx-mnav__search svg { width: 20px; height: 20px; }

/* section headings: like the columns of the desktop panel */
.gx-mnav__group { margin: 28px 0 0; }
.gx-mnav__label {
  margin: 0 0 14px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--gx-disc);
  font: 400 20px/1.2 "Shrikhand", Georgia, serif;
  letter-spacing: .3px;
}

/* category photos */
.gx-mnav__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gx-mnav__tiles[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gx-mnav__tiles:not([data-count="3"]) > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.gx-mnav__tile {
  display: block;
  height: 100%;
  padding: 8px 8px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 22px -16px rgba(48, 79, 90, .5);
  text-align: center;
  transition: transform .2s var(--gx-ease);
}
.gx-mnav__tile:active { transform: scale(.97); }
.gx-mnav__tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  background: var(--gx-blush-soft);
}
.gx-mnav__tiles:not([data-count="3"]) > li:last-child:nth-child(odd) img { aspect-ratio: 2.2 / 1; }
.gx-mnav__tile span { display: block; margin-top: 10px; font: 400 16px/1.2 "Shrikhand", Georgia, serif; letter-spacing: .3px; }

/* links */
.gx-mnav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--gx-line);
  font: 700 17px/1.25 "Karla", sans-serif;
}
.gx-mnav__link img { flex: none; width: 24px; height: 24px; }
.gx-mnav__link::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 0 auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
}

/* level cards */
.gx-mnav__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gx-mnav__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 14px 16px;
  border: 1px solid rgba(48, 79, 90, .2);
  border-radius: 16px;
  background: #fff;
  transition: transform .2s var(--gx-ease);
}
.gx-mnav__card:active { transform: scale(.97); }
.gx-mnav__card strong { font: 800 16px/1.2 "Karla", sans-serif; }
.gx-mnav__card span { font: 400 14px/1.35 "Karla", sans-serif; color: var(--gx-soft-ink); }

/* photo card */
.gx-mnav__feature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 0;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 28px -18px rgba(48, 79, 90, .55);
}
.gx-mnav__group + .gx-mnav__feature, .gx-mnav__feature + .gx-mnav__feature { margin-top: 14px; }
.gx-mnav__feature img { flex: none; width: 96px; height: 120px; object-fit: cover; border-radius: 14px; background: var(--gx-blush-soft); }
.gx-mnav__feature-text { display: block; min-width: 0; }
.gx-mnav__feature-text strong { display: block; margin: 0 0 6px; font: 400 20px/1.15 "Shrikhand", Georgia, serif; letter-spacing: .3px; }
.gx-mnav__feature-text > span { display: block; font: 400 14px/1.4 "Karla", sans-serif; color: var(--gx-soft-ink); }

/* "Ver todos los productos" */
.gx-mnav .gx-mnav__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  margin: 24px 0 0;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--gx-teal);
  color: #fff;
  font: 500 15px/1 "Karla", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.gx-mnav__all span { letter-spacing: 0; }

/* the other sections (Sobre nosotras, Artículos) */
.gx-mnav__list { margin: 32px 0 0; border-top: 1px solid var(--gx-line); }
.gx-mnav .gx-mnav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 0 4px;
  border-bottom: 1px solid var(--gx-line);
  color: var(--gx-teal);
  font: 800 17px/1.2 "Karla", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
}
.gx-mnav .gx-mnav__row svg { flex: none; width: 22px; height: 22px; transition: transform .25s var(--gx-ease); }
.gx-mnav .gx-mnav__row:active svg { transform: translateX(4px); }

/* heading of the inner screens */
.gx-mnav__head { display: flex; align-items: center; gap: 12px; margin: 0; }
.gx-mnav .gx-mnav__back {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 14px -8px rgba(48, 79, 90, .5);
}
.gx-mnav__back svg { width: 22px; height: 22px; }
.gx-mnav__title { font: 400 24px/1.15 "Shrikhand", Georgia, serif; letter-spacing: .3px; }
.gx-mnav__head + .gx-mnav__group { margin-top: 22px; }

/* social (end of the first screen) */
.gx-mnav__social { display: flex; gap: 22px; justify-content: center; margin: 28px 0 0; }
.gx-mnav__social:empty { display: none; }
.gx-mnav__social a { display: grid; place-items: center; width: 44px; height: 44px; }
.gx-mnav__social svg { width: 22px; height: 22px; }

/* bottom bar */
.gx-mnav__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gx-line);
  background: var(--gx-blush);
}
.gx-mnav__account { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 800 14px/1 "Karla", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.gx-mnav__account svg { width: 20px; height: 20px; }
.gx-mnav__langs { display: flex; gap: 4px; margin-left: auto; }
.gx-mnav__langs:empty { display: none; }
.gx-mnav__langs a { display: grid; place-items: center; min-width: 40px; height: 36px; padding: 0 8px; border: 1px solid rgba(48, 79, 90, .3); border-radius: 999px; font: 800 13px/1 "Karla", sans-serif; letter-spacing: 1px; }
.gx-mnav__langs a[aria-current="true"] { background: var(--gx-teal); border-color: var(--gx-teal); color: #fff; }

/* ==========================================================================
   COOKIE NOTICE (1.7) — on phones and tablets Complianz's grey "Gestionar
   consentimiento" tab shows as usual and goes away as soon as "Aceptar",
   "Denegar" or "Guardar preferencias" is pressed (gx-menu.js marks the
   page); on the next page it is there again, so the choice can be changed.
   ========================================================================== */
@media (max-width: 921px) {
  body.gx-consent-done #cmplz-manage-consent .cmplz-manage-consent { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.gx-menu *, body.gx-menu *::before, body.gx-menu *::after { transition: none !important; }
  .gx-mnav, .gx-mnav * { transition: none !important; animation: none !important; }
}