/* =========================================================================
   AZORSOUL · Loja (store.html)
   Depende dos tokens de brand.css e das primitivas de main.css.
   ========================================================================= */

.store-head { padding-bottom: var(--space-l); }
.store { padding-top: var(--space-l); }

/* Layout: filtros em cima (barra), grelha por baixo */
.store-layout { display: block; }

/* ---- Filtros (barra horizontal, por baixo do título) ---------------- */
.store-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-m) var(--space-2xl);
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--c-line);
}
.filter-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .9rem; }
.filter-group__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--c-secondary-800);
  flex-basis: 100%;                /* título ocupa a linha; opções fluem por baixo em linha */
  text-align: center;
  margin-bottom: var(--space-3xs);
}
.filter-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--step-0);
  color: var(--text-soft);
  cursor: pointer;
}
.filter-check input {
  width: 18px; height: 18px;
  accent-color: var(--c-primary);
  cursor: pointer;
}
.filter-check:hover { color: var(--text); }

/* Categorias como círculos (placeholder p/ ícone/ilustração/foto) em linha */
.cat-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.85rem, 2.5vw, 1.75rem);
}
.cat-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  width: 108px;
  text-align: center;
  cursor: pointer;
}
.cat-pick input {                 /* checkbox escondido (mantém a lógica do filtro) */
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.cat-pick__circle {
  display: grid;
  place-items: center;
  width: clamp(76px, 9vw, 100px);
  aspect-ratio: 1;
  border-radius: 999px 999px 22px 22px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(38,41,15,.12);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cat-pick__circle img { width: 100%; height: 100%; object-fit: cover; }
.cat-pick__circle .cat-pick__icon {
  width: 52%; height: 52%; object-fit: contain;
  filter: brightness(0) invert(1);
}
.cat-pick__name {
  font-size: var(--step--1);
  line-height: 1.2;
  color: var(--text-soft);
}
.cat-pick:hover .cat-pick__circle { transform: translateY(-2px); }
.cat-pick input:checked ~ .cat-pick__circle { outline-color: var(--c-primary); }
.cat-pick input:checked ~ .cat-pick__name { color: var(--c-primary); font-weight: 700; }
.cat-pick input:focus-visible ~ .cat-pick__circle { outline-color: var(--c-primary); }
/* "Limpar filtros" na mesma linha dos círculos, encostado à direita */
.cat-picker .filter-clear { flex-basis: 100%; margin-top: var(--space-3xs); }

.filter-clear {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-primary);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.filter-clear:hover { color: var(--c-primary-300); }

/* Slider duplo de preço (dois inputs sobrepostos) */
.price-slider { position: relative; height: 30px; width: clamp(180px, 22vw, 240px); }
.price-slider__track,
.price-slider__range {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
  pointer-events: none;
}
.price-slider__track { left: 0; right: 0; background: var(--c-line); }
.price-slider__range { background: var(--c-primary); }
.price-slider input[type="range"] {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0;
  background: none;
  pointer-events: none;      /* só os thumbs recebem eventos */
  -webkit-appearance: none;
  appearance: none;
}
.price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-primary);
  border: 2px solid #fff;
  box-shadow: var(--shadow-s);
  cursor: pointer;
}
.price-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-primary);
  border: 2px solid #fff;
  box-shadow: var(--shadow-s);
  cursor: pointer;
}
.price-slider input[type="range"]::-webkit-slider-runnable-track { background: none; }
.price-slider input[type="range"]::-moz-range-track { background: none; }
.price-readout {
  font-size: var(--step--1);
  color: var(--text-soft);
  white-space: nowrap;
}

/* ---- Resultados (quase de margem a margem) -------------------------- */
.store-results {
  width: 100vw;
  margin-inline: calc(50% - 50vw);       /* full-bleed dentro do .container */
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.store-results__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-m);
  min-height: 1.5rem;
}
.store-count { font-size: var(--step--1); color: var(--text-muted); text-align: center; }

/* nomes de categoria na frase "A ver…": sublinhados, hover a bold + × p/ remover */
.cat-chip { position: relative; white-space: nowrap; }
.cat-chip__name {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--c-primary);
}
.cat-chip:hover .cat-chip__name { font-weight: 700; }
/* × sempre visível, com área de toque >= 24px (WCAG 2.5.8) */
.cat-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: .15em;
  vertical-align: middle;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-primary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cat-chip__x svg { display: block; width: 10px; height: 10px; }
