/* ===== KanthaLooms UI layer v5: boxed, mobile-first, Flipkart/Amazon style ===== */
:root{--ok:#1d7a46;--okbg:#e6f6ec;--warn:#9a6200;--warnbg:#fff4de;--bad:#b3261e;--badbg:#fdeaea;--info:#1f5fae;--infobg:#e8f0fc;--r:16px;--sh:0 1px 2px #29232614,0 12px 30px -18px #641E3266}
html,body{max-width:100%;overflow-x:clip}
img,svg,video,iframe{max-width:100%}
input,select,textarea{font-size:16px;border-radius:12px}

/* ---- buttons: always visible, always boxed ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;line-height:1.25;min-height:48px;text-decoration:none;font-weight:500}
.btn.o{background:#fff;color:var(--teal);border:1.5px solid var(--teal);box-shadow:none;backdrop-filter:none}
.btn.o:hover{background:#EFE5D9;box-shadow:0 10px 22px -14px #641E32}
.hero .btn.o,.ban .btn.o,footer .btn.o{background:#ffffff1f;color:#fff;border-color:#fff}
.btn.r{background:#fff;color:var(--bad);border:1.5px solid var(--bad);box-shadow:none}
.btn.r:hover{background:var(--badbg)}
.btn.blk{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn.sm{min-height:40px;padding:9px 20px;font-size:11.5px}
@media(max-width:600px){.btn{padding:13px 22px;letter-spacing:.12em}}

/* ---- boxes ---- */
.k{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-bottom:14px;min-width:0}
.k-t{font:600 12.5px Jost,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:10px;margin:0 0 14px}
.k-t i{width:32px;height:32px;border-radius:10px;background:#641E32;display:grid;place-items:center;font-style:normal;font-size:16px;flex:none}
.k-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14.5px}
.k-row span:last-child{text-align:right}
.k-row.tot{border-top:1px dashed var(--line);margin-top:6px;padding-top:12px;font-size:18px;font-weight:500}
.k-row.ok span:last-child{color:var(--ok)}
.k-chip{display:inline-block;padding:3px 11px;border-radius:99px;background:#EFE5D9;font-size:12px;margin:3px 6px 0 0;color:var(--fg)}
.k-chip.ok{background:var(--okbg);color:var(--ok)}.k-chip.bad{background:var(--badbg);color:var(--bad)}.k-chip.warn{background:var(--warnbg);color:var(--warn)}
.k-al{border-radius:14px;padding:14px 16px;margin-bottom:14px;display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.55}
.k-al>i{font-style:normal;font-size:22px;line-height:1.2;flex:none}
.k-al b{display:block;font-weight:600;margin-bottom:2px}
.k-al .btn{margin-top:10px}
.k-al.ok{background:var(--okbg);color:#145a33;border:1px solid #bfe6cd}
.k-al.warn{background:var(--warnbg);color:#6f4700;border:1px solid #f3d9a2}
.k-al.bad{background:var(--badbg);color:#8c1c15;border:1px solid #f4c3c0}
.k-al.info{background:var(--infobg);color:#173f78;border:1px solid #c5d8f3}
.k-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.k-btns .btn,.k-btns form,.k-btns form .btn{width:100%}
.k-btns form{margin:0}
.k-center{text-align:center}
.k-wrap{max-width:760px;margin:0 auto;padding:22px 14px 40px}
.k-narrow{max-width:520px}
.k-hero{text-align:center;padding:22px 10px 12px}
.k-hero h1,.k-hero h2{font-size:clamp(28px,6vw,40px);margin:6px 0 4px}
.k-hero p{margin:0;color:var(--mut)}
.k-tick{width:84px;height:84px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:42px;color:#fff;background:var(--ok);box-shadow:0 0 0 10px #1d7a4622;animation:kpop .65s cubic-bezier(.2,1.4,.4,1) both}
.k-tick.bad{background:var(--bad);box-shadow:0 0 0 10px #b3261e22}.k-tick.warn{background:#e08a00;box-shadow:0 0 0 10px #e08a0022}
@keyframes kpop{from{transform:scale(.3);opacity:0}}
.k-code{display:inline-block;margin-top:10px;padding:8px 18px;border-radius:99px;background:#fff;border:1px dashed var(--teal);font:600 20px 'Cormorant Garamond',serif;letter-spacing:.06em;color:var(--teal)}
.k-steps3{display:flex;gap:6px;margin:0 0 16px}
.k-steps3 span{flex:1;text-align:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:9px 4px;border-radius:99px;background:#f1e8f1;color:var(--mut)}
.k-steps3 span.on{background:var(--grad);color:#fff}

/* items */
.k-it{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}
.k-it:last-child{border:0}
.k-it img{width:72px;height:92px;object-fit:cover;border-radius:10px;background:#f3e6ee}
.k-it a b,.k-it>div>b{font-weight:500;display:block;line-height:1.3}
.k-it .pz{font-weight:500;white-space:nowrap}
.k-it small{color:var(--mut)}
@media(max-width:480px){.k-it{grid-template-columns:64px 1fr}.k-it img{width:64px;height:82px}.k-it .pz{grid-column:2}}

/* delivery / payment info blocks */
.k-info{display:grid;gap:14px}
.k-info>div{display:flex;gap:12px;align-items:flex-start;min-width:0}
.k-info i{flex:none;width:38px;height:38px;border-radius:12px;background:#641E32;display:grid;place-items:center;font-style:normal;font-size:17px}
.k-info small{display:block;color:var(--mut);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.k-info b{font-weight:500;display:block;overflow-wrap:anywhere}
.k-info p{margin:0;overflow-wrap:anywhere}

/* status tracker */
.tl2{display:flex;margin:10px 0 6px}
.tl2 .st b{display:block;font-weight:500;font-size:11.5px;line-height:1.25}
.tl2 .st small{display:block;font-size:10.5px}
@media(max-width:520px){.tl2 .st b{font-size:10px}.tl2 .st small{display:none}}
.k-rs{display:flex;margin:12px 0 4px}
.k-rs div{flex:1;text-align:center;position:relative;font-size:11px;color:var(--mut);letter-spacing:.04em}
.k-rs div i{display:block;width:22px;height:22px;border-radius:50%;background:#e6dce8;margin:0 auto 6px;position:relative;z-index:1;font-style:normal;font-size:12px;line-height:22px;color:#fff}
.k-rs div:before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:3px;background:#e6dce8}
.k-rs div:first-child:before{display:none}
.k-rs div.on{color:var(--fg)}.k-rs div.on i,.k-rs div.on:before{background:var(--ok)}
.k-rs.bad div.on i,.k-rs.bad div.on:before{background:var(--bad)}

/* forms inside boxes */
.k-form{display:grid;gap:10px;background:#fbf6f9;border:1px dashed #e7c9d9;border-radius:14px;padding:14px;margin-top:10px}
.k-form input,.k-form select,.k-form textarea{margin:0;background:#fff}
.k-form label{font-size:13px;color:var(--mut)}
.k-form details,.k-det{margin-top:10px}
.k-det>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:99px;border:1.5px solid var(--teal);color:var(--teal);font-size:13px;letter-spacing:.06em;font-weight:500;background:#fff;padding:8px 18px;text-align:center}
.k-det>summary::-webkit-details-marker{display:none}
.k-det[open]>summary{background:#EFE5D9}
.k-up{display:flex;align-items:center;gap:12px;border:2px dashed #e0b8cf;border-radius:14px;padding:12px;background:#fff;cursor:pointer}
.k-up input{display:none}
.k-up img{width:54px;height:54px;border-radius:10px;object-fit:cover;display:none}
.k-up span{font-size:13.5px;line-height:1.4}.k-up b{display:block;font-weight:500}
.k-up .need{color:var(--bad)}
.k-photo{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}

/* star rating (click / tap, like Flipkart & Amazon) */
.starin{display:inline-flex;flex-direction:row-reverse}
.starin input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.starin label{font-size:40px;line-height:1;color:#d8cfdb;cursor:pointer;transition:transform .15s,color .15s;padding:0 3px;margin:0}
.starin label:hover,.starin label:hover~label,.starin input:checked~label{color:#C6A15B}
.starin label:hover{transform:scale(1.18)}
.starin input:focus-visible+label{outline:2px solid #B85C7066;border-radius:8px}
.stars-note{display:block;font-size:12.5px;color:var(--mut);margin-bottom:4px}

/* ---- tracking page ---- */
.k-search{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 18px;box-shadow:var(--sh);text-align:center}
.k-search input{text-align:center;margin-bottom:12px}
.k-search .btn{width:100%;max-width:340px}
.k-ord{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:18px;margin-top:18px}
.k-ord-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.k-ord-h b{font:600 26px 'Cormorant Garamond',serif}

/* ---- contact page ---- */
.k-cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;max-width:1100px;margin:auto}
.k-cc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh);transition:.3s;min-width:0}
.k-cc:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px #641E32aa}
.k-cc .ic2{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:25px;background:#641E32}
.k-cc h4{font:600 23px 'Cormorant Garamond',serif;margin:8px 0 0}
.k-cc p{margin:0;color:var(--mut);overflow-wrap:anywhere}
.k-cc .btn{margin-top:12px;align-self:flex-start}
@media(max-width:600px){.k-cc .btn{width:100%;align-self:stretch}}
.k-form2{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--sh)}
.k-form2 h3{font-size:30px;margin-bottom:14px}

/* ---- pay page ---- */
.k-amt{font:600 52px/1.05 'Cormorant Garamond',serif;color:#641E32;margin:2px 0 4px}
.k-sec{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.k-sec span{font-size:12px;padding:6px 12px;border-radius:99px;background:#EFE5D9;color:var(--fg)}
.k-pm{min-height:22px;margin:14px 0 0;text-align:center;font-size:14px}

/* ---- account area: fixes the vertical menu / sideways overflow on phones ---- */
.acw>*{min-width:0}
.acn nav a,.acn nav button{border-radius:12px}
.oc{border-radius:16px;box-shadow:var(--sh)}
.oc:hover{box-shadow:0 18px 34px -20px #641E32aa}
.pill{font-weight:500}
.pill.blue{background:var(--infobg);color:var(--info)}.pill.red{background:var(--badbg);color:var(--bad)}.pill.grey{background:#eee;color:#555}
@media(max-width:860px){
 .acw{display:block!important;padding:10px 12px!important}
 .acn{position:static!important;border-radius:16px;margin-bottom:12px;overflow:visible}
 .acu{padding:12px 14px}.acu i{width:38px;height:38px}
 .acn nav{display:flex!important;flex-direction:row!important;gap:8px!important;overflow-x:auto;padding:10px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .acn nav::-webkit-scrollbar{display:none}
 .acn nav a,.acn nav button{flex:none;width:auto!important;white-space:nowrap;border:1px solid var(--line)!important;border-radius:99px!important;padding:9px 15px!important;background:#fff!important;font-size:13px}
 .acn nav a.on{background:var(--grad)!important;color:#fff!important;border-color:transparent!important}
 .acn nav form{flex:none;margin:0}
 .ah{gap:10px}.ah h2{font-size:27px;width:100%}
 .sbx{width:100%;display:flex}.sbx input{flex:1;min-width:0}.sbx .btn{padding:12px 20px;min-height:46px;flex:none}
 .chs{max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.chs::-webkit-scrollbar{display:none}
 .oc{grid-template-columns:72px minmax(0,1fr)}
 .od{display:block}
 .bx{padding:16px}
}
@media(max-width:600px){section{padding:30px 14px}.hh h2{font-size:30px}}

/* ---- admin / generic helpers reused on customer side ---- */
.msg.bad{background:var(--bad)}.msg.warn{background:#9a6200}

/* ======================= v6 SUPERDUPER LAYER ======================= */
::selection{background:#B85C70;color:#fff}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{scrollbar-width:thin;scrollbar-color:#d9b9cc transparent}
a,button,summary,label{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid #B85C7055;outline-offset:2px;border-radius:8px}
section,.k-wrap{animation:kin .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes kin{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){section,.k-wrap{animation:none}}

/* header */
header{transition:box-shadow .3s,background .3s}
header.scrolled{box-shadow:0 10px 30px -18px #641E32cc;background:#FFF8F0f5}
.bar{font-size:11.5px}

/* buttons: ripple + press */
.btn{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(.97)}
.rip{position:absolute;border-radius:50%;background:#ffffff59;transform:scale(0);animation:rip .65s ease-out;pointer-events:none}
.btn.o .rip{background:#641E3226}
@keyframes rip{to{transform:scale(2.6);opacity:0}}

/* back to top + app-style bottom bar */
#totop{position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;border:0;background:var(--grad);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 10px 22px -8px #641E32;opacity:0;transform:translateY(16px);pointer-events:none;transition:.3s;z-index:20;padding:0}
#totop.show{opacity:1;transform:none;pointer-events:auto}
.bnav{display:none}
@media(max-width:860px){
 body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
 .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fffffff2;backdrop-filter:blur(16px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px #641E3288;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
 .bnav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font-size:10.5px;letter-spacing:.04em;color:#6E6266;border-radius:12px;transition:.25s;min-width:0}
 .bnav a svg{transition:.25s}
 .bnav a.on{color:var(--teal);font-weight:500}.bnav a.on svg{transform:translateY(-2px) scale(1.12);stroke:#641E32}
 .bnav .bi{position:relative;display:inline-flex}
 .bdg{position:absolute;top:-6px;right:-10px;min-width:17px;height:17px;border-radius:99px;background:var(--grad);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;padding:0 4px;animation:kpop .5s both}
 .wa{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;right:12px;padding:10px 15px;font-size:12px}
 #totop{right:16px;bottom:calc(128px + env(safe-area-inset-bottom,0px))}
 footer{margin-bottom:0}
}

/* product page */
.gal #mn{border-radius:20px;box-shadow:var(--sh);transition:transform .5s}
.gal .th img{border-radius:12px;transition:.25s}.gal .th img:hover{transform:scale(1.05);border-color:var(--wine)}
.pd h1{font-size:clamp(28px,6vw,40px)!important}
.pd .pr{padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);display:inline-flex}
.sz span{border-radius:14px;min-width:60px;padding:11px 14px;font-weight:500;transition:.2s}
.sz label:hover span{border-color:var(--wine);transform:translateY(-2px)}
.sz input:checked+span{box-shadow:0 10px 20px -10px #641E32}
.trustrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:18px}
.trustrow>div{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 12px;font-size:13px;line-height:1.3}
.trustrow i{font-style:normal;font-size:20px}
@media(max-width:860px){.pd form>button.btn{position:sticky;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:7;box-shadow:0 14px 30px -10px #641E32}}

/* cards on home / collection */
.cd{border:1px solid #f4e6ee}
.cd h3{font-size:19px}
.flt{border-radius:16px;box-shadow:var(--sh)}

/* bag + checkout */
.cg{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"items sum" "form sum";gap:0 18px;align-items:start}
.cg-items{grid-area:items}.cg-sum{grid-area:sum;position:sticky;top:122px}.cg-form{grid-area:form}
@media(max-width:860px){.cg{grid-template-columns:minmax(0,1fr);grid-template-areas:"items" "sum" "form"}.cg-sum{position:static}}
.bagit{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.bagit:last-child{border:0}.bagit>img{width:84px;height:108px;object-fit:cover;border-radius:12px;background:#f3e6ee}
.bi-m a b{font-weight:500;line-height:1.3;display:block}
.bi-r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.bi-r>b{font-weight:500;font-size:16px}
.qty{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:99px;overflow:hidden;background:#fff;margin:0}
.qty button{background:none;color:var(--teal);border:0;width:38px;height:38px;font-size:18px;cursor:pointer;transition:.2s;padding:0;line-height:1}
.qty button:hover{background:#EFE5D9}.qty span{min-width:30px;text-align:center;font-weight:500}.qty .rm{border-left:1px solid var(--line);font-size:15px}
@media(max-width:480px){.bagit{grid-template-columns:72px minmax(0,1fr)}.bagit>img{width:72px;height:92px}.bi-r{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}
.cform input,.cform textarea,.cform select{margin-bottom:12px;background:#fff}
.payopt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;cursor:pointer;transition:.2s;background:#fff}
.payopt:hover{border-color:var(--wine)}
.payopt:has(input:checked){border-color:var(--teal);background:#EFE5D9;box-shadow:0 10px 24px -16px #641E32}
.payopt input{width:20px;height:20px;accent-color:#641E32;margin:0;flex:none}
.payopt b{font-weight:500;display:block}.payopt small{color:var(--mut)}

/* footer */
footer{border-radius:28px 28px 0 0;overflow:hidden}
footer a{transition:.2s}footer a:hover{padding-left:4px}

/* empty states & pills */
.emp{border-radius:18px;box-shadow:var(--sh);border-style:solid}
.chs .ch{transition:.2s}.chs .ch:hover{border-color:var(--wine)}.chs .ch.on{background:var(--grad);color:#fff;border-color:transparent}
.oc{border:1px solid #f4e6ee}

/* ===== v6.1: no blue flash / blue selection when tapping boxes and buttons ===== */
*,*:before,*:after{-webkit-tap-highlight-color:rgba(0,0,0,0)!important}
a,button,summary,label,.btn,.oc,.k-cc,.k-det>summary,.ch,.bnav a,.payopt,.sz span,.st,.cd,.dd>a,nav a,.acn a{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
a,a:visited,a:hover,a:active,a:focus{color:inherit;text-decoration:none}
.bc a,.gst a,.dg a,.lk{text-decoration:underline}
a:focus,button:focus,summary:focus,label:focus,.oc:focus{outline:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #B85C7055;outline-offset:2px}
button,input[type=submit]{-webkit-appearance:none;appearance:none;color:inherit}
.btn.d,.btn.d:hover,.btn.d:active,.btn.d:focus{color:#fff}
.btn.o,.btn.o:visited,.btn.o:active,.btn.o:focus{color:var(--teal)}
.btn.r,.btn.r:active,.btn.r:focus{color:var(--bad)}
.hero .btn.o,.ban .btn.o{color:#fff}
.oc:active,.k-cc:active,.cd:active{background-color:#fff}
::selection{background:#f7c6da;color:#292326}
::-moz-selection{background:#f7c6da;color:#292326}
input,textarea{-webkit-user-select:text;user-select:text}