/* Velvinci shop + category pages — approved design (26-shop, 2 Oct 2026). Scoped under .vs. */
.vs{--ink:#111111;--charcoal:#211A14;--stone:#6B6259;--label:#8C8984;--mist:#EEE9E2;--ivory:#FAF7F2;--white:#FFFFFF;--cognac:#9A6B4F;--gold:#C9A96A;--ok:#2F7D57;--serif:"Cormorant Garamond",Garamond,Georgia,serif;--sans:"Inter","Helvetica Neue",Arial,sans-serif;--vs-top:0px}
.vs{container:vs / inline-size;background:var(--white);color:var(--charcoal);font-family:var(--sans);font-size:15px;line-height:1.6;text-align:left;position:relative}
.vs *{box-sizing:border-box}
.vs [hidden]{display:none!important}
.vs h1,.vs h2,.vs h3,.vs p{margin:0}
.vs ul{margin:0;padding:0;list-style:none}
.vs button{font:inherit;color:inherit;cursor:pointer}
.vs .wrap{max-width:1290px;margin-inline:auto;padding-inline:clamp(16px,4cqw,48px)}
.vs .crumbs{font-size:12.5px;color:var(--label);padding-top:22px}
.vs .crumbs span{color:var(--charcoal);font-weight:500}
.vs .eyebrow{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cognac);font-weight:600}

/* calm head */
.vs .head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap;padding-block:20px 28px}
.vs .head h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,3.4cqw,2.9rem);line-height:1.05;color:var(--ink)}
.vs .head p{color:var(--stone);max-width:52ch;font-size:15px;margin-top:8px}
.vs .ribbon{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:12.5px;color:var(--charcoal)}
.vs .ribbon span{display:inline-flex;gap:7px;align-items:center}
.vs .ribbon svg{width:15px;height:15px;fill:none;stroke:var(--ok);stroke-width:1.8}

/* shop by category (main shop page) */
.vs .cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-bottom:40px}
.vs .cat{display:grid;gap:10px;color:inherit;text-decoration:none}
.vs .cat .pic{aspect-ratio:4/5;background:var(--ivory);display:flex;align-items:center;justify-content:center;max-width:100%;transition:background .3s}
.vs .cat .pic svg{width:46%}
.vs .cat:hover .pic{background:#F3EEE6}
.vs .cat b{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink);line-height:1.2}
.vs .cat small{font-size:12.5px;color:var(--stone)}

/* sticky filter bar */
.vs .bar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.97);border-top:1px solid var(--mist);border-bottom:1px solid var(--mist)}
.vs .bar .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.vs .types{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding-block:10px}
.vs .types::-webkit-scrollbar{display:none}
.vs .types button{flex:none;border:1px solid transparent;background:none;border-radius:999px;padding:0 16px;min-height:40px;font-size:13.5px;color:var(--stone);white-space:nowrap}
.vs .types button:hover{color:var(--ink)}
.vs .types button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:500}
.vs .tools{display:flex;align-items:center;gap:14px;flex:none}
.vs .count{font-size:13px;color:var(--label);white-space:nowrap}
.vs .fbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);background:#fff;border-radius:2px;padding:0 16px;min-height:40px;font-size:13px;font-weight:500;color:var(--ink)}
.vs .fbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.vs .fbtn i{font-style:normal;background:var(--ink);color:#fff;border-radius:999px;font-size:11px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.vs .dens{display:flex;gap:2px}
.vs .dens button{border:0;background:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--label);border-radius:2px}
.vs .dens button[aria-pressed="true"]{color:var(--ink);background:var(--ivory)}
.vs .dens svg{width:16px;height:16px;fill:currentColor}