.cat-chip__x:hover,
.cat-chip__x:focus-visible { background: var(--c-primary); color: #fff; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.store-empty { margin-top: var(--space-l); color: var(--text-soft); }

/* Card de produto */
.product { position: relative; animation: product-in .5s var(--ease-out) both; }
@keyframes product-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .product { animation: none; } }
.product__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 6px 6px;   /* topo completamente redondo */
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.product__media img { width: 100%; height: 100%; object-fit: cover; }
/* foto do produto a preencher o card, por baixo do link/tags */
.product__photo { position: absolute; inset: 0; }
/* link sobre a imagem (fica por baixo das tags/botões, que continuam clicáveis) */
.product__media-link { position: absolute; inset: 0; z-index: 1; }
/* favoritos: coração no canto superior direito */
.wish {
  position: absolute;
  top: .9rem; right: .9rem;
  z-index: 4;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(247,245,236,.85);
  color: var(--c-primary);
  cursor: pointer;
  box-shadow: var(--shadow-s);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wish:hover { background: var(--c-paper); }
.wish:active { transform: scale(.86); }
.wish.is-active { background: var(--a-terracotta); color: #fff; }
.product__name a { color: inherit; text-decoration: none; }
.product__name a:hover { color: var(--c-primary-300); }

/* Tags (novo / bestseller) — fora do media, por cima do card (não cortadas) */
.product__tags {
  position: absolute;
  top: .9rem; left: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  z-index: 4;
}
.tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .4em .85em;
  border-radius: 4px;   /* mais quadradinhas */
  color: #fff;
  background: var(--c-primary-900);
  line-height: 1;
}
.tag--novo       { background: var(--c-primary); }
.tag--bestseller { background: var(--a-ember); color: var(--c-primary-900); }
.tag--desconto   { background: var(--a-terracotta); }

/* Info: nome + preço na mesma linha, sempre visível por baixo da foto */
.product__info {
  margin-top: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-align: left;
}
.product__kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-secondary);
  font-weight: 600;
}
.product__kicker-icon { width: 16px; height: 16px; object-fit: contain; flex: none; }
.product__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: var(--lh-snug);
  color: var(--c-primary);
  text-transform: none;
  letter-spacing: 0;
}
.product__price { white-space: nowrap; color: var(--text-soft); font-size: var(--step-0); }
.product__price s { color: var(--text-muted); margin-right: .35em; }
.product__price b { font-weight: 700; color: var(--a-terracotta); }

/* Ações sobre o fundo da foto, alinhadas em baixo (aparecem no hover) */
.product__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(20,26,8,.55), transparent 50%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.product__actions {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  gap: .5rem;
  padding: clamp(.5rem, 1.2vw, .8rem);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--store {
  flex: 1;
  justify-content: center;
  text-align: center;
  padding: .6em .7em;
  font-size: .78rem;
  line-height: 1.15;
}
/* botão fantasma legível sobre a foto */
.product__actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,.8); background: transparent; }
.product__actions .btn--ghost:hover { background: #fff; color: var(--c-primary); border-color: #fff; }
.btn--cart.is-added { background: var(--c-primary) !important; color: var(--c-paper) !important; border-color: var(--c-primary) !important; }

@media (hover: hover) {
  .product:hover .product__actions { opacity: 1; transform: none; }
  .product:hover .product__media::after { opacity: 1; }
}
/* Toque: mostra sempre os botões e o esbatimento */
@media (hover: none) {
  .product__actions { opacity: 1; transform: none; }
  .product__media::after { opacity: 1; }
}

/* ---- Responsivo ----------------------------------------------------- */
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .product-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Coleção de Verão — selo + filtro por arcos coloridos
   ========================================================================= */
.tag--colecao { background: #cf7a34; color: #fff; }

.filter-group__hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  margin-left: .45rem;
}

.col-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.85rem, 2.5vw, 1.75rem);
  align-items: flex-start;
}
.col-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 92px;
  text-align: center;
  cursor: pointer;
}
.col-pick input {          /* checkbox escondido (mantém a lógica do filtro) */
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.col-pick__arch {
  width: clamp(50px, 6vw, 64px);
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 6px 6px;   /* arco no topo, como os cards */
  background: var(--c, var(--c-primary));
  box-shadow: inset 0 0 0 1px rgba(38,41,15,.14);
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.col-pick__name { font-size: var(--step--1); line-height: 1.2; color: var(--text-soft); }
.col-pick:hover .col-pick__arch { transform: translateY(-2px); }
.col-pick input:checked ~ .col-pick__arch { outline-color: var(--c-primary); }
.col-pick input:checked ~ .col-pick__name { color: var(--c-primary); font-weight: 700; }
.col-pick input:focus-visible ~ .col-pick__arch { outline-color: var(--c-primary); }

.col-picker .filter-clear { flex-basis: 100%; margin-top: var(--space-3xs); }

/* etiqueta "novidade" na coleção de Verão (filtro) */
.col-pick__badge { display: inline-block; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #cf7a34; }

/* banner horizontal de destaque (placeholder) no topo da loja */
.store-banner {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 5;
  margin-bottom: var(--space-l);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-muted);
  background:
    repeating-linear-gradient(45deg, rgba(65,76,10,.05) 0 14px, rgba(65,76,10,.02) 14px 28px),
    var(--c-secondary-100);
  box-shadow: inset 0 0 0 1px var(--c-line);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.store-banner:hover { box-shadow: inset 0 0 0 1px var(--c-primary-300); }
.store-banner__label {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .12em;
}
@media (max-width: 640px) { .store-banner { aspect-ratio: 3 / 2; } }

/* ícone de folha acima do título da loja */
.store-head__icon { display: block; width: auto; height: clamp(44px, 7vw, 68px); margin: 0 auto var(--space-s); }