/* ============================================================
   ভাতখেকো (Bhatkheko) — shared design system
   Used by: index.html, cart.html, about.html, checkout.html
   ============================================================ */

:root{
  --cream:#F1E6D3;
  --cream-deep:#E7D8BC;
  --paper:#FBF5E9;
  --ink:#221B14;
  --ink-soft:#3A2F24;
  --maroon:#7C2A1B;
  --maroon-deep:#5E1E12;
  --olive:#3E4A34;
  --gold:#B4903F;
  --line: rgba(34,27,20,0.14);
  --radius: 3px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Hind Siliguri','Jost',sans-serif;
  font-size:16px;
}
.font-bn{font-family:'Tiro Bangla', serif;}
.font-en-accent{font-family:'Cormorant Garamond', serif;}
.font-ui{font-family:'Jost', sans-serif; letter-spacing:.04em;}

::selection{background:var(--maroon); color:var(--paper);}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--maroon); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Motif divider ---------- */
.motif{display:inline-flex; align-items:center; gap:.5rem; color:var(--maroon);}
.motif svg{width:20px; height:20px; fill:var(--maroon);}
.motif .rule{height:1px; width:38px; background:linear-gradient(90deg,transparent, var(--gold), transparent);}

/* alpona (rangoli-style dot/line) rule used as a section divider */
.alpona-rule{width:100%; height:14px; overflow:hidden; opacity:.55;}
.alpona-rule svg{width:100%; height:100%;}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--ink); color:var(--cream-deep);
  font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem 0; overflow:hidden; white-space:nowrap;
}
.announce .track{display:inline-block; padding-left:100%; animation: marquee 22s linear infinite;}
@keyframes marquee{0%{transform:translateX(0);} 100%{transform:translateX(-100%);}}

/* ---------- Navbar ---------- */
.navbar-bk{background:var(--paper); border-bottom:1px solid var(--line); padding:.85rem 0;}
.brand-wrap{display:flex; flex-direction:column; line-height:1; align-items:center;}
.brand-name{font-family:'Tiro Bangla', serif; font-size:1.7rem; color:var(--ink); letter-spacing:.02em;}
.brand-sub{font-family:'Jost',sans-serif; font-size:.55rem; letter-spacing:.32em; color:var(--maroon); margin-top:2px;}
.nav-icon-btn{background:none; border:none; color:var(--ink); position:relative; font-size:1.25rem; padding:.25rem .5rem;}
.cart-badge{
  position:absolute; top:-2px; right:-2px; background:var(--maroon); color:var(--paper);
  font-size:.6rem; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:'Jost',sans-serif;
}
.bk-nav-links a{font-family:'Jost',sans-serif; font-size:.85rem; letter-spacing:.08em; color:var(--ink-soft); padding:.4rem .9rem; position:relative;}
.bk-nav-links a::after{content:""; position:absolute; left:.9rem; right:.9rem; bottom:.15rem; height:1px; background:var(--maroon); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
.bk-nav-links a:hover::after, .bk-nav-links a.active::after{transform:scaleX(1);}
.bk-nav-links a.active{color:var(--maroon);}

/* ---------- Buttons ---------- */
.btn-bk-primary{
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  font-family:'Jost',sans-serif; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 1.9rem; border-radius:var(--radius); display:inline-flex; align-items:center; gap:.6rem; transition:.25s ease;
}
.btn-bk-primary:hover{background:var(--maroon); border-color:var(--maroon); color:var(--paper);}
.btn-bk-primary:disabled{opacity:.5; cursor:not-allowed;}
.btn-bk-outline{
  background:transparent; color:var(--ink); border:1px solid var(--ink);
  font-family:'Jost',sans-serif; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 1.9rem; border-radius:var(--radius); transition:.25s ease; display:inline-flex; align-items:center; gap:.6rem; justify-content:center;
}
.btn-bk-outline:hover{background:var(--ink); color:var(--paper);}
.btn-bk-block{width:100%; padding:.95rem; border-radius:var(--radius); font-family:'Jost',sans-serif; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem;}

/* ---------- Section heading ---------- */
.section-pad{padding:3.5rem 0;}
.section-head{margin-bottom:2rem;}
.section-eyebrow{font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--maroon); margin-bottom:.4rem;}
.section-title{font-family:'Tiro Bangla', serif; font-size:2rem; color:var(--ink);}