/* grid */
.vs .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 16px;padding-block:28px 40px}
.vs .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.vs .card{display:grid;gap:12px;align-content:start;min-width:0;position:relative}
.vs .card a{color:inherit;text-decoration:none}
.vs .card .pic{position:relative;aspect-ratio:4/5;background:var(--ivory);overflow:hidden;max-width:100%}
.vs .card .pic .im{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .45s}
.vs .card .pic .im svg{width:54%}
.vs .card .pic .im.alt{opacity:0;background:#F3EEE6}
.vs .card:hover .pic .im.alt{opacity:1}
.vs .card .tag{position:absolute;top:12px;left:12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);z-index:2}
.vs .card .heart{position:absolute;top:4px;right:4px;width:44px;height:44px;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;z-index:2}
.vs .card .heart svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:1.6}
.vs .card .heart[aria-pressed="true"] svg{fill:var(--ink)}
.vs .card .info{display:grid;gap:4px}
.vs .card h3{font-family:var(--sans);font-weight:500;font-size:14.5px;color:var(--ink);line-height:1.35}
.vs .card .price{font-size:14.5px;color:var(--charcoal);font-variant-numeric:tabular-nums}
.vs .card .dots{display:flex;gap:6px;align-items:center;margin-top:4px}
.vs .card .dots i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.vs .card .dots small{font-size:12px;color:var(--label);margin-left:2px}
.vs .grid.two .card h3{font-size:16px}
.vs .story{grid-column:span 2;background:var(--charcoal);color:#EDE6DC;display:flex;flex-direction:column;justify-content:flex-end;padding:36px;min-height:100%;aspect-ratio:auto;gap:12px;text-decoration:none}
.vs .story small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.vs .story b{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,2.6cqw,2.3rem);line-height:1.1;color:#fff;max-width:18ch}
.vs .story span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:2px}
.vs .soon{border:1px dashed #D9D0C4;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:28px;aspect-ratio:4/5}
.vs .soon b{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--ink);line-height:1.15}
.vs .soon p{font-size:13.5px;color:var(--stone)}
.vs .soon a{font-size:13px;font-weight:500;color:var(--ink);border-bottom:1px solid currentColor}
.vs .more{display:grid;justify-items:center;gap:12px;padding-bottom:64px}
.vs .more small{font-size:12.5px;color:var(--label)}
.vs .more .line{width:200px;height:2px;background:var(--mist);position:relative}
.vs .more .line i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.vs .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--ink);border-radius:2px;padding:0 34px;min-height:52px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:#fff;color:var(--ink)}
.vs .btn:hover{background:var(--ink);color:#fff}
.vs .btn.dark{background:var(--ink);color:#fff}
.vs .btn.dark:hover{background:#3A3A3A}

/* category text + FAQ + more categories */
.vs .about{background:var(--ivory);padding-block:72px}
.vs .about .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
.vs .about h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3cqw,2.5rem);line-height:1.1;color:var(--ink);margin-bottom:16px}
.vs .about .txt p{color:var(--stone);font-size:15.5px;margin-bottom:12px;max-width:60ch}
.vs .about .txt .rest[hidden]{display:none}
.vs .readmore{border:0;background:none;padding:0;font-size:13px;font-weight:500;color:var(--ink);border-bottom:1px solid currentColor}
.vs .faq details{border-bottom:1px solid #E6DED3}
.vs .faq summary{list-style:none;cursor:pointer;padding:16px 36px 16px 0;font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);position:relative}
.vs .faq summary::-webkit-details-marker{display:none}
.vs .faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-family:var(--sans);font-weight:300;font-size:24px;color:var(--stone)}
.vs .faq details[open] summary::after{content:"–"}
.vs .faq details p{padding:0 0 16px;color:var(--stone);font-size:14.5px}
.vs .also{padding-block:56px 72px}
.vs .also h2{font-family:var(--serif);font-weight:500;font-size:28px;color:var(--ink);margin-bottom:18px}
.vs .also .row{display:flex;flex-wrap:wrap;gap:10px}
.vs .also .row a{border:1px solid #DDD5CB;border-radius:999px;padding:10px 18px;font-size:14px;color:var(--charcoal);text-decoration:none}
.vs .also .row a:hover{border-color:var(--ink)}

/* filter drawer */
.vs .scrim{position:fixed;inset:0;background:rgba(17,17,17,.35);z-index:20}
.vs .drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100%;background:#fff;z-index:21;display:flex;flex-direction:column;box-shadow:-20px 0 40px rgba(0,0,0,.12)}
.vs .drawer header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--mist)}
.vs .drawer header b{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--ink)}
.vs .drawer header button{border:0;background:none;width:40px;height:40px;font-size:26px;line-height:1;color:var(--ink)}
.vs .drawer .body{flex:1;overflow:auto;padding:8px 24px 24px}
.vs .grp{border-bottom:1px solid var(--mist);padding-block:18px;display:grid;gap:12px}
.vs .grp h4{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);font-weight:600}
.vs .opts{display:flex;flex-wrap:wrap;gap:8px}
.vs .opts button{border:1px solid #DDD5CB;background:#fff;border-radius:2px;padding:0 14px;min-height:40px;font-size:13.5px;display:inline-flex;align-items:center;gap:8px}
.vs .opts button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.vs .opts button i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.vs .drawer footer{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px 24px;border-top:1px solid var(--mist)}
.vs .drawer footer .btn{min-height:54px}
.vs .clear{border:0;background:none;font-size:13.5px;text-decoration:underline;color:var(--stone);padding:0 10px}

/* ============================ PHONE ============================ */
@container vs (max-width:760px){
  .vs .head{padding-block:12px 18px}
  .vs .head h1{font-size:34px}
  .vs .ribbon{font-size:12px;gap:4px 14px}
  .vs .cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:28px}
  .vs .cat b{font-size:18px}
  .vs .bar .wrap{gap:8px;min-height:56px;padding-inline:0}
  .vs .types{padding-left:16px}
  .vs .tools{padding-right:16px}
  .vs .count,.vs .dens{display:none}
  .vs .fbtn{padding:0 12px}
  .vs .fbtn span{display:none}
  .vs .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 10px;padding-block:18px 28px}
  .vs .grid.two{grid-template-columns:1fr}
  .vs .card h3{font-size:13.5px}
  .vs .card .price{font-size:13.5px}
  .vs .story{padding:22px;grid-column:span 2}
  .vs .soon{padding:18px;aspect-ratio:4/5}
  .vs .soon b{font-size:19px}
  .vs .about{padding-block:48px}
  .vs .about .wrap{grid-template-columns:1fr;gap:32px}
  .vs .drawer{top:auto;left:0;width:auto;max-height:86%;border-radius:12px 12px 0 0}
  .vs .more .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.vs *{transition:none!important}}

