/* ============================================================
   10. INTRO DA LOJA
   ============================================================ */
.aly-shop-intro{ padding:30px 0 34px; }
.aly-search-results-heading{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:20px; font-family:var(--ff-display); font-weight:400;
  margin-bottom:20px;
}
.aly-search-results-heading b{ color:var(--gold-600); font-style:italic; }
.aly-search-results-heading a{
  font-family:var(--ff-body); font-size:12px; font-weight:600; color:var(--ink-450);
  text-decoration:underline; margin-left:4px;
}
@media(max-width:720px){
  .aly-shop-intro{ padding:32px 0 24px; }
}

/* ============================================================
   11. BUSCA
   ============================================================ */
.aly-search{ position:relative; margin-top:32px; }
.aly-search__box{
  display:flex; align-items:center; gap:14px;
  background:var(--white); border:1.5px solid var(--ink-200);
  border-radius:var(--radius-full); padding:0 24px; height:64px;
  transition:border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.aly-search__box:focus-within{
  border-color:var(--gold-400);
  box-shadow:0 0 0 4px var(--gold-50);
}
.aly-search__box .aly-ico{ color:var(--ink-450); }
.aly-search__box input{
  flex:1; font-size:var(--fs-14); color:var(--ink); height:100%;
}
.aly-search__box input::placeholder{ color:var(--ink-450); }
.aly-search__clear{
  width:28px; height:28px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--ink-100); color:var(--ink-700); opacity:0; pointer-events:none;
  transition:opacity var(--dur-hover) var(--ease);
}
.aly-search__clear.is-visible{ opacity:1; pointer-events:all; }

.aly-search__suggest{
  position:absolute; left:0; right:0; top:calc(100% + 10px);
  background:var(--white); border:1px solid var(--ink-100);
  border-radius:var(--radius-m); box-shadow:0 20px 48px rgba(21,21,21,.10);
  padding:10px; z-index:59;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease);
}
.aly-search__suggest.is-open{ opacity:1; transform:translateY(0); pointer-events:all; }
.aly-search__suggest-label{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-450); padding:10px 12px 6px;
}
.aly-search__suggest-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--radius-s); font-size:var(--fs-14);
  transition:background var(--dur-hover) var(--ease);
}
.aly-search__suggest-item:hover, .aly-search__suggest-item.is-active{ background:var(--gold-50); }
.aly-search__suggest-item .aly-ico{ width:16px; height:16px; color:var(--gold-600); }
.aly-search__suggest-item small{ color:var(--ink-450); font-weight:400; }

/* ============================================================
   12. CHIPS DE QUEIXA — "o que você quer resolver hoje?"
   ============================================================ */
