/* ============================================================================
   responsive.css — mobile-first overrides on top of the legacy stylesheets.
   This file is loaded LAST so its rules win the cascade against general.css /
   ecommerce.css / estilos.css / overrides.css.

   Strategy:
     • Base styles target mobile (< 768px).
     • @media (min-width: 768px) reintroduces the desktop layout where needed.
     • We keep the existing legacy class names (.cabezal, .centrar, .usu, …)
       so individual components don't have to change.
   ============================================================================ */

/* ---------- Global resets that the legacy reset.css missed ----------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* ---------- Layout shells -------------------------------------------------- */

.contenedor_gral {
  width: 100%;
  max-width: 1920px;
  min-width: 320px;
  margin: 0 auto;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.contenedor_gral .contenedor_content {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  flex: 1;
}

#Bd,
#Bd.conScroll {
  width: 100%;
  float: none;
  display: block;
  text-align: left;
  margin-top: 0;
}

#content {
  display: block;
  width: 100%;
  text-align: left;
}

div.centrar,
.centrar {
  display: block;
  width: 100%;
  max-width: var(--container-max);
  padding: 0 var(--container-padding);
  margin: 0 auto;
  text-align: left;
}

div.margen_content,
.margen_content {
  float: none;
  display: block;
  width: 100%;
  margin: var(--space-5) 0;
  padding: 0;
}

@media (min-width: 768px) {
  div.margen_content,
  .margen_content {
    margin: var(--space-6) 0;
  }
}

/* ---------- TopBar (.borde_sup) -------------------------------------------
   Mobile: completely hidden — kill height/border/bg from legacy general.css
   which uses `#Hd .borde_sup` (specificity 0,1,1) and otherwise wins. */

body #Hd .borde_sup,
body .borde_sup {
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width: 1024px) {
  body #Hd .borde_sup,
  body .borde_sup {
    display: block !important;
    width: 100%;
    height: auto !important;
    background: var(--color-primary-dark);
    color: var(--color-text-on-primary);
    font-size: 12px;
    padding: 6px 0 !important;
    border: 0 !important;
    line-height: 1.4;
    float: none;
  }
  body #Hd .borde_sup .centrar.der {
    text-align: right;
  }
}

/* ---------- Header (.cabezal) ----------------------------------------------
   Selectors below are scoped under `body` to outrank legacy general.css
   selectors like `#Hd .cabezal .der .iconos_cont` (specificity 0,1,3).
   ------------------------------------------------------------------------- */

body #Hd {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-primary);
  width: 100%;
}

body #Hd.conScroll,
body #Hd.usuarios,
body #Hd.secciones {
  position: sticky;
  top: 0;
  background: var(--color-primary);
  padding: 0;
}

body #Hd .cabezal {
  width: 100%;
  height: auto;
  min-height: 0;
  background: var(--color-primary);
  padding: 6px 0;
  float: none;
  text-align: left;
  box-sizing: border-box;
}

/* Mobile layout: single row.
   [Logo .................. 🔍 👤 🛒 ☰]
   The inline search form is hidden on mobile; tapping the magnifier icon
   opens the Apple-style search overlay (rendered by Header.tsx). */
body #Hd .cabezal .centrar.cen {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  padding-right: 8px;
  text-align: left;
}

body #Hd .cabezal .logo {
  flex: 0 0 auto;
  margin-right: auto;
  width: 130px;
  height: 40px;
}
body #Hd .cabezal .der {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  float: none;
  margin: 0;
  width: auto;
  text-align: right;
}
body #Hd .cabezal .menu-toggle {
  flex: 0 0 auto;
  margin-left: 2px;
}
/* The magnifier (search-toggle) icon — visible only on mobile. */
body #Hd .cabezal .search-toggle {
  display: inline-flex;
}
body #Hd .cabezal .search-toggle::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") no-repeat center / contain;
}

