/* ── Header ────────────────────────────────────────────────────────────── */
.a-header {
  position: relative;
  z-index: var(--a-z-header);
  background: var(--a-bg);
  border-bottom: 1px solid var(--a-line);
}

@media (min-width: 1024px) {
  .a-header {
    position: sticky;
    top: 0;
  }
}

.a-header__bar {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas:
    "menu logo . actions"
    "search search search search";
  align-items: center;
  gap: var(--a-space-2) var(--a-space-2);
  padding-block: var(--a-space-2) var(--a-space-3);
}

@media (min-width: 1024px) {
  .a-header__bar {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "logo menu search actions";
    gap: var(--a-space-5);
    padding-block: var(--a-space-3);
  }
}

.a-header__logo { grid-area: logo; display: inline-flex; }

.a-header__logo img {
  width: auto;
  height: 40px;
}

@media (min-width: 1024px) {
  .a-header__logo img { height: 48px; }
}

.a-header__menu,
.a-header__menu:hover {
  grid-area: menu;
  display: inline-flex;
  align-items: center;
  gap: var(--a-space-2);
  min-height: 44px;
  padding: 0 var(--a-space-2);
  border-radius: var(--a-radius);
  color: var(--a-ink);
  font-weight: 700;
  font-size: var(--a-text-md);
  text-decoration: none;
  transition: background-color var(--a-dur) ease, transform var(--a-dur-press) var(--a-ease-out);
}

.a-header__menu:hover { background: var(--a-surface-2); }
.a-header__menu:active { transform: scale(0.97); }

.a-header__menu-label { display: none; }

@media (min-width: 1024px) {
  .a-header__menu { padding: 0 var(--a-space-3); }
  .a-header__menu-label { display: inline; }
}

/* Buscador */
.a-search {
  grid-area: search;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.a-search__input,
.a-search__input:focus {
  width: 100%;
  height: 46px;
  padding: 0 56px 0 var(--a-space-5);
  border: 1.5px solid var(--a-line-strong);
  border-radius: var(--a-radius-pill);
  background: var(--a-surface-2);
  color: var(--a-ink);
  font-family: var(--a-font);
  font-size: var(--a-text-base);
  transition: border-color var(--a-dur) ease, background-color var(--a-dur) ease;
}

.a-search__input::placeholder { color: var(--a-muted); opacity: 1; }

.a-search__input:focus {
  outline: none;
  border-color: var(--a-brand-700);
  background: var(--a-surface);
  box-shadow: 0 0 0 3px var(--a-brand-100);
}

.a-search__input::-webkit-search-cancel-button { display: none; }

.a-search__btn {
  position: absolute;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 38px;
  border-radius: var(--a-radius-pill);
  background: var(--a-brand-700);
  color: var(--a-on-primary);
  cursor: pointer;
  transition: background-color var(--a-dur) ease, transform var(--a-dur-press) var(--a-ease-out);
}

.a-search__btn:hover { background: var(--a-brand-800); }
.a-search__btn:active { transform: scale(0.94); }

.a-search.is-searching .a-search__btn { opacity: 0.75; }

/* Sugerencias (las pinta public/js/site.js con clases hdr-suggest-*) */
.a-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  padding: var(--a-space-2);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius-lg);
  background: var(--a-surface);
  box-shadow: var(--a-shadow-lg);
}

.a-suggest .hdr-suggest-item,
.a-suggest .hdr-suggest-item:hover {
  display: flex;
  align-items: center;
  gap: var(--a-space-3);
  padding: var(--a-space-2);
  border-radius: var(--a-radius);
  color: var(--a-ink);
  text-decoration: none;
}

.a-suggest .hdr-suggest-item:hover,
.a-suggest .hdr-suggest-item:focus-visible {
  background: var(--a-surface-2);
  outline: none;
}

.a-suggest .hdr-suggest-img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--a-radius-sm);
  background: #fff;
  object-fit: contain;
}

