/* AUTO-GENERATED by .context/gen-store-chrome-css.php — scoped Kalbby chrome for the store. Do not edit by hand. */

.kalbby-chrome, .kalbby-chrome *, .kalbby-chrome *::before, .kalbby-chrome *::after { box-sizing: border-box; }
.kalbby-chrome { font-family: var(--font-sans); color: var(--ink-500); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
.kalbby-chrome a { text-decoration: none; color: inherit; }

@font-face {
  font-family: "HWT Artz";
  src: url("../fonts/HWT_Artz_W00_Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Coralez";
  src: url("../fonts/Coralez_Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Flama";
  src: url("../fonts/Flama-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Flama";
  src: url("../fonts/Flama-Basic.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Flama";
  src: url("../fonts/Flama-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Flama";
  src: url("../fonts/Flama-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Flama";
  src: url("../fonts/Flama-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
.kalbby-chrome {
  /* ---------- Brand colors ---------------------------------------------- */

  /* Primary palette */
  --brand-mint:        #47d7ac;  /* Color Institucional · Pantone 3385 C */
  --brand-cream:       #faf6eb;  /* Nuestro blanco                       */
  --brand-ink:         #334547;  /* Nuestro negro    · Pantone Neutral Black */

  /* Secondary palette */
  --brand-beef:        #e8431d;  /* TERNERA · Pantone Bright Red C       */
  --brand-chicken:     #f7a600;  /* POLLO   · Pantone 137 C              */
  --brand-mint-soft:   #b9ebe1;  /* Suave acuoso (decorativo)            */
  --brand-stone:       #6f6864;  /* Piedra cálida (decorativo)           */

  /* Tints & shades (derived) */
  --mint-100:          #e2f8ef;
  --mint-200:          #b9ebd7;
  --mint-300:          #7fe1c0;
  --mint-400:          #47d7ac;  /* = brand-mint */
  --mint-500:          #2bb893;
  --mint-600:          #1f8d70;
  --mint-700:          #155a48;

  --cream-50:          #fdfbf4;
  --cream-100:         #faf6eb;  /* = brand-cream */
  --cream-200:         #f1ead7;
  --cream-300:         #e6dcc1;

  --ink-700:           #1f2a2c;
  --ink-600:           #2a3a3c;
  --ink-500:           #334547;  /* = brand-ink */
  --ink-400:           #4b5e60;
  --ink-300:           #7b8c8e;
  --ink-200:           #b1bdbe;
  --ink-100:           #d8dedf;

  --beef-500:          #e8431d;  /* = brand-beef */
  --beef-600:          #b9351a;

  --chicken-500:       #f7a600; /* = brand-chicken */
  --chicken-600:       #cc8800;

  /* ---------- Semantic surfaces & text --------------------------------- */
  --fg-1:              var(--ink-500); /* default body text on cream      */
  --fg-2:              var(--ink-400); /* secondary text                  */
  --fg-3:              var(--ink-300); /* muted captions                  */
  --fg-on-mint:        var(--ink-500); /* ink on mint (high contrast)     */
  --fg-on-ink:         var(--cream-100);
  --fg-on-cream:       var(--ink-500);
  --fg-accent:         var(--brand-mint);

  --bg-page:           var(--cream-100);
  --bg-elevated:       #ffffff;
  --bg-ink:            var(--ink-500);
  --bg-mint:           var(--brand-mint);
  --bg-beef:           var(--brand-beef);
  --bg-chicken:        var(--brand-chicken);

  --border-soft:       rgba(51, 69, 71, 0.10);
  --border-strong:     rgba(51, 69, 71, 0.22);

  /* ---------- Type families -------------------------------------------- */
  --font-display:      "HWT Artz", "Bowlby One SC", "Lilita One", system-ui, sans-serif;
  --font-sans:         "Flama", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-handwritten:  "Coralez", "Caveat", "Patrick Hand", cursive;

  /* ---------- Type scale (mobile-first, big & friendly) ---------------- */
  --fs-eyebrow:        0.75rem;  /* 12 */
  --fs-caption:        0.8125rem;/* 13 */
  --fs-body-sm:        0.875rem; /* 14 */
  --fs-body:           1rem;     /* 16 */
  --fs-body-lg:        1.125rem; /* 18 */
  --fs-lead:           1.375rem; /* 22 */

  --fs-h6:             1rem;
  --fs-h5:             1.25rem;
  --fs-h4:             1.625rem;
  --fs-h3:             2.125rem;
  --fs-h2:             2.75rem;
  --fs-h1:             3.625rem;

  --fs-display-sm:     4.5rem;
  --fs-display:        6rem;
  --fs-display-lg:     8.5rem;

  /* Line heights */
  --lh-tight:          0.95;
  --lh-snug:           1.08;
  --lh-normal:         1.35;
  --lh-body:           1.55;
  --lh-loose:          1.7;

  /* Tracking */
  --ls-display:        -0.01em;
  --ls-tight:          -0.005em;
  --ls-normal:         0;
  --ls-eyebrow:        0.14em;

  /* ---------- Radius, spacing, shadow ---------------------------------- */
  --radius-sm:         8px;
  --radius-md:         14px;
  --radius-lg:         22px;
  --radius-xl:         32px;
  --radius-pill:       999px;

  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           24px;
  --space-6:           32px;
  --space-7:           48px;
  --space-8:           64px;
  --space-9:           96px;

  /* Soft cream-tinted shadows. Avoid heavy drop shadows. */
  --shadow-1:          0 1px 2px rgba(51, 69, 71, 0.06),
                       0 2px 8px rgba(51, 69, 71, 0.05);
  --shadow-2:          0 4px 16px rgba(51, 69, 71, 0.08),
                       0 2px 4px rgba(51, 69, 71, 0.05);
  --shadow-3:          0 12px 32px rgba(51, 69, 71, 0.12);

  /* Easing & timing — friendly, never bouncy */
  --ease-out:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:          120ms;
  --dur:               220ms;
  --dur-slow:          360ms;
}
.kalbby-chrome .skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--brand-ink);
  color: var(--cream-100);
  padding: var(--space-3) var(--space-5);
  z-index: 1000;
  transition: top var(--dur) var(--ease-out);
}
.kalbby-chrome .skip-link:focus { top: 0; }
.kalbby-chrome .container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (min-width: 768px) {
.kalbby-chrome .container { padding: 0 var(--space-6); }
}
.kalbby-chrome .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.015em;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: none;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur),
              color var(--dur);
  white-space: nowrap;
}
.kalbby-chrome .btn--mint {
  background: var(--brand-mint);
  color: var(--ink-500);
  box-shadow: 0 4px 0 0 var(--mint-600);
}
.kalbby-chrome .btn--mint:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--mint-600);
}
.kalbby-chrome .btn--mint:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 0 var(--mint-600);
}
.kalbby-chrome .btn--ink {
  background: var(--brand-ink);
  color: var(--cream-100);
  box-shadow: 0 4px 0 0 var(--ink-700);
}
.kalbby-chrome .btn--ink:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--ink-700);
}
.kalbby-chrome .btn--ghost {
  background: transparent;
  color: var(--ink-500);
  box-shadow: inset 0 0 0 2px var(--ink-500);
}
.kalbby-chrome .btn--ghost:hover {
  background: var(--ink-500);
  color: var(--cream-100);
}
.kalbby-chrome .section--ink .btn--ghost {
  color: var(--cream-100);
  box-shadow: inset 0 0 0 2px var(--cream-100);
}
.kalbby-chrome .section--ink .btn--ghost:hover {
  background: var(--cream-100);
  color: var(--ink-500);
}
.kalbby-chrome .btn--large {
  padding: 18px 32px;
  font-size: 1rem;
}
.kalbby-chrome .btn--small {
  padding: 9px 18px;
  font-size: 0.8125rem;
}
.kalbby-chrome .btn .arrow {
  transition: transform var(--dur) var(--ease-out);
}
.kalbby-chrome .btn:hover .arrow { transform: translateX(4px); }
.kalbby-chrome .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--brand-mint);
}
.kalbby-chrome .site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) 0;
}
.kalbby-chrome .site-logo {
  display: inline-flex;
  align-items: center;
  height: 52px;
}
.kalbby-chrome .site-logo img { height: 100%; width: auto; }
.kalbby-chrome .site-nav {
  display: none;
  align-items: center;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
.kalbby-chrome .site-nav { display: flex; }
}
.kalbby-chrome .site-nav__item {
  position: relative;
}
.kalbby-chrome .site-nav__trigger {
  background: transparent;
  border: 0;
  padding: var(--space-2) 0;
  color: var(--ink-500);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur) var(--ease-out);
}
.kalbby-chrome .site-nav__trigger:hover,
.kalbby-chrome .site-nav__trigger:focus-visible,
.kalbby-chrome .site-nav__item.is-open .site-nav__trigger,
.kalbby-chrome .site-nav__trigger.is-current { color: var(--ink-700); }
.kalbby-chrome .site-nav__trigger:focus-visible { outline: 2px solid var(--ink-700); outline-offset: 4px; border-radius: 4px; }
.kalbby-chrome .site-nav__caret {
  width: 10px;
  height: 10px;
  transition: transform var(--dur) var(--ease-out);
}
.kalbby-chrome .site-nav__item.is-open .site-nav__caret { transform: rotate(180deg); }
.kalbby-chrome .site-nav__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: -12px;
  min-width: 220px;
  background: var(--cream-100);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: var(--space-3);
  box-shadow: 0 12px 32px rgba(20, 20, 20, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
  z-index: 60;
}
.kalbby-chrome .site-nav__item.is-open .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s;
}
.kalbby-chrome .site-nav__dropdown a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  color: var(--ink-500);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.kalbby-chrome .site-nav__dropdown a:hover,
.kalbby-chrome .site-nav__dropdown a:focus-visible {
  background: var(--cream-200);
  color: var(--mint-500);
  outline: none;
}
.kalbby-chrome .site-header__cta { display: none; }
@media (min-width: 768px) {
.kalbby-chrome .site-header__cta { display: inline-flex; }
}
.kalbby-chrome .nav-toggle {
  background: transparent;
  border: none;
  color: var(--ink-500);
  padding: var(--space-2);
  display: inline-flex;
}
@media (min-width: 1024px) {
.kalbby-chrome .nav-toggle { display: none; }
}
.kalbby-chrome .nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--brand-mint);
  z-index: 100;
  padding: var(--space-6) var(--space-5);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-in-out);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
}
.kalbby-chrome .nav-drawer.is-open { transform: translateX(0); }
.kalbby-chrome .nav-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}
.kalbby-chrome .nav-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kalbby-chrome .nav-drawer__group { border-bottom: 1px solid rgba(0,0,0,0.15); }
.kalbby-chrome .nav-drawer__group-trigger {
  width: 100%;
  background: transparent;
  border: 0;
  padding: var(--space-4) 0;
  color: var(--ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}
.kalbby-chrome .nav-drawer__group-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.kalbby-chrome .nav-drawer__group-caret {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease-out);
}
.kalbby-chrome .nav-drawer__group.is-open .nav-drawer__group-caret { transform: rotate(180deg); }
.kalbby-chrome .nav-drawer__group-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-in-out);
  display: flex;
  flex-direction: column;
}
.kalbby-chrome .nav-drawer__group.is-open .nav-drawer__group-panel { max-height: 480px; }
.kalbby-chrome .nav-drawer__group-panel a {
  color: var(--ink-500);
  font-size: 1rem;
  font-weight: 500;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
}
.kalbby-chrome .nav-drawer__group-panel a:hover { color: var(--ink); }
.kalbby-chrome .nav-drawer__group-panel a:last-child { padding-bottom: var(--space-4); }
.kalbby-chrome .nav-drawer .btn--mint { background: var(--mint-700); border-color: var(--mint-700); color: var(--cream-100); }
.kalbby-chrome .nav-drawer__cta-row {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 900px) {
.kalbby-chrome .hero .container {
    max-width: none;
    padding: 0;
  }
}
.kalbby-chrome .site-footer {
  background: var(--ink-700);
  color: var(--cream-200);
  padding: var(--space-8) 0 var(--space-5);
}
.kalbby-chrome .site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (min-width: 640px) {
.kalbby-chrome .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.kalbby-chrome .site-footer__grid { grid-template-columns: 1.6fr repeat(5, 1fr); }
}
.kalbby-chrome .footer-col h4 {
  color: var(--cream-100);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.kalbby-chrome .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.kalbby-chrome .footer-col a { color: var(--cream-200); font-size: 0.9375rem; transition: color var(--dur) var(--ease-out); }
.kalbby-chrome .footer-col a:hover { color: var(--brand-mint); }
.kalbby-chrome .site-footer__logo { display: block; max-width: 160px; margin-bottom: var(--space-4); }
.kalbby-chrome .site-footer__brand-line {
  font-family: "HWT Artz", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--brand-mint);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.kalbby-chrome .site-footer__brand-body { font-size: 0.875rem; color: var(--cream-300); margin: 0; }
.kalbby-chrome .site-footer__bottom {
  border-top: 1px solid rgba(250, 246, 235, 0.1);
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 0.8125rem;
  color: var(--cream-300);
}
@media (min-width: 640px) {
.kalbby-chrome .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.kalbby-chrome .site-footer__address {
  border-top: 1px solid rgba(250, 246, 235, 0.1);
  padding: var(--space-5) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  color: var(--cream-300);
  font-size: 0.8125rem;
  line-height: var(--lh-normal);
}
@media (min-width: 768px) {
.kalbby-chrome .site-footer__address {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}
.kalbby-chrome .site-footer__address strong {
  display: block;
  color: var(--cream-100);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 700;
}
.kalbby-chrome .site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.kalbby-chrome .header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  transition: color var(--dur) var(--ease-out);
}
.kalbby-chrome .header-cart:hover,
.kalbby-chrome .header-cart:focus-visible { color: var(--ink-700); }
.kalbby-chrome .header-cart__icon { width: 26px; height: 26px; }
.kalbby-chrome .header-cart__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-500);
  color: var(--cream-100);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
}
.kalbby-chrome .header-user {
  position: relative;
  display: none;
}
@media (min-width: 1024px) {
.kalbby-chrome .header-user { display: inline-flex; }
}
.kalbby-chrome .header-user__trigger {
  background: transparent;
  border: 0;
  padding: var(--space-2);
  color: var(--ink-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur) var(--ease-out);
}
.kalbby-chrome .header-user__trigger:hover,
.kalbby-chrome .header-user.is-open .header-user__trigger { color: var(--ink-700); }
.kalbby-chrome .header-user__caret {
  width: 14px;
  height: 9px;
  transition: transform var(--dur) var(--ease-out);
}
.kalbby-chrome .header-user.is-open .header-user__caret { transform: rotate(180deg); }
.kalbby-chrome .header-user__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--cream-100);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: var(--space-2);
  box-shadow: 0 12px 32px rgba(20, 20, 20, 0.10);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s linear var(--dur);
  z-index: 60;
}
.kalbby-chrome .header-user.is-open .header-user__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility 0s;
}
.kalbby-chrome .header-user__greeting {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.kalbby-chrome .header-user__greeting span {
  font-size: 0.75rem;
  color: var(--ink-300);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.kalbby-chrome .header-user__greeting strong { font-size: 0.9375rem; color: var(--ink-600); }
.kalbby-chrome .header-user__menu a,
.kalbby-chrome .header-user__menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  color: var(--ink-500);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.kalbby-chrome .header-user__menu a:hover,
.kalbby-chrome .header-user__menu button:hover { background: var(--cream-200); color: var(--mint-500); }
.kalbby-chrome .header-user__menu form { margin: 0; }
.kalbby-chrome .nav-drawer__user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.kalbby-chrome .nav-drawer__user-greeting { margin: 0 0 var(--space-2); color: var(--ink-400); font-size: 0.9375rem; }
.kalbby-chrome .nav-drawer__user a,
.kalbby-chrome .nav-drawer__user button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--space-2) 0;
  color: var(--ink-500);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.kalbby-chrome .nav-drawer__user a:hover,
.kalbby-chrome .nav-drawer__user button:hover { color: var(--mint-500); }
.kalbby-chrome .nav-drawer__user form { margin: 0; }