body #Hd .cabezal .logo {
  grid-area: logo;
  display: block;
  flex: 0 0 auto;
  margin: 0;
  margin-right: auto; /* mobile: pushes the action icons cluster to the right */
  width: 130px;
  height: 40px;
  position: static;
  top: auto;
  left: auto;
  background-image: url("/images/chaman-uruguay-logo.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 4px;
}

body #Hd .cabezal .buscador_cont,
body #Hd .buscador_cont {
  grid-area: search;
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  background: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  height: 36px;
}

body #Hd .cabezal .buscador_cont input,
body #Hd .buscador_cont input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  outline: 0;
  font-size: 14px;
  line-height: 1.2;
  background: transparent;
  color: var(--color-text);
  float: none;
}

body #Hd .cabezal .buscador_cont input::placeholder {
  color: #9aa3ad;
}

body #Hd .cabezal .buscador_cont button,
body #Hd .buscador_cont button {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile + tablet: replace the "Buscar" label with a magnifier icon to save
   width. The full label returns at >= 1024px (desktop). */
@media (max-width: 1023px) {
  body #Hd .cabezal .buscador_cont button,
  body #Hd .buscador_cont button {
    width: 36px;
    padding: 0;
    font-size: 0;
    color: transparent;
  }
  body #Hd .cabezal .buscador_cont button::before,
  body #Hd .buscador_cont button::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") no-repeat center / contain;
  }
}

body #Hd .cabezal .buscador_cont button:hover,
body #Hd .cabezal .buscador_cont button:focus,
body #Hd .cabezal .buscador_cont button:active {
  background: #d98a08;
  color: #fff;
}

/* (.der mobile rules live higher up in the file; desktop rules are in the
   `@media (min-width: 1024px)` block.) */

/* Reset legacy .iconos_cont (border + broken /themes/default/ bg images)
   and replace with proper button affordance. */
body #Hd .cabezal .der .iconos_cont,
body .iconos_cont {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent none;
  background-image: none;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.15s;
}

/* Same compact size for the hamburger trigger. */
body .menu-toggle {
  width: 36px;
  height: 36px;
}

body #Hd .cabezal .der .iconos_cont:hover,
body #Hd .cabezal .der .iconos_cont:focus-visible,
body .iconos_cont:hover,
body .iconos_cont:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
  color: #fff;
}

body #Hd .cabezal .der .iconos_cont.usu,
body .iconos_cont.usu {
  background-image: none;
  float: none;
}

body #Hd .cabezal .der .iconos_cont.usu::before,
body .iconos_cont.usu::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z'/></svg>") no-repeat center / contain;
}

body #Hd .cabezal .der .iconos_cont.cart,
body .iconos_cont.cart {
  background-image: none;
}

body #Hd .cabezal .der .iconos_cont.cart::before,
body .iconos_cont.cart::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45C5.16 14.37 5 14.68 5 15c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45C5.16 14.37 5 14.68 5 15c0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1.003 1.003 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/></svg>") no-repeat center / contain;
}

/* Cart badge — anchored to the top-right of the icon button. */
body #Hd .cabezal .der .iconos_cont.cart .carrito,
body .iconos_cont.cart .carrito {
  position: absolute;
  top: -2px;
  right: -2px;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  pointer-events: none;
  display: block;
}

body #Hd .cabezal .der .iconos_cont.cart .cant_items,
body .iconos_cont.cart .cant_items {
  position: static;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  display: inline-block;
  box-sizing: content-box;
}

body #Hd .cabezal .der .iconos_cont.cart .cant_items.cifras3,
body .iconos_cont.cart .cant_items.cifras3 {
  font-size: 9px;
  padding: 0 4px;
}

body #Hd .cabezal .der .usu_cont,
body .usu_cont {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  vertical-align: middle;
}

/* Hamburger button (rendered by NavMenuClient on mobile) */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.menu-toggle::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/></svg>") no-repeat center / contain;
}

@media (min-width: 1024px) {
  .menu-toggle,
  body #Hd .cabezal .search-toggle {
    display: none !important;
  }
  /* Re-show the inline search form on desktop (replaces the overlay). */
  body #Hd .cabezal .buscador_cont,
  body #Hd .buscador_cont {
    display: flex;
  }
}