.a-suggest .hdr-suggest-info { display: grid; gap: 1px; min-width: 0; }

.a-suggest .hdr-suggest-name {
  overflow: hidden;
  font-size: var(--a-text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a-suggest .hdr-suggest-price { font-size: var(--a-text-sm); font-weight: 800; color: var(--a-brand-800); }
.a-suggest .hdr-suggest-out { font-size: var(--a-text-xs); color: var(--a-muted); }

.a-suggest .hdr-suggest-all,
.a-suggest .hdr-suggest-all:hover {
  display: block;
  margin-top: var(--a-space-1);
  padding: var(--a-space-3);
  border-top: 1px solid var(--a-line);
  font-size: var(--a-text-sm);
  font-weight: 700;
  color: var(--a-brand-700);
  text-align: center;
}

.a-suggest .hdr-suggest-empty {
  margin: 0;
  padding: var(--a-space-4);
  font-size: var(--a-text-sm);
  color: var(--a-muted);
  text-align: center;
}

/* Acciones: cuenta y carrito */
.a-header__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--a-space-1);
}

.a-hact,
.a-hact:hover {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--a-space-2);
  min-height: 44px;
  padding: 0 var(--a-space-2);
  border-radius: var(--a-radius);
  color: var(--a-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--a-dur) ease, transform var(--a-dur-press) var(--a-ease-out);
}

.a-hact:hover { background: var(--a-surface-2); }
.a-hact:active { transform: scale(0.97); }

.a-hact__text {
  display: none;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.a-hact__text small { font-size: var(--a-text-xs); color: var(--a-muted); }
.a-hact__text b { font-size: var(--a-text-md); font-weight: 700; }

.a-hact__chev { display: none; color: var(--a-muted); }

@media (min-width: 1024px) {
  .a-hact__text { display: flex; }
  .a-hact__chev { display: inline-block; }
}

.a-hact__icon { position: relative; display: inline-flex; }

.a-hact__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--a-bg);
  border-radius: var(--a-radius-pill);
  background: var(--a-offer-600);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.a-account { position: relative; }

.a-account__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: none;
  min-width: 220px;
  padding: var(--a-space-2);
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius-lg);
  background: var(--a-surface);
  box-shadow: var(--a-shadow-lg);
  transform-origin: top right;
}

.a-account.is-open .a-account__menu {
  display: grid;
  animation: a-pop var(--a-dur) var(--a-ease-out);
}

.a-account.is-open .a-hact__chev { transform: rotate(180deg); }

.a-account__menu a,
.a-account__menu a:hover,
.a-account__menu button {
  display: block;
  width: 100%;
  padding: var(--a-space-2) var(--a-space-3);
  border-radius: var(--a-radius-sm);
  color: var(--a-ink);
  font-size: var(--a-text-md);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.a-account__menu a:hover,
.a-account__menu button:hover { background: var(--a-surface-2); }
.a-account__menu form { margin-top: var(--a-space-1); padding-top: var(--a-space-1); border-top: 1px solid var(--a-line); }
.a-account__menu button { color: var(--a-offer-700); }

@keyframes a-pop {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
}

/* ── Banda de accesos rápidos ──────────────────────────────────────────── */
.a-band {
  background: var(--a-brand);
  color: var(--a-on-brand);
}

.a-band__inner {
  display: flex;
  align-items: center;
  gap: var(--a-space-2);
}

.a-band__list {
  display: flex;
  flex: 1;
  gap: var(--a-space-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.a-band__list::-webkit-scrollbar { display: none; }

.a-band__link,
.a-band__link:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--a-space-3);
  border-radius: var(--a-radius-sm);
  /* Texto oscuro sobre el azul de marca: 5,4:1 (blanco daba 2,7:1, por debajo del 4,5:1 de WCAG AA) */
  color: var(--a-on-brand);
  font-size: var(--a-text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--a-dur) ease;
}

/* Activo/hover con fondo más claro: el texto oscuro gana contraste en ambos temas */
.a-band__link:hover,
.a-band__link[aria-current="page"] { color: var(--a-on-brand); background: rgb(255 255 255 / .3); }

.a-band__link--wa { display: none; }

@media (min-width: 768px) {
  .a-band__link--wa { display: inline-flex; }
}

.a-band :focus-visible {
  box-shadow: 0 0 0 2px var(--a-on-brand);
}

/* ── Cajón de categorías (<dialog>) ────────────────────────────────────── */
.a-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--a-z-drawer);
  width: min(380px, 88vw);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--a-ink);
}