.aly-chips-wrap{ margin-top:28px; }
.aly-chips-label{ font-size:var(--fs-12); color:var(--ink-450); margin-bottom:12px; font-weight:600; letter-spacing:.02em; text-align:center; }
.aly-chips{
  display:flex; gap:10px;
}
.aly-chip{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:var(--radius-full);
  border:none; background:#f4f4f4;
  font-size:var(--fs-14); color:var(--ink-700); text-align:center;
  transition:background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.aly-chip .aly-ico{ width:16px; height:16px; flex-shrink:0; }
.aly-chip:hover{ background:#e9e9e9; color:var(--ink); }
.aly-chip.is-active{
  background:var(--ink); color:var(--white);
}
.aly-chip.is-active .aly-ico{ color:var(--gold-400); }
@media(max-width:720px){
  .aly-chips{ overflow-x:auto; padding-bottom:4px; scrollbar-width:none; gap: 4px; }
  .aly-chips::-webkit-scrollbar{ display:none; }
  .aly-chip{ flex:0 0 auto; white-space:nowrap; padding:8px 16px; }
}

/* ============================================================
   13. LAYOUT DA LOJA — filtros + grid
   ============================================================ */
.aly-shop-main{
  display:grid; grid-template-columns:260px 1fr; gap:48px;
  padding:48px 0 var(--sec-pad);
  align-items:start;
}
@media(max-width:1024px){
  .aly-shop-main{ grid-template-columns:1fr; padding:32px 0 var(--sec-pad-m); }
}

/* ---------- filtros (desktop: coluna | mobile: drawer) ---------- */
.aly-filters{
  position:sticky; top:calc(var(--sticky-h, 160px) + 24px);
}
@media(max-width:1024px){
  .aly-filters{ display: none; }
}
.aly-filters__group{ border-bottom:1px solid var(--ink-100); padding:20px 0; }
.aly-filters__group:first-child{ padding-top:0; }
.aly-filters__group:last-child{ padding-bottom:0; border-bottom:none; }
.aly-filters__group-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left;
  cursor:pointer; font-size:var(--fs-14); font-weight:600;
}
.aly-filters__group-head .aly-ico{
  width:14px; height:14px; transition:transform var(--dur-ui) var(--ease); color:var(--ink-450);
  flex-shrink:0;
}
.aly-filters__count{
  display:none; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:8px;
  border-radius:var(--radius-full); background:var(--ink); color:var(--white);
  font-size:10px; font-weight:600; line-height:1; vertical-align:middle;
}
.aly-filters__count.is-visible{ display:inline-flex; }
.aly-filters__group.is-open .aly-filters__group-head .aly-ico{ transform:rotate(90deg); }
.aly-filters__group-body{
  display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start;
  max-height:0; opacity:0; margin-top:0; overflow-y:auto;
  transition:max-height var(--dur-ui), opacity var(--dur-ui), margin var(--dur-ui);
}
.aly-filters__group.is-open .aly-filters__group-body{ max-height:250px; opacity:1; margin-top:14px; }

.aly-filters__group-body::-webkit-scrollbar{ width:0px; }

.aly-filter-opt{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:var(--radius-full);
  border:1.5px solid var(--ink-200); background:var(--white);
  font-size:13px; color:var(--ink-700); cursor:pointer; user-select:none;
  transition:border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.aly-filter-opt:hover{ border-color:var(--gold-400); color:var(--ink); }
.aly-filter-opt.is-active{
  background:var(--ink); border-color:var(--ink); color:var(--white);
}

.aly-filters__clear{
  margin-top:18px; font-size:var(--fs-12); font-weight:600; color:var(--ink-450);
  display:flex; align-items:center; gap:6px;
}
.aly-filters__clear:hover{ color:var(--danger); }

/* ---------- toolbar do grid ---------- */
.aly-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:24px; flex-wrap:wrap;
}
@media(max-width:720px){
  .aly-toolbar{ margin-top: 24px; }
}
.aly-toolbar__count{ font-size:var(--fs-14); color:var(--ink-700); }
.aly-toolbar__count b{ color:var(--ink); }
.aly-toolbar__right{ display:flex; align-items:center; gap:10px; }

.aly-select{
  position:relative; display:flex; align-items:center; gap:8px;
  padding:10px 16px; border:1.5px solid var(--ink-200); border-radius:var(--radius-full);
  font-size:var(--fs-14);
}
.aly-select select{
  appearance:none; -webkit-appearance:none; background:none; border:none;
  font-family:inherit; font-size:var(--fs-14); color:var(--ink); padding-right:4px;
}
.aly-select .aly-ico{ width:14px; height:14px; color:var(--ink-450); }

.aly-active-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;
}
.aly-active-filters:empty{ display:none; }
.aly-tag{
  display:flex; align-items:center; gap:6px;
  padding:6px 10px 6px 14px; border-radius:var(--radius-full);
  background:var(--ink); color:var(--white); font-size:12px;
}
.aly-tag button{ width:16px; height:16px; display:flex; align-items:center; justify-content:center; color:var(--white); opacity:.7; transition:opacity var(--dur-hover) var(--ease); }
.aly-tag button:hover{ opacity:1; }
.aly-tag button svg{ transform:rotate(45deg); }

/* ---------- grid de produtos ---------- */
.aly-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px 24px;
}
@media(max-width:1024px){ .aly-grid{ grid-template-columns:repeat(3, 1fr); gap:24px 16px; } }
@media(max-width:720px){ .aly-grid{ grid-template-columns:repeat(2, 1fr); gap:24px 12px; } }

.aly-card{ display:flex; flex-direction:column; }
.aly-card__media{
  position:relative; aspect-ratio:3/4; border-radius:var(--radius-m);
  overflow:hidden; /* obrigatório p/ conter o scale() no hover */
  background:var(--gold-50);
  border:1px dashed var(--gold-100);
}
.aly-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .85s cubic-bezier(0,0,.2,1);
}
.aly-card:hover .aly-card__media img{ transform:scale(1.05); }
.aly-card__ph{ /* placeholder visual enquanto não há foto real do produto */
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center; padding:16px;
  color:var(--gold-600);
}
.aly-card__ph .aly-ico{ width:34px; height:34px; opacity:.7; }
.aly-card__ph small{ font-size:10px; color:var(--gold-800); opacity:.55; word-break:break-all; }

.aly-card__badge{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:5px 10px; border-radius:var(--radius-full);
  font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  background:var(--ink); color:var(--white);
}
.aly-card__badge.is-launch{ background:var(--gold-600); }