/* Hard override: force the header to the actual content height on
   anything below the desktop breakpoint, ignoring the legacy 90px.
   Also kill the inline search form on mobile (replaced by the lupa
   overlay opened from the magnifier icon). */
@media (max-width: 1023px) {
  body #Hd,
  body #Hd.conScroll,
  body #Hd.usuarios,
  body #Hd.secciones {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  body #Hd .cabezal {
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 0 !important;
  }
  body #Hd .cabezal .centrar.cen {
    height: auto !important;
    min-height: 0 !important;
  }
  body #Hd .cabezal .buscador_cont,
  body #Hd .buscador_cont {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  body #Hd .cabezal {
    padding: 0;
    min-height: var(--header-height-desktop);
  }

  body #Hd .cabezal .centrar.cen {
    display: grid;
    flex-wrap: nowrap;
    grid-template-columns: auto minmax(280px, 1fr) auto;
    grid-template-areas: "logo search actions";
    gap: 16px 24px;
    height: var(--header-height-desktop);
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  body #Hd .cabezal .menu-toggle,
  body #Hd .cabezal .logo,
  body #Hd .cabezal .der,
  body #Hd .cabezal .buscador_cont {
    flex: initial;
    order: initial;
    margin: initial;
  }
  body #Hd .cabezal .logo { grid-area: logo; }
  body #Hd .cabezal .buscador_cont { grid-area: search; }
  body #Hd .cabezal .der { grid-area: actions; }

  /* Restore .der as the grouped right-side actions container on desktop. */
  body #Hd .cabezal .der {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    grid-area: actions;
  }

  body #Hd .cabezal .logo {
    width: 160px;
    height: 60px;
  }

  body #Hd .cabezal .buscador_cont,
  body #Hd .buscador_cont {
    height: 44px;
    width: 100%;
    max-width: 720px;
    justify-self: center;
  }

  body #Hd .cabezal .der .iconos_cont,
  body .iconos_cont {
    width: 44px;
    height: 44px;
  }
}

/* ---------- Nav menu — handled by NavBar.tsx + NavDrawer.tsx --------------
   The legacy `.menu_cont` / `.custom_menu_nav` markup is no longer rendered.
   The only piece left here is the dim overlay that appears behind the mobile
   drawer, since Header.tsx renders it as a sibling element. */

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1100;
}

@media (min-width: 1024px) {
  .nav-overlay {
    display: none;
  }
}

/* ---------- Home sections -------------------------------------------------- */

.secciones_cont {
  width: 100%;
  padding: var(--space-5) 0;
}

.secciones_cont.pt0 { padding-top: 0; }
.secciones_cont.pb0 { padding-bottom: 0; }

.bannersIni .banners_cont {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bannersIni .banners_cont {
    grid-template-columns: repeat(2, 1fr);
  }
}

.categorias_ini_cont {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .categorias_ini_cont {
    grid-template-columns: 280px 1fr;
  }
}

.categorias_ini_cont .izq,
.categorias_ini_cont .der {
  width: 100%;
  float: none;
}

/* Tabs (.gm_pest_cont) */
.gm_pest_cont .pest_menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.gm_pest_cont .pest {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
}

.gm_pest_cont .pest.actual {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

/* ---------- Product grids -------------------------------------------------- */

.productos_content,
.cont_prods .productos_content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  width: 100%;
}

@media (min-width: 600px) {
  .productos_content,
  .cont_prods .productos_content {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .productos_content,
  .cont_prods .productos_content {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1440px) {
  .productos_content,
  .cont_prods .productos_content {
    grid-template-columns: repeat(5, 1fr);
  }
}

.listado_cont {
  width: 100%;
}

/* ---------- Add to cart button (overrides legacy fixed sizing) ------------- */

.btn_agregar_content {
  width: 100%;
}

.btn_agregar_content .agregar_carro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn_agregar_content .agregar_carro:hover {
  background: var(--color-primary-dark);
}

/* ---------- Footer -------------------------------------------------------- */

#Ft {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-6) 0 var(--space-5);
  margin-top: var(--space-7);
}

#Ft a {
  color: inherit;
  text-decoration: none;
}