.a-drawer::backdrop {
  background: rgba(8, 15, 26, 0.5);
}

.a-drawer[open] .a-drawer__panel {
  animation: a-drawer-in var(--a-dur-drawer) var(--a-ease-drawer);
}

.a-drawer[open]::backdrop {
  animation: a-fade-in var(--a-dur-drawer) ease;
}

@keyframes a-drawer-in {
  from { transform: translateX(-100%); }
}

@keyframes a-fade-in {
  from { opacity: 0; }
}

.a-drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--a-surface);
  box-shadow: var(--a-shadow-lg);
}

.a-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--a-space-3) var(--a-space-3) var(--a-space-3) var(--a-space-5);
  background: var(--a-brand);
  color: var(--a-on-brand);
}

.a-drawer__title { font-size: var(--a-text-xl); font-weight: 800; }

.a-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--a-on-brand);
  cursor: pointer;
}

.a-drawer__close:hover { background: rgba(255, 255, 255, 0.3); }

.a-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--a-space-2) 0 var(--a-space-8);
}

.a-drawer__list { display: grid; }

.a-drawer__item,
.a-drawer__item:hover {
  display: flex;
  align-items: center;
  gap: var(--a-space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--a-space-2) var(--a-space-5);
  border-bottom: 1px solid var(--a-line);
  color: var(--a-ink);
  font-size: var(--a-text-md);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}

.a-drawer__item::-webkit-details-marker { display: none; }
.a-drawer__item:hover { background: var(--a-surface-2); }
.a-drawer__item[aria-current="page"] { color: var(--a-brand-700); }
.a-drawer__item > .a-icon:first-child { color: var(--a-brand-700); }

.a-drawer__name { flex: 1; min-width: 0; }

.a-drawer__count {
  font-size: var(--a-text-xs);
  font-weight: 600;
  color: var(--a-muted);
}

.a-drawer__chev { color: var(--a-muted); }
.a-drawer__group[open] > summary .a-drawer__chev { transform: rotate(180deg); }

.a-drawer__avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cat, var(--a-brand)) 16%, var(--a-surface));
  color: var(--a-ink);
  font-size: var(--a-text-sm);
  font-weight: 800;
}

.a-drawer__avatar img { width: 100%; height: 100%; object-fit: cover; }
.a-drawer__avatar--icon { background: var(--a-brand-50); color: var(--a-brand-800); }

.a-drawer__sublist { background: var(--a-surface-2); }

.a-drawer__subitem,
.a-drawer__subitem:hover {
  display: block;
  padding: var(--a-space-3) var(--a-space-5) var(--a-space-3) 4.25rem;
  border-bottom: 1px solid var(--a-line);
  color: var(--a-ink-2);
  font-size: var(--a-text-md);
  text-decoration: none;
}

.a-drawer__sub {
  margin: var(--a-space-6) var(--a-space-5) var(--a-space-2);
  font-size: var(--a-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--a-muted);
}

.a-drawer__list--plain .a-drawer__item { min-height: 48px; font-weight: 500; }

/* ── Footer ────────────────────────────────────────────────────────────── */
/*
 * Estructura de la referencia del dueño, siempre clara: banda gris (surface-2)
 * con 6 accesos ilustrados, zona blanca de 3 columnas con divisores finos y
 * fila blanca de métodos de pago + copyright.
 */