/* ---------- Page header (used by cart/about/checkout) ---------- */
.page-header{padding:2.6rem 0 1.6rem; border-bottom:1px solid var(--line); background:var(--paper);}
.page-header h1{font-family:'Tiro Bangla', serif; font-size:2.2rem; color:var(--ink); margin:.3rem 0 0;}
.breadcrumb-bk{font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase;}
.breadcrumb-bk a{color:var(--ink-soft);}
.breadcrumb-bk a:hover{color:var(--maroon);}
.breadcrumb-bk .sep{margin:0 .4rem; color:var(--gold);}

/* ---------- Small product mockup (shirt-shaped, used in cart items etc.) ---------- */
.mockup-wrap{position:relative; aspect-ratio:1/1.12; border-radius:var(--radius); overflow:hidden; background:var(--paper); border:1px solid var(--line);}
.mockup-wrap .hook{position:absolute; top:8%; left:50%; transform:translateX(-50%); width:2px; height:11%; background:var(--ink-soft); z-index:3;}
.mockup-wrap .hook::before{content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:14px; height:14px; border:2px solid var(--ink-soft); border-bottom:none; border-radius:14px 14px 0 0;}
.tshirt{position:absolute; left:50%; top:16%; transform:translateX(-50%); width:74%; filter:drop-shadow(0 10px 14px rgba(34,27,20,.18));}
.tshirt path.body{stroke:rgba(34,27,20,.18); stroke-width:1.5;}
.mockup-art{position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); width:38%;}
.mockup-art svg{width:100%; height:auto; opacity:.92;}
.mockup-wrap .fav{position:absolute; top:.6rem; right:.6rem; z-index:4; width:32px; height:32px; border-radius:50%; background:rgba(251,245,233,.9); border:none; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:.2s;}
.mockup-wrap .fav.active, .mockup-wrap .fav:hover{color:var(--maroon);}
.product-name{font-family:'Hind Siliguri', sans-serif; font-weight:600; font-size:.98rem; color:var(--ink); margin-top:.85rem;}
.product-price{font-family:'Jost', sans-serif; font-size:.88rem; color:var(--maroon-deep);}

/* mini design preview: tiny shirt icon with real artwork (used across pages for variant pickers) */
.design-mini{position:relative; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); cursor:pointer; transition:.2s; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.design-mini.active{border-color:var(--maroon); box-shadow:0 0 0 1px var(--maroon);}
.design-mini svg.mini-shirt{position:absolute; width:78%; top:8%; left:50%; transform:translateX(-50%);}
.design-mini .mini-art{position:absolute; width:34%; top:46%; left:50%; transform:translate(-50%,-50%); text-align:center; line-height:1.1;}
.design-mini .mini-art svg{width:100%; height:auto;}

/* ---------- Form controls ---------- */
.bk-label{font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.4rem; display:block;}
.bk-input, .bk-select, .bk-textarea{
  width:100%; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.7rem .9rem; font-family:'Hind Siliguri',sans-serif; font-size:.92rem; color:var(--ink);
  transition:.2s;
}
.bk-input:focus, .bk-select:focus, .bk-textarea:focus{outline:none; border-color:var(--maroon); box-shadow:0 0 0 1px var(--maroon); background:#fff;}
.bk-input::placeholder, .bk-textarea::placeholder{color:rgba(58,47,36,.45);}
.invalid-msg{font-family:'Jost',sans-serif; font-size:.7rem; color:var(--maroon); margin-top:.3rem; display:none;}
.bk-input.is-invalid, .bk-select.is-invalid{border-color:var(--maroon);}
.bk-input.is-invalid + .invalid-msg, .bk-select.is-invalid + .invalid-msg{display:block;}

/* ---------- Cards / panels ---------- */
.bk-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);}
.bk-card-pad{padding:1.6rem;}

/* ---------- Badges ---------- */
.badge-cod{
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(62,74,52,.12); color:var(--olive);
  font-family:'Jost',sans-serif; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:20px; border:1px solid rgba(62,74,52,.3);
}
.badge-soon{
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(34,27,20,.06); color:var(--ink-soft);
  font-family:'Jost',sans-serif; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.25rem .55rem; border-radius:20px;
}

