/* Silvenite theme additions (not from the demo). Generated into assets/sv-custom.<hash>.css by
   tools/sv-build.mjs. Only Silvenite tokens are used here — the look stays the demo's. */

/* ---------- W3 footer: whitemoon's structure (brand + contact, 3 columns, bottom bar) ---------- */
.ftr .top.wm{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
.ftr .brandcol .tagline{font-size:14px;line-height:1.8;margin-top:28px;max-width:340px}
.ftr .contact{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.ftr .contact a{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);transition:color .2s}
.ftr .contact a:hover{color:#fff}
.ftr .contact svg{width:16px;height:16px;flex:none;margin-top:3px;color:rgba(255,255,255,.55)}
.ftr .brandcol .soc{margin-top:32px}
.ftr li a{font-size:13.5px;color:rgba(255,255,255,.65);transition:color .2s}
.ftr li a:hover{color:#fff}
.ftr details.fcol>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.ftr details.fcol>summary::-webkit-details-marker{display:none}
.ftr details.fcol>summary::marker{content:""}
.ftr details.fcol .pm{display:none;width:12px;height:12px;position:relative;flex:none}
.ftr details.fcol .pm::before,.ftr details.fcol .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.7);transition:transform .3s}
.ftr details.fcol .pm::after{transform:rotate(90deg)}
.ftr details.fcol[open] .pm::after{transform:rotate(0)}
@media (max-width:899px){
  .ftr .top.wm{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr .top.wm .brandcol{grid-column:1/-1}
}
@media (max-width:539px){
  .ftr .top.wm{grid-template-columns:minmax(0,1fr);gap:0}
  .ftr .top.wm .brandcol{padding-bottom:40px}
  .ftr details.fcol{border-top:1px solid rgba(255,255,255,.12)}
  .ftr details.fcol:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
  .ftr details.fcol>summary{pointer-events:auto;cursor:pointer;padding:20px 0}
  .ftr details.fcol>summary h5{margin:0}
  .ftr details.fcol .pm{display:block}
  .ftr details.fcol ul{padding-bottom:22px}
}
/* whitemoon's six payment names do not fit one 375px line — let them wrap (was a 37px page overflow) */
.ftr .bot .pay{flex-wrap:wrap;row-gap:8px}

/* ---------- W4 header: whitemoon's "Find our store" pin (an <a>, styled exactly like the .tools buttons) ---------- */
.tools a.store{position:relative;display:grid;place-items:center;width:24px;height:24px;color:var(--teal)}
.tools a.store svg{position:relative;z-index:1;width:24px;height:24px;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.tools a.store:hover svg,.tools a.store:focus-visible svg{transform:translateY(-1px)}
.tools a.store::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:var(--sage);opacity:0;transform:scale(.82);transition:opacity .35s,transform .35s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.tools a.store:hover::before,.tools a.store:focus-visible::before{opacity:.55;transform:scale(1)}
/* Five icons + burger + logo on phones. Measured: with the demo's flex rules the burger SHRANK to 0px
   at 375 (7px at 320) to make room, so it vanished. Burger + icons never shrink; the room comes from
   the gaps and the logo size, phone widths only:
   375: 24 + 12 + logo(18px) ~115 + 12 + icons 5x24 + 4x12 = 331 <= 335 available
   320: 24 +  6 + logo(15px)  ~80 +  6 + icons 5x24 + 4x8  = 268 <= 280 available */
@media (max-width:1100px){.hdr .burger,.hdr .tools{flex:none}.hdr .logo{min-width:0}}
@media (max-width:520px){.tools{gap:12px;padding-right:0}.hdr .logo b{font-size:18px}}
@media (max-width:374px){.tools{gap:8px}.hdr .bar{gap:6px}.hdr .logo b{font-size:15px;letter-spacing:.08em}.hdr .logo small{font-size:6px;letter-spacing:.36em}}

/* ---------- W6: products hidden — collection/product links are inert, so they must not look clickable ---------- */
[data-nolink]{cursor:default}