.a-footer {
  margin-top: var(--a-section-gap);
  border-top: 1px solid var(--a-line);
  background: var(--a-surface);
  color: var(--a-ink-2);
}

.a-footer a:not(.a-btn):not(.a-social) { color: inherit; }

/* 1) Banda de accesos ilustrados */
.a-footer__quick { background: var(--a-surface-2); }

.a-footer__quick-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--a-space-2);
  padding-block: var(--a-space-5);
}

@media (min-width: 900px) {
  .a-footer__quick-list { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-block: var(--a-space-6); }
}

.a-footer__quick-link,
.a-footer__quick-link:hover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--a-space-2);
  height: 100%;
  padding: var(--a-space-3) var(--a-space-2);
  border-radius: var(--a-radius-lg);
  color: var(--a-surface);
  font-size: var(--a-text-sm);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  transition: background-color var(--a-dur) ease;
}

.a-footer__quick-link:hover { color: #f21364; background: var(--a-surface-2); }
.a-footer__quick-link:focus-visible { outline: none; box-shadow: var(--a-focus); }

.a-fillus {
  width: 52px;
  height: 52px;
  color: var(--a-brand-700);
  transition: transform 260ms var(--a-ease-out);
}

.a-fillus__soft { fill: var(--a-brand-50); stroke: none; }

@media (hover: hover) {
  .a-footer__quick-link:hover .a-fillus { transform: translateY(-3px); }
}

/* 2) Tres columnas con divisores verticales finos */
.a-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--a-space-8);
}

.a-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--a-space-3);
  padding-block: var(--a-space-5);
}

.a-footer__col + .a-footer__col { border-top: 1px solid var(--a-line); }

@media (min-width: 900px) {
  .a-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: var(--a-space-10); }
  .a-footer__col { padding: 0 var(--a-space-8); }
  .a-footer__col:first-child { padding-left: 0; }
  .a-footer__col:last-child { padding-right: 0; }
  .a-footer__col + .a-footer__col { border-top: 0; border-left: 1px solid var(--a-line); }
}

.a-footer__logo img { width: auto; height: 56px; }

.a-footer__text {
  max-width: 44ch;
  font-size: var(--a-text-md);
  line-height: 1.55;
  color: var(--a-ink-2);
}

.a-footer__text b,
.a-footer__visit b { color: var(--a-ink); }

.a-footer__visit {
  display: flex;
  align-items: flex-start;
  gap: var(--a-space-2);
  font-size: var(--a-text-md);
  line-height: 1.45;
}

.a-footer__visit .a-icon { margin-top: 1px; color: var(--a-brand-700); }

.a-footer__title {
  font-size: var(--a-text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--a-ink);
}

.a-footer__contact { display: grid; gap: var(--a-space-2); }

.a-footer__contact li {
  display: flex;
  align-items: center;
  gap: var(--a-space-3);
  font-size: var(--a-text-md);
}

.a-footer__contact .a-icon { color: var(--a-brand-700); }

.a-footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-weight: 700;
  color: var(--a-ink);
  text-decoration: underline;
  text-decoration-color: var(--a-line-strong);
  text-underline-offset: 3px;
}

.a-footer__contact a:hover { color: var(--a-brand-700); text-decoration-color: currentColor; }

.a-footer__ally-btn { margin-top: var(--a-space-1); }

.a-footer__sub {
  display: flex;
  flex-direction: column;
  gap: var(--a-space-2);
  width: 100%;
  margin-top: var(--a-space-3);
  padding-top: var(--a-space-4);
  border-top: 1px solid var(--a-line);
}

.a-footer__subtitle {
  font-size: var(--a-text-md);
  font-weight: 800;
  color: var(--a-ink);
}

.a-footer__social { display: flex; gap: var(--a-space-2); }

/* Cuadros de color llenos con el glifo blanco (colores propios de cada red). */
.a-social,
.a-social:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--a-radius);
  color: var(--a-on-fill);
  transition: transform var(--a-dur-press) var(--a-ease-out), box-shadow var(--a-dur) ease;
}