/* website: type pills are real links; sticky under the site header; shields against Kadence */
.vs .types a{flex:none;border:1px solid transparent;border-radius:999px;padding:0 16px;min-height:40px;display:inline-flex;align-items:center;font-size:13.5px;color:var(--stone);white-space:nowrap;text-decoration:none}
.vs .types a:hover{color:var(--ink)}
.vs .types a[aria-current="true"]{border-color:var(--ink);color:var(--ink);font-weight:500}
.vs .bar{top:var(--vs-top)}
.vs a,.vs a:hover,.vs a:focus{text-decoration:none}
.vs :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vs h1,.vs h2,.vs h3,.vs h4{text-transform:none;letter-spacing:normal}
.vs button,.vs button:hover,.vs button:focus{box-shadow:none;text-transform:none;letter-spacing:normal;font-family:var(--sans);text-decoration:none}
.vs .fbtn:hover{background:var(--ink);color:#fff}
.vs .opts button:not([aria-pressed="true"]):hover{background:#fff;color:var(--charcoal);border-color:var(--ink)}
.vs .opts button[aria-pressed="true"]:hover{background:var(--ink);color:#fff}
.vs .heart:hover{background:none}
.vs .dens button:hover{background:var(--ivory);color:var(--ink)}
.vs .btn{text-decoration:none}
.vs .btn:hover{color:#fff}
.vs .btn.dark,.vs .btn.dark:hover{color:#fff}
.vs .clear:hover{background:none;color:var(--ink)}
.vs .card .pic,.vs .cat .pic{display:block}
.vs .card .pic img,.vs .cat .pic img{width:100%;height:100%;object-fit:cover;display:block}
.vs .cat .pic{display:flex}
.vs .cat .pic img{position:static}
.vs .card .info h3{margin:0}
.vs .card .price del{color:var(--label);margin-right:6px}
.vs .card .price ins{text-decoration:none}
.vs .story{aspect-ratio:auto}
.vs .soon.wide{grid-column:1/-1;aspect-ratio:auto;padding:48px 32px;align-items:center;text-align:center}
.vs .scrim{z-index:10000}
.vs .drawer{z-index:10001}
.vs .drawer[hidden],.vs .scrim[hidden]{display:none!important}
.vs .woocommerce-message,.vs .woocommerce-info,.vs .woocommerce-error{margin:16px 0 0;padding:12px 16px;background:var(--ivory);border-left:3px solid var(--ink);list-style:none;font-size:14px}
body.vs-lock{overflow:hidden}
.vs-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111;color:#fff;font:500 14px/1.4 "Inter","Helvetica Neue",Arial,sans-serif;padding:12px 18px;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:10002}
.vs-toast.on{opacity:1;transform:translate(-50%,0)}