/* ============================================================
   LUMÉA — catalogue & search
   Only the pieces the ported Lumea stylesheet does not cover: the
   product-card overlay link, keyboard states, variant facet rows, the
   media placeholder and the pagination disabled state. Colours come
   from the theme tokens, so all three palettes keep working.
   ============================================================ */

/* ---------- product card: media overlay ---------- */
.p-card .p-media-link{position:absolute;inset:0;z-index:1}
.p-card .p-badge{pointer-events:none}
.p-card .p-add{margin:0}
/* the quick-add bar answers the keyboard as well as the pointer */
.p-card:focus-within .p-quick{transform:none}
/* focus rings for controls whose ring the theme removes or clips */
.p-card .p-media-link:focus-visible,
.p-card .p-quick:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-4px}

/* ---------- product card: placeholder ---------- */
.p-ph{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  padding:1.5rem;background:var(--bg-tile);color:var(--ink-mute);text-align:center;
}
.p-ph::before{content:"";display:block;width:28px;height:1px;background:var(--line)}
.p-ph-cat{
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;line-height:1.9;
  max-width:90%;overflow-wrap:anywhere;
}

/* ---------- variant facets ---------- */
.filter-block .filter-opt{
  display:flex;align-items:center;gap:.6rem;
  padding:.42rem 0;font-size:.9rem;color:var(--ink-soft);
  cursor:pointer;transition:color var(--tr);
}
.filter-block .filter-opt:hover{color:var(--ink)}
.filter-block .filter-opt.is-active{color:var(--gold-deep)}
.filter-block .filter-opt input{
  width:15px;height:15px;flex:none;margin:0;
  accent-color:var(--ink);cursor:pointer;
}
.filter-block .filter-opt input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.filter-block .filter-opt-label{flex:1}
.filter-block .filter-opt-count{font-size:.72rem;color:var(--ink-mute)}
.filter-block .filter-swatch{
  width:14px;height:14px;flex:none;border-radius:50%;
  border:1px solid var(--line);background:var(--swatch,var(--white));
}
.filter-block noscript .btn{margin-top:.9rem}

/* ---------- catalogue layout ---------- */
/* the sidebar column disappears when the merchant hides every filter block */
.shop-layout.no-side{grid-template-columns:1fr}

/* ---------- toolbar controls ---------- */
.sort-select:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.chips .chip span{margin-left:.15rem;font-size:.9em}

/* ---------- search ---------- */
.search-bar button:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.search-bar input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px}

/* ---------- pagination ---------- */
.page-btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.page-btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}

/* ---------- narrow screens ---------- */
@media (max-width:620px){
  .shop-toolbar{gap:.8rem}
  .shop-toolbar .count{order:3;width:100%}
  .shop-toolbar .chips{order:4;width:100%}
  .shop-toolbar .sort-select{margin-left:auto}
  .filter-block .filter-opt{padding:.5rem 0}
  .p-ph-cat{font-size:.55rem;letter-spacing:.18em}
  .pagination{gap:.35rem;margin-top:2.4rem}
  .page-btn{min-width:40px;height:40px;font-size:.78rem}
  .page-info{width:100%;margin:0 0 .4rem;text-align:center}
  .pagination{flex-wrap:wrap}
}