/* Shop archive, ported from the canvas.
   Source: assets/html/all-pages-v2/Shop Page.dc.html */

.mf-arch-inner{max-width:1340px;margin:0 auto}
.mf-arch-top{padding:60px 40px 40px}
.mf-arch-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px;align-items:end;margin-top:26px}
.mf-arch-eyebrow{
  display:inline-block;font-family:'DM Mono',monospace;font-size:11px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--mf-accent);
}
.mf-arch-top h1{
  margin:16px 0 0;font-size:clamp(46px,6vw,84px);line-height:0.93;
  font-weight:900;letter-spacing:-0.035em;
}
.mf-arch-head p{
  margin:0;max-width:420px;font-size:17px;line-height:1.55;
  color:rgba(244,237,225,0.65);text-wrap:pretty;
}
.mf-arch-rule{
  margin-top:40px;height:10px;
  background:repeating-linear-gradient(90deg,var(--mf-accent) 0 18px,#14100E 18px 24px,#1E6B4F 24px 42px,#B81D24 42px 48px);
}

.mf-arch-grid-wrap{padding:0 40px 96px}
.mf-arch-layout{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:48px;align-items:start}
.mf-arch-aside{position:sticky;top:98px;display:flex;flex-direction:column;gap:32px}
.mf-arch-aside h3{
  margin:0 0 14px;font-family:'DM Mono',monospace;font-size:10.5px;
  letter-spacing:0.18em;text-transform:uppercase;color:rgba(244,237,225,0.45);
}
.mf-arch-sides{display:flex;flex-direction:column;gap:8px}
.mf-arch-side{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:11px 15px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;
  text-align:left;transition:all .2s ease;
  border:1px solid rgba(244,237,225,0.16);background:none;color:rgba(244,237,225,0.7);
}
.mf-arch-side.is-active{
  border-color:var(--mf-accent);
  background:color-mix(in srgb, var(--mf-accent) 14%, transparent);
  color:#F4EDE1;
}
.mf-arch-n{font-family:'DM Mono',monospace;font-size:11.5px;opacity:0.6}
.mf-arch-pills{display:flex;flex-wrap:wrap;gap:8px}
.mf-arch-pill{
  padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:700;cursor:pointer;
  transition:all .2s ease;
  border:1px solid rgba(244,237,225,0.18);background:none;color:rgba(244,237,225,0.65);
}
.mf-arch-pill.is-active{border-color:var(--mf-accent);background:var(--mf-accent);color:#14100E}
.mf-arch-note{padding:22px;border-radius:18px;background:#1E6B4F}
.mf-arch-note-t{
  font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(220,243,230,0.8);
}
.mf-arch-note p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:#F4EDE1}

.mf-arch-bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid rgba(244,237,225,0.14);
}
.mf-arch-count{
  font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:rgba(244,237,225,0.5);
}
.mf-arch-sorts{display:flex;gap:6px}
.mf-arch-sort{
  padding:9px 16px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:0.03em;
  cursor:pointer;transition:all .2s ease;
  border:1px solid rgba(244,237,225,0.16);background:none;color:rgba(244,237,225,0.55);
}
.mf-arch-sort.is-active{
  border-color:color-mix(in srgb, var(--mf-accent) 60%, transparent);
  background:color-mix(in srgb, var(--mf-accent) 14%, transparent);
  color:var(--mf-accent);
}

.mf-arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.mf-arch-card{
  display:flex;flex-direction:column;background:#1C1714;
  border:1px solid rgba(244,237,225,0.1);border-radius:22px;overflow:hidden;
  transition:border-color .2s ease;
}
.mf-arch-card:hover{border-color:color-mix(in srgb, var(--mf-accent) 50%, transparent)}
.mf-arch-card[hidden]{display:none}
.mf-arch-media{position:relative;aspect-ratio:1/1;background:#EAF4F8}
.mf-arch-media img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mf-arch-card:hover .mf-arch-media img{transform:scale(1.06)}
.mf-arch-badge{
  position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:999px;
  background:#14100E;color:var(--mf-accent);font-family:'DM Mono',monospace;
  font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;
}
.mf-arch-body{display:flex;flex-direction:column;gap:11px;padding:22px;flex:1}
.mf-arch-meta{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(244,237,225,0.42);
}
.mf-arch-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.mf-arch-line h3{margin:0;font-size:21px;font-weight:900;letter-spacing:-0.02em;line-height:1.1}
.mf-arch-price{font-family:'DM Mono',monospace;font-size:16px;color:var(--mf-accent)}
.mf-arch-body p{margin:0;font-size:14px;line-height:1.5;color:rgba(244,237,225,0.6);text-wrap:pretty}
.mf-arch-heat{display:flex;align-items:center;gap:9px}
.mf-arch-heat-l{
  font-family:'DM Mono',monospace;font-size:9.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(244,237,225,0.4);
}
.mf-arch-bars{display:flex;gap:3px}
.mf-arch-bars span{width:15px;height:5px;border-radius:2px}
.mf-page .mf-arch-add{
  margin-top:auto;padding:14px;border-radius:999px;background:#F4EDE1;color:#14100E;
  font-size:12.5px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;
  text-align:center;transition:background .2s ease;
}
.mf-page .mf-arch-add:hover{background:var(--mf-accent);color:#14100E}

@media (max-width:900px){
  .mf-arch-top,.mf-arch-grid-wrap{padding-left:20px;padding-right:20px}
  .mf-arch-layout{grid-template-columns:minmax(0,1fr)}
  .mf-arch-aside{position:static}
}

/* Family landing band — the editorial layer above a category's grid.
   Content is term meta, so a new family needs no code. */
.mf-fam{padding:60px 40px 0}
.mf-fam-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.mf-fam-media{border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:#1C1714}
.mf-fam-media img{width:100%;height:100%}
.mf-fam-copy p{margin:0 0 16px;font-size:18px;line-height:1.62;color:rgba(244,237,225,0.78);text-wrap:pretty}
.mf-fam-copy p:last-of-type{margin-bottom:0}
.mf-fam-note{
  margin-top:22px;padding:16px 20px;border-radius:14px;
  border-left:3px solid var(--mf-accent);background:#1C1714;
  font-size:15px;line-height:1.55;color:rgba(244,237,225,0.7);
}
@media (max-width:900px){
  .mf-fam{padding:36px 20px 0}
  .mf-fam-grid{grid-template-columns:minmax(0,1fr);gap:28px}
}