.aly-card__quickadd{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:44px; border-radius:var(--radius-full);
  background:var(--white); color:var(--ink); font-size:13px; font-weight:600;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.aly-card:hover .aly-card__quickadd,
.aly-card__quickadd:focus-visible{ opacity:1; transform:translateY(0); }
.aly-card__quickadd:hover{ background:var(--ink); color:var(--white); }
.aly-card__quickadd .aly-ico{ width:15px; height:15px; }

.aly-card__rating{ display:flex; align-items:center; gap:6px; margin-top:14px; }
.aly-card__rating .aly-stars{ display:flex; gap:2px; }
.aly-card__rating .aly-stars svg{ width:13px; height:13px; fill:var(--ink-200); stroke:none; }
.aly-card__rating .aly-stars svg.is-filled{ fill:var(--gold-600); }
.aly-card__rating span{ font-size:11px; color:var(--ink-450); }
.aly-card__name{ font-size:var(--fs-14); font-weight:600; margin-top:4px; }
.aly-card__desc{ font-size:13px; color:var(--ink-450); margin-top:4px; line-height:1.4; }
@media(max-width:720px){
  .aly-card__desc{ font-size:11px; }
}
.aly-card__skin{ display:flex; gap:6px; margin-top:10px; }
@media(max-width:720px){
  .aly-card__skin{ gap:4px;}
}
.aly-card__skin span{
  font-size:10px; padding:3px 8px; border-radius:var(--radius-full);
  background:var(--surface); border:1px solid var(--ink-100); color:var(--ink-700);
}
.aly-card__foot{ display:flex; align-items:baseline; gap:8px; margin-top:12px; }
.aly-card__price{ font-size:var(--fs-14); font-weight:600; }
.aly-card__price-old{ font-size:var(--fs-12); color:var(--ink-450); text-decoration:line-through; }
.aly-card__installment{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:#3E7A52;
  background:#E9F4EB; padding:5px 10px; border-radius:var(--radius-full);
  margin-top:8px; width:fit-content;
}
.aly-card__installment .aly-ico{ width:12px; height:12px; color:#3E7A52; }

/* estado vazio de filtro */
.aly-empty{
  display:none; flex-direction:column; align-items:center; text-align:center;
  padding:80px 24px; gap:16px; grid-column:1/-1;
}
.aly-empty.is-visible{ display:flex; }
.aly-empty .aly-ico{ width:40px; height:40px; color:var(--ink-450); }
.aly-empty h3{ font-family:var(--ff-body); font-size:var(--fs-24); font-weight:600; }
.aly-empty p{ color:var(--ink-450); max-width:360px; }
.aly-empty button{
  margin-top:8px; padding:12px 24px; border-radius:var(--radius-full);
  background:var(--ink); color:var(--white); font-size:var(--fs-14); font-weight:600;
}

/* ---------- barra fixa inferior — único gatilho de filtros no mobile ---------- */
.aly-mobile-filterbar{ display:none; }
@media(max-width:1024px){
  .aly-mobile-filterbar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:55;
    padding:12px var(--pad-x); background:var(--white); border-top:1px solid var(--ink-100);
  }
}
.aly-mobile-filterbar__btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:48px; border-radius:var(--radius-full);
  background:var(--ink); color:var(--white); font-size:14px; font-weight:600;
  transition:background var(--dur-hover) var(--ease);
}
.aly-mobile-filterbar__btn:hover{ background:var(--gold-800); }
.aly-mobile-filterbar__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-full);
  background:var(--gold-600); color:var(--white); font-size:10px; font-weight:600;
}
.aly-mobile-filterbar__count:empty, .aly-mobile-filterbar__count[data-zero]{ display:none; }

/* ---------- drawer de filtros mobile — bottom-sheet, sobe de baixo pra cima ---------- */
.aly-filters-drawer{
  position:fixed; left:0; right:0; bottom:0; top:auto;
  max-height:82svh; width:100%;
  background:var(--white); z-index:80; transform:translateY(100%);
  transition:transform var(--dur-ui) var(--ease); display:flex; flex-direction:column;
  border-radius:var(--radius-l) var(--radius-l) 0 0;
  box-shadow:0 -24px 60px rgba(21,21,21,.14);
}
.aly-filters-drawer.is-open{ transform:translateY(0); }
.aly-filters-drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--ink-100);
  position:sticky; top:0; background:var(--white); border-radius:var(--radius-l) var(--radius-l) 0 0;
}
.aly-filters-drawer__body{ padding:28px 24px; overflow-y:auto; flex:1; }
.aly-filters-drawer__foot{ padding:16px 24px 24px; border-top:1px solid var(--ink-100); }
.aly-filters-drawer__apply{
  width:100%; padding:16px; border-radius:var(--radius-full);
  background:var(--ink); color:var(--white); font-size:var(--fs-14); font-weight:600;
}
/* espaço pra barra fixa de filtros não cobrir o fim do grid — só na Loja */
@media(max-width:1024px){ main{ padding-bottom:88px; } }