/* Velvinci Gift Finder — approved design (25-gift-finder, 2 Oct 2026). Scoped under .vg. */
.vg{--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}
.vg{container:vg / inline-size;background:var(--white);color:var(--charcoal);font-family:var(--sans);font-size:15.5px;line-height:1.6;text-align:left}
.vg *{box-sizing:border-box}
.vg [hidden]{display:none!important}
.vg h1,.vg h2,.vg h3,.vg p{margin:0}
.vg ul,.vg ol{margin:0;padding:0;list-style:none}
.vg .wrap{max-width:1290px;margin-inline:auto;padding-inline:clamp(16px,4cqw,48px)}
.vg .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cognac)}
.vg .h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.6cqw,2.9rem);line-height:1.08;color:var(--ink);text-wrap:balance}
.vg .sec{padding-block:88px}
.vg .sec.ivory{background:var(--ivory)}
.vg .sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.vg .sec-h > div{display:grid;gap:8px}
.vg .sec-h p{color:var(--stone);max-width:46ch}
.vg .crumbs{font-size:12.5px;color:var(--label);padding-block:18px}
.vg .crumbs span{color:var(--charcoal);font-weight:500}
.vg .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:2px;padding:18px 34px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;background:var(--ink);color:#fff;cursor:pointer;transition:background .25s}
.vg .btn:hover{background:#3A3A3A}
.vg .btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.vg .btn.line:hover{background:var(--ink);color:#fff}
.vg .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}

/* hero + finder */
.vg .hero{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:64px;align-items:center;padding-block:24px 88px}
.vg .hero-copy{display:grid;gap:20px;min-width:0}
.vg .hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,5.4cqw,4.6rem);line-height:1.02;color:var(--ink);text-wrap:balance}
.vg .hero h1 em{font-style:italic;color:var(--cognac)}
.vg .lead{font-size:18px;color:var(--stone);max-width:46ch}
.vg .sure{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:6px}
.vg .sure span{display:inline-flex;gap:8px;align-items:center;font-size:13.5px;color:var(--charcoal)}
.vg .sure svg{width:17px;height:17px;fill:none;stroke:var(--ok);stroke-width:1.8}
.vg .finder{background:var(--ivory);padding:32px;display:grid;gap:24px;border-radius:2px}
.vg .finder h2{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.1;color:var(--ink)}
.vg .q{display:grid;gap:10px;border:0;margin:0;padding:0;min-width:0}
.vg .q legend{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);font-weight:600;padding:0;margin-bottom:10px;display:flex;gap:10px;align-items:center}
.vg .q legend i{font-style:normal;width:20px;height:20px;border-radius:50%;border:1px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--ink)}
.vg .chips{display:flex;flex-wrap:wrap;gap:8px}
.vg .chips button{appearance:none;border:1px solid #DDD5CB;background:#fff;color:var(--charcoal);font:500 14px/1.2 var(--sans);padding:0 16px;min-height:44px;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.vg .chips button:hover{border-color:var(--ink)}
.vg .chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.vg .chips button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.vg .finder .go{width:100%;min-height:58px}
.vg .finder small{font-size:12.5px;color:var(--label);text-align:center}

/* results */
.vg .count{font-size:14px;color:var(--stone)}
.vg .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.vg .card{display:grid;gap:14px;align-content:start;min-width:0;position:relative}
.vg .card .pic{aspect-ratio:4/5;background:var(--ivory);display:flex;align-items:center;justify-content:center;position:relative;max-width:100%}
.vg .card .pic svg{width:58%}
.vg .card .match{position:absolute;top:12px;left:12px;background:#fff;color:var(--ink);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:6px 10px;border-radius:2px}
.vg .card .match.best{background:var(--ink);color:#fff}
.vg .card small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.vg .card h3{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.15;color:var(--ink)}
.vg .card .price{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.vg .card .price b{font-size:17px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.vg .card .price span{font-size:12.5px;color:var(--ok);font-weight:500}
.vg .card ul{display:grid;gap:6px;font-size:14px;color:var(--charcoal)}
.vg .card li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.vg .card li svg{width:16px;height:16px;fill:none;stroke:var(--ok);stroke-width:1.8;margin-top:3px}
.vg .card .btn{width:100%;padding:15px 20px}
.vg .empty{background:var(--ivory);padding:40px;text-align:center;display:grid;gap:12px;justify-items:center}
.vg .empty h3{font-family:var(--serif);font-weight:500;font-size:28px;color:var(--ink)}
.vg .empty p{color:var(--stone);max-width:48ch}

/* order by */
.vg .orderby{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:64px;align-items:start}
.vg .orderby-copy{display:grid;gap:14px}
.vg .orderby-copy p{color:var(--stone);max-width:48ch}
.vg .cal{background:#fff;border:1px solid var(--mist);padding:28px;display:grid;gap:18px}
.vg .cal label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);font-weight:600}
.vg .cal input[type=date]{width:100%;height:52px;border:1px solid #DDD5CB;border-radius:2px;padding:0 14px;font:16px var(--sans);color:var(--ink);background:#fff}
.vg .answer{border-top:1px solid var(--mist);padding-top:18px;display:grid;gap:6px}
.vg .answer small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cognac);font-weight:600}
.vg .answer b{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.05;color:var(--ink)}
.vg .answer p{font-size:14px;color:var(--stone)}
.vg .answer.late b{color:#A23B2A}

/* gifting promises */
.vg .gifting{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.vg .gift{border-top:2px solid var(--ink);padding-top:18px;display:grid;gap:8px;align-content:start}
.vg .gift svg{width:26px;height:26px;fill:none;stroke:var(--cognac);stroke-width:1.4}
.vg .gift h3{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink);line-height:1.2}
.vg .gift p{font-size:14.5px;color:var(--stone)}

/* recipients */
.vg .who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vg .who a{position:relative;aspect-ratio:16/9;background:var(--charcoal);color:#fff;display:flex;align-items:flex-end;padding:28px;overflow:hidden;max-width:100%}
.vg .who a.her{background:#9A6B4F}
.vg .who a svg.art{position:absolute;right:6%;top:12%;height:76%;opacity:.35}
.vg .who b{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3cqw,2.4rem);line-height:1.05;position:relative}
.vg .who span{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:8px;opacity:.85;font-family:var(--sans)}

/* faq + band */
.vg .faqwrap{display:grid;grid-template-columns:360px minmax(0,1fr);gap:64px}
.vg .faq details{border-bottom:1px solid var(--mist)}
.vg .faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink);position:relative}
.vg .faq summary::-webkit-details-marker{display:none}
.vg .faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-family:var(--sans);font-weight:300;font-size:26px;color:var(--stone)}
.vg .faq details[open] summary::after{content:"–"}
.vg .faq details p{padding:0 0 20px;color:var(--stone);max-width:62ch}
.vg .end{background:var(--ink);color:#EDE8E1}
.vg .end .wrap{display:grid;grid-template-columns:1fr auto;gap:24px 48px;align-items:center;padding-block:72px}
.vg .end h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.6cqw,3rem);line-height:1.05;color:#fff}
.vg .end p{margin-top:10px;color:#B8B0A6;max-width:52ch}
.vg .end .btn{background:#fff;color:var(--ink);min-width:220px}
.vg .end .btn:hover{background:var(--ivory)}

/* ============================ PHONE ============================ */
@container vg (max-width:900px){
  .vg .hero{grid-template-columns:1fr;gap:28px;padding-block:8px 48px}
  .vg .hero h1{font-size:44px}
  .vg .lead{font-size:16.5px}
  .vg .finder{padding:24px 16px;margin-inline:calc(-1 * clamp(16px,4cqw,48px))}
  .vg .finder h2{font-size:26px}
  .vg .sec{padding-block:48px}
  .vg .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .vg .card h3{font-size:19px}
  .vg .card ul{font-size:13px}
  .vg .card .btn{padding:13px 10px;font-size:12px;letter-spacing:.08em;min-height:44px}
  .vg .orderby{grid-template-columns:1fr;gap:24px}
  .vg .cal{padding:20px 16px}
  .vg .answer b{font-size:30px}
  .vg .gifting{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .vg .gift h3{font-size:19px}
  .vg .gift p{font-size:13.5px}
  .vg .who{grid-template-columns:1fr;gap:12px}
  .vg .who a{aspect-ratio:2/1;padding:20px}
  .vg .faqwrap{grid-template-columns:1fr;gap:16px}
  .vg .end .wrap{grid-template-columns:1fr;padding-block:48px}
  .vg .end .btn{width:100%;min-height:57px}
}
@media (prefers-reduced-motion:reduce){.vg *{transition:none!important}}
/* website: shields against Kadence global link, button, form and heading styles */
.vg a,.vg a:hover,.vg a:focus{text-decoration:none}
.vg a:not(.btn){color:inherit}
.vg :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.vg h1,.vg h2,.vg h3{text-transform:none;letter-spacing:normal}
.vg fieldset{border:0;margin:0;padding:0;min-width:0}
.vg legend{float:none;width:auto}
.vg .chips button,.vg .chips button:hover,.vg .chips button:focus{box-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;font-family:var(--sans)}
.vg .chips button:not([aria-pressed="true"]):hover{background:#fff;color:var(--charcoal)}
.vg .chips button[aria-pressed="true"],.vg .chips button[aria-pressed="true"]:hover{background:var(--ink);color:#fff}
.vg .btn,.vg .btn:hover,.vg .btn:focus{box-shadow:none;text-decoration:none;font-family:var(--sans)}
.vg .btn{color:#fff}
.vg .btn.line{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.vg .btn.line:hover{color:#fff}
.vg .end .btn,.vg .end .btn:hover{color:var(--ink)}
.vg .card .pic{overflow:hidden}
.vg .card .pic img{width:100%;height:100%;object-fit:cover;display:block}
.vg .card .price b{display:inline-flex}
.vg .card .price del{color:var(--label);font-weight:400;margin-right:6px}
.vg .card .price ins{text-decoration:none}
.vg .cal input[type=date]{box-shadow:none;line-height:normal;margin:0}
.vg .faq summary{text-transform:none;letter-spacing:normal}
.vg .card[hidden],.vg .grid[hidden]{display:none!important}
/* "Order by": gift days by country (owner idea, approved 2 Oct 2026) */
.vg .cal label{display:block}
.vg .cal select{width:100%;height:52px;border:1px solid #DDD5CB;border-radius:2px;padding:0 40px 0 14px;font:16px var(--sans);color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px;appearance:none;-webkit-appearance:none;margin-top:8px;box-shadow:none;line-height:normal}
.vg .events{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vg .events button{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:58px;padding:8px 14px;text-align:left;line-height:1.25}
.vg .events button small{font-size:12px;font-weight:400;color:var(--stone)}
.vg .events button[aria-pressed="true"] small{color:#D8D1C8}
.vg .evnote{font-size:12.5px;color:var(--label);margin-top:-6px}
@container vg (max-width:900px){ .vg .events{grid-template-columns:repeat(2,minmax(0,1fr))} }