/* Zardozi Heritage — logo palette: teal · saffron-gold · magenta · plum */
:root{
 --teal:#0b5d73;--teal2:#0f8a8c;--mint:#13a58e;
 --saffron:#e8830c;--gold:#c9962f;--gold2:#e9b94e;
 --magenta:#cf2b70;--plum:#7a2470;
 --cream:#fbf6f0;--ink:#1c1a22;--mute:#6a6470;--line:#eadfd2;--white:#fff;--night:#16141c;
 /* old names kept so every page picks up the new palette */
 --maroon:var(--teal);--maroon2:var(--teal2);
 --g-teal:linear-gradient(100deg,#0b5d73,#13a58e);
 --g-hot:linear-gradient(100deg,#cf2b70,#e8830c);
 --g-plum:linear-gradient(100deg,#7a2470,#cf2b70);
 --g-sun:linear-gradient(100deg,#e8830c,#e9b94e);
 --g-bright:linear-gradient(100deg,#35d6b8 0%,#e9b94e 50%,#ff5fa2 100%);
 --g-logo:linear-gradient(100deg,#0b5d73 0%,#13a58e 28%,#e8830c 58%,#cf2b70 82%,#7a2470 100%)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;font-size:15px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Cormorant Garamond','Playfair Display',serif;font-weight:700;line-height:1.2}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
.container{max-width:1240px;margin:0 auto;padding:0 20px}

/* top bar + header */
.topbar{background:var(--saffron);color:#fff;text-align:center;font-size:12px;font-weight:600;padding:9px 12px;letter-spacing:1.5px;text-transform:uppercase}
.site-header{background:#fff;border-bottom:3px solid transparent;border-image:var(--g-logo) 1;position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(11,93,115,.08)}
.nav{display:flex;align-items:center;gap:22px;height:82px}
.logo{flex:none}.logo img{height:56px;width:auto}
#menu{display:flex;gap:20px;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase}
#menu a{padding:6px 0;border-bottom:2px solid transparent;transition:color .2s}
#menu a:hover,#menu a.on{border-color:var(--saffron);color:var(--teal)}
#menu a.hot{color:var(--magenta)}
.nav-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.search input{border:1px solid var(--line);background:var(--cream);padding:10px 18px;border-radius:30px;width:170px;font:inherit;font-size:13px}
.search input:focus{border-color:var(--teal2);outline:0;box-shadow:0 0 0 3px rgba(15,138,140,.15)}
.acct-link{font-size:13px;font-weight:600;border:1px solid var(--line);padding:9px 16px;border-radius:30px}
.acct-link:hover{border-color:var(--magenta);color:var(--magenta)}
.cart-link,.acct-link{white-space:nowrap}
.cart-link{background:var(--g-teal);color:#fff;padding:10px 18px;border-radius:30px;font-size:13px;font-weight:600}
.cart-link b{background:var(--magenta);color:#fff;border-radius:50%;padding:1px 7px;margin-left:5px;font-size:12px}
.burger{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--teal)}
.flash{padding:12px 20px;text-align:center;font-size:14px}
.flash.success{background:#e6f4ea;color:#14532d}.flash.error{background:#fde8e8;color:#7f1d1d}

/* buttons */
.btn{display:inline-block;background:var(--g-teal);color:#fff;padding:13px 32px;border:0;border-radius:40px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(11,93,115,.28)}
.btn.gold{background:var(--g-sun)}
.btn.hot{background:var(--g-hot)}
.btn.line{background:transparent;border:2px solid #fff}
.btn.sm{padding:7px 16px;font-size:12px}
.btn.red{background:#b91c1c}

/* hero */
.hero{background:var(--night);color:#fff;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 20%,rgba(207,43,112,.45),transparent 60%),radial-gradient(50% 70% at 10% 90%,rgba(19,165,142,.40),transparent 60%),radial-gradient(40% 50% at 55% 0%,rgba(232,131,12,.35),transparent 60%)}
.hero h1{font-size:76px;margin:14px 0 18px;font-weight:700}
.hero h1 span{background:var(--g-bright);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#e8e1ea;max-width:470px;margin-bottom:30px;font-size:16px}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust .container{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px}
.trust div{display:flex;align-items:center;gap:14px}
.trust i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-size:18px;background:var(--g-teal)}
.trust div:nth-child(2) i{background:var(--g-sun)}.trust div:nth-child(3) i{background:var(--g-hot)}
.trust b{display:block;font-size:14px}.trust span{font-size:12px;color:var(--mute)}

/* section headings */
section.sec{padding:56px 0}
.sec-title{text-align:center;margin-bottom:34px}
.sec-title h2{font-size:42px;color:var(--teal)}
.sec-title p{color:var(--mute);font-size:14px}
.sec-title:after{content:"";display:block;width:96px;height:4px;border-radius:4px;background:var(--g-logo);margin:14px auto 0}
.promo{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#fff;border-radius:16px;padding:20px 28px;margin-bottom:28px;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.promo h2{font-size:34px;color:#fff}.promo p{font-size:13px;opacity:.92}
.promo a{background:#fff;color:var(--ink);border-radius:30px;padding:9px 22px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.promo.teal{background:var(--g-teal)}.promo.hot{background:var(--g-hot)}.promo.plum{background:var(--g-plum)}.promo.sun{background:var(--g-sun)}

/* categories */

/* product grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:var(--white);border-radius:14px;overflow:hidden;display:block;border:1px solid var(--line);transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:0 16px 34px rgba(11,93,115,.18);transform:translateY(-4px)}
.card-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:#efe6d8}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.05)}
.badge{position:absolute;top:10px;left:10px;background:var(--magenta);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px}
.card-body{padding:14px 16px 18px;text-align:center}
.card-body small{color:var(--saffron);text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:700}
.card-body h3{font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;letter-spacing:.6px;text-transform:uppercase;margin:4px 0 8px;min-height:40px}
.price{font-weight:700;color:var(--teal)}.price del{color:var(--mute);font-weight:400;font-size:13px;margin-left:6px}
.ph{width:100%;height:100%;background:var(--g-logo);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;position:relative}
.ph:before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.7);border-radius:8px}
.ph span{font-family:'Cormorant Garamond',serif;font-size:70px}.ph small{letter-spacing:5px;font-size:11px;text-transform:uppercase}

/* story, quotes */
.story{background:var(--night);color:#fff;border-top:4px solid var(--saffron)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.story .frame{border-radius:200px 200px 16px 16px;overflow:hidden;border:3px solid var(--gold2);aspect-ratio:4/4.6;max-width:420px;margin:auto}
.story .frame img{width:100%;height:100%;object-fit:cover}
.story .split h2{font-size:48px;margin-bottom:16px;color:#fff}
.story h2 span{background:var(--g-bright);-webkit-background-clip:text;background-clip:text;color:transparent}
.story .split p{color:#d8d0dc;margin-bottom:14px}
.split h2{font-size:38px;color:var(--teal);margin-bottom:16px}
.split p{color:var(--mute);margin-bottom:14px}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.feat div{background:#fff;padding:30px 18px;border-radius:14px;border-top:4px solid var(--teal2)}
.feat div:nth-child(2){border-color:var(--saffron)}.feat div:nth-child(3){border-color:var(--magenta)}.feat div:nth-child(4){border-color:var(--plum)}
.feat b{display:block;font-family:'Cormorant Garamond',serif;font-size:23px;color:var(--teal);margin-bottom:6px}
.feat p{font-size:13px;color:var(--mute)}
.dark{background:var(--night);color:#fff}.dark .sec-title h2{color:#fff}
.grid.quotes{grid-template-columns:repeat(3,1fr)}
.quote{background:#fff;color:var(--ink);padding:26px;border-radius:14px;border-top:4px solid var(--magenta);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.quote:nth-child(2){border-color:var(--saffron)}.quote:nth-child(3){border-color:var(--teal2)}
.quote p{font-style:italic;margin-bottom:10px;color:var(--mute)}.quote b{color:var(--teal)}
.cta{text-align:center;padding:64px 20px;background:var(--g-logo);color:#fff}
.cta h2{color:#fff;font-size:42px;margin-bottom:10px}
.cta .btn{background:#fff;color:var(--ink)}

/* shop */
.page-head{background:var(--night);color:#fff;text-align:center;padding:46px 20px;position:relative;overflow:hidden}
.page-head:before{content:"";position:absolute;inset:0;background:radial-gradient(40% 120% at 80% 0%,rgba(207,43,112,.4),transparent 70%),radial-gradient(40% 120% at 15% 100%,rgba(19,165,142,.4),transparent 70%)}
.page-head *{position:relative}
.page-head h1{font-size:50px;letter-spacing:2px;text-transform:uppercase}.page-head p{color:var(--gold2)}
.shop{display:grid;grid-template-columns:260px 1fr;gap:30px;padding:40px 0}
.filters{background:#fff;border-radius:14px;border:1px solid var(--line);padding:22px;align-self:start}
.filters h4{margin-bottom:10px;color:var(--teal);font-size:22px}
.filters a{display:block;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.filters a.on,.filters a:hover{color:var(--magenta);font-weight:700}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px}
select,input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=file],textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:14px}
select:focus,input:focus,textarea:focus{border-color:var(--teal2);outline:0;box-shadow:0 0 0 3px rgba(15,138,140,.15)}
.toolbar select{width:auto}
.shop .grid{grid-template-columns:repeat(3,1fr)}

/* product */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:50px 0}
.pd-img{aspect-ratio:4/5;border-radius:14px;border:1px solid var(--line);overflow:hidden}.pd-img img{width:100%;height:100%;object-fit:cover}
.pd h1{font-size:44px;color:var(--teal);margin:6px 0 10px}
.pd .price{font-size:28px;margin-bottom:16px}
.pd .desc{color:var(--mute);margin-bottom:20px}
.sizes{display:flex;gap:8px;margin:8px 0 20px;flex-wrap:wrap}
.sizes label{border:1px solid var(--line);border-radius:30px;background:#fff;padding:8px 18px;cursor:pointer;font-size:13px}
.sizes label.sel{background:var(--g-teal);color:#fff;border-color:transparent}
.sizes input{display:none}
.qty{display:inline-flex;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:#fff;margin-bottom:20px}
.qty button{width:40px;border:0;background:none;font-size:18px;cursor:pointer}
.qty input{width:50px;text-align:center;border:0;border-radius:0;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.meta{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;font-size:13px;color:var(--mute)}

/* cart / checkout / misc */
.wrap{padding:44px 0}
table.t{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
table.t th,table.t td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:middle}
table.t th{background:#e8f4f3;color:var(--teal);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.thumb{width:60px;height:75px;overflow:hidden;display:block;border-radius:8px}.thumb img,.thumb .ph{width:100%;height:100%;object-fit:cover}.thumb .ph span{font-size:28px}.thumb .ph small,.thumb .ph:before{display:none}
.two{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:start}
.box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.box h3{margin-bottom:14px;color:var(--teal);font-size:24px}
.row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.row.total{border-top:1px solid var(--line);font-weight:700;font-size:17px;margin-top:6px;padding-top:12px}
.f{margin-bottom:14px}.f label{display:block;font-size:13px;margin-bottom:4px;color:var(--mute)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.empty{text-align:center;padding:60px 0}
.success-box{max-width:560px;margin:60px auto;background:#fff;padding:44px;text-align:center;border-radius:14px;border-top:5px solid var(--mint)}
.success-box .tick{font-size:54px;color:var(--mint)}
.prose p{margin-bottom:14px;color:var(--mute)}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:34px}
.stars{color:var(--saffron);letter-spacing:2px}
.thumbs{display:flex;gap:10px;margin-top:10px}.thumbs img{width:70px;height:88px;object-fit:cover;border-radius:8px;border:2px solid var(--line);cursor:pointer}.thumbs img:hover{border-color:var(--magenta)}
.review{border-bottom:1px solid var(--line);padding:14px 0}.review small{color:var(--mute)}
.coupon{display:flex;gap:8px;margin-bottom:14px}.coupon input{flex:1}
.hint{font-size:12px;color:var(--mute)}
.pay-info{background:#e8f4f3;border-radius:8px;padding:12px;font-size:13px;margin-top:8px;display:none}

/* footer */
.site-footer{background:var(--night);color:#cfc8d4;font-size:14px;border-top:4px solid transparent;border-image:var(--g-logo) 1}
.perks{border-bottom:1px solid #2c2935}
.perks .container{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:26px 20px}
.perks b{display:block;color:#fff;font-family:'Cormorant Garamond',serif;font-size:21px}.perks span{font-size:12px}
.grid4{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px;padding:46px 20px 30px}
.f-logo{background:#fff;border-radius:12px;padding:10px 14px;display:inline-block;margin-bottom:14px}.f-logo img{height:54px;width:auto}
.site-footer h5{color:var(--gold2);margin-bottom:12px;font-size:15px;letter-spacing:2px;text-transform:uppercase;font-family:'Montserrat',sans-serif;font-weight:700}
.site-footer a{display:block;padding:3px 0}.site-footer a:hover{color:var(--gold2)}
.news{display:flex;gap:0;margin-top:14px;max-width:420px}
.news input{background:#211f29;border:1px solid #3a3744;color:#fff;border-radius:30px 0 0 30px}
.news button{background:var(--g-sun);border:0;color:#1c1a22;font:inherit;font-weight:700;font-size:12px;letter-spacing:1px;padding:0 22px;border-radius:0 30px 30px 0;cursor:pointer}
.copy{border-top:1px solid #2c2935;text-align:center;padding:16px;font-size:12px;letter-spacing:1px}
.wa{position:fixed;right:18px;bottom:18px;background:#25d366;color:#fff;padding:12px 20px;border-radius:30px;font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.28);z-index:60}

/* admin (shared rules) */
.adm{display:grid;grid-template-columns:220px 1fr;min-height:100vh;background:#f4f2f6}
.adm aside{background:var(--night);color:#fff;padding:24px 0}
.adm aside h3{color:var(--gold2);padding:0 22px 18px;font-size:20px}
.adm aside a{display:block;padding:11px 22px;font-size:14px;color:#d6cfdc}
.adm aside a:hover,.adm aside a.on{background:var(--g-teal);color:#fff}
.adm .main{padding:30px}
.adm h1{font-size:30px;color:var(--teal);margin-bottom:20px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.stat{background:#fff;padding:20px;border-left:4px solid var(--saffron);border-radius:8px}.stat b{font-size:28px;font-family:'Cormorant Garamond';color:var(--teal);display:block}
.pill{padding:3px 10px;border-radius:20px;font-size:12px;background:#eee}
.pill.Pending{background:#fff3cd}.pill.Confirmed{background:#cfe2ff}.pill.Shipped{background:#e2d9f3}.pill.Delivered{background:#d1e7dd}.pill.Cancelled{background:#f8d7da}
.pill.Paid{background:#d1e7dd;color:#14532d}.pill.Unpaid{background:#fff3cd;color:#7a4b00}.pill.Refunded{background:#e2e3e5}
.paybox{max-width:560px;margin:auto;text-align:center}.paybox .amt{font-size:32px;color:var(--maroon);font-weight:600;margin:6px 0 14px}.paybox .secure{font-size:12px;color:var(--mute);margin-top:12px}
.login{max-width:380px;margin:90px auto;background:#fff;padding:36px;border-radius:14px;border:1px solid var(--line)}
.login h2{color:var(--teal);margin-bottom:18px;text-align:center}

@media(max-width:1000px){
 .hero h1{font-size:56px}.hero .container{grid-template-columns:1fr}
 .grid{grid-template-columns:repeat(3,1fr)}.shop .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){.trust i{flex:none}
 .burger{display:block}
 .nav{gap:12px;height:72px}.logo img{height:46px}
 #menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:16px 20px;border-bottom:1px solid var(--line);gap:12px}
 #menu.open{display:flex}
 .search{display:none}
 .split,.pd,.two,.contact,.shop,.trust .container,.perks .container{grid-template-columns:1fr}
 .grid,.shop .grid{grid-template-columns:repeat(2,1fr)}
 .grid.quotes{grid-template-columns:1fr}
 .feat{grid-template-columns:repeat(2,1fr)}
 .grid4{grid-template-columns:1fr 1fr}
 .promo{flex-direction:column;align-items:flex-start}.promo h2{font-size:28px}
 .adm{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}
 table.t{display:block;overflow-x:auto}
}
@media(max-width:520px){.grid,.shop .grid{gap:12px}.card-body h3{font-size:12px;min-height:36px}.grid4{grid-template-columns:1fr}.f2{grid-template-columns:1fr}.sec-title h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.topbar,.site-header,.site-footer,.wa,.noprint,.adm aside{display:none!important}.adm{display:block}}

/* header v2 — icons + dropdowns */
.nav{gap:30px}
.search{position:relative}
.search input{width:260px;padding-right:42px;background:#fff}
.search button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--mute);cursor:pointer;padding:6px;display:flex}
.nav-actions{gap:10px}
.ico-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--ink);transition:background .2s,color .2s}
.ico-btn:hover{background:#e8f4f3;color:var(--teal)}
.ico-btn.cart b{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--magenta);color:#fff;font-size:11px;line-height:18px;text-align:center}
.dd{position:relative}
.dd-t{display:inline-flex;align-items:center;gap:6px}
.dd-list{position:absolute;left:-14px;top:100%;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 30px rgba(11,93,115,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:70}
.dd-list.right{left:auto;right:0}
.dd:hover .dd-list,.dd:focus-within .dd-list{opacity:1;visibility:visible;transform:none}
.dd-list a{display:block;padding:9px 14px;border-radius:8px;font-size:13px;letter-spacing:.4px;text-transform:none;font-weight:500;border:0}
.dd-list a:hover{background:#e8f4f3;color:var(--teal)}
.dd-hi{display:block;padding:8px 14px;font-size:12px;color:var(--mute)}
@media(max-width:900px){
 .dd-list{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 12px;min-width:0;display:none}
 .dd:hover .dd-list{display:block}
 .acct .dd-list{position:absolute;display:block;opacity:0;visibility:hidden;right:0;left:auto;background:#fff;border:1px solid var(--line);padding:8px;min-width:180px;box-shadow:0 14px 30px rgba(11,93,115,.16)}
 .acct:hover .dd-list,.acct:focus-within .dd-list{opacity:1;visibility:visible}
 .nav{gap:8px}
}

/* ===== hero v2 ===== */
.hero{min-height:640px;display:flex;align-items:center}
.hero .container{width:100%;position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center;padding-top:64px;padding-bottom:64px}
.eyebrow{display:inline-block;border:1px solid var(--gold2);color:var(--gold2);border-radius:30px;padding:6px 18px;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase}
.hero h1{font-size:80px;line-height:1.02;margin:20px 0 20px}
.hero p{font-size:17px;max-width:500px}
.hero .btn{padding:15px 36px}
.hero-art{position:relative;display:flex;gap:16px;align-items:flex-end;justify-content:center;padding:20px 0}
.hero-art figure{flex:1;max-width:210px;border-radius:200px 200px 16px 16px;overflow:hidden;border:2px solid var(--gold2);aspect-ratio:3/5;background:#222;box-shadow:0 24px 50px rgba(0,0,0,.45);translate:calc(var(--mx,0) * var(--d,12) * 1px) calc(var(--my,0) * var(--d,12) * 1px);transition:translate .25s ease-out}
.hero-art figure:nth-of-type(2){aspect-ratio:3/5.8;animation:float 7s ease-in-out infinite}
.hero-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.hero-art figure:hover img{transform:scale(1.07)}
.hero-art .ring{position:absolute;left:50%;top:50%;width:min(92%,520px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px dashed rgba(233,185,78,.55);animation:spin 60s linear infinite;pointer-events:none}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes spin{to{rotate:360deg}}

/* ===== categories v2 (bigger, photo circles) ===== */
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:36px 28px;padding:14px 0 6px}
.cat{width:200px;text-align:center}
.cat .ring{position:relative;width:192px;height:192px;margin:0 auto;border-radius:50%;transition:transform .35s,box-shadow .35s}
.cat .ring:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--teal),var(--mint),var(--saffron),var(--magenta),var(--plum),var(--teal))}
.cat .ring span{position:absolute;inset:6px;border-radius:50%;border:5px solid #fff;background:linear-gradient(145deg,#e8f4f3,#fde6c8) center/cover no-repeat;display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-size:64px;color:var(--teal)}
.cat .ring em{position:absolute;inset:11px;border-radius:50%;display:grid;place-items:center;background:rgba(11,93,115,.62);color:#fff;font-style:normal;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;opacity:0;transition:opacity .3s}
.cat b{display:block;margin-top:16px;font-size:15px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;transition:color .2s}
.cat:hover .ring,.cat:focus-visible .ring{transform:translateY(-6px) scale(1.04);box-shadow:0 18px 34px rgba(11,93,115,.28)}
.cat:hover .ring:before{animation:spin 2.5s linear infinite}
.cat:hover .ring em,.cat:focus-visible .ring em{opacity:1}
.cat:hover b{color:var(--magenta)}

/* ===== hover polish ===== */
.card-img:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,93,115,.55),transparent 55%);opacity:0;transition:opacity .3s}
.card:hover .card-img:after{opacity:1}
.quick{position:absolute;left:50%;bottom:14px;z-index:2;translate:-50% 14px;opacity:0;background:#fff;color:var(--teal);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:9px 20px;border-radius:30px;white-space:nowrap;transition:.3s}
.card:hover .quick{opacity:1;translate:-50% 0}
.card:hover .card-body h3{color:var(--magenta)}
.btn{position:relative;overflow:hidden}
.btn:after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg)}
.btn:hover:after{left:130%;transition:left .6s}
.promo a{transition:transform .2s,box-shadow .2s}.promo a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.2)}
.feat div,.quote,.trust div i{transition:transform .3s,box-shadow .3s}
.feat div:hover,.quote:hover{transform:translateY(-6px);box-shadow:0 16px 30px rgba(11,93,115,.16)}
.trust div:hover i{transform:rotate(-8deg) scale(1.1)}
.site-footer a{transition:color .2s,padding-left .2s}.site-footer a:hover{padding-left:6px}
.site-header{transition:box-shadow .3s}.site-header .nav{transition:height .3s}.site-header .logo img{transition:height .3s}
.site-header.scrolled{box-shadow:0 8px 24px rgba(11,93,115,.16)}
.site-header.scrolled .nav{height:66px}.site-header.scrolled .logo img{height:46px}
.to-top{position:fixed;right:22px;bottom:80px;width:44px;height:44px;border-radius:50%;border:0;background:var(--g-hot);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25);opacity:0;visibility:hidden;translate:0 12px;transition:.3s;z-index:60}
.to-top.show{opacity:1;visibility:visible;translate:0}
.to-top:hover{transform:translateY(-3px)}

/* ===== scroll reveal (only when JS is on) ===== */
.js .reveal,.js [data-stagger]>*{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .7s ease,box-shadow .25s,transform .25s}
.js .reveal.in,.js [data-stagger]>.in{opacity:1;translate:0 0}

@media(max-width:1000px){.hero{min-height:0}.hero h1{font-size:60px}.hero .container{grid-template-columns:1fr;gap:34px}.hero-art{max-width:520px;margin:auto}}
@media(max-width:700px){.cat{width:150px}.cat .ring{width:140px;height:140px}.cat .ring span{font-size:44px;border-width:4px}.cat .ring em{inset:9px;font-size:10px}.cats{gap:24px 18px}.cat b{font-size:13px}.hero h1{font-size:46px}.hero-art{display:flex}.hero-art figure:nth-of-type(3){display:none}.to-top{bottom:78px}}
@media(prefers-reduced-motion:reduce){.hero-art figure,.hero-art .ring,.cat .ring:before{animation:none!important}.js .reveal,.js [data-stagger]>*{opacity:1;translate:none}}

/* ===== hero slider (sideways) ===== */
.hero{display:block;min-height:0}
.hero-track{position:relative;display:flex;transition:transform .8s cubic-bezier(.65,0,.25,1);will-change:transform}
.hero-slide{flex:0 0 100%;min-width:0;display:flex;align-items:center;min-height:640px}
.hero-slide .container{padding-top:64px;padding-bottom:84px}
.hero-slide .hero-copy>*{transition:opacity .7s .35s,translate .7s .35s}
.js .hero-slide:not(.on) .hero-copy>*{opacity:0;translate:-30px 0}
.hero-art figure{flex:none;width:100%;max-width:400px;aspect-ratio:4/5.2;animation:float 7s ease-in-out infinite}
.hero-art figure .ph{border-radius:0}
.hero-nav{position:absolute;top:50%;translate:0 -50%;z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .25s,transform .25s}
.hero-nav:hover{background:var(--saffron);transform:scale(1.08)}
.hero-nav.prev{left:18px}.hero-nav.next{right:18px}
.hero-dots{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:center;gap:10px;z-index:5}
.hero-dots button{width:11px;height:11px;border-radius:10px;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:width .3s,background .3s;padding:0}
.hero-dots button.on{width:34px;background:var(--saffron)}
.hero{touch-action:pan-y}

/* ===== categories carousel (sideways) ===== */
.cats-wrap{position:relative}
.cats{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:30px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:26px 8px 14px;cursor:grab}
.cats::-webkit-scrollbar{display:none}
.cats.drag{cursor:grabbing;scroll-snap-type:none}
.cats .cat{flex:0 0 auto;width:200px;scroll-snap-align:center}
.cats .cat:first-child{margin-left:auto}.cats .cat:last-child{margin-right:auto}
.cats-nav{position:absolute;top:calc(50% - 26px);translate:0 -50%;z-index:3;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--teal);box-shadow:0 8px 22px rgba(11,93,115,.25);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,opacity .25s}
.cats-nav:hover{background:var(--g-hot);color:#fff}
.cats-nav.prev{left:-12px}.cats-nav.next{right:-12px}
.cats-nav[hidden]{display:none}
@media(max-width:1000px){.hero-slide{min-height:0}.hero-slide .container{padding-bottom:80px}.hero-nav{top:auto;bottom:14px;translate:0}.hero-nav.prev{left:auto;right:76px}.hero-nav.next{right:18px}.hero-dots{justify-content:flex-start;padding-left:20px;bottom:30px}}
@media(max-width:700px){.cats .cat{width:150px}.cats{gap:18px}.cats-nav{width:38px;height:38px}.cats-nav.prev{left:-6px}.cats-nav.next{right:-6px}.hero-art figure{max-width:300px}}
@media(prefers-reduced-motion:reduce){.hero-track{transition:none}.hero-art figure{animation:none!important}}
.hero-slide h1{font-size:68px}
@media(max-width:1000px){.hero-slide h1{font-size:52px}}
@media(max-width:700px){.hero-slide h1{font-size:40px}}

/* product card: add-to-bag box */
.card-link{display:block;color:inherit}
.card-add{display:flex;gap:8px;align-items:center;padding:0 14px 16px}
.card-add select{flex:0 0 76px;padding:8px 6px;border:1px solid var(--line);border-radius:30px;font:inherit;font-size:12px;background:#fff}
.card-add .btn{flex:1;padding:9px 10px;text-align:center;white-space:nowrap}
.card-add .btn.done{background:#14532d}
.cart-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#14532d;color:#fff;padding:12px 22px;border-radius:30px;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:999}
.cart-toast.show{opacity:1;transform:translate(-50%,0)}
.cart-toast.err{background:#b91c1c}

/* topbar: continuously sliding announcement */
.topbar{overflow:hidden;white-space:nowrap;padding:9px 0}
.topbar-track{display:inline-flex;width:max-content;animation:topbarSlide 40s linear infinite}
.topbar-track span{padding:0 48px;flex:none}
.topbar:hover .topbar-track{animation-play-state:paused}
@keyframes topbarSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.topbar-track{animation:none}}

/* WhatsApp floating icon: round green button, pulse + hover */
.wa{display:grid;place-items:center;width:60px;height:60px;padding:0;border-radius:50%;background:#25d366;right:20px;bottom:18px;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .25s,box-shadow .25s}
.wa:before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;animation:waPulse 2s ease-out infinite}
.wa:hover{transform:scale(1.12) rotate(-8deg);box-shadow:0 10px 26px rgba(37,211,102,.55)}
.wa:hover:before{animation-play-state:paused}
.wa:active{transform:scale(.96)}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.wa:before{animation:none}}
@media(max-width:700px){.wa{width:54px;height:54px;right:16px}.wa svg{width:30px;height:30px}.to-top{right:20px;bottom:84px}}

.thumb.xs{width:44px;height:55px;border-radius:6px;flex:none;display:inline-block;vertical-align:middle;margin-right:10px}.thumb.xs .ph span{font-size:18px}
.iline{display:flex;align-items:center;gap:0}

/* aligned buttons: <a> and <button> now render with identical box + text centering */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;text-decoration:none;vertical-align:middle;box-sizing:border-box;font-family:inherit}
.btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btnrow .btn{margin:0}
@media(max-width:520px){.btnrow .btn{flex:1 1 100%}}