#Ft a:hover {
  color: #fff;
  text-decoration: underline;
}

#Ft .sup {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  flex-wrap: wrap;
}

@media (min-width: 600px) {
  #Ft .sup {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  #Ft .sup {
    grid-template-columns: repeat(4, 1fr);
  }
}

#Ft .bloque h4,
#Ft .bloque .titulo {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-3);
  color: #fff;
}

#Ft .bloque ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#Ft .bloque li {
  margin-bottom: var(--space-2);
  font-size: 14px;
}

#Ft .inf {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
}

#Ft .social_cont {
  display: inline-flex;
  gap: var(--space-2);
}

#Ft .social_cont .iconos.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

#Ft .social_cont .iconos.social:hover {
  background: rgba(255, 255, 255, 0.18);
  text-decoration: none;
}

/* ---------- Cart sidebar -------------------------------------------------- */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay);
}

.cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 420px;
  background: #fff;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.cart-close {
  border: 0;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

.cart-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-6) 0;
}

.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}

.cart-item-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}

.cart-item-name {
  font-size: 13px;
  text-decoration: none;
  color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-item-price {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
}

.cart-item-remove {
  border: 0;
  background: transparent;
  color: var(--color-danger);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
}

.cart-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.cart-total-price {
  color: var(--color-primary);
}

.cart-checkout-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: var(--space-2);
}

.cart-checkout-btn:hover {
  background: var(--color-primary-dark);
}

/* ---------- Floating buttons --------------------------------------------- */

.whatsapp-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  z-index: var(--z-modal);
}

.scroll-to-top {
  position: fixed;
  right: 16px;
  bottom: 80px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: var(--z-modal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .whatsapp-float { right: 24px; bottom: 24px; }
  .scroll-to-top  { right: 24px; bottom: 88px; }
}

/* ---------- Form helpers (legacy .form_grupo, used by checkout, etc.) ----- */

.form_grupo {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
  width: 100%;
}

.form_grupo > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.form_grupo > input,
.form_grupo > textarea,
.form_grupo > select {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form_grupo > input:focus,
.form_grupo > textarea:focus,
.form_grupo > select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(1, 82, 111, 0.15);
}

/* Tame any leftover MDL button used by old templates */
.mdl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-primary);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
}

.mdl-button:hover {
  background: var(--color-primary-dark);
}

/* ---------- Search overlay (Apple-style) ---------------------------------
   Triggered by the magnifier icon on mobile. Slides down from the top with
   a backdrop, big input, and a quick links list. */

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 2000;
  animation: chaman-fade-in 0.18s ease-out;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}

@keyframes chaman-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes chaman-slide-down {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.search-overlay-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: #fff;
  padding: 56px 20px 28px;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  animation: chaman-slide-down 0.22s ease-out;
}

.search-overlay-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.search-overlay-close:hover {
  background: var(--color-bg-muted);
}

.search-overlay-form {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--color-primary);
  padding: 6px 0 8px;
  margin-bottom: 22px;
}

.search-overlay-form::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background-color: var(--color-text-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>") no-repeat center / contain;
}

.search-overlay-form input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 22px;
  font-weight: 500;
  background: transparent;
  color: var(--color-text);
  padding: 4px 0;
}

.search-overlay-form input::placeholder {
  color: var(--color-text-muted);
  font-weight: 400;
}

.search-overlay-quick-title {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.search-overlay-quick ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-overlay-quick li {
  border-radius: 6px;
}

.search-overlay-quick li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
}

.search-overlay-quick li a::before {
  content: "→";
  color: var(--color-text-muted);
  font-weight: 600;
}

.search-overlay-quick li a:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .search-overlay-panel {
    padding: 64px 32px 32px;
  }
  .search-overlay-form input {
    font-size: 28px;
  }
}