:root {
  --z-orange: #ff4f12;
  --z-orange-dark: #e9440b;
  --z-orange-soft: #fff3ed;

  --z-red: #e63212;

  --z-black: #18181b;
  --z-text: #27272a;
  --z-muted: #71717a;

  --z-border: #e9e9eb;
  --z-bg: #f6f6f7;

  --z-shell: 1420px;
}


/* ==========================================================
   BASE
   ========================================================== */

body.zelmio-marketplace {
  background: var(--z-bg);
  color: var(--z-text);
}

.zelmio-shell {
  width:
    min(
      var(--z-shell),
      calc(100% - 32px)
    );

  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================
   HEADER EXISTENTE
   ========================================================== */

body.zelmio-marketplace header {
  position: relative;
  z-index: 70;

  background: #fff !important;

  border-bottom:
    1px solid
    var(--z-border);

  box-shadow:
    none !important;
}


body.zelmio-marketplace header .logo,
body.zelmio-marketplace header a.logo,
body.zelmio-marketplace header .brand,
body.zelmio-marketplace header a.brand {
  color:
    var(--z-orange) !important;

  font-weight:
    950 !important;

  letter-spacing:
    -1.6px !important;
}


/* Buscador protagonista */

body.zelmio-marketplace
header
input[type="search"],

body.zelmio-marketplace
header
input[placeholder*="Buscar"],

body.zelmio-marketplace
#searchInput {
  min-height: 46px;

  border:
    2px solid
    var(--z-orange) !important;

  border-radius:
    999px !important;

  background:
    #fff !important;

  transition:
    box-shadow .15s ease;
}


body.zelmio-marketplace
#searchInput:focus {
  outline:
    none !important;

  box-shadow:
    0 0 0 4px
    rgba(255,79,18,.11) !important;
}


/* ==========================================================
   TOP BAR
   ========================================================== */

.zelmio-top-strip {
  width: 100%;

  background:
    var(--z-black);

  color: #fff;

  font-size:
    11px;
}


.zelmio-top-inner {
  min-height: 31px;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap: 20px;
}


.zelmio-top-left,
.zelmio-top-right {
  display: flex;

  align-items:
    center;

  gap: 13px;
}


.zelmio-top-strip strong {
  color:
    #ffb494;
}


.zelmio-dot {
  opacity: .35;
}


/* ==========================================================
   MARKETPLACE NAV
   ========================================================== */

.zelmio-market-nav {
  position: relative;

  z-index: 60;

  width: 100%;

  background: #fff;

  border-bottom:
    1px solid
    var(--z-border);
}


.zelmio-market-nav-inner {
  min-height: 50px;

  display: flex;

  align-items:
    center;

  gap: 10px;
}


/* Botón Categorías */

.zelmio-categories-wrap {
  position: relative;

  flex: 0 0 auto;
}


.zelmio-categories-button {
  min-height: 38px;

  padding:
    0 16px;

  display: inline-flex;

  align-items:
    center;

  gap: 9px;

  border: 0;

  border-radius:
    7px;

  background:
    var(--z-orange);

  color: #fff;

  font-size:
    12px;

  font-weight:
    850;

  cursor:
    pointer;

  transition:
    background .15s ease,
    transform .15s ease;
}


.zelmio-categories-button:hover {
  background:
    var(--z-orange-dark);

  transform:
    translateY(-1px);
}


.zelmio-chevron {
  margin-left: 3px;

  opacity: .85;
}


/* ==========================================================
   MEGA MENU
   ========================================================== */

.zelmio-mega-menu {
  position: absolute;

  top:
    calc(100% + 8px);

  left: 0;

  width: 720px;

  max-width:
    calc(100vw - 30px);

  padding:
    20px;

  border:
    1px solid
    var(--z-border);

  border-radius:
    13px;

  background:
    #fff;

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.17);
}


.zelmio-mega-menu[hidden] {
  display: none !important;
}


.zelmio-mega-head {
  margin-bottom:
    15px;

  padding-bottom:
    13px;

  border-bottom:
    1px solid
    #eee;
}


.zelmio-mega-head strong {
  display: block;

  margin-bottom:
    3px;

  color:
    var(--z-black);

  font-size:
    16px;
}


.zelmio-mega-head span {
  color:
    var(--z-muted);

  font-size:
    11px;
}


.zelmio-mega-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 6px;
}


.zelmio-mega-item {
  min-height: 48px;

  padding:
    7px 9px;

  display: flex;

  align-items:
    center;

  gap: 9px;

  border-radius:
    8px;

  color:
    #3f3f46;

  font-size:
    12px;

  font-weight:
    700;

  text-decoration:
    none;
}


.zelmio-mega-item:hover {
  color:
    var(--z-orange);

  background:
    var(--z-orange-soft);
}


.zelmio-mega-icon {
  width: 28px;

  height: 28px;

  display: inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    7px;

  background:
    #f4f4f5;

  font-size:
    15px;
}