.a-social--tiktok { background: var(--a-paper-ink); }
.a-social--facebook { background: var(--a-facebook); }
.a-social--instagram { background: radial-gradient(circle at 30% 110%, var(--a-instagram-1) 0%, var(--a-instagram-2) 22%, var(--a-instagram-3) 50%, var(--a-instagram-4) 75%, var(--a-instagram-5) 100%); }

@media (hover: hover) {
  .a-social:hover { box-shadow: var(--a-shadow); transform: translateY(-2px); }
}

.a-social:active { transform: scale(0.94); }
.a-social:focus-visible { outline: none; box-shadow: var(--a-focus); }

/* 3) Métodos de pago y copyright */
.a-footer__pay { border-top: 1px solid var(--a-line); }

.a-footer__pay-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-space-3) var(--a-space-5);
  padding-block: var(--a-space-5);
}

.a-footer__pay-title {
  font-size: var(--a-text-md);
  font-weight: 800;
  color: var(--a-ink);
}

.a-footer__pay-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-space-2);
}

/* Tarjetas, Yape y Plin en una sola imagen, a la altura de los chips de transferencia y efectivo. */
.a-footer__pay-cards img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 100%;
}

/* Libro de Reclamaciones: al final de la franja de pagos (debajo en celular). */
.a-footer__claims {
  display: inline-flex;
  align-items: center;
  gap: var(--a-space-3);
  margin-left: auto;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius-lg);
  background: var(--a-surface);
  color: var(--a-ink);
  transition: border-color var(--a-dur) ease, box-shadow var(--a-dur) ease, transform var(--a-dur-press) var(--a-ease-out);
}

.a-footer__claims img { width: 64px; height: auto; }
.a-footer__claims span { display: grid; line-height: 1.25; }
.a-footer__claims b { font-size: var(--a-text-sm); font-weight: 800; }
.a-footer__claims small { font-size: var(--a-text-xs); color: var(--a-muted); }

@media (hover: hover) {
  .a-footer__claims:hover { border-color: #f21364; box-shadow: 0 8px 18px -12px rgb(242 19 100 / 0.6); transform: translateY(-1px); }
}

@media (max-width: 767px) {
  .a-footer__claims { margin-left: 0; }
}

.a-paymark { display: block; }

.a-paymark--text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--a-line);
  border-radius: var(--a-radius);
  background: var(--a-paper);
  font-size: var(--a-text-sm);
  font-weight: 700;
  color: var(--a-paper-ink);
}

.a-paymark--text .a-icon { color: var(--a-whatsapp); }

/* Tema oscuro: el cuadro de TikTok (casi negro) lleva un filo para no perderse en la noche. */
:root[data-theme="dark"] .a-social--tiktok { box-shadow: inset 0 0 0 1px var(--a-line-strong); }

.a-footer__bottom { border-top: 1px solid var(--a-line); }

.a-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--a-space-2);
  padding-block: var(--a-space-4);
  font-size: var(--a-text-sm);
  color: var(--a-muted);
}

.a-footer__bottom a { color: var(--a-ink-2); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .a-drawer[open] .a-drawer__panel,
  .a-drawer[open]::backdrop,
  .a-account.is-open .a-account__menu { animation: none; }
}

/* ── Esqueleto de página (layouts/app) ─────────────────────────────────── */
.store-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.store-main {
  flex: 1;
  width: 100%;
}

.store-main:focus { outline: none; }

/* ── Ayuda en la página (rutas tranquilas: checkout y cuenta, layouts/app) ── */
.a-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a-space-1) var(--a-space-2);
  margin-block: var(--a-space-8) var(--a-space-10);
  font-size: var(--a-text-md);
  color: var(--a-ink-2);
}

.a-help > .a-icon { color: var(--a-whatsapp); }

.a-help a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--a-whatsapp);
  text-decoration: underline;
  text-underline-offset: 3px;
}