/* Product detail pages use the same clean white utility header as the collections. */
html body .topbar,
html body.product-editorial-page .topbar {
  position: relative !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100%;
  height: 106px !important;
  padding: 0 4vw !important;
  border: 0 !important;
  border-bottom: 1px solid #dedede !important;
  background: #fff !important;
  color: #151515 !important;
}

html body .topbar .brand-crest,
html body.product-editorial-page .topbar .brand-crest {
  grid-column: 2;
  justify-self: center;
  display: flex !important;
  align-items: center;
  gap: 0 !important;
  width: 176px;
  color: #151515 !important;
}

html body .topbar .brand-crest img,
html body.product-editorial-page .topbar .brand-crest img {
  display: block;
  content: url('logo-peyote.webp');
  width: 176px !important;
  height: auto !important;
  max-height: 60px;
  object-fit: contain;
  filter: none !important;
}

html body .topbar .brand-crest span { display: none !important; }
html body .topbar .header-left { grid-column: 1; grid-row: 1; justify-self: start; display:flex!important;align-items:center;gap:18px; }
html body .topbar .menu-icon { width:30px;height:25px;padding:3px 0;border:0;background:transparent;color:#151515;display:flex;flex-direction:column;justify-content:space-around;cursor:pointer; }
html body .topbar .menu-icon i { display:block;width:23px;height:1.5px;background:#151515; }
html body .topbar .search-mini { width:27px;height:30px;display:grid;place-items:center;color:#151515;text-decoration:none; }
html body .topbar .search-mini svg { width:25px;height:25px;fill:none;stroke:#151515;stroke-width:1.8;stroke-linecap:round; }
html body .topbar .header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
html body .topbar .header-actions { display:flex!important;align-items:center;gap:14px; }
html body .topbar .header-tool,
html body .topbar .cart-link,
html body.product-editorial-page .topbar .header-tool,
html body.product-editorial-page .topbar .cart-link {
  color: #151515 !important;
}
html body .topbar .cart-link { display:inline-flex!important;align-items:center;justify-self:auto;gap:7px;text-decoration:none;font:700 10px Raleway,Arial,sans-serif; }
html body .topbar .cart-link svg { width:25px;height:25px;fill:none;stroke:#151515;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
html body .topbar .header-tool svg,
html body .topbar .cart-link svg,
html body.product-editorial-page .topbar .header-tool svg,
html body.product-editorial-page .topbar .cart-link svg {
  stroke: currentColor !important;
}
html body .topbar .header-tool-count,
html body .topbar .cart-link span,
html body.product-editorial-page .topbar .header-tool-count,
html body.product-editorial-page .topbar .cart-link span {
  border: 1px solid #151515 !important;
  background: #151515 !important;
  color: #fff !important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:50%!important;
  font:700 9px/1 Raleway,Arial,sans-serif;
}

@media (max-width: 760px) {
  html body .topbar,
  html body.product-editorial-page .topbar {
    height: 73px !important;
    padding: 0 20px !important;
  }
  html body .topbar .brand-crest,
  html body .topbar .brand-crest img {
    width: 112px !important;
    max-height: 46px;
  }
}

/* Celular: el logo y los íconos comparten el encabezado; con 3 íconos a la derecha (colección, cuenta y carrito)
   el logo de 136 px se montaba sobre ellos. Aquí se hace un poco más pequeño y los íconos se acercan. */
@media (max-width: 760px) {
  html body .topbar .brand-crest,
  html body.product-editorial-page .topbar .brand-crest { width: 104px; }
  html body .topbar .brand-crest img,
  html body.product-editorial-page .topbar .brand-crest img { width: 104px !important; max-height: 44px; }
  html body .topbar .header-actions { gap: 10px !important; }
  html body .topbar .header-left { gap: 14px !important; }
}