/* Navegación rápida */

.zelmio-nav-scroll {
  flex: 1;

  display: flex;

  align-items:
    center;

  gap: 2px;

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.zelmio-nav-scroll::-webkit-scrollbar {
  display: none;
}


.zelmio-nav-scroll a {
  flex: 0 0 auto;

  min-height: 35px;

  padding:
    0 11px;

  display:
    inline-flex;

  align-items:
    center;

  border-radius:
    7px;

  color:
    #3f3f46;

  font-size:
    12px;

  font-weight:
    750;

  text-decoration:
    none;
}


.zelmio-nav-scroll a:hover {
  color:
    var(--z-orange);

  background:
    var(--z-orange-soft);
}


.zelmio-nav-scroll
.zelmio-member-nav {
  color:
    var(--z-orange);

  font-weight:
    900;
}


/* ==========================================================
   BENEFITS
   ========================================================== */

.zelmio-benefits {
  width: 100%;

  background:
    #fff8f4;

  border-bottom:
    1px solid
    #f8e4db;
}


.zelmio-benefits-inner {
  min-height: 35px;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  gap: 35px;

  color:
    #5b4a42;

  font-size:
    11px;

  font-weight:
    700;

  overflow-x:
    auto;
}


.zelmio-benefits-inner div {
  flex: 0 0 auto;
}


.zelmio-benefits-inner span {
  margin-right: 5px;

  color:
    var(--z-orange);

  font-weight:
    950;
}


/* ==========================================================
   PRODUCT CARDS
   ========================================================== */

body.zelmio-marketplace
.product-card {
  overflow: hidden;

  border:
    1px solid
    #ececee !important;

  border-radius:
    10px !important;

  background:
    #fff;

  box-shadow:
    0 1px 2px
    rgba(0,0,0,.025);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}


body.zelmio-marketplace
.product-card:hover {
  transform:
    translateY(-3px);

  border-color:
    #dbdbdd !important;

  box-shadow:
    0 9px 25px
    rgba(0,0,0,.09);
}


body.zelmio-marketplace
.product-card
.product-image-wrap {
  background:
    #fafafa;
}


body.zelmio-marketplace
.product-card
.price,

body.zelmio-marketplace
.product-price {
  color:
    var(--z-red) !important;

  font-weight:
    900 !important;
}


body.zelmio-marketplace
.product-card button {
  border-radius:
    7px !important;
}


/* ==========================================================
   SIDEBAR / FILTROS
   ========================================================== */

.variant-filter-container {
  margin-top:
    19px;

  padding-top:
    17px;

  border-top:
    1px solid
    var(--z-border);
}


.variant-filter-block {
  margin-bottom:
    18px;
}


.variant-filter-block label {
  display: block;

  margin-bottom:
    8px;

  color:
    #27272a;

  font-size:
    12px;

  font-weight:
    850;
}


.variant-filter-block select {
  width: 100%;

  min-height: 43px;

  padding:
    9px 34px 9px 11px;

  border:
    1px solid
    #dedee1;

  border-radius:
    7px;

  background:
    #fff;

  color:
    #27272a;

  font: inherit;

  font-size:
    13px;

  cursor:
    pointer;
}


.variant-filter-block
select:hover {
  border-color:
    #c7c7cb;
}


.variant-filter-block
select:focus {
  outline: none;

  border-color:
    var(--z-orange);

  box-shadow:
    0 0 0 3px
    rgba(255,79,18,.1);
}


/* ==========================================================
   FOOTER PROMO
   ========================================================== */

footer.zelmio-footer-modern {
  margin-top:
    70px;

  padding:
    0 !important;

  background:
    #18181b !important;

  color:
    #d4d4d8 !important;

  text-align:
    left !important;
}


.zelmio-footer-promo {
  padding:
    26px 0;

  background:
    linear-gradient(
      105deg,
      var(--z-orange),
      #ff713a
    );

  color: #fff;
}


.zelmio-footer-promo
.zelmio-shell {
  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap: 30px;
}


.zelmio-footer-promo strong {
  display: block;

  margin-bottom:
    4px;

  font-size:
    19px;
}


.zelmio-footer-promo span {
  font-size:
    12px;

  opacity: .9;
}


.zelmio-footer-promo button {
  flex: 0 0 auto;

  min-height:
    40px;

  padding:
    0 18px;

  border:
    0;

  border-radius:
    7px;

  background:
    #fff;

  color:
    var(--z-orange);

  font-weight:
    850;

  cursor:
    pointer;
}


/* ==========================================================
   FOOTER MAIN
   ========================================================== */

.zelmio-footer-main {
  padding:
    50px 0 25px;
}


.zelmio-footer-grid {
  display: grid;

  grid-template-columns:
    1.5fr 1fr 1fr 1fr;

  gap:
    45px;
}


.zelmio-footer-grid section {
  display: flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap: 9px;
}


.zelmio-footer-logo {
  margin-bottom:
    6px;

  color:
    #fff !important;

  font-size:
    32px !important;

  font-weight:
    950 !important;

  letter-spacing:
    -1.5px;

  text-decoration:
    none !important;
}


.zelmio-footer-logo span {
  color:
    var(--z-orange);
}


.zelmio-footer-brand p {
  max-width:
    390px;

  margin:
    0;

  color:
    #a1a1aa;

  font-size:
    13px;

  line-height:
    1.7;
}


.zelmio-footer-badge {
  margin-top:
    9px;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:
    6px;

  color:
    #d4d4d8;

  font-size:
    10px;
}


.zelmio-footer-modern h3 {
  margin:
    0 0 8px;

  color:
    #fff;

  font-size:
    13px;
}


.zelmio-footer-modern
section a,

.zelmio-footer-modern
section button,

.zelmio-footer-modern
section span {
  border: 0;

  padding: 0;

  background: none;

  color:
    #a1a1aa;

  font:
    inherit;

  font-size:
    12px;

  line-height:
    1.6;

  text-decoration:
    none;
}


.zelmio-footer-modern
section button {
  cursor:
    pointer;
}


.zelmio-footer-modern
section a:hover,

.zelmio-footer-modern
section button:hover {
  color:
    #fff;
}


.zelmio-footer-category-row {
  margin-top:
    38px;

  padding-top:
    22px;

  display: flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  border-top:
    1px solid
    rgba(255,255,255,.09);
}


.zelmio-footer-category-row a {
  padding:
    6px 9px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    6px;

  color:
    #8f8f98;

  font-size:
    10px;

  text-decoration:
    none;
}


.zelmio-footer-category-row a:hover {
  color:
    #fff;

  border-color:
    rgba(255,255,255,.2);
}


.zelmio-footer-bottom {
  margin-top:
    20px;

  padding-top:
    18px;

  display: flex;

  justify-content:
    space-between;

  gap: 20px;

  border-top:
    1px solid
    rgba(255,255,255,.08);

  color:
    #71717a;

  font-size:
    10px;
}


/* ==========================================================
   MOBILE BOTTOM NAV
   ========================================================== */

.zelmio-mobile-nav {
  display: none;
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.zelmio-categories-button:focus-visible,
.zelmio-mega-item:focus-visible,
.zelmio-nav-scroll a:focus-visible,
.zelmio-mobile-nav button:focus-visible,
.zelmio-mobile-nav a:focus-visible {
  outline:
    3px solid
    #ffb293;

  outline-offset:
    2px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (
  max-width: 900px
) {

  .zelmio-mega-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }


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


  .zelmio-benefits-inner {
    justify-content:
      flex-start;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (
  max-width: 640px
) {

  .zelmio-shell {
    width:
      calc(100% - 20px);
  }


  .zelmio-top-right
  span:not(:last-child),

  .zelmio-dot {
    display: none;
  }


  .zelmio-top-left
  span {
    display: none;
  }


  .zelmio-market-nav-inner {
    min-height:
      46px;
  }


  .zelmio-categories-button {
    min-height:
      35px;

    padding:
      0 12px;
  }


  .zelmio-categories-button
  span:nth-child(2) {
    max-width:
      105px;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .zelmio-mega-menu {
    position:
      fixed;

    top:
      70px;

    left:
      10px;

    right:
      10px;

    width:
      auto;

    max-width:
      none;

    max-height:
      70vh;

    overflow-y:
      auto;
  }


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


  .zelmio-benefits-inner {
    gap:
      22px;

    padding:
      0 3px;
  }


  .zelmio-benefits-inner
  div:nth-child(4) {
    display: none;
  }


  .zelmio-footer-promo
  .zelmio-shell {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


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


  .zelmio-footer-bottom {
    flex-direction:
      column;
  }


  body.zelmio-marketplace {
    padding-bottom:
      68px;
  }


  .zelmio-mobile-nav {
    position:
      fixed;

    z-index:
      100;

    left: 0;

    right: 0;

    bottom: 0;

    height:
      62px;

    display:
      grid;

    grid-template-columns:
      repeat(5, 1fr);

    border-top:
      1px solid
      #e5e5e7;

    background:
      rgba(255,255,255,.97);

    backdrop-filter:
      blur(10px);

    box-shadow:
      0 -4px 18px
      rgba(0,0,0,.06);
  }


  .zelmio-mobile-nav a,
  .zelmio-mobile-nav button {
    min-width: 0;

    border: 0;

    background:
      transparent;

    color:
      #52525b;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      3px;

    text-decoration:
      none;

    font:
      inherit;

    cursor:
      pointer;
  }


  .zelmio-mobile-nav
  > *:nth-child(3) {
    color:
      var(--z-orange);
  }


  .zelmio-mobile-nav span {
    font-size:
      18px;

    line-height:
      1;
  }


  .zelmio-mobile-nav small {
    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      9px;

    font-weight:
      750;
  }
}