:root{
  --ground:#FDF8F5; --surface:#FFFFFF; --band:#F7E6E4; --band-2:#F2DAD6;
  --ink:#3E0F27; --plum:#4A1230; --plum-2:#6B2447; --text:#2E1A24; --muted:#76626B;
  --gold:#A87B32; --gold-soft:#E9D6B0; --line:#EAD9D6; --tile:#F8EFEC;
  --ok:#2F6B4F; --shadow:0 1px 2px rgba(62,15,39,.06),0 8px 24px -12px rgba(62,15,39,.18);
  --logo:url(../images/ui/logo.webp);
  --display:"Marcellus","Cinzel","Trajan Pro",Georgia,serif;
  --script:"Cormorant Garamond","Cormorant",Georgia,serif;
  --body:"Mulish","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:14px;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--ground);color:var(--text);font:400 15px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--ink);text-wrap:balance;margin:0;letter-spacing:.01em;line-height:1.15}
.eyebrow{font:700 11.5px/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.script{font-family:var(--script);font-style:italic;font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:11px 20px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--plum);color:var(--ground)}
.btn-primary:hover{background:var(--plum-2)}
.btn-ghost{border-color:var(--line);background:var(--surface);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-wa{background:#1F7A4D;color:#fff}
.btn-wa:hover{background:#18633E}
.btn svg{width:18px;height:18px;flex:none}

/* header */
.topline{background:var(--plum);color:var(--ground);font-size:12.5px;text-align:center;padding:7px 16px;letter-spacing:.02em}
.topline b{color:var(--gold-soft);font-weight:700}


header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:20px;min-height:72px}
.logo{display:block;width:118px;height:56px;background:var(--logo) left center/contain no-repeat;flex:none}
nav.main{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.main a{text-decoration:none;font-weight:600;font-size:14px;padding:8px 12px;border-radius:999px;color:var(--text)}
nav.main a:hover{background:var(--band)}
.qbtn{position:relative}
.qcount{min-width:22px;height:22px;border-radius:11px;background:var(--gold);color:#fff;font-size:12px;display:inline-grid;place-items:center;padding:0 6px;font-variant-numeric:tabular-nums}
@media (max-width:900px){.hbar{flex-wrap:wrap;justify-content:space-between;padding-bottom:8px}nav.main{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}nav.main a{flex:none;background:var(--band);font-size:13px}.logo{width:100px;height:48px}}

/* hero */
.hero{background:linear-gradient(180deg,var(--band) 0%,var(--ground) 100%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(36px,6vw,72px)}
.hero h1{font-size:clamp(34px,5.2vw,62px);line-height:1.05}
.hero h1 .script{display:block;color:var(--gold);font-size:.8em;margin-top:6px}
.hero p.lede{font-size:17px;color:var(--muted);max-width:52ch;margin:18px 0 26px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.facts div{font-size:13px;color:var(--muted)}
.facts b{display:block;font:400 26px/1.1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.arches{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px;max-width:500px;width:100%;margin-left:auto}
.arch{background:var(--surface);border:1px solid var(--line);border-radius:999px 999px 18px 18px;display:grid;place-items:center;padding:18px;aspect-ratio:1/1.08;box-shadow:var(--shadow);overflow:hidden}
.arch img{width:100%;height:100%;object-fit:contain}
.arch.big{grid-row:span 2;aspect-ratio:auto}
.arch figcaption{font-size:12px;color:var(--muted);text-align:center}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.arches{max-width:420px;margin-inline:auto}}

/* sections */
section{padding-block:clamp(44px,6vw,80px)}
.shead{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.shead h2{font-size:clamp(28px,3.4vw,40px);margin-top:8px}
.shead p{color:var(--muted);max-width:60ch;margin:8px 0 0}

.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.path{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px}
.path h3{font-size:26px}
.path p{margin:0;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--ground);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--text);transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:var(--ground)}
@media (max-width:760px){.paths{grid-template-columns:1fr}}

/* catalogue */
#catalogue{background:var(--surface);border-block:1px solid var(--line)}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;scrollbar-width:thin}
.tab{flex:none;border:none;background:none;padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted)}
.tab span{font-weight:600;font-variant-numeric:tabular-nums;opacity:.7;margin-left:4px}
.tab[aria-selected="true"]{background:var(--band);color:var(--ink)}
.filters{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 20%,transparent)}
@media (max-width:860px){.filters{grid-template-columns:1fr 1fr}.filters .field:first-child{grid-column:1/-1}}
.occ{margin:4px 0 18px}
.resultbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;margin-bottom:14px}
.resultbar b{color:var(--ink);font-variant-numeric:tabular-nums}
.linkbtn{background:none;border:none;color:var(--plum-2);font-weight:700;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
@media (max-width:520px){.grid{grid-template-columns:1fr 1fr;gap:10px}}
.card{background:var(--ground);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:var(--gold-soft);box-shadow:var(--shadow)}
.thumb{position:relative;aspect-ratio:1/1;background:var(--tile);cursor:pointer;display:block;width:100%;border:none;padding:0}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.cut img{object-fit:contain;padding:12%}
.thumb .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px}
.badge{position:absolute;left:10px;top:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:700;padding:4px 9px;letter-spacing:.02em}
.disc{font-size:10.5px;color:var(--muted);padding:6px 12px 0;line-height:1.35}
.cbody{padding:8px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.code{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--gold);font-variant-numeric:tabular-nums}
.cname{font-weight:700;font-size:14.5px;line-height:1.35;color:var(--ink);margin:0}
.price{font-variant-numeric:tabular-nums;font-size:14px;margin-top:auto}
.price b{font-size:16px;color:var(--ink)}
.price small{color:var(--muted);display:block;font-size:12px}
.por{font-weight:700;color:var(--plum-2)}
.add{margin-top:8px;border:1px solid var(--plum);background:transparent;color:var(--plum);border-radius:999px;padding:8px 10px;font-weight:700;font-size:13px;cursor:pointer}
.add:hover{background:var(--plum);color:var(--ground)}
.add.in{background:var(--plum);color:var(--ground)}
.more{display:flex;justify-content:center;margin-top:24px}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}

/* custom */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cbox{border-top:2px solid var(--gold);padding-top:16px}
.cbox h3{font-size:20px;margin-bottom:6px}
.cbox p{margin:0;color:var(--muted);font-size:14px}
@media (max-width:900px){.cgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cgrid{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;margin-top:34px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.step{padding:22px;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step::before{counter-increment:s;content:"Step " counter(s);display:block;font:700 11px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.step h3{font-size:19px;margin-bottom:6px}
.step p{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:none}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}.step{border-right:none;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:none}}

/* enquiry */
#enquire{background:var(--band)}
.egrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start}
@media (max-width:900px){.egrid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.panel h3{font-size:22px;margin-bottom:12px}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto}
.qitem{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px}
.qitem img{width:52px;height:52px;object-fit:cover;border-radius:8px;background:var(--tile)}
.qitem .n{font-weight:700;font-size:13.5px;line-height:1.3;color:var(--ink)}
.qitem .c{font-size:11.5px;color:var(--gold);font-weight:700;letter-spacing:.06em}
.qty{display:flex;align-items:center;gap:6px}
.qty input{width:70px;border:1px solid var(--line);background:var(--ground);border-radius:8px;padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums}
.x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:4px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .full{grid-column:1/-1}
@media (max-width:520px){.form{grid-template-columns:1fr}}
.contact{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.contact code{font:600 14px var(--body);color:var(--ink);user-select:all}
.note{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.sendrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--plum);color:var(--ground);padding:10px 18px;border-radius:999px;font-weight:700;font-size:14px;z-index:90;box-shadow:var(--shadow)}

footer{background:var(--plum);color:#F6E8EC;padding-block:40px}


.fgrid{display:grid;gap:24px}
footer h4{font:700 11.5px var(--body);letter-spacing:.16em;text-transform:uppercase;color:#E9D6B0;margin:0 0 10px}
footer p,footer li{font-size:14px;color:#E3CCD6;margin:0}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
footer a{color:#F6E8EC;text-decoration:none}footer a:hover{text-decoration:underline}
.flogo{width:130px;height:62px;background:url(../images/ui/logo-light.webp) left center/contain no-repeat;margin-bottom:10px}
.fine{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);font-size:12px;color:#CDB3BF}

/* modal */
dialog{border:none;border-radius:18px;padding:0;max-width:880px;width:calc(100% - 32px);background:var(--surface);color:var(--text);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(26,8,18,.55)}
.mgrid{display:grid;grid-template-columns:1fr 1fr}
.mimg{background:var(--tile);display:flex;flex-direction:column}
.mimg img{width:100%;aspect-ratio:1/1;object-fit:contain}
.mimg .disc{padding:8px 14px 12px}
.mbody{padding:24px;display:flex;flex-direction:column;gap:12px;max-height:80vh;overflow:auto}
.mbody h3{font-size:26px}
.close{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:20px;line-height:1;color:var(--ink)}
.meta{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px;margin:0}
.meta dt{color:var(--muted)}
.meta dd{margin:0;font-weight:600}
.stable{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.stable th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
.stable td{padding:8px;border-bottom:1px solid var(--line)}
.stable td:last-child,.stable th:last-child{text-align:right}
.tablewrap{overflow-x:auto}
.callout{background:var(--band);border-radius:10px;padding:12px 14px;font-size:13.5px}
@media (max-width:700px){.mgrid{grid-template-columns:1fr}.mimg img{max-height:46vh}}
/* mega footer & seo */
.fgrid{grid-template-columns:1.3fr repeat(3,1fr)}.fgrid>div:first-child{grid-row:span 2}
@media (max-width:1000px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.social{display:flex;gap:10px;margin-top:14px}
.social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center}
.social svg{width:18px;height:18px}
.popular{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.15)}
.popular h4{margin-bottom:10px}
.popular p{line-height:2;font-size:13px}
.popular a{color:#E3CCD6;text-decoration:none;white-space:nowrap}
.popular a:hover{color:#fff;text-decoration:underline}
.popular span{opacity:.4;margin:0 8px}
.faq{display:flex;flex-direction:column;gap:10px;max-width:880px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-size:20px;line-height:1;color:var(--gold)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--muted)}
.about{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
.about p{color:var(--muted);margin:0 0 12px}
.facts2{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:0;font-size:14px}
.facts2 dt{color:var(--muted)} .facts2 dd{margin:0;font-weight:700;color:var(--ink)}
@media (max-width:800px){.about{grid-template-columns:1fr}}
.crumbs{font-size:13px;color:var(--muted);padding-top:18px}
.crumbs a{color:var(--muted)}
.lp-hero{background:linear-gradient(180deg,var(--band),var(--ground));border-bottom:1px solid var(--line);padding-block:28px 36px}
.lp-hero h1{font-size:clamp(30px,4vw,48px);margin:10px 0 12px}
.lp-hero p{color:var(--muted);max-width:75ch;margin:0 0 10px}
.card a.thumb{display:block}
.card .cname a{text-decoration:none}
.pd{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-block:28px 48px;align-items:start}
.pd .pimg{background:var(--tile);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pd .pimg img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
.pd .pimg.cover img{object-fit:cover}
.pd h1{font-size:clamp(28px,3.4vw,40px);margin:6px 0 12px}
.pd .desc{color:var(--muted)}
.prose{max-width:75ch}
.prose h2{font-size:24px;margin:26px 0 8px}
.prose p,.prose li{color:var(--muted)}
@media (max-width:800px){.pd{grid-template-columns:1fr}}
/* tiles, shelves, tiers, why, seo, float, dropdown */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:820px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--tile);aspect-ratio:4/3;text-decoration:none;border:1px solid var(--line)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tile:hover img{transform:scale(1.04)}
.tile span{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;background:linear-gradient(transparent,rgba(40,8,24,.82));color:#fff;font-weight:700;font-size:15px}
.shelf{margin-top:34px}
.shelf-h{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:12px}
.shelf-h h3{font-size:24px}
.shelf-h a{font-weight:700;color:var(--plum-2);white-space:nowrap}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,230px);gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail>.card{scroll-snap-align:start}
.card.hamper .thumb img{object-position:center 42%}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px}
.tier .eyebrow{color:var(--gold)}
.tier h3{font-size:22px}
.tier p{margin:0;color:var(--muted);font-size:14px}
.tier ul{margin:4px 0 0;padding-left:18px;color:var(--text);font-size:14px}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:820px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.why{grid-template-columns:1fr}}
.why div{border-top:2px solid var(--gold);padding-top:14px}
.why h3{font-size:19px;margin-bottom:6px}
.why p{margin:0;color:var(--muted);font-size:14px}
.seo{border-top:1px solid var(--line)}
.seo .cols{columns:2 420px;column-gap:48px}
.seo h2{font-size:24px;margin:0 0 8px;break-after:avoid}
.seo h3{font-size:19px;margin:18px 0 6px;break-after:avoid}
.seo p{color:var(--muted);margin:0 0 12px;font-size:14.5px}
.seo a{color:var(--plum-2)}
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;width:56px;height:56px;border-radius:50%;background:#1F7A4D;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.fab svg{width:28px;height:28px}
.dd{position:relative}
.dd>a::after{content:"▾";font-size:10px;margin-left:5px;opacity:.6}
.dd .panel{display:none;position:absolute;top:100%;left:0;min-width:250px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;z-index:60}
.dd:hover .panel,.dd:focus-within .panel{display:grid}
.dd .panel a{padding:8px 10px;border-radius:8px;font-weight:600;font-size:13.5px;white-space:nowrap}
.dd .panel b{font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:8px 10px 2px}
@media (max-width:900px){.dd .panel{display:none!important}.dd>a::after{content:""}}
.guide{max-width:760px}
.guide h2{font-size:26px;margin:28px 0 8px}
.guide p,.guide li{color:var(--text);font-size:16px;line-height:1.7}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.glist a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none}
.glist h3{font-size:20px;margin-bottom:6px}
.glist p{margin:0;color:var(--muted);font-size:14px}

/* ---------- base resets for standalone pages ---------- */
html{color-scheme:light}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* ---------- opening animation ---------- */
#intro{position:fixed;inset:0;z-index:200;background:radial-gradient(ellipse at center,#FFFDFB 0%,#F7E6E4 70%,#F2DAD6 100%);display:grid;place-items:center;overflow:hidden}
#intro .stage{position:relative;width:220px;height:260px}
#intro .box{position:absolute;left:30px;bottom:20px;width:160px;height:120px;background:linear-gradient(160deg,#6B2447,#4A1230);border-radius:6px;box-shadow:0 30px 60px -20px rgba(74,18,48,.6)}
#intro .box::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:22px;margin-left:-11px;background:linear-gradient(90deg,#C9A45C,#E9D6B0,#B98C3E)}
#intro .lid{position:absolute;left:18px;bottom:136px;width:184px;height:38px;background:linear-gradient(160deg,#7A2A52,#4A1230);border-radius:6px;transform-origin:10% 100%;z-index:3;box-shadow:0 6px 12px -6px rgba(0,0,0,.4)}
#intro .lid::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:22px;margin-left:-11px;background:linear-gradient(90deg,#C9A45C,#E9D6B0,#B98C3E)}
#intro .bow{position:absolute;left:50%;bottom:170px;width:0;height:0;z-index:4}
#intro .loop{position:absolute;bottom:-6px;width:58px;height:40px;border:9px solid #C9A45C;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:transparent}
#intro .loop.l{right:2px;transform:rotate(-22deg);transform-origin:100% 100%}
#intro .loop.r{left:2px;transform:rotate(22deg);transform-origin:0 100%}
#intro .knot{position:absolute;left:-11px;bottom:-12px;width:22px;height:20px;background:#B98C3E;border-radius:6px}
#intro .tail{position:absolute;bottom:-40px;width:12px;height:40px;background:#C9A45C}
#intro .tail.l{left:-16px;transform:rotate(18deg)}
#intro .tail.r{left:4px;transform:rotate(-18deg)}
#intro .glow{position:absolute;left:50%;bottom:140px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle,#FFF6DD 0%,rgba(255,236,190,.0) 70%);opacity:0}
#intro .ilogo{position:absolute;left:50%;top:50%;width:300px;height:140px;margin:-70px 0 0 -150px;background:url(../images/ui/logo.webp) center/contain no-repeat;opacity:0;transform:scale(.6)}
#intro .skip{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));background:none;border:1px solid #D9BFC7;border-radius:999px;padding:8px 16px;color:#4A1230;font:600 13px var(--body);cursor:pointer}
#intro.play .loop.l{animation:untieL .7s .15s cubic-bezier(.5,0,.2,1) forwards}
#intro.play .loop.r{animation:untieR .7s .15s cubic-bezier(.5,0,.2,1) forwards}
#intro.play .knot,#intro.play .tail{animation:fadeDrop .6s .35s ease-in forwards}
#intro.play .lid{animation:lidOpen .75s .75s cubic-bezier(.3,0,.2,1) forwards}
#intro.play .glow{animation:glow 1s 1.1s ease-out forwards}
#intro.play .stage{animation:stageOut .5s 1.75s ease-in forwards}
#intro.play .ilogo{animation:logoIn .7s 1.6s cubic-bezier(.2,.8,.2,1) forwards}
#intro.play{animation:introOut .6s 2.7s ease forwards}
@keyframes untieL{to{transform:translate(-70px,-30px) rotate(-120deg) scale(.4);opacity:0}}
@keyframes untieR{to{transform:translate(70px,-30px) rotate(120deg) scale(.4);opacity:0}}
@keyframes fadeDrop{to{transform:translateY(30px);opacity:0}}
@keyframes lidOpen{to{transform:translate(-40px,-90px) rotate(-38deg);opacity:0}}
@keyframes glow{0%{opacity:0;width:10px;height:10px;margin-left:-5px}60%{opacity:1}100%{opacity:0;width:420px;height:420px;margin-left:-210px;bottom:-60px}}
@keyframes stageOut{to{transform:scale(.8);opacity:0}}
@keyframes logoIn{to{opacity:1;transform:scale(1)}}
@keyframes introOut{to{opacity:0;visibility:hidden}}

/* ---------- hero with floating products ---------- */
.hero2{position:relative;background:radial-gradient(ellipse at 75% 40%,#FFFFFF 0%,var(--band) 55%,var(--ground) 100%);border-bottom:1px solid var(--line);overflow:hidden}
.hero2 .grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;padding-block:clamp(34px,6vw,70px)}
.hero2 h1{font-size:clamp(34px,5vw,60px);line-height:1.05}
.hero2 h1 .script{display:block;color:var(--gold);font-size:.78em;margin-top:6px}
.hero2 .lede{font-size:17px;color:var(--muted);max-width:52ch;margin:18px 0 24px}
.float3{position:relative;height:clamp(360px,42vw,500px)}
.fp{position:absolute;display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:999px 999px 20px 20px;padding:14px 14px 10px;box-shadow:0 30px 50px -28px rgba(74,18,48,.45);text-align:center;animation:bob 6s ease-in-out infinite}
.fp img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:999px 999px 12px 12px}
.fp.cover img{object-fit:cover}
.fp span{display:block;font:700 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:8px}
.fp:hover{box-shadow:0 34px 60px -24px rgba(74,18,48,.55)}
.fp.a{width:44%;left:28%;top:2%;z-index:2;animation-delay:-1s}
.fp.b{width:36%;left:0;top:30%;animation-delay:-3s;animation-duration:7s}
.fp.c{width:36%;right:0;top:36%;animation-delay:-5s;animation-duration:6.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(.6deg)}}
.sparkle{position:absolute;width:6px;height:6px;border-radius:50%;background:#E9C77B;box-shadow:0 0 12px 3px rgba(233,199,123,.6);animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
@media (max-width:820px){.hero2 .grid2{grid-template-columns:1fr}.float3{height:min(92vw,420px);max-width:460px;margin-inline:auto;width:100%}}

/* ---------- marquee ---------- */
.marquee{background:var(--plum);color:#F6E8EC;overflow:hidden;white-space:nowrap;border-block:1px solid rgba(255,255,255,.08)}
.marquee .track{display:inline-flex;gap:38px;padding:12px 0;animation:mq 38s linear infinite}
.marquee span{font:600 13.5px var(--body);letter-spacing:.14em;text-transform:uppercase}
.marquee i{color:#E9D6B0;font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}



/* ---------- full-width banner slider ---------- */
.slider{position:relative;overflow:hidden;background:#F7EEE8}
.slides{display:flex;transition:transform .8s cubic-bezier(.6,0,.2,1)}
.slide{position:relative;flex:0 0 100%;display:block;text-decoration:none;color:inherit}
.slide picture,.slide img{display:block;width:100%}
.slide img{aspect-ratio:1920/720;object-fit:cover}
.slide .cap{position:absolute;left:clamp(20px,6vw,90px);top:50%;transform:translateY(-50%);max-width:min(42%,520px)}
.slide .cap .eyebrow{display:block;margin-bottom:10px}
.slide .cap h2{font-size:clamp(28px,3.6vw,52px);color:#3E0F27;line-height:1.05}
.slide .cap p{color:#6A5560;font-size:clamp(14px,1.2vw,17px);margin:12px 0 20px}
.slide .cap .btn{background:#4A1230;color:#FDF8F5}
.slide.on .cap>*{animation:capIn .8s both}
.slide.on .cap>*:nth-child(2){animation-delay:.1s}.slide.on .cap>*:nth-child(3){animation-delay:.2s}.slide.on .cap>*:nth-child(4){animation-delay:.3s}
@keyframes capIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.slide.on img{animation:kb 7s ease-out both}
@keyframes kb{from{transform:scale(1.05)}to{transform:scale(1)}}
.sl-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.85);color:#4A1230;font-size:22px;cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);z-index:3}
.sl-nav.prev{left:14px}.sl-nav.next{right:14px}
.dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:8px;justify-content:center;z-index:3}
.dots button{width:9px;height:9px;border-radius:5px;border:none;background:rgba(74,18,48,.3);cursor:pointer;padding:0;transition:width .3s,background .3s}
.dots button[aria-current="true"]{width:26px;background:#4A1230}
@media (max-width:700px){.slide img{aspect-ratio:1060/1484}.slide .cap{display:none}.slide .mbtn{display:inline-flex}.sl-nav{display:none}}
.slide .mbtn{display:none;position:absolute;left:50%;bottom:44px;transform:translateX(-50%);background:#4A1230;color:#FDF8F5}

/* ---------- LP banner ---------- */
.lp-banner{position:relative;background:#F7EEE8}
.lp-banner img{display:block;width:100%;aspect-ratio:1920/620;object-fit:cover}
@media (max-width:700px){.lp-banner img{aspect-ratio:1060/1100;object-position:center 60%}}

/* ---------- reveal + hover ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-5px)}
.card .thumb img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .thumb img{transform:scale(1.05)}
.btn:hover{transform:translateY(-1px)}
.cta-band{background:linear-gradient(120deg,#4A1230,#6B2447);color:#FDF8F5;border-radius:var(--r);padding:clamp(24px,4vw,44px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.cta-band h2{color:#FDF8F5;font-size:clamp(24px,3vw,36px)}
.cta-band p{margin:6px 0 0;color:#E9D6DF}
.cta-band .btn-ghost{background:transparent;color:#FDF8F5;border-color:rgba(255,255,255,.4)}
.page-h{padding-block:28px 10px}
.page-h h1{font-size:clamp(30px,4vw,48px);margin:10px 0 8px}
.page-h p{color:var(--muted);max-width:70ch;margin:0}
.pview{padding-block:10px 40px}

@media (prefers-reduced-motion:reduce){
  #intro{display:none!important}
  .fp,.sparkle,.marquee .track,.slide.on img,.slide.on .cap>*{animation:none!important}
  .rv{opacity:1;transform:none}
  .slides{transition:none}
}
nav.main{align-items:center}
nav.main>a,nav.main .dd>a{white-space:nowrap}
nav.main .dd{flex:none}
@media (max-width:900px){nav.main>a,nav.main .dd>a{display:inline-block;background:var(--band);font-size:13px;padding:8px 12px;border-radius:999px}}
.lp-banner .cap{position:absolute;left:clamp(20px,6vw,90px);top:50%;transform:translateY(-50%);max-width:min(40%,500px)}
.lp-banner .cap h2{font-size:clamp(28px,3.4vw,50px);color:#3E0F27;line-height:1.05;margin-top:10px}
.lp-banner .cap p{color:#6A5560;margin:10px 0 0;font-size:clamp(14px,1.2vw,17px)}
@media (max-width:700px){.lp-banner .cap{display:none}}
/* ---- final banners (text inside image) ---- */
.slide img{aspect-ratio:2048/768}
.slide .vbtn{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(40px,4vw,56px);background:#4A1230;color:#FDF8F5;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.lp-banner img{aspect-ratio:2048/768}
.topban a,.topban img{display:block;width:100%}
.topban img{aspect-ratio:2048/768;object-fit:cover}
@media (max-width:700px){.slide img,.lp-banner img{aspect-ratio:1060/1484;object-position:center}.topban img{aspect-ratio:1122/1402}.slide .vbtn{left:50%;right:auto;transform:translateX(-50%);bottom:44px}}
/* ---- festive bursts ---- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:70}
.slide .vbtn{display:none}
.slide{cursor:pointer}.slide:hover img{filter:brightness(1.03)}

/* =================== v3 additions =================== */
:root{color-scheme:light}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--plum);color:#fff;padding:10px 16px;z-index:300;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
body{animation:pgIn .45s ease both}
body.leaving{opacity:0;transition:opacity .18s ease}
@keyframes pgIn{from{opacity:0}to{opacity:1}}
.h3{font-size:22px;margin-bottom:12px}
.btn-lg{padding:14px 26px;font-size:15px}
.btn-gold{background:linear-gradient(135deg,#C9A45C,#A87B32);color:#fff;box-shadow:0 10px 24px -12px rgba(168,123,50,.8)}
.btn-gold:hover{filter:brightness(1.06)}
.btn svg{width:18px;height:18px}
.sec-alt{background:linear-gradient(180deg,#FBF1EF,var(--ground))}

/* header actions */
.hact{display:flex;align-items:center;gap:8px;margin-left:12px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{border-color:var(--gold)}
.qbtn svg{width:18px;height:18px}
.qbtn.bump{animation:bump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.18) rotate(-4deg)}60%{transform:scale(.95) rotate(3deg)}100%{transform:scale(1)}}
@media (max-width:900px){.hact{margin-left:auto}.qlabel{display:none}.qbtn{padding:10px 14px}}
.topline{font-size:12px}

/* search overlay */
.search-ui{position:fixed;inset:0;z-index:150;background:rgba(253,248,245,.97);backdrop-filter:blur(6px);padding-top:calc(14px + env(safe-area-inset-top,0px));overflow:auto}
.sbar{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--plum);border-radius:14px;padding:6px 8px 6px 14px;box-shadow:var(--shadow)}
.sbar input{flex:1;min-width:0;border:none;outline:none;font-size:17px;padding:10px 4px;background:transparent}
.sico svg{width:20px;height:20px;color:var(--muted);display:block}
.sclose{border:none;background:var(--band);width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.sres{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.sitem{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:12px;text-decoration:none;background:#fff;border:1px solid var(--line)}
.sitem:hover,.sitem.active{border-color:var(--gold);background:#FFFDFB}
.sitem img{width:56px;height:56px;object-fit:contain;background:var(--tile);border-radius:8px}
.sitem .n{font-weight:700;color:var(--ink);font-size:14.5px;line-height:1.3}
.sitem .c{font-size:11.5px;color:var(--gold);font-weight:700;letter-spacing:.06em}
.sitem .p{font-size:13px;font-weight:700;color:var(--plum-2);white-space:nowrap;text-align:right}
.sitem mark{background:#F6E3B8;color:inherit;border-radius:3px;padding:0 1px}
.sall{display:block;text-align:center;padding:12px;font-weight:800;color:var(--plum);text-decoration:none;background:var(--band);border-radius:12px}
.snone{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:16px;color:var(--muted)}
.snone .btn{margin-top:10px}
.spop{margin-top:16px;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spop a{padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600}

/* sticky mobile CTA bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(253,248,245,.97);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
  .mbar .btn{padding:12px 10px;font-size:14px}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  .fab{display:none}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* cookie consent */
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:120;max-width:640px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px -20px rgba(62,15,39,.45);padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.consent p{margin:0;font-size:13.5px;color:var(--text);flex:1 1 260px}
.consent div{display:flex;gap:8px}
@media (max-width:760px){.consent{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* diya flicker */
.diya{display:inline-block;position:relative;width:14px;height:14px;margin-right:8px;vertical-align:-1px}
.diya::before{content:"";position:absolute;left:1px;right:1px;bottom:0;height:5px;border-radius:0 0 8px 8px;background:linear-gradient(#C9A45C,#A87B32)}
.diya i{position:absolute;left:50%;bottom:4px;width:6px;height:9px;margin-left:-3px;border-radius:50% 50% 50% 50%/65% 65% 35% 35%;background:radial-gradient(ellipse at 50% 70%,#FFF6C9 0%,#FFC85C 45%,#FF8A1F 80%);box-shadow:0 0 8px 2px rgba(255,190,80,.55);transform-origin:50% 100%;animation:flick 1.6s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) rotate(-2deg)}25%{transform:scale(.92,1.08) rotate(2deg)}50%{transform:scale(1.05,.95) rotate(-1deg)}75%{transform:scale(.96,1.06) rotate(3deg)}}

/* hero v3 */
.hero2{background:radial-gradient(ellipse at 78% 38%,#FFFDFB 0%,#F7E6E4 55%,#FDF8F5 100%)}
.hero2 .htxt{position:relative;z-index:2}
.hero2 h1{font-size:clamp(36px,5.6vw,66px);line-height:1.04;margin-top:14px}
.hsub{font:600 clamp(15px,1.6vw,19px)/1.5 var(--body);color:var(--ink);margin:16px 0 10px;letter-spacing:.01em}
.hsub i{color:var(--gold);font-style:normal;margin:0 4px}
.hbadge{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.hbadge span{border:1px solid var(--gold-soft);background:rgba(255,255,255,.7);border-radius:999px;padding:7px 14px;font:700 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--plum)}
.petals{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.petal{position:absolute;top:-30px;width:12px;height:16px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#FFB347,#F28C28);opacity:.55;animation:fall linear infinite}
.petal:nth-child(3n){background:linear-gradient(135deg,#F7C6D0,#E88AA0);width:10px;height:13px}
.petal:nth-child(4n){background:linear-gradient(135deg,#FFF1C9,#E9C77B)}
@keyframes fall{0%{transform:translate(0,-20px) rotate(0)}25%{transform:translate(20px,25vh) rotate(90deg)}50%{transform:translate(-15px,50vh) rotate(200deg)}75%{transform:translate(18px,75vh) rotate(290deg)}100%{transform:translate(-10px,105vh) rotate(380deg)}}
@media (max-width:820px){.petal:nth-child(n+6){display:none}.petal{opacity:.4}}
.fp{background:#fff}
.fp.cover img{object-fit:cover}
.float3 .fp img{background:transparent}

/* tiles v3 */
.tile{aspect-ratio:4/3.2}
.tile.cut img{object-fit:contain;padding:8% 10% 22%;background:radial-gradient(circle at 50% 45%,#fff,#F3E4E0)}
.tile span{display:flex;flex-direction:column}
.tile em{font-style:normal;font-weight:600;font-size:12px;opacity:.85}

/* card v3 */
.card .thumb.cut img,.card .thumb.cut{object-fit:contain}
.thumb.cut img{padding:10%;background:radial-gradient(circle at 50% 45%,#fff,var(--tile))}
.cname{font-family:var(--body);font-size:14.5px;line-height:1.35;margin:0}
.cname a{text-decoration:none;color:var(--ink)}
.card{will-change:transform}
.card.tilt{transition:transform .12s ease-out,box-shadow .35s,border-color .35s}
.add.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-4px) rotate(-2deg)}40%{transform:translateX(4px) rotate(2deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.more-item{display:none}
.grid.showall .more-item{display:flex}

/* featured + grid4 */
.featgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:stretch}
.featured{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:radial-gradient(circle at 50% 40%,#fff,#F3E4E0);border:1px solid var(--line);text-decoration:none;min-height:420px}
.featured img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.featured.cut img{object-fit:contain;padding:8% 10% 30%}
.featured:hover img{transform:scale(1.04)}
.fcap{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(transparent,rgba(255,253,251,.96) 30%)}
.fcap h3{font-size:24px;margin:4px 0 6px}
.fcap .btn{margin-top:10px}
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){.featgrid{grid-template-columns:1fr}.featured{min-height:360px}}

/* lookbook */
.lookbook{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:14px}
.lookbook .lb0{grid-column:span 2;grid-row:span 2}
.lookbook .lb0 .thumb{aspect-ratio:auto;height:100%;min-height:360px}
.lookbook .lb3{grid-column:span 2}
.lookbook .lb3 .thumb{aspect-ratio:2/1}
@media (max-width:820px){.lookbook{grid-template-columns:1fr 1fr}.lookbook .lb0,.lookbook .lb3{grid-column:span 2}.lookbook .lb0 .thumb{min-height:280px}}

/* horizontal corporate cards */
.hcards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hcard{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;text-decoration:none;transition:transform .3s,box-shadow .3s}
.hcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hcard img{width:130px;height:130px;object-fit:cover;border-radius:10px}
.hcard h3{font-family:var(--body);font-size:16px;margin:2px 0 4px;color:var(--ink)}
.hcard p{margin:0 0 8px;color:var(--muted);font-size:13.5px}
.hcard .tag{display:inline-block;font-size:11.5px;font-weight:700;color:var(--plum);background:var(--band);border-radius:999px;padding:4px 10px}
@media (max-width:700px){.hcards{grid-template-columns:1fr}.hcard{grid-template-columns:100px 1fr}.hcard img{width:100px;height:100px}}

/* collections page */
.colgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.colcard{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;transition:transform .3s,box-shadow .3s}
.colcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.colcard .cimg{width:160px;height:160px;border-radius:12px;overflow:hidden;background:var(--tile)}
.colcard .cimg img{width:100%;height:100%;object-fit:cover}
.colcard .cimg.cut img{object-fit:contain;padding:10%;background:radial-gradient(circle,#fff,#F3E4E0)}
.colcard h2{font-size:24px;margin-bottom:6px}
.colcard p{margin:0 0 8px;color:var(--muted);font-size:14px}
.colcard .count{font-weight:800;color:var(--plum-2)}
@media (max-width:760px){.colgrid{grid-template-columns:1fr}.colcard{grid-template-columns:110px 1fr}.colcard .cimg{width:110px;height:110px}.colcard h2{font-size:20px}}

/* contact buttons */
.cbtns{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cbtn{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:var(--ink);transition:transform .2s,border-color .2s}
.cbtn:hover{transform:translateY(-3px);border-color:var(--gold)}
.cbtn svg{width:28px;height:28px;flex:none;color:var(--plum)}
.cbtn span{display:flex;flex-direction:column;font-size:12.5px;color:var(--muted);word-break:break-word}
.cbtn b{font-size:16px;color:var(--ink)}
.cbtn.wa{background:#1F7A4D;border-color:#1F7A4D}.cbtn.wa svg,.cbtn.wa b,.cbtn.wa span{color:#fff}
.cbtn.gold{background:linear-gradient(135deg,#C9A45C,#A87B32);border-color:#A87B32}.cbtn.gold svg,.cbtn.gold b,.cbtn.gold span{color:#fff}
@media (max-width:1000px){.cbtns{grid-template-columns:repeat(2,1fr)}.cbtn.gold{grid-column:span 2}}
@media (max-width:420px){.cbtns{grid-template-columns:1fr}.cbtn.gold{grid-column:auto}}
.err{color:#B3261E;font-size:12px;min-height:0}
.field input[aria-invalid="true"]{border-color:#B3261E}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* shop v3 */
.shopsearch{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:4px 14px;margin-bottom:14px}
.shopsearch:focus-within{border-color:var(--plum)}
.shopsearch input{flex:1;min-width:0;border:none;outline:none;font-size:16px;padding:12px 0;background:transparent}
.catchips{margin-bottom:12px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.catchips .chip{flex:none}
.filters{grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end}
.check{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;padding:10px 0;white-space:nowrap}
.check input{width:18px;height:18px;accent-color:var(--plum)}
.ftoggle{display:none;margin-bottom:10px}
@media (max-width:860px){.filters{grid-template-columns:1fr 1fr}.ftoggle{display:inline-flex}.filters:not(.open){display:none}.check{grid-column:1/-1}}
.nores{background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--muted)}
.nores .chips{justify-content:center;margin-top:12px}
.more{margin-top:24px;display:flex;justify-content:center}

/* product page v3 */
.pimg{display:block;width:100%;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--tile);cursor:zoom-in;padding:0;position:relative}
.pimg img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain}
.pimg.cover img{object-fit:cover}
.pimg.cut{background:radial-gradient(circle at 50% 45%,#fff,#F3E4E0)}
.pimg.cut img{padding:6%}
.zoomhint{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.9);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--plum)}
.price.big{font-size:18px;margin:6px 0 4px}.price.big b{font-size:26px}
.pcta{margin:16px 0 10px}
.ghost-add{width:auto;padding:10px 18px}
.h-spec{font-size:22px;margin:26px 0 8px}
.spec{grid-template-columns:minmax(120px,auto) 1fr;gap:8px 16px;border-top:1px solid var(--line);padding-top:12px}
.spec dt{font-weight:600}
.spec dd{font-weight:500;color:var(--text)}
dialog.zoom{max-width:none;width:100vw;height:100vh;height:100dvh;border-radius:0;background:#111;padding:0}
dialog.zoom .zwrap{width:100%;height:100%;overflow:auto;display:grid;place-items:center;touch-action:pan-x pan-y pinch-zoom}
dialog.zoom img{max-width:none;width:min(1000px,100vw);height:auto;cursor:zoom-in}
dialog.zoom img.big{width:min(2000px,200vw);cursor:zoom-out}
dialog.zoom .close{position:fixed;right:14px;top:calc(14px + env(safe-area-inset-top,0px));z-index:5;background:#fff}
.personal .rail .card{min-width:0}

/* misc */
.meta-line{font-size:14px;color:var(--muted)}
.lp-banner img{aspect-ratio:2048/768}
.cta-sec{padding-top:0}
.faq details[open]{box-shadow:var(--shadow)}
.words .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.words.in .w{opacity:1;transform:none}
.parallax img{will-change:transform}
@media (hover:none){.card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  body{animation:none}.petal,.diya i,.qbtn.bump,.add.shake{animation:none!important}.petals{display:none}
  .words .w{opacity:1;transform:none;transition:none}
}
.vsel{margin-top:4px;border:1px solid var(--line);background:var(--ground);border-radius:8px;padding:4px 6px;font-size:12.5px;max-width:100%}
.tl-m{display:none}
@media (max-width:700px){.tl-d{display:none}.tl-m{display:inline}}
nav.main{gap:0;flex-wrap:nowrap}
nav.main>a,nav.main .dd>a{padding:8px 10px;font-size:13.5px}
@media (max-width:1180px) and (min-width:901px){nav.main>a[href$="customisation/"]{display:none}}
.featgrid{align-items:start}
.featured{min-height:0;aspect-ratio:1/1}
.featured.cut img{padding:6% 10% 32%}
.grid4 .card .thumb{aspect-ratio:1/1}
.grid4 .cbody{padding:8px 10px 10px}
.grid4 .disc{display:none}
.featgrid{align-items:stretch}
.featured{aspect-ratio:auto;min-height:440px}
.grid4 .card .thumb{aspect-ratio:5/4}
.grid4 .price small{display:none}
.grid4 .add{padding:7px 8px;font-size:12.5px}
@media (max-width:820px){.featured{min-height:380px}}
/* deterministic heights for homepage feature layouts */
.featgrid{align-items:start}
.featured{min-height:0;height:620px}
.grid4 .card .thumb{aspect-ratio:auto;height:170px}
.grid4 .card{height:303px}
.grid4 .cname{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lookbook{grid-auto-rows:300px}
.lookbook .card{height:100%}
.lookbook .card .thumb{aspect-ratio:auto;flex:1;min-height:0;height:auto}
.lookbook .lb0 .thumb{min-height:0}
.lookbook .lb3 .thumb{aspect-ratio:auto}
.lookbook .disc{display:none}
.lookbook .cbody{flex:none}
.lookbook .lb0{grid-row:span 2}
@media (max-width:820px){.featured{height:420px}.lookbook{grid-auto-rows:280px}}
.grid4 .card{height:322px}
.lookbook .thumb.cut img{padding:5%}
/* ===== banner fix: always show whole image, no crop, no zoom ===== */
html,body{overflow-x:clip}
.slide img,.lp-banner img,.topban img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;transform:none!important;animation:none!important}
.slide picture,.lp-banner picture{display:block}
.slider,.lp-banner{overflow:hidden;background:#F7EEE8}
.slides{align-items:flex-start}
@media (max-width:700px){.slide img,.lp-banner img,.topban img{object-position:center!important}}