/* ---------- Footer ---------- */
.footer-bk{background:var(--ink); color:rgba(251,245,233,.65); padding:3.5rem 0 1.5rem;}
.footer-bk h6{font-family:'Jost', sans-serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-deep); margin-bottom:1.1rem;}
.footer-bk a{display:block; font-size:.86rem; padding:.28rem 0; color:rgba(251,245,233,.6); transition:.2s;}
.footer-bk a:hover{color:var(--gold);}
.footer-brand{font-family:'Tiro Bangla', serif; font-size:1.6rem; color:var(--cream-deep);}
.footer-tagline{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.15rem; color:var(--gold); text-align:center; padding:1.6rem 0; border-top:1px solid rgba(251,245,233,.12); border-bottom:1px solid rgba(251,245,233,.12); margin:2.2rem 0 1.5rem;}
.social-icon{width:36px; height:36px; border-radius:50%; border:1px solid rgba(251,245,233,.3); display:inline-flex; align-items:center; justify-content:center; color:var(--cream-deep); margin-right:.6rem; transition:.2s;}
.social-icon:hover{background:var(--maroon); border-color:var(--maroon); color:var(--paper);}
.newsletter-input{background:transparent; border:none; border-bottom:1px solid rgba(251,245,233,.35); color:var(--paper); font-family:'Jost',sans-serif; font-size:.85rem; padding:.5rem 0;}
.newsletter-input::placeholder{color:rgba(251,245,233,.4);}
.newsletter-input:focus{outline:none; border-color:var(--gold); box-shadow:none; background:transparent; color:var(--paper);}

/* ---------- Toast ---------- */
.bk-toast{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:1080;
  background:var(--ink); color:var(--paper); padding:.9rem 1.3rem; border-radius:var(--radius);
  font-family:'Jost',sans-serif; font-size:.85rem; display:flex; align-items:center; gap:.6rem;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5); transform:translateY(20px); opacity:0; pointer-events:none; transition:.3s ease;
}
.bk-toast.show{transform:translateY(0); opacity:1;}
.bk-toast i{color:#8FB08A;}

/* ---------- Progress steps (checkout) ---------- */
.steps{display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:2rem;}
.step{display:flex; align-items:center; gap:.5rem; font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.step .dot{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--paper); display:flex; align-items:center; justify-content:center; font-family:'Jost',sans-serif; font-size:.75rem;}
.step.active .dot{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.step.done .dot{background:var(--olive); border-color:var(--olive); color:var(--paper);}
.step-line{width:34px; height:1px; background:var(--line);}

/* ---------- OTP modal ---------- */
.otp-modal-backdrop{
  position:fixed; inset:0; background:rgba(34,27,20,.55); z-index:1050;
  display:none; align-items:center; justify-content:center; padding:1rem;
}
.otp-modal-backdrop.show{display:flex;}
.otp-modal{
  background:var(--paper); border-radius:var(--radius); max-width:380px; width:100%;
  padding:1.8rem; box-shadow:0 25px 60px -15px rgba(0,0,0,.5);
}
.otp-modal h5{font-family:'Tiro Bangla', serif; font-size:1.3rem; margin-bottom:.3rem;}
.otp-modal p.sub{font-family:'Hind Siliguri',sans-serif; font-size:.85rem; color:var(--ink-soft); margin-bottom:1.2rem;}
.otp-digits{display:flex; gap:.5rem; justify-content:center; margin-bottom:1rem;}
.otp-digits input{
  width:42px; height:50px; text-align:center; font-size:1.3rem; font-family:'Jost',sans-serif;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
}
.otp-digits input:focus{outline:none; border-color:var(--maroon); box-shadow:0 0 0 1px var(--maroon);}
.otp-test-hint{
  background:rgba(180,144,63,.12); border:1px dashed var(--gold); border-radius:var(--radius);
  padding:.6rem .8rem; font-family:'Jost',sans-serif; font-size:.72rem; color:var(--ink-soft); margin-bottom:1rem;
}
.otp-error{color:var(--maroon); font-family:'Jost',sans-serif; font-size:.78rem; min-height:1.2rem; margin-bottom:.6rem;}
.otp-resend{font-family:'Jost',sans-serif; font-size:.75rem; color:var(--ink-soft); text-align:center;}
.otp-resend button{background:none; border:none; color:var(--maroon); text-decoration:underline;}
.otp-resend button:disabled{color:var(--ink-soft); text-decoration:none; cursor:not-allowed;}

/* ---------- product grid (PHP-rendered) ---------- */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1.4rem;}
.spinner-inline{width:16px; height:16px; border:2px solid rgba(251,245,233,.4); border-top-color:#fff; border-radius:50%; display:inline-block; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}