/* Kalaimagal — shortlist, top strip, search and ordering steps (shared by all pages).
   Uses the page's own colour tokens, with fallbacks so it works on the homepage and inner pages. */
:root{--kc:var(--kumkum,var(--maroon,#8B1A1A));--kg:var(--gold,#C9920A);--kgd:var(--gold-deep,#8A6510);--ki:var(--ink,#2A1F17);--ks:var(--ink-soft,#6A5A4C);--kl:var(--line,#E8DCC4);--kp:var(--paper,var(--white,#FFFDF8));--kcr:var(--cream,var(--ivory,#FBF6EC))}

/* top strip (inner pages) */
.km-strip{background:#F4EAD6;border-bottom:1px solid var(--kl);font-size:13px;color:var(--ki)}
.km-strip div{max-width:1240px;margin:0 auto;padding:7px 32px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.km-strip a{color:var(--kc);font-weight:600;text-decoration:none}
@media (max-width:760px){.km-strip div{padding:7px 20px;justify-content:center;text-align:center}.km-strip .hide-sm{display:none}}

/* shortlist button in header */
.km-listbtn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.km-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:20px;background:#fff;color:var(--kc);font-size:12px;font-weight:700;letter-spacing:0}

/* add buttons */
.km-add{font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;cursor:pointer;border:1px solid var(--kc);background:var(--kc);color:#fff;padding:10px 14px;border-radius:6px;transition:background .2s,color .2s}
.km-add:hover{background:var(--kgd);border-color:var(--kgd)}
.km-add.added{background:#fff;color:var(--kc)}
.km-add-sm{margin-top:14px;padding:8px 12px;font-size:11px;background:transparent;color:var(--kc)}
.km-add-sm:hover{background:var(--kc);color:#fff}
.km-add-sm.added{background:#FFF4E0;border-color:var(--kg);color:var(--kgd)}

/* invitation card actions */
.card-actions{display:flex;gap:8px;padding:0 20px 18px}
.card-actions .km-add{flex:1}
.card-actions .km-wa{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--kl);border-radius:6px;color:#128C4A;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.card-actions .km-wa:hover{border-color:#25D366;background:#F1FBF4}

/* search on catalogue */
.km-search{position:relative;flex:1 1 260px;max-width:420px}
.km-search input{width:100%;font:inherit;font-size:14px;padding:10px 14px 10px 38px;border:1px solid var(--kl);border-radius:100px;background:#fff;color:var(--ki)}
.km-search input:focus{outline:none;border-color:var(--kg)}
.km-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ks)}
.km-noresult{max-width:1240px;margin:0 auto;padding:30px 32px;color:var(--ks)}

/* modal qty row */
.km-modal-add{display:flex;gap:8px;align-items:stretch;margin-bottom:4px}
.km-modal-add input{width:120px;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--kl);border-radius:6px}
.km-modal-add .km-add{flex:1}

/* toast */
.km-toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%) translateY(16px);background:var(--ki);color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:500;max-width:calc(100vw - 32px)}
.km-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.km-toast a{color:#F2C46B;margin-left:8px;font-weight:600}

/* shortlist page */
.km-wrap{max-width:1240px;margin:0 auto;padding:40px 32px 72px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.km-panel{background:#fff;border:1px solid var(--kl);border-radius:14px;padding:26px}
.km-panel h2{font-size:24px;margin-bottom:14px}
.km-item{display:grid;grid-template-columns:1fr 150px 38px;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--kl)}
.km-item b{display:block;font-size:15.5px;font-weight:600}
.km-item small{color:var(--ks);font-size:12.5px}
.km-qty span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ks);margin-bottom:4px}
.km-qty input{width:100%;font:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--kl);border-radius:7px}
.km-rm{background:none;border:1px solid var(--kl);border-radius:8px;height:38px;cursor:pointer;color:var(--ks);font-size:20px;align-self:end}
.km-rm:hover{color:var(--kc);border-color:var(--kc)}
.km-empty{color:var(--ks);padding:8px 0 4px}
.km-ok{background:#F1FBF4;border:1px solid #A8E0BC;color:#145A32;padding:14px 16px;border-radius:10px;margin-top:14px;font-weight:500}
.km-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.km-wrap{grid-template-columns:1fr;padding:28px 20px 60px}}
@media (max-width:520px){.km-item{grid-template-columns:1fr 38px}.km-qty{grid-column:1/2}.km-rm{grid-row:1;grid-column:2}.km-two{grid-template-columns:1fr}}

/* ordering steps */
.km-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s;margin-top:44px}
.km-step{position:relative;background:var(--kp);border:1px solid var(--kl);border-radius:12px;padding:30px 24px 24px}
.km-step::before{counter-increment:s;content:counter(s);position:absolute;top:-15px;left:22px;width:32px;height:32px;border-radius:50%;background:var(--kc);color:#fff;font-weight:600;display:grid;place-items:center;font-size:15px;font-family:'DM Sans','Jost',sans-serif}
.km-step h3{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:600;color:var(--ki);margin-bottom:8px}
.km-step p{font-size:14.5px;line-height:1.7;color:var(--ks)}
@media (max-width:980px){.km-steps{grid-template-columns:1fr 1fr;row-gap:30px}}
@media (max-width:520px){.km-steps{grid-template-columns:1fr}}

/* mobile bottom bar: 3 buttons */
.mobile-bar .mb-list{background:var(--kc);color:#fff}
@media (max-width:760px){.header-cta.km-listbtn{display:none}}
.mobile-bar .mb-list .km-count{min-width:20px;height:20px;font-size:11px}
@media (max-width:760px){.filter-wrap{position:static}.km-search{max-width:none;margin-left:0!important}}