/* =================================================================================================================
   Wild Furniture - the one stylesheet for the shop, the account pages and the admin panel.
   Design: warm ivory paper, walnut ink, terracotta accent, serif headings (Fraunces / Noto Serif Bengali).
   Everything works without JavaScript; motion only runs under html.motion (added by app.js) and stops completely
   under prefers-reduced-motion.
   ================================================================================================================= */

/* ---------------------------------------------------------------- 1. Tokens */
:root{
  --bg:#FAF6F0; --paper:#FFFFFF; --cream:#F2E9DC;
  --ink:#241A12; --muted:#6F6358; --line:#E6DCCF;
  --accent:#9C4A24; --accent-hover:#843C1C; --accent-2:#C47A45;
  --deep:#22180F; --on-deep:#F3EADD;
  --ok:#2F7A4F; --ok-bg:#EAF5EE; --warn:#9A6B12; --warn-bg:#FBF3E2; --bad:#B23A2E; --bad-bg:#FBECEA;
  --radius:18px; --radius-band:28px; --radius-input:12px; --radius-pill:999px;
  --ease:cubic-bezier(.2,.75,.2,1);
  --serif:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 0 0 1px var(--line), 0 18px 40px -32px rgba(60,35,15,.35);
  --shadow-hover:0 0 0 1px var(--line), 0 28px 48px -26px rgba(60,35,15,.45);
  --page:min(1240px, 100% - 32px);
  --sec:clamp(56px, 8vw, 112px);
  --pad:clamp(18px, 2.4vw, 26px);
  --grain:repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px);

  /* Bootstrap 5 re-themed to the same tokens, so its components match without extra classes */
  --bs-body-font-family:var(--sans); --bs-body-font-size:1rem; --bs-body-line-height:1.6;
  --bs-body-color:var(--ink); --bs-body-bg:var(--bg); --bs-emphasis-color:var(--ink);
  --bs-secondary-color:var(--muted); --bs-tertiary-bg:var(--cream);
  --bs-border-color:var(--line); --bs-border-radius:12px; --bs-border-radius-sm:10px; --bs-border-radius-lg:18px;
  --bs-link-color:var(--accent); --bs-link-hover-color:var(--accent-hover); --bs-link-color-rgb:156,74,36; --bs-link-hover-color-rgb:132,60,28;
  --bs-primary:#9C4A24; --bs-primary-rgb:156,74,36; --bs-success-rgb:47,122,79; --bs-danger-rgb:178,58,46; --bs-warning-rgb:154,107,18;
  --bs-focus-ring-color:rgba(156,74,36,.25);
}
html[lang="bn"]{
  --serif:"Noto Serif Bengali","Hind Siliguri","Noto Sans Bengali",serif;
  --sans:"Hind Siliguri","Noto Sans Bengali","Manrope",system-ui,sans-serif;
}

/* ---------------------------------------------------------------- 2. Base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; }
img,svg,video{ max-width:100%; }
img{ display:block; height:auto; }
.ico{ display:inline-block; flex:none; vertical-align:middle; }
a{ color:var(--accent); text-underline-offset:3px; }
a:hover{ color:var(--accent-hover); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ color:var(--ink); font-weight:600; line-height:1.2; }
h1,h2,.h1,.h2,.h3{ font-family:var(--serif); font-weight:500; letter-spacing:-.01em; }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] .h1, html[lang="bn"] .h2, html[lang="bn"] .h3{ letter-spacing:0; line-height:1.3; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; }
::selection{ background:rgba(196,122,69,.28); }
hr{ border-color:var(--line); opacity:1; }
code{ color:var(--accent); }
.text-muted, .text-secondary{ color:var(--muted) !important; }
.text-success{ color:var(--ok) !important; }
.text-danger{ color:var(--bad) !important; }
.text-warning{ color:var(--warn) !important; }
.small, small{ font-size:.875em; }
.req{ color:var(--bad); }
.skip-link{ position:absolute; left:12px; top:-60px; z-index:2000; padding:10px 16px; border-radius:var(--radius-pill); background:var(--ink); color:#fff; font-weight:600; text-decoration:none; transition:top .2s; }
.skip-link:focus{ top:12px; color:#fff; }
.visually-hidden-focusable:not(:focus):not(:focus-within){ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; }
[hidden]{ display:none !important; }

.wrap{ width:var(--page); margin-inline:auto; }
.sec{ padding-block:var(--sec); }
.sec--tight{ padding-top:0; }
.main{ padding-block:clamp(20px, 3vw, 36px) clamp(56px, 7vw, 96px); min-height:50vh; }
.main--flush{ padding:0; }

/* ---------------------------------------------------------------- 3. Type */
.eyebrow, .h-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-family:var(--sans); }
.eyebrow::before, .h-eyebrow::before{ content:""; width:28px; height:1.5px; background:currentColor; flex:none; }
html[lang="bn"] .eyebrow, html[lang="bn"] .h-eyebrow{ text-transform:none; letter-spacing:.02em; font-size:14px; }
.eyebrow--plain::before{ display:none; }
.lead, .h-lead{ font-size:clamp(17px, 1.5vw, 19px); line-height:1.6; color:var(--muted); max-width:46ch; font-weight:400; }
.page-title{ margin:0 0 8px; font-family:var(--serif); font-weight:500; font-size:clamp(28px, 4vw, 42px); line-height:1.1; letter-spacing:-.01em; }
html[lang="bn"] .page-title{ letter-spacing:0; line-height:1.3; }
.serif{ font-family:var(--serif); font-weight:500; }
.num{ font-variant-numeric:tabular-nums; }
.prose{ max-width:72ch; }
.prose h2{ margin:36px 0 10px; font-size:24px; }
.prose p, .prose li{ color:#3C3027; line-height:1.75; }
.prose ul{ padding-left:20px; }
.prose .lead{ max-width:none; }

/* Section header: title block left, a text link right */
.h-head, .head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:clamp(24px, 4vw, 44px); }
.h-head h2, .head h2{ margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(30px, 4vw, 48px); line-height:1.08; letter-spacing:-.01em; }
html[lang="bn"] .h-head h2, html[lang="bn"] .head h2{ line-height:1.25; letter-spacing:0; }
.h-head p, .head p{ margin:10px 0 0; color:var(--muted); max-width:52ch; }
.head--sm h2{ font-size:clamp(24px, 3vw, 32px); }

/* Page header (inner pages): eyebrow, serif h1, meta line; tags and actions on the right */
.page-head, .od-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:clamp(20px, 3vw, 28px); }
.page-head h1, .od-head h1{ margin:0; font-family:var(--serif); font-weight:500; font-size:clamp(28px, 4vw, 42px); line-height:1.1; letter-spacing:-.01em; overflow-wrap:anywhere; }
html[lang="bn"] .page-head h1, html[lang="bn"] .od-head h1{ line-height:1.3; letter-spacing:0; }
.page-head .eyebrow, .od-head .eyebrow{ margin-bottom:8px; }
.page-head__meta, .od-head__meta{ margin-top:8px; color:var(--muted); font-size:15px; }
.page-head__tags, .od-head__tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.page-head p.lead{ margin:10px 0 0; }

/* Breadcrumb: 14px muted with "/" separators */
.crumbs, .breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; padding:0; list-style:none; font-size:14px; color:var(--muted); background:none; --bs-breadcrumb-divider:none; }
.crumbs a, .breadcrumb a{ color:inherit; text-decoration:none; }
.crumbs a:hover, .breadcrumb a:hover{ color:var(--accent); text-decoration:underline; }
.crumbs li + li::before, .breadcrumb-item + .breadcrumb-item::before{ content:"/"; float:none; padding:0; margin-right:8px; color:inherit; opacity:.5; }
.breadcrumb-item{ padding:0 !important; }
.breadcrumb-item.active{ color:var(--muted); }
.crumbs [aria-current]{ color:var(--ink); overflow-wrap:anywhere; }

/* ---------------------------------------------------------------- 4. Buttons and links */
.btn, .h-btn, .od-btn{
  --bs-btn-padding-x:26px; --bs-btn-padding-y:15px; --bs-btn-font-size:16px; --bs-btn-font-weight:600; --bs-btn-border-width:1.5px; --bs-btn-border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:999px; border:1.5px solid transparent;
  font-family:var(--sans); font-weight:600; font-size:16px; line-height:1.1; text-decoration:none; text-align:center; cursor:pointer; white-space:normal;
  transition:background-color .3s, color .3s, border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.btn svg, .h-btn svg, .od-btn svg{ flex:none; transition:transform .35s var(--ease); }
.btn:hover .ico-arrow, .h-btn:hover svg, .btn-arrow:hover svg{ transform:translateX(4px); }
.btn:active, .h-btn:active, .od-btn:active{ transform:scale(.97); }
.btn:disabled, .btn.disabled{ opacity:.55; pointer-events:none; }
.btn-sm{ padding:9px 16px; font-size:14px; gap:6px; }
.btn-lg{ padding:17px 30px; font-size:17px; }
.od-btn{ padding:11px 18px; font-size:15px; gap:8px; }
.od-btn--lg{ padding:15px 24px; font-size:16px; }
.btn.w-100, .od-btn--block{ display:flex; width:100%; }

/* Primary (terracotta) */
.btn-primary, .btn-accent, .h-btn--primary, .od-btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff !important; box-shadow:0 10px 24px -12px rgba(156,74,36,.7); }
.btn-primary:hover, .btn-accent:hover, .h-btn--primary:hover, .od-btn--primary:hover,
.btn-primary:focus-visible, .btn-accent:focus-visible{ background:var(--accent-hover); border-color:var(--accent-hover); color:#fff !important; box-shadow:0 14px 30px -12px rgba(156,74,36,.8); }
.btn-primary:active, .btn-accent:active{ background:var(--accent-hover) !important; border-color:var(--accent-hover) !important; }
/* Ghost (ink outline that fills with ink) */
.btn-ghost, .h-btn--ghost, .btn-outline-dark, .btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light{ background:transparent; border-color:var(--ink); color:var(--ink) !important; }
.btn-ghost:hover, .h-btn--ghost:hover, .btn-outline-dark:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-secondary:hover, .btn-light:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg) !important; }
.btn-secondary:disabled{ background:var(--cream); border-color:var(--line); color:var(--muted) !important; opacity:1; }
.od-btn--ghost{ border-color:var(--line); background:var(--paper); color:var(--ink) !important; }
.od-btn--ghost:hover{ border-color:var(--ink); }
/* Ivory (on dark bands) */
.btn-ivory, .h-btn--ivory{ background:var(--on-deep); border-color:var(--on-deep); color:var(--deep) !important; }
.btn-ivory:hover, .h-btn--ivory:hover{ background:#fff; border-color:#fff; color:var(--deep) !important; }
/* Danger outline (fills red on hover) and success */
.btn-danger-outline, .od-btn--danger, .btn-outline-danger{ background:var(--paper); border-color:#E8C4BF; color:var(--bad) !important; }
.btn-danger-outline:hover, .od-btn--danger:hover, .btn-outline-danger:hover{ background:var(--bad); border-color:var(--bad); color:#fff !important; }
.btn-danger{ background:var(--bad); border-color:var(--bad); color:#fff !important; }
.btn-danger:hover{ background:#962F25; border-color:#962F25; color:#fff !important; }
.btn-success{ background:var(--ok); border-color:var(--ok); color:#fff !important; }
.btn-success:hover{ background:#25633F; border-color:#25633F; color:#fff !important; }
.btn-outline-success{ background:var(--paper); border-color:#BFDCC9; color:var(--ok) !important; }
.btn-outline-success:hover{ background:var(--ok); border-color:var(--ok); color:#fff !important; }
.btn-link{ padding:0; border:0; background:none; color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; box-shadow:none; border-radius:0; }
.btn-link:hover{ color:var(--accent-hover); }
.btn-link.text-danger{ color:var(--bad) !important; }
.btn.is-busy{ opacity:.7; pointer-events:none; }
.btn.is-added{ background:var(--ok) !important; border-color:var(--ok) !important; color:#fff !important; }
.btn-close{ border-radius:50%; opacity:.6; }
.btn-close:focus{ box-shadow:0 0 0 3px rgba(156,74,36,.25); }

/* Text link with a drawn underline and an arrow that moves */
.h-link, .tlink, .link-draw{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); text-decoration:none; background:linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom:3px; transition:background-size .4s var(--ease), color .3s; }
.h-link:hover, .tlink:hover, .link-draw:hover{ background-size:100% 1.5px; color:var(--ink); }
.h-link svg, .tlink svg, .link-draw svg{ transition:transform .35s var(--ease); }
.h-link:hover svg, .tlink:hover svg, .link-draw:hover svg{ transform:translateX(4px); }
.tlink--accent{ color:var(--accent); }
.tlink--accent:hover{ color:var(--accent-hover); }

/* ---------------------------------------------------------------- 5. Pills: status, payment method, counters */
.st{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:13px; font-weight:700; line-height:1.4; white-space:nowrap; background:var(--cream); color:var(--ink); }
.st::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85; }
.st--ok{ background:var(--ok-bg); color:var(--ok); }
.st--wait{ background:var(--warn-bg); color:var(--warn); }
.st--bad{ background:var(--bad-bg); color:var(--bad); }
.st--info{ background:#EEF0F6; color:#3F4B7A; }
.st--muted{ background:var(--cream); color:var(--muted); }
.pm, .od-pm{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:700; line-height:1.35; white-space:nowrap; background:var(--cream); color:var(--ink); }
.pm::before, .od-pm::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.8; }
.pm--bkash, .od-pm--bkash{ background:#FCE7F1; color:#C2185B; }
.pm--nagad, .od-pm--nagad{ background:#FDEDE3; color:#D9480F; }
.pm--rocket, .od-pm--rocket{ background:#F1E8F8; color:#7B2C9E; }
.pm--cod, .od-pm--cod{ background:var(--ok-bg); color:var(--ok); }
.pay-pills{ display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle; }
.pay-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:13px; font-weight:700; }
.pay-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pay-bkash{ background:#FCE7F1; color:#C2185B; } .pay-nagad{ background:#FDEDE3; color:#D9480F; } .pay-cod{ background:var(--ok-bg); color:var(--ok); }
.count-pill{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--cream); color:var(--ink); font-size:12px; font-weight:700; }
.badge{ border-radius:999px; font-weight:700; padding:.4em .75em; }
.text-bg-light{ background:var(--cream) !important; color:var(--ink) !important; }

/* ---------------------------------------------------------------- 6. Forms */
.form-label, .od-field label{ display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--ink); }
.form-control, .form-select, .od-field input, .od-field select, .od-field textarea{
  display:block; width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background-color:var(--paper);
  font:inherit; font-size:16px; line-height:1.4; color:var(--ink); transition:border-color .2s, box-shadow .2s; box-shadow:none;
}
.form-select{ padding-right:40px; background-position:right 14px center; }
.form-control::placeholder, .od-field input::placeholder, textarea::placeholder{ color:#A99C8F; text-transform:none; opacity:1; }
.form-control:focus, .form-select:focus, .od-field input:focus, .od-field select:focus, .od-field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(156,74,36,.14); }
.form-control:disabled, .form-control[readonly]{ background:var(--bg); color:var(--muted); }
.form-control-sm, .form-select-sm{ padding:8px 12px; font-size:14px; border-radius:10px; }
.form-select-sm{ padding-right:34px; }
.form-control.is-invalid, .form-select.is-invalid{ border-color:var(--bad); background-image:none; padding-right:14px; }
.form-control.is-invalid:focus{ box-shadow:0 0 0 4px rgba(178,58,46,.14); }
.invalid-feedback{ margin-top:6px; font-size:13px; color:var(--bad); }
.form-text, .od-field__hint{ margin-top:6px; font-size:13px; color:var(--muted); }
.form-control-plaintext{ padding:12px 0; }
.form-check{ display:flex; align-items:flex-start; gap:10px; padding-left:0; min-height:0; }
.form-check-input{ float:none; flex:none; width:20px; height:20px; margin:2px 0 0; border:1.5px solid #CBBBA8; background-color:var(--paper); cursor:pointer; }
.form-check .form-check-input{ margin-left:0; }
.form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }
.form-check-input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(156,74,36,.14); }
.form-check-label{ cursor:pointer; line-height:1.45; }
.input-group > .form-control{ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group > .btn{ padding:11px 20px; border-radius:0 12px 12px 0; font-size:15px; }
.input-group-sm > .btn{ padding:7px 14px; font-size:14px; }
.form-grid, .od-form{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.form-grid .span-2, .od-form .span-2{ grid-column:1 / -1; }
@media (max-width:560px){ .form-grid, .od-form{ grid-template-columns:1fr; } }
.form-foot, .od-form__foot{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:4px; }
.form-foot p, .od-form__foot p{ margin:0; flex:1 1 240px; font-size:13px; color:var(--muted); }
.upper{ text-transform:uppercase; }
.upper::placeholder{ text-transform:none; }
fieldset{ min-width:0; }
legend{ float:none; }

/* Quantity stepper */
.qty-control{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; background:var(--paper); overflow:hidden; }
.qty-control button{ width:44px; height:46px; border:0; background:none; font-size:20px; color:var(--ink); cursor:pointer; transition:background .2s; }
.qty-control button:hover{ background:var(--cream); }
.qty-control input{ width:46px; height:46px; border:0; background:none; text-align:center; font:inherit; font-weight:700; color:var(--ink); -moz-appearance:textfield; appearance:textfield; }
.qty-control input:focus{ outline:none; }
.qty-control input::-webkit-outer-spin-button, .qty-control input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-control:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(156,74,36,.14); }
.qty-sm button{ width:34px; height:36px; font-size:17px; }
.qty-sm input{ width:36px; height:36px; font-size:14px; }

/* ---------------------------------------------------------------- 7. Alerts (flash messages) */
.alert{ display:flex; align-items:flex-start; gap:10px; position:relative; padding:14px 48px 14px 16px; margin-bottom:16px; border:0; border-radius:14px; line-height:1.55; font-size:15px; }
.alert .btn-close{ position:absolute; top:12px; right:12px; padding:6px; }
.alert-success{ background:var(--ok-bg); color:#1F5A38; }
.alert-danger{ background:var(--bad-bg); color:#8C2B21; }
.alert-warning{ background:var(--warn-bg); color:#6E4C0C; }
.alert-info, .alert-secondary, .alert-light{ background:var(--cream); color:var(--ink); }
.alert a{ color:inherit; font-weight:700; }
.alert:not(.alert-dismissible){ padding-right:16px; }

/* ---------------------------------------------------------------- 8. Header */
.announce{ background:var(--cream); border-bottom:1px solid var(--line); font-size:13.5px; color:#4A3D32; }
.announce .wrap{ display:flex; align-items:center; justify-content:space-between; gap:8px 20px; flex-wrap:wrap; min-height:40px; padding-block:7px; }
.announce a{ color:var(--ink); font-weight:700; text-decoration:none; }
.announce a:hover{ color:var(--accent); }
.announce__msg{ display:flex; align-items:center; gap:10px; }
.announce__msg::before{ content:"✦"; color:var(--accent); }
@media (max-width:640px){ .announce .wrap{ justify-content:center; text-align:center; } .announce__phone{ display:none; } }

.site-header{ position:sticky; top:0; z-index:1030; background:rgba(250,246,240,.92); backdrop-filter:saturate(1.2) blur(12px); -webkit-backdrop-filter:saturate(1.2) blur(12px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s; }
.site-header.scrolled{ border-bottom-color:var(--line); box-shadow:0 10px 30px -24px rgba(60,35,15,.4); }
.masthead{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; min-height:76px; }
.masthead__nav{ display:flex; align-items:center; gap:4px; }
.masthead__nav nav{ display:flex; align-items:center; gap:2px; }
.masthead__actions{ display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.wordmark{ display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.wordmark:hover{ color:var(--ink); }
.wordmark img{ max-height:44px; width:auto; }
.wordmark__mark{ flex:none; }
.wordmark__text{ display:grid; font-family:var(--serif); font-size:24px; font-weight:500; line-height:1; letter-spacing:-.01em; }
.wordmark__text small{ margin-top:5px; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
html[lang="bn"] .wordmark__text small{ letter-spacing:.02em; font-size:12px; text-transform:none; }
.nav-a, .nav-btn{ display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border:0; border-radius:999px; background:none; color:var(--ink); font:inherit; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; transition:background .25s, color .25s; }
.nav-a:hover, .nav-btn:hover, .has-menu.is-open .nav-btn{ background:var(--cream); color:var(--ink); }
.nav-a.active{ background:var(--ink); color:var(--bg); }
.nav-btn .chev{ transition:transform .3s var(--ease); }
.has-menu.is-open .chev{ transform:rotate(180deg); }
.icon-btn{ position:relative; display:inline-grid; place-items:center; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:50%; background:none; color:var(--ink); cursor:pointer; text-decoration:none; transition:background .25s; }
.icon-btn:hover{ background:var(--cream); color:var(--ink); }
.cart-badge{ position:absolute; top:3px; right:1px; display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px; font-weight:800; line-height:1; box-shadow:0 0 0 2px var(--bg); }
.cart-badge.bump{ animation:bump .5s var(--ease); }
@keyframes bump{ 40%{ transform:scale(1.35); } }

/* Language switch: a small cream track with an ink pill on the active language */
.langsw{ display:inline-flex; padding:3px; border-radius:999px; background:var(--cream); }
.langsw a{ padding:6px 11px; border-radius:999px; font-size:13px; font-weight:700; line-height:1.2; color:var(--muted); text-decoration:none; transition:background .25s, color .25s; }
.langsw a:hover{ color:var(--ink); }
.langsw a[aria-current]{ background:var(--ink); color:var(--bg); }
.langsw--dark{ background:rgba(243,234,221,.1); }
.langsw--dark a{ color:rgba(243,234,221,.7); }
.langsw--dark a[aria-current]{ background:var(--on-deep); color:var(--deep); }

/* Mega menu */
.has-menu{ position:static; }
.mega{ position:absolute; left:0; right:0; top:100%; padding-block:28px 34px; background:var(--paper); border-block:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(60,35,15,.45); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .3s, transform .35s var(--ease), visibility 0s .35s; }
.has-menu.is-open .mega{ opacity:1; visibility:visible; transform:none; transition:opacity .3s, transform .35s var(--ease); }
.mega__inner{ display:grid; grid-template-columns:1fr 320px; gap:40px; }
.mega__title{ margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
html[lang="bn"] .mega__title{ letter-spacing:0; text-transform:none; font-size:14px; }
.mega__cols{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px 24px; margin:0; padding:0; list-style:none; }
.mega__link{ display:flex; justify-content:space-between; gap:10px; padding:9px 12px; margin-inline:-12px; border-radius:12px; color:var(--ink); text-decoration:none; font-weight:600; }
.mega__link span{ color:var(--muted); font-weight:500; font-size:14px; }
.mega__link:hover{ background:var(--bg); color:var(--accent); }
.mega__feature{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; min-height:180px; padding:22px; border-radius:var(--radius); color:var(--on-deep); text-decoration:none; background:var(--grain), linear-gradient(160deg, #7A4A2E, #43281A); }
.mega__feature strong{ font-family:var(--serif); font-weight:500; font-size:24px; line-height:1.15; color:#fff; }
.mega__feature span{ font-size:14px; opacity:.8; }
.mega__feature:hover{ color:var(--on-deep); }

/* Search sheet */
.search-sheet{ border-top:1px solid var(--line); background:var(--paper); padding-block:16px; }
.search-sheet form{ display:flex; gap:10px; }
.search-sheet .btn{ flex:none; }

/* Mobile menu sheet */
.menu-sheet{ --bs-offcanvas-width:min(360px, 88vw); background:var(--bg); }
.menu-sheet .offcanvas-header{ padding:20px 22px; border-bottom:1px solid var(--line); }
.menu-sheet .offcanvas-body{ padding:16px 22px 32px; }
.menu-sheet__list{ margin:0; padding:0; list-style:none; }
.menu-sheet__list a{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-family:var(--serif); font-size:21px; }
.menu-sheet__list a span{ font-family:var(--sans); font-size:13px; color:var(--muted); }
.menu-sheet__list em{ font-style:italic; color:var(--accent); }
.menu-sheet__small{ display:grid; gap:10px; }
.menu-sheet__small a{ color:var(--muted); text-decoration:none; font-weight:600; }
.menu-sheet__small a:hover{ color:var(--accent); }
.menu-sheet .langsw{ margin-top:22px; }

/* Bottom bar on phones */
.mob-nav{ display:none; }
@media (max-width:767px){
  .mob-nav{ position:fixed; z-index:1020; left:10px; right:10px; bottom:10px; display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; padding:6px; border-radius:22px; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 0 0 1px var(--line), 0 20px 40px -20px rgba(40,22,10,.45); }
  .mob-nav a{ display:grid; justify-items:center; gap:2px; padding:7px 4px; border-radius:16px; color:var(--muted); font-size:11.5px; font-weight:700; text-decoration:none; }
  .mob-nav a.active{ color:var(--ink); background:var(--cream); }
  .mob-nav a.cta{ color:#fff; background:var(--accent); }
  body.store{ padding-bottom:86px; }
  body.has-sticky-buy{ padding-bottom:160px; }
  .masthead{ min-height:64px; grid-template-columns:auto 1fr auto; gap:8px; }
  .wordmark{ justify-self:center; }
  .wordmark__text{ font-size:20px; }
  .wordmark__text small, .wordmark__mark{ display:none; }
  .masthead__actions .langsw{ display:none; }
}
@media (max-width:991px){ .masthead__actions .langsw a{ padding:5px 9px; } }

/* ---------------------------------------------------------------- 9. Footer (dark band) */
.site-footer{ margin-top:clamp(32px, 5vw, 64px); padding-block:clamp(48px, 7vw, 88px) 28px; background:var(--deep); color:rgba(243,234,221,.72); position:relative; overflow:hidden; }
.site-footer::before{ content:""; position:absolute; width:620px; height:620px; right:-200px; top:-280px; border-radius:50%; background:radial-gradient(circle, rgba(196,122,69,.22), transparent 65%); pointer-events:none; }
.site-footer a{ color:var(--on-deep); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.foot-hero{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:24px 48px; align-items:end; padding-bottom:clamp(36px, 5vw, 56px); margin-bottom:clamp(36px, 5vw, 56px); border-bottom:1px solid rgba(243,234,221,.12); }
.foot-hero h2{ margin:0; max-width:20ch; color:var(--on-deep); font-size:clamp(30px, 4vw, 48px); line-height:1.08; }
.foot-hero p{ margin:0 0 20px; max-width:42ch; }
.foot-cols{ position:relative; display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:32px; }
.foot-cols h3{ margin:0 0 14px; color:var(--on-deep); font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
html[lang="bn"] .foot-cols h3{ letter-spacing:.02em; text-transform:none; font-size:15px; }
.foot-cols ul{ display:grid; gap:9px; margin:0; padding:0; list-style:none; font-size:15px; }
.foot-brand{ margin-bottom:10px; font-family:var(--serif); font-size:28px; color:var(--on-deep); }
.foot-pay{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.foot-pay span{ padding:5px 12px; border-radius:999px; background:rgba(243,234,221,.1); color:var(--on-deep); font-size:13px; font-weight:600; }
.foot-base{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; margin-top:clamp(36px, 5vw, 56px); padding-top:24px; border-top:1px solid rgba(243,234,221,.12); font-size:13.5px; }
@media (max-width:900px){ .foot-hero{ grid-template-columns:1fr; } .foot-cols{ grid-template-columns:1fr 1fr; } .foot-cols > :first-child{ grid-column:1 / -1; } }

/* ---------------------------------------------------------------- 10. Cards, panels and empty states */
.panel, .od-card{ background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--pad); min-width:0; }
.panel + .panel{ margin-top:20px; }
.od-card--flush, .panel--flush{ padding:0; overflow:hidden; }
.panel__head, .od-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.od-card--flush .od-card__head, .panel--flush .panel__head{ padding:var(--pad) var(--pad) 0; }
.panel h2, .od-card h2, .panel__title{ margin:0; font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.2; }
.panel h3{ font-size:17px; font-weight:600; font-family:var(--sans); }
.panel__count, .od-card__count{ color:var(--muted); font-size:14px; }
.panel--cream{ background:var(--cream); box-shadow:none; }
.empty, .shop-empty, .h-empty{ display:grid; justify-items:center; gap:8px; padding:clamp(40px, 6vw, 64px) 20px; text-align:center; border:1.5px dashed var(--line); border-radius:var(--radius); background:rgba(255,255,255,.5); }
.empty h2, .shop-empty h2, .h-empty h2{ margin:6px 0 0; font-family:var(--serif); font-weight:500; font-size:clamp(24px, 3vw, 30px); }
.empty p, .shop-empty p, .h-empty p{ margin:0 0 10px; max-width:46ch; color:var(--muted); }
.empty .ico, .shop-empty svg{ color:var(--accent-2); }
.spec{ display:grid; grid-template-columns:minmax(110px, auto) 1fr; gap:10px 18px; margin:0; font-size:15px; }
.spec dt{ font-weight:500; color:var(--muted); }
.spec dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
.pre-line{ white-space:pre-line; }

/* ---------------------------------------------------------------- 11. Product card (home, shop, related) */
/* 5 across on desktop, 4 on laptops, 3 on tablets, 2 on phones; the shop grid sits beside the filters so it holds 4 */
.pgrid, .h-grid{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 20px); margin:0; padding:0; list-style:none; }
.pgrid--side{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.pc{ position:relative; display:flex; flex-direction:column; min-width:0; height:100%; background:var(--paper); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.pc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.pc__visual{ position:relative; display:flex; flex-direction:column; overflow:hidden; }
.pc__media{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--cream); text-decoration:none; }
.ph, .h-cat, .h-wood, .h-woods a, .od-item a, .drawer-line a{ text-decoration:none; }
.pc__media img, .pc__media .ph{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.pc:hover .pc__media img, .pc:hover .pc__media .ph{ transform:scale(1.06); }
.pc__badges{ position:absolute; z-index:2; top:10px; left:10px; display:flex; flex-wrap:wrap; gap:5px; pointer-events:none; }
.pc__badge{ padding:4px 9px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1.3; background:#fff; color:var(--ink); }
.pc__badge--sale{ background:var(--accent); color:#fff; }
.pc__badge--out{ background:rgba(36,26,18,.75); color:#fff; }
.pc__quick{ position:absolute; z-index:3; left:10px; right:10px; bottom:10px; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 10px; border:0; border-radius:999px; font:inherit; font-weight:600; font-size:13px; color:var(--ink); background:rgba(255,255,255,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); cursor:pointer; text-decoration:none; transform:translateY(140%); transition:transform .45s var(--ease), background .25s; }
.pc__quick:hover{ background:#fff; color:var(--ink); }
.pc:hover .pc__quick, .pc:focus-within .pc__quick{ transform:none; }
@media (hover:none){ .pc__quick{ display:none; } }
.pc__body{ display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px; flex:1; }
.pc__cat{ margin:0; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html[lang="bn"] .pc__cat{ letter-spacing:0; text-transform:none; font-size:12px; }
.pc__name{ margin:0; font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.35; letter-spacing:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pc__name a{ color:var(--ink); text-decoration:none; }
.pc__name a::after{ content:""; position:absolute; inset:0; z-index:1; } /* the whole card is one link */
.pc__desc{ margin:4px 0 0; color:var(--muted); font-size:14px; line-height:1.55; }
.pc__foot{ margin-top:auto; padding-top:6px; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.pc__price{ display:flex; align-items:baseline; gap:2px 8px; flex-wrap:wrap; margin:0; }
.pc__price strong{ font-size:16px; color:var(--accent); font-weight:800; }
.pc__price s{ font-size:13px; color:var(--muted); }
.pc__stock{ margin:0; font-size:12px; color:var(--ok); font-weight:600; }
.pc__stock.is-low{ color:var(--warn); }
.pc__stock.is-out{ color:var(--muted); }
.pc__add{ position:relative; z-index:2; margin:0; }
.pc__add .btn{ width:36px; height:36px; padding:0; border-radius:50%; }
.pc__add .btn.is-added{ width:auto; padding:0 12px; font-size:12px; }
/* Featured grid: the lead card takes a 2x2 block of a 4-column grid, the other four fill the rest */
.h-feat{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 20px); }
.h-feat > .pc--lead{ grid-column:span 2; grid-row:span 2; }
.pc--lead .pc__visual{ flex:1; min-height:300px; }
.pc--lead .pc__media{ position:absolute; inset:0; aspect-ratio:auto; }
.pc--lead .pc__body{ flex:0; gap:6px; padding:18px 20px 20px; }
.pc--lead .pc__name{ font-family:var(--serif); font-weight:500; font-size:clamp(20px, 2vw, 26px); line-height:1.15; }
.pc--lead .pc__price strong{ font-size:20px; }
/* Lists that should end on a full row: hide the cards that would start a partial one */
@media (max-width:1199px){ .pgrid--rows-2 > :nth-child(n+9), .pgrid--row-1 > :nth-child(n+5){ display:none; } }
@media (min-width:641px) and (max-width:900px){ .pgrid--rows-2 > :nth-child(n+7), .pgrid--row-1 > :nth-child(n+4){ display:none; } }

/* Placeholder when there is no photo: the colour of the timber, its grain and the first letter */
.ph, .h-ph{ position:relative; display:grid; place-items:center; width:100%; height:100%; color:rgba(255,255,255,.5); background:var(--grain), linear-gradient(160deg, var(--wood, #A8733A), var(--wood2, #6F4A22)); }
.ph__letter{ font-family:var(--serif); font-size:clamp(56px, 7vw, 96px); line-height:1; color:rgba(255,255,255,.5); }
.ph__note{ position:absolute; left:0; right:0; bottom:14px; text-align:center; font-size:12px; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.78); }
.pc:hover .ph__note{ opacity:0; }

/* Tabs: cream track, an ink pill slides under the active tab */
.h-tabs{ position:relative; display:none; padding:5px; border-radius:999px; background:var(--cream); }
.has-js .h-tabs{ display:inline-flex; }
.h-tab{ position:relative; z-index:1; border:0; background:none; padding:11px 22px; border-radius:999px; font:inherit; font-weight:600; color:var(--muted); cursor:pointer; transition:color .35s; white-space:nowrap; }
.h-tab:hover{ color:var(--ink); }
.h-tab[aria-selected="true"]{ color:#fff; }
.h-tabs__ink{ position:absolute; z-index:0; top:5px; bottom:5px; left:0; width:0; border-radius:999px; background:var(--ink); }
.h-tabs.is-set .h-tabs__ink{ transition:transform .55s var(--ease), width .55s var(--ease); }
.h-panel + .h-panel{ margin-top:clamp(48px, 6vw, 80px); }
.has-js .h-panel + .h-panel{ margin-top:0; }
.h-panel__title{ margin:0 0 20px; font-family:var(--serif); font-weight:500; font-size:28px; }
.has-js .h-panel__title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.h-panel__more{ display:flex; justify-content:center; margin-top:clamp(28px, 4vw, 44px); }

/* ---------------------------------------------------------------- 12. Home page */
.h-hero{ position:relative; padding-block:clamp(28px, 5vw, 64px) clamp(56px, 7vw, 104px); }
.h-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px, 5vw, 80px); align-items:center; }
.h-hero__grid > *{ min-width:0; }
.h-hero__title{ margin:0 0 22px; font-family:var(--serif); font-weight:500; font-size:clamp(42px, 6.4vw, 86px); line-height:1.02; letter-spacing:-.025em; }
html[lang="bn"] .h-hero__title{ line-height:1.22; letter-spacing:0; }
.h-hero__title em{ font-style:italic; color:var(--accent); }
.h-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.h-line > span{ display:inline-block; }
.h-hero__lead{ margin:0 0 30px; }
.h-hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.h-facts{ display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:12px clamp(24px, 4vw, 48px); margin:clamp(36px, 5vw, 56px) 0 0; padding-top:26px; border-top:1px solid var(--line); }
.h-facts div{ margin:0; }
.h-facts dt{ font-family:var(--serif); font-size:clamp(28px, 3vw, 38px); font-weight:500; line-height:1; }
.h-facts dt small{ font-size:.5em; margin-left:4px; }
.h-facts dd{ margin:6px 0 0; font-size:14px; color:var(--muted); }
.h-hero__media{ position:relative; margin:0; }
.h-hero__frame{ position:relative; aspect-ratio:4/5; max-height:min(680px, 78vh); margin-left:auto; border-radius:999px 999px 26px 26px; overflow:hidden; background:var(--cream); box-shadow:0 40px 80px -40px rgba(60,35,15,.45); }
.h-hero__frame > div{ position:absolute; inset:-6% 0; }
.h-hero__frame img{ width:100%; height:100%; object-fit:cover; }
.h-hero__caption{ position:absolute; left:clamp(-28px, -2vw, -12px); bottom:clamp(24px, 4vw, 48px); display:grid; gap:2px; min-width:220px; max-width:280px; padding:16px 20px; border-radius:16px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 20px 40px -18px rgba(40,22,10,.4); color:var(--ink); text-decoration:none; }
.h-hero__caption:hover{ color:var(--ink); }
.h-hero__caption small{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); font-weight:600; }
html[lang="bn"] .h-hero__caption small{ text-transform:none; letter-spacing:0; font-size:13px; }
.h-hero__caption strong{ font-family:var(--serif); font-size:19px; font-weight:500; }
.h-hero__caption span{ display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:15px; }
.h-ring{ position:absolute; top:clamp(12px, 3vw, 36px); right:clamp(-10px, -1vw, 0px); width:clamp(96px, 10vw, 128px); aspect-ratio:1; border-radius:50%; background:var(--deep); color:var(--on-deep); display:grid; place-items:center; box-shadow:0 16px 32px -14px rgba(0,0,0,.5); }
.h-ring svg{ position:absolute; inset:0; width:100%; height:100%; }
.h-ring text{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.18em; fill:currentColor; text-transform:uppercase; }
html[lang="bn"] .h-ring text{ letter-spacing:.02em; font-size:11px; }
.h-ring b{ font-family:var(--serif); font-size:26px; font-weight:500; color:var(--accent-2); }
.h-woods{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; height:min(560px, 70vh); }
.h-woods a{ position:relative; display:flex; align-items:flex-end; padding:22px; border-radius:999px 999px 20px 20px; color:#fff; text-decoration:none; background:var(--grain), linear-gradient(170deg, var(--wood), var(--wood2)); transition:transform .5s var(--ease); }
.h-woods a:nth-child(2){ margin-top:48px; }
.h-woods a:hover{ transform:translateY(-8px); color:#fff; }
.h-woods span{ font-family:var(--serif); font-size:22px; display:grid; }
.h-woods small{ font-family:var(--sans); font-size:15px; opacity:.8; }
.h-scroll{ position:absolute; left:50%; bottom:18px; width:24px; height:38px; border:1.5px solid var(--muted); border-radius:14px; translate:-50% 0; opacity:.6; }
.h-scroll::after{ content:""; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px; background:var(--muted); translate:-50% 0; }

/* Trust strip */
.h-marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--cream); }
.h-marquee__track{ display:flex; width:max-content; }
.h-marquee__set{ display:flex; margin:0; padding:0; list-style:none; }
.h-marquee__set li{ display:flex; align-items:center; gap:10px; padding:18px 30px; white-space:nowrap; font-size:15px; }
.h-marquee__set li::before{ content:"✦"; color:var(--accent); margin-right:8px; }
.h-marquee__set span{ color:var(--muted); }
.h-marquee__set[aria-hidden]{ display:none; }
.motion .h-marquee__set[aria-hidden]{ display:flex; }
html:not(.motion) .h-marquee__track{ flex-wrap:wrap; justify-content:center; width:auto; }
html:not(.motion) .h-marquee__set{ flex-wrap:wrap; justify-content:center; }
html:not(.motion) .h-marquee__set li{ white-space:normal; padding:14px 22px; }

/* Categories: even tiles, 6 across on desktop down to 2 on phones; the custom-order tile widens to close the last row */
.h-cats{ --cols:6; display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows:210px; gap:clamp(10px, 1.2vw, 16px); margin:0; padding:0; list-style:none; }
.h-cat{ --mx:50%; --my:50%; position:relative; isolation:isolate; display:flex; flex-direction:column; height:100%; padding:14px; border-radius:14px; overflow:hidden; color:#fff !important; text-decoration:none; background:repeating-linear-gradient(105deg, rgba(255,255,255,.05) 0 2px, transparent 2px 11px), linear-gradient(150deg, var(--wood, #8B5A2B), var(--wood2, #4A2F18)); }
.h-cat img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.h-cat::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,12,6,0) 30%, rgba(20,12,6,.78)); }
.h-cat::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(420px circle at var(--mx) var(--my), rgba(255,236,210,.22), transparent 60%); opacity:0; transition:opacity .4s; }
.h-cat:hover::after{ opacity:1; }
.h-cat:hover img{ transform:scale(1.08); }
.h-cat__letter{ position:absolute; right:-.04em; top:-.2em; z-index:-1; font-family:var(--serif); font-size:140px; line-height:1; opacity:.13; pointer-events:none; }
.h-cat__go{ align-self:flex-end; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transform:rotate(-45deg); transition:transform .5s var(--ease), background .3s, color .3s; }
.h-cat:hover .h-cat__go{ transform:rotate(0); background:#fff; color:var(--ink); }
.h-cat__body{ margin-top:auto; display:grid; gap:2px; }
.h-cat__name{ font-family:var(--serif); font-weight:500; font-size:18px; line-height:1.15; overflow-wrap:anywhere; }
.h-cat__meta{ font-size:13px; opacity:.85; }
.h-cats > li.h-cats__custom{ grid-column:span var(--span-6, 1); }
.h-cat--custom{ background:var(--paper); color:var(--ink) !important; border:1.5px dashed var(--accent-2); }
.h-cat--custom::before{ display:none; }
.h-cat--custom .h-cat__go{ background:var(--accent); color:#fff; }

/* Custom-order band */
.h-bespoke{ position:relative; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px, 5vw, 72px); align-items:center; padding:clamp(28px, 6vw, 72px); border-radius:var(--radius-band); background:var(--deep); color:var(--on-deep); }
.h-bespoke::before{ content:""; position:absolute; width:520px; height:520px; right:-160px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(196,122,69,.35), transparent 65%); pointer-events:none; }
.h-bespoke > *{ position:relative; }
.h-bespoke h2{ margin:0 0 16px; color:var(--on-deep); font-family:var(--serif); font-weight:500; font-size:clamp(30px, 4vw, 48px); line-height:1.1; }
.h-bespoke > div > p{ margin:0 0 26px; color:rgba(243,234,221,.75); font-size:17px; line-height:1.6; max-width:50ch; }
.h-bespoke .h-eyebrow{ color:var(--accent-2); }
.h-bespoke ol{ display:grid; gap:14px; margin:0 0 32px; padding:0; list-style:none; counter-reset:b; }
.h-bespoke ol li{ display:flex; gap:14px; align-items:flex-start; counter-increment:b; line-height:1.5; }
.h-bespoke ol li::before{ content:counter(b); flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--accent-2); color:var(--accent-2); font-weight:700; font-size:14px; }
html[lang="bn"] .h-bespoke ol li::before{ content:counter(b, bengali); }
.h-example{ position:relative; margin:0; padding:clamp(22px, 3vw, 32px); border-radius:20px; background:#2F2318; border:1px solid rgba(243,234,221,.1); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); transform:rotate(1.5deg); }
.h-example figcaption{ display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); }
html[lang="bn"] .h-example figcaption{ letter-spacing:.02em; text-transform:none; font-size:14px; }
.h-example figcaption::before{ content:""; width:8px; height:8px; border-radius:50%; background:#6FCF97; box-shadow:0 0 0 4px rgba(111,207,151,.2); }
.h-example dl{ margin:0; display:grid; }
.h-example dl > div{ display:grid; grid-template-columns:96px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid rgba(243,234,221,.1); }
.h-example dt{ color:rgba(243,234,221,.55); font-size:14px; font-weight:400; }
.h-example dd{ margin:0; font-weight:600; }
.h-example p{ margin:16px 0 0; font-size:14px; color:rgba(243,234,221,.65); line-height:1.55; }

/* Know your wood */
.h-woodgrid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(12px, 2vw, 20px); }
.h-wood{ display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; background:var(--paper); box-shadow:var(--shadow); color:var(--ink); text-decoration:none; transition:transform .5s var(--ease), box-shadow .5s; }
.h-wood:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); color:var(--ink); }
.h-wood__swatch{ height:130px; background:repeating-linear-gradient(98deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px, rgba(0,0,0,.06) 7px 8px, transparent 8px 15px), linear-gradient(160deg, var(--wood), var(--wood2)); background-size:220% 100%, 100% 100%; transition:background-position 1.6s var(--ease); }
.h-wood:hover .h-wood__swatch{ background-position:100% 0, 0 0; }
.h-wood__body{ display:flex; flex-direction:column; gap:6px; padding:20px 20px 22px; flex:1; }
.h-wood h3{ margin:0; font-family:var(--serif); font-weight:500; font-size:22px; }
.h-wood__alt{ color:var(--accent); font-size:15px; }
.h-wood p{ margin:6px 0 16px; color:var(--muted); font-size:15px; line-height:1.6; }
.h-wood .h-link{ margin-top:auto; align-self:flex-start; }

/* How ordering works */
.h-steps{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 3vw, 40px); margin:0; padding:0; list-style:none; }
.h-steps::before{ content:""; position:absolute; top:28px; left:28px; right:calc(33.333% - 40px); height:2px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin:left; }
.h-steps li{ position:relative; }
.h-steps__n{ position:relative; display:grid; place-items:center; width:56px; height:56px; margin-bottom:20px; border-radius:50%; background:var(--bg); border:2px solid var(--accent); color:var(--accent); font-family:var(--serif); font-size:24px; }
.h-steps h3{ margin:0 0 8px; font-family:var(--sans); font-size:20px; font-weight:600; }
.h-steps p{ margin:0; color:var(--muted); line-height:1.6; }

/* Closing band */
.h-final{ text-align:center; padding:clamp(48px, 7vw, 96px) 24px; border-radius:var(--radius-band); background:var(--cream); }
.h-final h2{ margin:0 auto 14px; max-width:20ch; font-family:var(--serif); font-weight:500; font-size:clamp(30px, 4.4vw, 54px); line-height:1.08; }
html[lang="bn"] .h-final h2{ line-height:1.3; }
.h-final p{ margin:0 auto 28px; max-width:46ch; color:var(--muted); }
.h-final .h-hero__cta{ justify-content:center; }

@media (max-width:1199px){
  .pgrid, .h-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .h-cats{ --cols:5; grid-auto-rows:200px; }
  .h-cats > li.h-cats__custom{ grid-column:span var(--span-5, 1); }
}
@media (min-width:992px) and (max-width:1199px){ .pgrid--side{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:1024px){
  .h-woodgrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:991px){
  .h-cats{ --cols:4; grid-auto-rows:190px; }
  .h-cats > li.h-cats__custom{ grid-column:span var(--span-4, 1); }
}
@media (max-width:900px){
  .pgrid, .h-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .h-hero__grid{ grid-template-columns:minmax(0, 1fr); }
  .h-hero__frame{ max-height:none; aspect-ratio:4/4.4; margin-inline:auto; width:min(100%, 520px); }
  .h-hero__caption{ left:8px; }
  .h-scroll{ display:none; }
  .h-ring{ right:8px; }
  .h-bespoke{ grid-template-columns:1fr; }
  .h-example{ transform:none; }
  .h-steps{ grid-template-columns:1fr; }
  .h-steps::before{ top:28px; bottom:28px; left:27px; right:auto; width:2px; height:auto; transform-origin:top; }
  .h-steps li{ padding-left:80px; min-height:56px; }
  .h-steps__n{ position:absolute; left:0; top:0; }
}
@media (max-width:767px){
  .h-cats{ --cols:3; grid-auto-rows:170px; }
  .h-cats > li.h-cats__custom{ grid-column:span var(--span-3, 1); }
  .h-feat{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .h-feat > .pc--lead{ grid-column:1 / -1; grid-row:auto; }
  .pc--lead .pc__media{ position:relative; inset:auto; min-height:0; aspect-ratio:16/10; flex:none; }
  .pc--lead .pc__visual{ flex:none; min-height:0; }
}
@media (max-width:640px){
  .pgrid, .h-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pc__body{ padding:10px 12px 12px; }
  .pc--lead .pc__media{ aspect-ratio:4/3.4; }
  .h-facts{ grid-template-columns:repeat(3, 1fr); }
  .h-tabs{ width:100%; } .h-tab{ flex:1; padding-inline:10px; }
  .h-woodgrid{ grid-template-columns:1fr; }
  .h-woods{ height:360px; gap:10px; }
  .h-woods a{ padding:16px 12px; }
  .h-woods span{ font-size:18px; overflow-wrap:anywhere; }
  .h-woods small{ font-size:13px; }
}
@media (max-width:520px){
  .h-cats{ --cols:2; grid-auto-rows:160px; }
  .h-cats > li.h-cats__custom{ grid-column:span var(--span-2, 1); }
  .h-cat__name{ font-size:17px; }
}

/* ---------------------------------------------------------------- 13. Detail pages: order, checkout, account, admin detail */
.od-grid, .layout{ display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:24px; align-items:start; }
.od-main, .layout__main{ display:grid; gap:20px; min-width:0; }
.od-aside, .layout__aside{ position:sticky; top:96px; display:grid; gap:16px; min-width:0; }
.layout--wide-aside{ grid-template-columns:minmax(0, 1fr) 400px; }
.layout--nav{ grid-template-columns:260px minmax(0, 1fr); }
.layout--nav .layout__aside{ top:96px; }
.od-main, .od-aside, .layout__main, .layout__aside{ grid-template-columns:minmax(0, 1fr); }
.od-main > *, .od-aside > *, .layout__main > *, .layout__aside > *{ min-width:0; }
@media (max-width:991px){
  .od-grid, .layout, .layout--wide-aside, .layout--nav{ grid-template-columns:minmax(0, 1fr); }
  .od-aside, .layout__aside{ position:static; }
}
.od-grid{ margin-top:24px; }

/* Phone-only "Pay now" bar */
.od-due-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 6px; padding:14px 16px; border-radius:16px; background:var(--ink); color:var(--on-deep); text-decoration:none; }
.od-due-bar:hover{ color:var(--on-deep); }
.od-due-bar small{ display:block; font-size:13px; opacity:.75; }
.od-due-bar strong{ font-size:20px; }
@media (min-width:992px){ .od-due-bar{ display:none; } }

/* Items */
.od-items{ margin:0; padding:0; list-style:none; }
.od-item{ display:grid; grid-template-columns:84px minmax(0, 1fr) auto; gap:16px; align-items:center; padding:16px var(--pad); }
.od-item + .od-item{ border-top:1px solid var(--line); }
.od-item__img, .od-item img{ width:84px; height:68px; object-fit:cover; border-radius:12px; background:var(--cream); display:block; }
.od-item__img.ph{ display:grid; }
.od-item__img .ph__letter{ font-size:30px; }
.od-item__name{ font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.od-item__name a{ color:inherit; text-decoration:none; }
.od-item__name a:hover{ color:var(--accent); }
.od-item__meta{ margin-top:4px; font-size:14px; color:var(--muted); }
.od-item__total{ font-weight:700; white-space:nowrap; }
.od-item__controls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:10px; }
@media (max-width:480px){
  .od-item{ grid-template-columns:64px minmax(0, 1fr); }
  .od-item__img, .od-item img{ width:64px; height:56px; }
  .od-item__total{ grid-column:2; }
}

/* Amount breakdown */
.od-due{ display:grid; margin:0 0 18px; border-radius:14px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.od-due > div{ display:flex; justify-content:space-between; gap:12px; padding:12px 16px; }
.od-due > div + div{ border-top:1px solid var(--line); }
.od-due span{ color:var(--muted); }
.od-due .is-paid strong{ color:var(--ok); }
.od-due .is-now{ background:var(--ink); color:#fff; }
.od-due .is-now span{ color:rgba(255,255,255,.75); }
.od-due .is-now strong{ font-size:19px; }

/* Status strips */
.od-strip{ display:flex; gap:14px; align-items:flex-start; padding:14px 16px; margin:0 0 18px; border-radius:14px; line-height:1.55; }
.od-strip:last-child{ margin-bottom:0; }
.od-strip--flat{ margin:0; }
.od-strip__icon{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:currentColor; }
.od-strip__icon svg{ color:#fff; }
.od-strip > div{ color:var(--ink); min-width:0; }
.od-strip strong{ display:block; }
.od-strip p{ margin:2px 0 0; font-size:14px; color:var(--ink); opacity:.85; }
.od-strip a{ color:inherit; font-weight:700; }
.od-strip--ok{ background:var(--ok-bg); color:var(--ok); }
.od-strip--wait{ background:var(--warn-bg); color:var(--warn); }
.od-strip--bad{ background:var(--bad-bg); color:var(--bad); }
.od-strip--info{ background:var(--cream); color:var(--ink); }
.od-strip--info .od-strip__icon{ background:var(--ink); }
.od-strip--ok > div > strong{ color:var(--ok); } .od-strip--wait > div > strong{ color:var(--warn); } .od-strip--bad > div > strong{ color:var(--bad); }
.motion .od-strip--wait .od-strip__icon svg{ animation:tick 2.4s ease-in-out infinite; }

/* Deadline */
.od-deadline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; padding:10px 14px; border-radius:12px; background:var(--warn-bg); color:var(--warn); font-size:14px; font-weight:600; }
.od-deadline [data-left]{ margin-left:auto; padding:3px 10px; border-radius:999px; background:var(--paper); font-variant-numeric:tabular-nums; white-space:nowrap; }
.od-deadline [data-left]:empty{ display:none; }

/* Payment steps */
.od-steps{ display:grid; gap:0; margin:0; padding:0; list-style:none; }
.od-step{ position:relative; display:grid; grid-template-columns:36px minmax(0, 1fr); gap:16px; padding-bottom:24px; }
.od-step:last-child{ padding-bottom:0; }
.od-step::before{ content:""; position:absolute; left:17px; top:40px; bottom:4px; width:2px; background:var(--line); }
.od-step:last-child::before{ display:none; }
.od-step__n{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:2px solid var(--accent); color:var(--accent); font-weight:700; background:var(--paper); }
.od-step h3{ margin:6px 0 12px; font-family:var(--sans); font-size:17px; font-weight:600; }
.od-send{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
@media (max-width:560px){ .od-send{ grid-template-columns:1fr; } }
.od-send__box{ padding:14px 16px; border-radius:14px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); min-width:0; }
.od-send__label{ font-size:13px; color:var(--muted); }
.od-send__value{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.od-send__value strong{ font-size:clamp(18px, 5vw, 22px); letter-spacing:.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.od-send__hint{ margin-top:4px; font-size:13px; color:var(--muted); }
.od-copy{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper); font:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.od-copy:hover{ border-color:var(--ink); }
.od-copy.is-done{ background:var(--ok); border-color:var(--ok); color:#fff; }
.od-howto{ margin:0; padding-left:20px; color:var(--muted); line-height:1.65; font-size:15px; }

/* Cash on Delivery */
.od-cod{ display:flex; gap:16px; align-items:flex-start; }
.od-cod__icon{ flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--ok-bg); color:var(--ok); }
.od-cod p{ margin:6px 0 0; color:var(--muted); line-height:1.6; }
.od-cod__amount{ display:inline-block; margin-top:12px; padding:8px 14px; border-radius:12px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); font-weight:700; font-size:18px; }

/* Payment attempts */
.od-attempts{ margin:0; padding:0; list-style:none; }
.od-attempt{ display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) auto; gap:6px 16px; align-items:center; padding:14px 0; }
.od-attempt + .od-attempt{ border-top:1px solid var(--line); }
.od-attempt__trx{ font-weight:700; font-family:var(--mono); font-size:14px; word-break:break-all; }
.od-attempt__date{ font-size:13px; color:var(--muted); }
.od-attempt__amt{ font-weight:600; }
.od-attempt__why{ grid-column:1 / -1; font-size:13px; color:var(--bad); }
.od-attempt__actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:480px){ .od-attempt{ grid-template-columns:minmax(0, 1fr) auto; } .od-attempt__amt{ grid-column:1; grid-row:2; } }

/* Timeline */
.od-timeline{ margin:0; padding:0; list-style:none; }
.od-tl{ position:relative; display:grid; grid-template-columns:20px minmax(0, 1fr); gap:14px; padding-bottom:20px; }
.od-tl:last-child{ padding-bottom:0; }
.od-tl::before{ content:""; position:absolute; left:9px; top:20px; bottom:-2px; width:2px; background:var(--line); }
.od-tl:last-child::before{ display:none; }
.od-tl__dot{ width:20px; height:20px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 2px var(--line); margin-top:1px; display:grid; place-items:center; }
.od-tl__dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.od-tl.is-current .od-tl__dot{ box-shadow:inset 0 0 0 2px var(--accent); }
.od-tl.is-current .od-tl__dot::after{ background:var(--accent); }
.motion .od-tl.is-current .od-tl__dot::after{ animation:pulse 2s ease-out infinite; }
.od-tl strong{ font-weight:600; }
.od-tl time, .od-tl__when{ display:block; font-size:13px; color:var(--muted); }
.od-tl p{ margin:4px 0 0; font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.od-tl--ok .od-tl__dot::after{ background:var(--ok); } .od-tl--bad .od-tl__dot::after{ background:var(--bad); } .od-tl--warn .od-tl__dot::after{ background:var(--warn); }

/* Sidebar summary, address, help */
.od-sum{ display:grid; gap:10px; }
.od-sum > div{ display:flex; justify-content:space-between; gap:12px; font-size:15px; }
.od-sum > div > span:first-child{ color:var(--muted); }
.od-sum > div > span:last-child{ text-align:right; }
.od-sum .is-ok, .od-sum .is-ok span{ color:var(--ok) !important; }
.od-sum .is-total{ padding-top:12px; margin-top:4px; border-top:1px dashed var(--line); font-size:18px; font-weight:700; }
.od-sum .is-total span:first-child{ color:var(--ink); }
.od-sum .is-small{ font-size:13px; }
.od-sum .is-due{ padding:10px 12px; margin-top:4px; border-radius:12px; background:var(--warn-bg); font-weight:700; }
.od-sum .is-due span:first-child{ color:var(--warn); }
.od-addr{ margin:0; font-style:normal; line-height:1.6; font-size:15px; overflow-wrap:anywhere; }
.od-addr strong{ display:block; }
.od-addr a{ color:inherit; font-weight:600; }
.od-note{ margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--bg); font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.od-help{ font-size:14px; color:var(--muted); text-align:center; margin:4px 0 0; }
.od-help a{ color:var(--accent); font-weight:600; }
.od-actions{ display:grid; gap:10px; }

/* Progress tracker (order, tracking and custom requests) */
.order-tracker{ display:flex; gap:0; overflow-x:auto; padding:4px 2px; scrollbar-width:none; }
.order-tracker::-webkit-scrollbar{ display:none; }
.tracker-step{ position:relative; flex:1 0 96px; display:grid; justify-items:center; gap:6px; text-align:center; }
.tracker-step + .tracker-step::before{ content:""; position:absolute; top:17px; right:calc(50% + 22px); left:calc(-50% + 22px); height:2px; background:var(--line); }
.tracker-step.done + .tracker-step::before, .tracker-step.done + .tracker-step.active::before{ background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.tracker-dot{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 2px var(--line); color:var(--muted); font-weight:700; font-size:14px; }
.tracker-step.done .tracker-dot{ background:var(--accent); box-shadow:none; color:#fff; }
.tracker-step.active .tracker-dot{ box-shadow:inset 0 0 0 2px var(--accent); color:var(--accent); background:var(--paper); }
.motion .tracker-step.active .tracker-dot{ animation:pulse 2s ease-out infinite; }
.tracker-label{ font-size:13px; font-weight:600; color:var(--muted); line-height:1.3; }
.tracker-step.done .tracker-label, .tracker-step.active .tracker-label{ color:var(--ink); }
.tracker-sub{ font-size:12px; color:var(--muted); }

/* ---------------------------------------------------------------- 14. Account */
.acc-nav{ display:grid; gap:2px; margin:0; padding:8px; list-style:none; background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); }
.acc-nav a, .acc-nav button{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; border:0; border-radius:12px; background:none; color:var(--ink); font:inherit; font-weight:600; font-size:15px; text-align:left; text-decoration:none; cursor:pointer; transition:background .2s, color .2s; }
.acc-nav a:hover, .acc-nav button:hover{ background:var(--bg); color:var(--ink); }
.acc-nav a.active{ background:var(--ink); color:var(--bg); }
.acc-nav svg{ color:var(--muted); }
.acc-nav a.active svg{ color:var(--accent-2); }
.acc-nav-logout{ margin-top:4px; padding-top:4px; border-top:1px solid var(--line); }
.acc-nav-logout button{ color:var(--bad); }
.acc-nav-logout button svg{ color:var(--bad); }
@media (max-width:991px){
  .acc-nav{ display:flex; overflow-x:auto; scrollbar-width:none; padding:6px; }
  .acc-nav::-webkit-scrollbar{ display:none; }
  .acc-nav li{ flex:none; }
  .acc-nav a, .acc-nav button{ padding:9px 14px; white-space:nowrap; }
  .acc-nav-logout{ margin:0 0 0 4px; padding:0 0 0 4px; border-top:0; border-left:1px solid var(--line); }
}
.acc-stats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.acc-stat{ padding:18px 20px; border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); }
.acc-stat__val{ display:block; font-family:var(--serif); font-size:clamp(26px, 3vw, 34px); line-height:1.1; }
.acc-stat__lbl{ font-size:14px; color:var(--muted); }
.acc-stat--warn .acc-stat__val{ color:var(--warn); }
@media (max-width:560px){ .acc-stats{ grid-template-columns:1fr 1fr; } .acc-stats > :last-child:nth-child(odd){ grid-column:1 / -1; } }
.order-list{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.order-card{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px 16px; align-items:center; padding:18px 20px; border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); transition:box-shadow .4s var(--ease), transform .4s var(--ease); }
.order-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.order-card__num{ font-family:var(--serif); font-size:20px; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.order-card__num::after{ content:""; position:absolute; inset:0; }
.order-card__num:hover{ color:var(--accent); }
.order-card__date{ font-size:14px; color:var(--muted); }
.order-card__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.order-card__side{ display:grid; justify-items:end; gap:8px; text-align:right; }
.order-card__total{ font-size:18px; font-weight:800; }
.order-card__actions{ position:relative; z-index:1; display:flex; gap:8px; }
@media (max-width:560px){ .order-card{ grid-template-columns:1fr; } .order-card__side{ justify-items:start; text-align:left; } }
.order-tabs{ display:flex; gap:6px; overflow-x:auto; margin-bottom:16px; padding:5px; border-radius:999px; background:var(--cream); scrollbar-width:none; }
.order-tabs::-webkit-scrollbar{ display:none; }
.order-tab{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; color:var(--muted); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; transition:background .25s, color .25s; }
.order-tab:hover{ color:var(--ink); }
.order-tab.active{ background:var(--ink); color:#fff; }
.order-tab .count-pill{ background:rgba(255,255,255,.7); }
.order-tab.active .count-pill{ background:rgba(255,255,255,.18); color:#fff; }
.addr-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
@media (max-width:640px){ .addr-grid{ grid-template-columns:1fr; } }
.addr-card{ display:flex; flex-direction:column; gap:4px; padding:20px; border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); }
.addr-card.is-default{ box-shadow:0 0 0 1.5px var(--accent-2), 0 18px 40px -32px rgba(60,35,15,.35); }
.addr-card__top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.addr-card__label{ font-family:var(--serif); font-size:20px; }
.addr-card__actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.addr-card address{ margin:0; color:var(--muted); line-height:1.6; overflow-wrap:anywhere; }
.req-status{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:13px; font-weight:700; background:#EEF0F6; color:#3F4B7A; white-space:nowrap; }
.req-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.req-status.s-new{ background:var(--warn-bg); color:var(--warn); }
.req-status.s-quoted{ background:#FCEFE6; color:var(--accent); }
.req-status.s-accepted, .req-status.s-completed, .req-status.s-in_production{ background:var(--ok-bg); color:var(--ok); }
.req-status.s-declined, .req-status.s-cancelled{ background:var(--cream); color:var(--muted); }
.quote-amount{ font-family:var(--serif); font-size:clamp(34px, 5vw, 48px); line-height:1.1; color:var(--accent); margin:6px 0 4px; }

/* ---------------------------------------------------------------- 15. Centred card pages: login, register, info, errors */
.auth{ display:grid; place-items:center; padding-block:clamp(16px, 4vw, 48px); }
.auth__card{ width:min(100%, 480px); padding:clamp(24px, 5vw, 44px); border-radius:var(--radius-band); background:var(--paper); box-shadow:var(--shadow); }
.auth__card--wide{ width:min(100%, 640px); }
.auth__card h1{ margin:0 0 8px; font-size:clamp(28px, 4vw, 40px); line-height:1.1; }
html[lang="bn"] .auth__card h1{ line-height:1.3; }
.auth__card > p{ margin:0 0 24px; color:var(--muted); }
.auth__card form{ display:grid; gap:16px; }
.auth__links{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 20px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:15px; }
.auth__links a{ font-weight:600; }
.auth__points{ display:grid; gap:10px; margin:22px 0 0; padding:18px 20px; list-style:none; border-radius:14px; background:var(--bg); font-size:14px; color:var(--muted); }
.auth__points li{ display:flex; gap:10px; align-items:flex-start; }
.auth__points .ico{ color:var(--ok); margin-top:2px; }

/* Sign-in pages: mobile number + SMS code first, email as the second tab. Full-screen sheet on phones. */
.auth__card > .eyebrow{ margin-bottom:10px; }
.auth__card > .auth__lead{ margin-bottom:22px; }
.auth__card--step{ text-align:center; }
.auth__card--step > .eyebrow{ display:flex; justify-content:center; }
.auth__card--step .auth-form{ text-align:left; }
.auth__back{ display:inline-flex; align-items:center; gap:6px; margin:0 0 18px; padding:6px 0; color:var(--muted); font-size:14px; font-weight:600; text-decoration:none; }
.auth__back .ico{ transform:rotate(180deg); }
.auth__back:hover{ color:var(--ink); }
.auth__card--step .auth__back{ display:flex; width:max-content; }
.auth__badge{ display:grid; place-items:center; width:60px; height:60px; margin:0 auto 18px; border-radius:50%; background:var(--cream); color:var(--accent); }
.auth__badge--ok{ background:var(--ok-bg); color:var(--ok); }
.auth__number{ color:var(--ink); white-space:nowrap; }
.auth-switch{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 22px; padding:4px; border-radius:999px; background:var(--cream); }
.auth-switch label{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; border-radius:999px; color:var(--muted); font-weight:700; font-size:15px; cursor:pointer; transition:background .3s var(--ease), color .3s, box-shadow .3s; }
.auth-mode--phone:checked ~ .auth-switch [data-for="phone"], .auth-mode--email:checked ~ .auth-switch [data-for="email"]{ background:var(--paper); color:var(--ink); box-shadow:0 1px 2px rgba(60,35,15,.12), 0 6px 16px -10px rgba(60,35,15,.35); }
.auth-mode--phone:focus-visible ~ .auth-switch [data-for="phone"], .auth-mode--email:focus-visible ~ .auth-switch [data-for="email"]{ outline:2.5px solid var(--accent); outline-offset:2px; }
.auth-mode--phone:checked ~ .auth-panels > .auth-panel--email, .auth-mode--email:checked ~ .auth-panels > .auth-panel--phone{ display:none; }
.auth-form{ display:grid; gap:18px; }
.auth-form .form-label{ margin-bottom:8px; font-weight:600; font-size:15px; }
.auth-input{ display:block; width:100%; min-height:56px; padding:0 18px; border:1.5px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); font:inherit; font-size:17px; transition:border-color .2s, box-shadow .2s; }
.auth-input::placeholder{ color:#B3A89C; }
.auth-input:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 4px rgba(156,74,36,.14); }
.auth-input.is-invalid{ border-color:var(--bad); }
.auth-phone{ display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:14px; background:#fff; transition:border-color .2s, box-shadow .2s; }
.auth-phone:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(156,74,36,.14); }
.auth-phone.is-invalid{ border-color:var(--bad); }
.auth-phone__cc{ display:flex; align-items:center; padding:0 4px 0 18px; color:var(--muted); font-size:17px; font-weight:600; }
.auth-phone .auth-input{ border:0; box-shadow:none; padding-left:8px; letter-spacing:.04em; }
.auth-otp{ min-height:68px; padding:0 0 0 .55em; text-align:center; font-size:30px; font-weight:700; letter-spacing:.55em; font-variant-numeric:tabular-nums; }
.auth-otp::placeholder{ color:#D6CCC0; }
.auth-hint{ margin:8px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
.auth-hint--center{ margin-top:18px; text-align:center; }
.auth-submit{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; border-radius:999px; }
.auth-submit.is-loading{ pointer-events:none; opacity:.85; }
.auth-submit.is-loading .ico{ display:none; }
.auth-submit.is-loading::after{ content:""; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.auth-small-link{ justify-self:center; font-size:15px; font-weight:600; }
.auth__card .auth-resend{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 8px; margin-top:20px; font-size:15px; color:var(--muted); }
.auth-resend__btn{ min-height:44px; padding:0 6px; border:0; background:none; color:var(--accent); font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.auth-resend__btn:disabled{ color:var(--muted); text-decoration:none; cursor:default; font-variant-numeric:tabular-nums; }
.motion .auth-panel{ animation:auth-in .45s var(--ease) both; }
.motion .auth-otp.is-invalid{ animation:shake .4s ease; }
@keyframes auth-in{ from{ opacity:0; transform:translateX(14px); } }
@keyframes shake{ 20%, 60%{ transform:translateX(-6px); } 40%, 80%{ transform:translateX(6px); } }
@media (max-width:640px){
  /* Full-screen sheet: no announcement bar, footer, bottom bar or chat bubble while signing in */
  body.is-auth{ padding-bottom:0; background:var(--paper); }
  .is-auth .announce, .is-auth .site-footer, .is-auth .mob-nav, .is-auth .live-support{ display:none; }
  .is-auth .main{ width:100%; padding:0; }
  .is-auth .main > .alert{ margin:12px 16px 0; }
  .auth{ display:block; padding:0; }
  .auth__card, .auth__card--wide{ width:100%; min-height:calc(100dvh - 65px); padding:16px 20px calc(28px + env(safe-area-inset-bottom)); border-radius:0; box-shadow:none; display:flex; flex-direction:column; }
  .auth__card h1{ font-size:30px; }
  .auth-panels{ flex:none; }
  .auth__links{ margin-top:24px; }
  .auth__points{ margin-top:auto; }
  .auth__links + .auth__points{ margin-top:22px; }
  .auth__card--step .auth-form{ margin-top:6px; }
}
.error-page{ display:grid; justify-items:center; gap:12px; padding:clamp(40px, 7vw, 88px) clamp(20px, 5vw, 44px); margin:clamp(12px, 3vw, 40px) auto; max-width:620px; text-align:center; border-radius:var(--radius-band); background:var(--paper); box-shadow:var(--shadow); }
.error-page__code{ font-family:var(--serif); font-size:clamp(72px, 12vw, 132px); line-height:1; color:var(--accent-2); }
.error-page h1{ margin:0; font-size:clamp(28px, 4vw, 40px); }
.error-page p{ margin:0 0 8px; color:var(--muted); max-width:44ch; }
.error-page__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.info-page{ max-width:820px; margin-inline:auto; }
.info-page .page-head{ margin-bottom:24px; }
.info-card{ padding:clamp(24px, 5vw, 48px); border-radius:var(--radius-band); background:var(--paper); box-shadow:var(--shadow); }
.notice{ display:inline-flex; align-items:center; gap:8px; margin:0 0 6px; padding:6px 12px; border-radius:999px; background:var(--warn-bg); color:var(--warn); font-size:13px; font-weight:600; }
.contact-list{ display:grid; gap:14px; margin:24px 0 0; padding:0; list-style:none; }
.contact-list li{ display:flex; gap:14px; align-items:flex-start; }
.contact-list .ico-wrap{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--cream); color:var(--accent); }
.contact-list strong{ display:block; font-size:14px; color:var(--muted); font-weight:600; }
.faq{ display:grid; gap:12px; }
.faq__item{ border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); }
.faq__item summary{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; cursor:pointer; list-style:none; font-weight:600; font-size:17px; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--cream); color:var(--accent); font-size:20px; font-weight:500; transition:transform .35s var(--ease), background .25s; }
.faq__item[open] summary::after{ transform:rotate(45deg); background:var(--accent); color:#fff; }
.faq__body{ padding:0 22px 20px; color:#3C3027; line-height:1.7; }
.faq__body p:last-child{ margin-bottom:0; }
.lookup{ display:grid; grid-template-columns:1fr minmax(0, 440px); gap:clamp(24px, 5vw, 64px); align-items:start; }
.lookup__intro p{ color:var(--muted); max-width:46ch; }
.lookup__form{ display:grid; gap:16px; }
@media (max-width:860px){ .lookup{ grid-template-columns:1fr; } }
.thanks{ display:grid; justify-items:center; gap:12px; max-width:640px; margin:clamp(12px, 3vw, 40px) auto; padding:clamp(32px, 6vw, 64px) clamp(20px, 5vw, 48px); text-align:center; border-radius:var(--radius-band); background:var(--paper); box-shadow:var(--shadow); }
.thanks__tick{ width:72px; height:72px; color:var(--ok); }
.thanks h1{ margin:0; font-size:clamp(28px, 4vw, 40px); }
.thanks p{ margin:0; color:var(--muted); max-width:48ch; }
.thanks__ref{ margin:6px 0; padding:12px 22px; border-radius:14px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); font-family:var(--mono); font-size:22px; font-weight:700; letter-spacing:.04em; }
.thanks__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:12px; }

/* ---------------------------------------------------------------- 16. Shop */
.shop-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 24px; margin-bottom:clamp(20px, 3vw, 32px); }
.shop-head h1{ margin:0; font-size:clamp(30px, 4.4vw, 52px); line-height:1.05; overflow-wrap:anywhere; }
html[lang="bn"] .shop-head h1{ line-height:1.3; }
.shop-head p{ margin:10px 0 0; color:var(--muted); max-width:56ch; }
.shop-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.shop-tools form{ display:flex; align-items:center; gap:8px; }
.shop-tools label{ font-size:14px; color:var(--muted); font-weight:600; white-space:nowrap; }
.shop-tools .form-select{ width:auto; min-width:0; max-width:220px; padding-block:9px; border-radius:999px; font-size:15px; }
.shop-layout{ display:grid; grid-template-columns:260px minmax(0, 1fr); gap:clamp(20px, 3vw, 40px); align-items:start; }
.shop-chips{ display:flex; gap:8px; overflow-x:auto; margin:0 0 18px; padding:0 0 2px; list-style:none; scrollbar-width:none; }
.shop-chips::-webkit-scrollbar{ display:none; }
.shop-chips a{ display:inline-flex; gap:6px; padding:8px 14px; border-radius:999px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; }
.shop-chips a.active{ background:var(--ink); color:var(--bg); box-shadow:none; }
.filter-card{ position:sticky; top:96px; display:grid; gap:18px; padding:22px; border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); }
.filter-card h2{ margin:0; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
html[lang="bn"] .filter-card h2{ letter-spacing:0; text-transform:none; font-size:15px; }
.cat-list{ display:grid; gap:2px; }
.cat-list a{ display:flex; justify-content:space-between; gap:10px; padding:8px 12px; margin-inline:-12px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:500; font-size:15px; }
.cat-list a span:last-child{ color:var(--muted); font-size:13px; }
.cat-list a:hover{ background:var(--bg); }
.cat-list a.active{ background:var(--cream); font-weight:700; }
.price-range{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:991px){
  .shop-layout{ grid-template-columns:1fr; }
  .filter-card{ position:static; display:none; }
  .filter-card.is-open{ display:grid; }
  [data-filter-panel].is-open .filter-card, [data-filter-panel] .filter-card.is-open{ display:grid; }
  html:not(.has-js) .filter-card{ display:grid; }
}
.shop-layout [data-filter-panel].is-open .filter-card{ display:grid; }
.pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:clamp(28px, 4vw, 44px) 0 0; padding:0; list-style:none; }
.page-link{ display:grid; place-items:center; min-width:44px; height:44px; padding:0 12px; border:0; border-radius:999px !important; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink); font-weight:600; text-decoration:none; }
.page-link:hover{ background:var(--cream); color:var(--ink); }
.page-item.active .page-link{ background:var(--ink); color:#fff; box-shadow:none; }
.page-item.disabled .page-link{ opacity:.45; pointer-events:none; background:transparent; }
.page-link:focus{ box-shadow:0 0 0 3px rgba(156,74,36,.25); }

/* ---------------------------------------------------------------- 17. Product page */
.pdp{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:clamp(24px, 5vw, 72px); align-items:start; }
.pdp__gallery{ position:sticky; top:96px; display:grid; gap:12px; min-width:0; }
.gallery-main{ position:relative; aspect-ratio:4/4.4; overflow:hidden; border-radius:var(--radius-band); background:var(--cream); box-shadow:var(--shadow); }
.gallery-main img{ width:100%; height:100%; object-fit:cover; transition:opacity .25s, transform .4s var(--ease); transform-origin:var(--zx, 50%) var(--zy, 50%); }
.gallery-main img.is-swapping{ opacity:0; }
.gallery-main.is-zoom img{ transform:scale(1.6); cursor:zoom-in; }
.gallery-main--empty .ph{ border-radius:0; }
.gallery-main--empty .ph__letter{ font-size:clamp(96px, 14vw, 180px); }
.gallery-main--empty .ph__note{ bottom:22px; padding-inline:16px; font-size:14px; }
.gallery-main--empty .ph__note a{ color:#fff; font-weight:700; }
.gallery-thumbs{ display:flex; gap:10px; overflow-x:auto; padding:2px; scrollbar-width:thin; }
.gallery-thumbs button{ flex:none; width:84px; height:84px; padding:0; border:0; border-radius:14px; overflow:hidden; background:var(--cream); box-shadow:inset 0 0 0 1.5px var(--line); cursor:pointer; opacity:.7; transition:opacity .25s, box-shadow .25s; }
.gallery-thumbs button.active, .gallery-thumbs button:hover{ opacity:1; box-shadow:0 0 0 2px var(--accent); }
.gallery-thumbs img{ width:100%; height:100%; object-fit:cover; }
.pdp__info{ min-width:0; }
.pdp__cat{ margin:0 0 10px; }
.pdp__cat a{ color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; }
html[lang="bn"] .pdp__cat a{ letter-spacing:0; text-transform:none; font-size:14px; }
.pdp__title, .qv__title{ margin:0 0 14px; font-family:var(--serif); font-weight:500; font-size:clamp(32px, 4.2vw, 52px); line-height:1.06; letter-spacing:-.015em; overflow-wrap:anywhere; }
html[lang="bn"] .pdp__title, html[lang="bn"] .qv__title{ line-height:1.3; letter-spacing:0; }
.qv__title{ font-size:clamp(26px, 3vw, 36px); }
.pdp__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:0 0 10px; }
.pdp__price > span:first-child{ font-size:clamp(26px, 3vw, 32px); font-weight:800; color:var(--accent); }
.pdp__price s{ color:var(--muted); font-size:18px; }
.pdp__save{ padding:4px 10px; border-radius:999px; background:var(--accent); color:#fff; font-size:13px; font-weight:700; }
.pdp__stock{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 18px; font-size:14px; }
.stock-in, .stock-low, .stock-out{ display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.stock-in::before, .stock-low::before, .stock-out::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.stock-in{ color:var(--ok); } .stock-low{ color:var(--warn); } .stock-out{ color:var(--bad); }
.pdp__lede{ margin:0 0 24px; font-size:17px; line-height:1.65; color:#3C3027; }
.pdp__buy{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px; }
.pdp__buy .btn{ flex:1 1 160px; }
.pdp__pay{ margin:0 0 24px; font-size:14px; color:var(--muted); line-height:1.7; }
.estimator{ margin:0 0 24px; padding:20px; border-radius:var(--radius); background:var(--cream); }
.estimator h2{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-family:var(--sans); font-size:16px; font-weight:700; }
.estimator h2 .ico{ color:var(--accent); }
.estimator-result{ display:grid; gap:8px; margin-top:14px; padding:14px 16px; border-radius:14px; background:var(--paper); }
.estimator-result .row-line{ display:flex; justify-content:space-between; gap:12px; font-size:15px; }
.estimator-result .row-line span{ color:var(--muted); }
.acc{ display:grid; border-top:1px solid var(--line); }
.acc details{ border-bottom:1px solid var(--line); }
.acc summary{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 0; cursor:pointer; list-style:none; font-weight:700; font-size:16px; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{ content:"+"; font-size:22px; font-weight:400; color:var(--accent); transition:transform .3s var(--ease); }
.acc details[open] summary::after{ transform:rotate(45deg); }
.acc__body{ padding:0 0 20px; color:#3C3027; line-height:1.7; }
.perk-list{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.perk-list li{ display:flex; gap:10px; align-items:flex-start; }
.perk-list svg{ flex:none; color:var(--ok); margin-top:3px; }
.sticky-buy{ display:none; }
@media (max-width:767px){
  .sticky-buy{ position:fixed; z-index:1019; left:10px; right:10px; bottom:84px; display:flex; align-items:center; gap:14px; padding:10px 10px 10px 18px; border-radius:20px; background:var(--ink); color:var(--on-deep); box-shadow:0 20px 40px -20px rgba(0,0,0,.6); }
  .sticky-buy .price-now{ display:block; font-size:18px; font-weight:800; }
  .sticky-buy .price-old{ font-size:13px; opacity:.7; text-decoration:line-through; }
  .sticky-buy .btn{ padding:12px 18px; }
}
@media (max-width:991px){ .pdp{ grid-template-columns:1fr; } .pdp__gallery{ position:static; } }

/* ---------------------------------------------------------------- 18. Cart, checkout, drawer, quick view */
.co-split{ display:grid; gap:10px; margin-top:6px; padding:12px; border-radius:12px; background:var(--bg); }
.co-secure{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; font-size:13px; color:var(--muted); line-height:1.55; }
.co-secure svg{ flex:none; color:var(--ok); margin-top:2px; }
.co-summary__toggle{ display:flex; align-items:center; gap:10px; width:100%; padding:0; border:0; background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.co-summary__toggle h2{ margin-right:auto; }
.co-summary__chevron{ transition:transform .3s var(--ease); }
.co-summary__toggle[aria-expanded="true"] .co-summary__chevron{ transform:rotate(180deg); }
.co-lines{ display:grid; gap:12px; margin:14px 0 0; padding:0; list-style:none; }
.co-lines li{ display:grid; grid-template-columns:56px minmax(0, 1fr) auto; gap:12px; align-items:center; font-size:14px; }
.co-lines img, .co-lines .ph{ width:56px; height:56px; border-radius:12px; object-fit:cover; background:var(--cream); }
.co-lines .ph__letter{ font-size:22px; }
.co-lines strong{ white-space:nowrap; }
@media (min-width:992px){ .co-summary__toggle{ pointer-events:none; } .co-summary__chevron{ display:none; } .co-lines[hidden]{ display:grid !important; } .co-summary__toggle .co-summary__mtotal{ display:none; } }
.choice{ display:grid; gap:10px; }
.choice--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:560px){ .choice--2{ grid-template-columns:1fr; } }
.choice-card{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:14px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line); cursor:pointer; transition:box-shadow .25s, background .25s; }
.choice-card:hover{ box-shadow:inset 0 0 0 1.5px #CBBBA8; }
.choice-card:has(input:checked){ background:#FFFCF8; box-shadow:inset 0 0 0 2px var(--accent); }
.choice-card:has(input:disabled){ opacity:.55; cursor:not-allowed; }
.choice-card input{ margin-top:3px; }
.choice-card > span{ display:grid; gap:2px; min-width:0; }
.choice-card strong{ font-size:16px; }
.choice-card .sub{ font-size:14px; color:var(--muted); line-height:1.5; }
.choice-card .amount{ font-size:20px; font-weight:800; color:var(--accent); }
.choice-card .pm{ justify-self:start; }
.method-icon{ display:none; }
.plan-wrap{ margin-top:16px; padding:0; border:0; }
.plan-terms{ margin-top:12px; padding:14px 16px; border-radius:14px; background:var(--cream); font-size:14px; line-height:1.6; }
.cart-drawer{ --bs-offcanvas-width:min(420px, 94vw); background:var(--bg); }
.cart-drawer .offcanvas-header{ padding:20px 22px; border-bottom:1px solid var(--line); }
.cart-drawer .offcanvas-header h2{ margin:0; font-size:26px; }
.cart-drawer .offcanvas-body{ display:flex; flex-direction:column; padding:0; }
.drawer-lines{ display:grid; gap:0; padding:8px 22px; flex:1; }
.drawer-line{ display:grid; grid-template-columns:72px minmax(0, 1fr) auto; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line); }
.drawer-line img, .drawer-line .ph{ width:72px; height:64px; border-radius:12px; object-fit:cover; background:var(--cream); }
.drawer-line .ph__letter{ font-size:26px; }
.drawer-name{ display:block; color:var(--ink); font-weight:600; line-height:1.35; text-decoration:none; overflow-wrap:anywhere; }
.drawer-name:hover{ color:var(--accent); }
.drawer-total{ font-weight:800; white-space:nowrap; }
.drawer-foot{ position:sticky; bottom:0; display:grid; gap:10px; padding:18px 22px 22px; background:var(--paper); border-top:1px solid var(--line); }
.drawer-foot .od-sum{ margin-bottom:4px; }
.drawer-empty{ display:grid; justify-items:center; gap:8px; padding:56px 24px; text-align:center; color:var(--muted); }
.drawer-empty h3{ margin:8px 0 0; font-family:var(--serif); font-weight:500; font-size:24px; color:var(--ink); }
.drawer-empty svg{ color:var(--accent-2); }
.drawer-skeleton{ display:grid; gap:14px; padding:22px; }
.drawer-skeleton div{ height:72px; border-radius:14px; background:linear-gradient(90deg, var(--cream), #F8F2E9, var(--cream)); background-size:200% 100%; }
.motion .drawer-skeleton div{ animation:shimmer 1.4s linear infinite; }
.quick-modal .modal-content{ border:0; border-radius:var(--radius-band); background:var(--paper); overflow:hidden; box-shadow:0 40px 80px -30px rgba(40,22,10,.5); }
.quick-modal .modal-body{ padding:0; }
.quick-modal__close{ position:absolute; z-index:5; top:16px; right:16px; width:40px; height:40px; border-radius:50%; background-color:rgba(255,255,255,.92); background-size:12px; opacity:1; }
.qv{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); min-height:420px; }
.qv__media{ position:relative; background:var(--cream); min-height:280px; }
.qv__media img, .qv__media .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.qv__info{ padding:clamp(24px, 4vw, 44px); min-width:0; }
.qv--loading .qv__info div{ height:24px; margin-bottom:14px; border-radius:8px; background:var(--cream); }
@media (max-width:767px){ .qv{ grid-template-columns:1fr; } .qv__media{ aspect-ratio:4/3; min-height:0; } }

/* ---------------------------------------------------------------- 19. Custom order form */
.co-hero{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 5vw, 64px); align-items:end; margin-bottom:clamp(28px, 4vw, 44px); }
.co-hero h1{ margin:0; font-size:clamp(36px, 5.4vw, 68px); line-height:1.04; letter-spacing:-.02em; }
html[lang="bn"] .co-hero h1{ line-height:1.25; letter-spacing:0; }
.co-hero p{ margin:0 0 10px; color:var(--muted); font-size:17px; line-height:1.65; }
.co-hero__note{ display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:var(--ok-bg); color:#1F5A38 !important; font-weight:600; font-size:15px !important; }
@media (max-width:860px){ .co-hero{ grid-template-columns:1fr; } }
.custom-form{ display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:24px; align-items:start; }
.custom-form__main{ display:grid; gap:20px; min-width:0; }
.custom-aside{ position:sticky; top:96px; }
.custom-aside ol{ display:grid; gap:12px; margin:14px 0 0; padding:0; list-style:none; counter-reset:n; }
.custom-aside ol li{ display:flex; gap:12px; counter-increment:n; line-height:1.5; font-size:15px; }
.custom-aside ol li::before{ content:counter(n); flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--accent); color:var(--accent); font-weight:700; font-size:13px; }
html[lang="bn"] .custom-aside ol li::before{ content:counter(n, bengali); }
@media (max-width:991px){ .custom-form{ grid-template-columns:1fr; } .custom-aside{ position:static; } }
.fs{ margin:0; padding:var(--pad); border:0; border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); }
.fs legend{ margin:0 0 6px; padding:0; font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.2; }
.fs__hint{ margin:0 0 16px; font-size:14px; color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; margin:0; cursor:pointer; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{ display:inline-flex; padding:10px 16px; border-radius:999px; background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--line); font-weight:600; font-size:15px; transition:background .2s, box-shadow .2s, color .2s; }
.chip:hover span{ box-shadow:inset 0 0 0 1.5px #CBBBA8; }
.chip input:checked + span{ background:var(--ink); color:#fff; box-shadow:none; }
.chip input:focus-visible + span{ outline:2.5px solid var(--accent); outline-offset:3px; }
.dims{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
@media (max-width:480px){ .dims{ grid-template-columns:1fr; } }
.unit-field{ position:relative; }
.unit-field .unit, .unit-field .unit-pre{ position:absolute; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:600; pointer-events:none; }
.unit-field .unit{ right:14px; }
.unit-field .unit-pre{ left:14px; }
.unit-field .form-control{ padding-right:46px; }
.unit-field .with-pre{ padding-left:32px; padding-right:14px; }
.dropzone{ position:relative; display:grid; justify-items:center; gap:4px; padding:26px 20px; border:1.5px dashed #CBBBA8; border-radius:var(--radius); background:var(--bg); text-align:center; cursor:pointer; transition:border-color .2s, background .2s; }
.dropzone:hover, .dropzone.is-over{ border-color:var(--accent); background:#FFFCF8; }
.dropzone input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.dropzone svg{ color:var(--accent); }
.dropzone small{ color:var(--muted); }
.dropzone__preview{ display:none; max-height:180px; margin-top:10px; border-radius:12px; }
.dropzone.has-file .dropzone__preview[src]{ display:block; }

/* ---------------------------------------------------------------- 20. Tables (no heavy borders; stacked cards on phones) */
.table{ --bs-table-bg:transparent; --bs-table-hover-bg:var(--bg); width:100%; margin:0; border-collapse:collapse; font-size:15px; color:var(--ink); }
.table > :not(caption) > * > *{ padding:13px 16px; border-bottom:1px solid var(--line); background:transparent; box-shadow:none; }
.table thead th{ padding-block:11px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--bg); white-space:nowrap; border-bottom:1px solid var(--line); }
html[lang="bn"] .table thead th{ letter-spacing:0; text-transform:none; font-size:13px; }
.table tbody tr:last-child > *{ border-bottom:0; }
.table tbody tr:hover > *{ background:var(--bg); }
.table tfoot td{ border-bottom:0; padding-block:8px; }
.table tfoot tr:first-child td{ padding-top:16px; border-top:1px solid var(--line); }
.table a{ color:var(--ink); font-weight:600; text-decoration:none; }
.table a:hover{ color:var(--accent); }
.table .btn, .table .od-btn{ font-size:13px; padding:7px 13px; }
.table-sm > :not(caption) > * > *{ padding:9px 12px; }
.table-responsive{ border-radius:inherit; }
.thumb{ width:56px; height:44px; border-radius:10px; object-fit:cover; background:var(--cream); }
.thumb.ph{ display:grid; } .thumb .ph__letter{ font-size:18px; }
.row-actions{ display:inline-flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.row-actions form{ display:inline; margin:0; }
@media (max-width:767px){
  .table-stack thead{ display:none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td{ display:block; width:100%; }
  .table-stack tbody tr{ padding:14px 16px; border-bottom:1px solid var(--line); }
  .table-stack tbody tr:last-child{ border-bottom:0; }
  .table-stack tbody tr:hover > *{ background:transparent; }
  .table-stack > :not(caption) > * > *{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:4px 0; border:0; text-align:right !important; }
  .table-stack td::before{ content:attr(data-label); flex:none; max-width:45%; color:var(--muted); font-size:13px; font-weight:600; text-align:left; }
  .table-stack td:not([data-label])::before{ display:none; }
  .table-stack td.is-primary{ display:block; padding-bottom:8px; text-align:left !important; font-size:16px; }
  .table-stack td.is-primary::before{ display:none; }
  .table-stack td.row-end{ justify-content:flex-start; padding-top:10px; }
  .table-stack td.row-end::before{ display:none; }
  .table-stack tfoot{ display:block; }
  .table-stack tfoot tr{ display:flex; justify-content:space-between; padding:6px 16px; }
  .table-stack tfoot td{ display:block; padding:0 !important; border:0 !important; }
  .table-stack tfoot td[colspan]{ width:auto; }
  .table-stack td.empty-row{ display:block; text-align:center !important; }
}

/* ---------------------------------------------------------------- 21. Small widgets */
.toast-lite{ position:fixed; z-index:2000; left:50%; bottom:100px; max-width:min(92vw, 440px); padding:13px 20px; border-radius:999px; background:var(--ink); color:var(--on-deep); font-weight:600; font-size:15px; box-shadow:0 20px 40px -18px rgba(0,0,0,.55); transform:translateX(-50%); }
.motion .toast-lite{ animation:toast-in .4s var(--ease); }
.toast-lite.is-error{ background:var(--bad); color:#fff; }
.toast-lite.is-leaving{ opacity:0; transition:opacity .4s; }
@media (min-width:768px){ .toast-lite{ bottom:32px; } }
.scroll-top{ position:fixed; z-index:1018; right:20px; bottom:92px; display:grid; place-items:center; width:46px; height:46px; border:0; border-radius:50%; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-hover); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s, transform .3s var(--ease), visibility 0s .3s; }
.scroll-top.visible{ opacity:1; visibility:visible; transform:none; transition:opacity .3s, transform .3s var(--ease); }
.scroll-top:hover{ background:var(--ink); color:#fff; }
@media (max-width:767px){ .scroll-top{ display:none; } }
.live-support{ position:fixed; z-index:1021; right:20px; bottom:24px; }
.live-support__btn{ position:relative; display:grid; place-items:center; width:56px; height:56px; border:0; border-radius:50%; background:var(--accent); color:#fff; box-shadow:0 16px 32px -14px rgba(156,74,36,.8); cursor:pointer; transition:transform .3s var(--ease), background .3s; }
.live-support__btn:hover{ background:var(--accent-hover); transform:translateY(-2px); }
.live-support__badge{ position:absolute; top:4px; right:4px; width:12px; height:12px; border-radius:50%; background:#6FCF97; box-shadow:0 0 0 3px var(--accent); }
.live-support__panel{ position:absolute; right:0; bottom:70px; width:min(340px, calc(100vw - 32px)); border-radius:var(--radius); background:var(--paper); box-shadow:0 0 0 1px var(--line), 0 30px 60px -24px rgba(40,22,10,.45); overflow:hidden; opacity:0; transform:translateY(10px); transition:opacity .22s, transform .22s var(--ease); }
.live-support__panel.is-open{ opacity:1; transform:none; }
.live-support__head{ display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--deep); color:var(--on-deep); }
.live-support__head-title{ font-family:var(--serif); font-size:18px; color:#fff; }
.live-support__head-sub{ font-size:13px; opacity:.75; }
.live-support__close{ margin-left:auto; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; background:rgba(243,234,221,.1); color:var(--on-deep); cursor:pointer; }
.live-support__close:hover{ background:rgba(243,234,221,.2); }
.live-support__body{ padding:16px 18px 18px; }
.live-support__body > p{ margin:0 0 10px; color:var(--muted); font-size:14px; }
.live-support__options{ display:grid; gap:8px; }
.live-support__opt{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:var(--bg); color:var(--ink); text-decoration:none; transition:background .2s; }
.live-support__opt:hover{ background:var(--cream); color:var(--ink); }
.live-support__opt-icon{ display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--ok-bg); color:var(--ok); }
.live-support__opt-icon.blue{ background:#FCEFE6; color:var(--accent); }
.live-support__opt-label{ font-weight:700; font-size:15px; }
.live-support__opt-sub{ font-weight:500; font-size:13px; color:var(--muted); }
@media (max-width:767px){ .live-support{ right:14px; bottom:96px; } .live-support__btn{ width:50px; height:50px; } body.has-sticky-buy .live-support{ bottom:168px; } }
.dropdown-menu{ --bs-dropdown-border-radius:16px; --bs-dropdown-border-color:var(--line); --bs-dropdown-link-active-bg:var(--cream); --bs-dropdown-link-active-color:var(--ink); padding:8px; border:0; box-shadow:0 0 0 1px var(--line), 0 24px 48px -24px rgba(40,22,10,.4); font-size:15px; }
.dropdown-item{ padding:9px 12px; border-radius:10px; font-weight:600; color:var(--ink); }
.dropdown-item:hover{ background:var(--bg); }
.dropdown-item-text{ padding:6px 12px; }
.offcanvas{ --bs-offcanvas-bg:var(--bg); }
.offcanvas-backdrop.show{ opacity:.45; }
.modal-backdrop.show{ opacity:.5; }

/* ---------------------------------------------------------------- 22. Admin (same tokens, denser) */
.admin-body{ --pad:clamp(16px, 2vw, 18px); --radius:16px; background:var(--bg); font-size:15px; }
.admin-sidebar{ display:flex; flex-direction:column; background:var(--deep); color:rgba(243,234,221,.72); }
/* Desktop rail only. The mobile copy is a Bootstrap offcanvas: Bootstrap owns its position, visibility and z-index
   (1045, above its 1040 backdrop). Giving it this rail's z-index put the backdrop on top and swallowed every tap. */
.admin-sidebar:not(.offcanvas){ position:fixed; z-index:1031; inset:0 auto 0 0; width:252px; }
.admin-sidebar.offcanvas{ --bs-offcanvas-width:min(300px, 86vw); }
.admin-sidebar__header{ padding:22px 20px 18px; border-bottom:1px solid rgba(243,234,221,.1); }
.admin-brand{ display:flex; align-items:center; gap:10px; color:var(--on-deep); font-family:var(--serif); font-size:20px; text-decoration:none; }
.admin-brand:hover{ color:#fff; }
.admin-brand-sub{ margin-top:4px; padding-left:44px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(243,234,221,.5); }
html[lang="bn"] .admin-brand-sub{ letter-spacing:0; text-transform:none; font-size:13px; }
.admin-sidebar__nav{ flex:1; overflow-y:auto; padding:14px 12px; }
.admin-nav-group + .admin-nav-group{ margin-top:16px; }
.admin-nav-heading{ padding:0 10px 6px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,234,221,.42); }
html[lang="bn"] .admin-nav-heading{ letter-spacing:0; text-transform:none; font-size:13px; }
.admin-nav-link{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px; color:rgba(243,234,221,.78); font-weight:600; font-size:14.5px; text-decoration:none; transition:background .2s, color .2s; }
.admin-nav-link:hover{ background:rgba(243,234,221,.07); color:#fff; }
.admin-nav-link.active{ background:var(--on-deep); color:var(--deep); }
.admin-nav-link.active .admin-nav-icon{ color:var(--accent); }
.admin-nav-icon{ flex:none; color:rgba(243,234,221,.5); }
.admin-nav-badge{ margin-left:auto; display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--accent-2); color:#fff; font-size:12px; font-weight:800; }
.admin-sidebar__footer{ padding:14px 20px 20px; border-top:1px solid rgba(243,234,221,.1); display:grid; gap:12px; }
.admin-sidebar-footlink{ display:inline-flex; align-items:center; gap:8px; color:rgba(243,234,221,.72); font-size:14px; font-weight:600; text-decoration:none; }
.admin-sidebar-footlink:hover{ color:#fff; }
.admin-close-btn{ margin:12px 12px 0 auto; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:rgba(243,234,221,.1); color:var(--on-deep); font-size:16px; cursor:pointer; }
.admin-shell{ min-height:100vh; }
@media (min-width:992px){ .admin-shell{ margin-left:252px; } }
.admin-topbar{ position:sticky; top:0; z-index:1020; display:flex; align-items:center; gap:12px; min-height:64px; padding:10px clamp(16px, 3vw, 32px); background:rgba(250,246,240,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.admin-menu-btn{ display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:12px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--ink); cursor:pointer; }
.admin-page-title{ margin:0; font-family:var(--serif); font-weight:500; font-size:22px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.admin-topbar-link{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--ink); }
.admin-topbar-link:hover{ background:var(--cream); color:var(--ink); }
.admin-avatar{ display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:var(--ink); color:var(--on-deep); font-weight:800; font-size:14px; cursor:pointer; }
.admin-main{ padding:clamp(16px, 3vw, 32px); max-width:1400px; }
.admin-main .page-head h1{ font-size:clamp(26px, 3vw, 34px); }
.admin-main .panel h2, .admin-main .od-card h2{ font-size:20px; }
.admin-main .od-grid, .admin-main .layout{ grid-template-columns:minmax(0, 1fr) 340px; gap:20px; }
@media (max-width:1199px){ .admin-main .od-grid, .admin-main .layout{ grid-template-columns:1fr; } .admin-main .od-aside, .admin-main .layout__aside{ position:static; } }
.admin-main .table{ font-size:14.5px; }
.admin-main .btn{ padding:11px 20px; font-size:15px; }
.admin-main .btn-sm{ padding:7px 13px; font-size:13.5px; }
.admin-main .btn-lg{ padding:14px 26px; font-size:16px; }
.filters{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; align-items:end; margin-bottom:16px; }
.filters .form-label{ font-size:13px; }
.filters__actions{ display:flex; gap:8px; align-items:center; }
.pill-nav{ display:flex; gap:6px; overflow-x:auto; margin:0 0 16px; padding:5px; border-radius:999px; background:var(--cream); list-style:none; scrollbar-width:none; width:max-content; max-width:100%; }
.pill-nav::-webkit-scrollbar{ display:none; }
.pill-nav a{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:999px; color:var(--muted); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; }
.pill-nav a:hover{ color:var(--ink); }
.pill-nav a.active{ background:var(--ink); color:#fff; }
.pill-nav a.active .count-pill{ background:rgba(255,255,255,.2); color:#fff; }
.kpis{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; margin-bottom:24px; }
.kpi{ position:relative; display:flex; align-items:center; gap:14px; padding:18px; border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); color:var(--ink); text-decoration:none; transition:box-shadow .3s, transform .3s var(--ease); }
a.kpi:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); color:var(--ink); }
.kpi__icon{ display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:14px; background:var(--cream); color:var(--accent); }
.kpi--warn .kpi__icon{ background:var(--warn-bg); color:var(--warn); }
.kpi--bad .kpi__icon{ background:var(--bad-bg); color:var(--bad); }
.kpi--ok .kpi__icon{ background:var(--ok-bg); color:var(--ok); }
.kpi__val{ display:block; font-family:var(--serif); font-size:26px; line-height:1.1; }
.kpi__lbl{ font-size:13.5px; color:var(--muted); }
.mini-list{ display:grid; margin:0; padding:0; list-style:none; }
.mini-list li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.mini-list li:last-child{ border-bottom:0; }
.mini-list a{ color:var(--ink); font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
.mini-list a:hover{ color:var(--accent); }
.quick-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quick-actions a{ display:flex; align-items:center; gap:8px; padding:11px 12px; border-radius:12px; background:var(--bg); color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; transition:background .2s; }
.quick-actions a:hover{ background:var(--cream); color:var(--ink); }
.quick-actions .ico{ color:var(--accent); }
.box{ padding:16px; border-radius:14px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); }
.box + .box{ margin-top:12px; }
.avatar{ display:grid; place-items:center; flex:none; width:56px; height:56px; border-radius:50%; background:var(--ink); color:var(--on-deep); font-family:var(--serif); font-size:22px; }
.profile-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.stat-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:20px; }
.stat-strip > div{ padding:14px 16px; border-radius:14px; background:var(--paper); box-shadow:var(--shadow); }
.stat-strip b{ display:block; font-family:var(--serif); font-weight:500; font-size:22px; }
.stat-strip span{ font-size:13px; color:var(--muted); }
.stat-strip .is-warn b{ color:var(--bad); }
.kv{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px; margin:0; }
.kv dt{ font-size:13px; font-weight:500; color:var(--muted); }
.kv dd{ margin:2px 0 0; font-weight:700; overflow-wrap:anywhere; }
.toggle-card{ padding:16px; border-radius:14px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); }
.toggle-card + .toggle-card{ margin-top:12px; }
.toggle-card .form-check{ margin-bottom:12px; }
.toggle-card .form-check-label{ font-weight:700; }
.lang-pair{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
@media (max-width:767px){ .lang-pair{ grid-template-columns:1fr; } }
/* Admin > Login & SMS (OTP) */
.sms-intro{ max-width:78ch; line-height:1.6; }
.sms-layout .layout__aside{ display:grid; gap:20px; align-content:start; }
.sms-layout .layout__aside .panel + .panel{ margin-top:0; }
.sms-switch{ display:flex; align-items:center; gap:10px; margin:0; padding-left:0; }
.sms-switch .form-check-input{ width:3em; height:1.6em; margin:0; float:none; cursor:pointer; }
.sms-switch .form-check-input:checked{ background-color:var(--ok); border-color:var(--ok); }
.sms-switch .form-check-label{ font-weight:700; font-size:14px; cursor:pointer; }
.sms-mono{ font-family:var(--mono); font-size:13.5px; }
.sms-foot{ display:flex; justify-content:flex-end; margin:20px calc(var(--pad) * -1) calc(var(--pad) * -1); padding:14px var(--pad); border-radius:0 0 var(--radius) var(--radius); background:var(--bg); }
.sms-test{ display:grid; gap:10px; }
.sms-note{ margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.55; }
.sms-steps{ display:grid; gap:8px; margin:0 0 14px; padding-left:20px; font-size:14.5px; line-height:1.55; }
.sms-steps + .sms-note{ margin:0; font-size:13px; }
.lang-tag{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--cream); color:var(--muted); font-size:11.5px; font-weight:700; vertical-align:middle; }
.msg{ border-radius:var(--radius); }
.msg.is-new{ box-shadow:0 0 0 1.5px var(--accent-2), 0 18px 40px -32px rgba(60,35,15,.35); }
.mono{ font-family:var(--mono); font-size:.92em; }

/* ---------------------------------------------------------------- 23. Invoice and print */
.invoice{ max-width:860px; margin:32px auto; padding:clamp(24px, 5vw, 48px); border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); }
.invoice__head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; margin-bottom:28px; }
.invoice__brand{ margin:0; font-family:var(--serif); font-size:30px; }
.invoice__title{ font-family:var(--serif); font-size:26px; letter-spacing:.08em; color:var(--accent); }
.invoice__parties{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.invoice__parties address{ margin:4px 0 0; font-style:normal; color:var(--muted); line-height:1.6; }
.invoice .table tfoot .is-total td{ font-weight:800; font-size:17px; }
@media (max-width:560px){
  .invoice{ margin:16px; padding:18px; }
  .invoice__parties{ grid-template-columns:1fr; }
  .invoice__parties .text-end{ text-align:left !important; }
  .invoice .table > :not(caption) > * > *{ padding:8px 6px; font-size:14px; }
}
.print-bar{ display:flex; justify-content:center; gap:10px; padding:20px 16px 0; }
.bare-main{ width:min(760px, 100% - 32px); margin:clamp(24px, 6vw, 72px) auto; }
@media print{
  body{ background:#fff; }
  .print-bar, .no-print{ display:none !important; }
  .invoice{ margin:0; box-shadow:none; padding:0; }
  a{ color:inherit; text-decoration:none; }
}

/* ---------------------------------------------------------------- 24. Motion (only under html.motion; app.js never adds it with reduced motion) */
@keyframes up{ from{ transform:translateY(110%); } }
@keyframes rise{ from{ opacity:0; transform:translateY(34px); } }
@keyframes rise-sm{ from{ opacity:0; transform:translateY(18px); } }
@keyframes fade{ from{ opacity:0; } }
@keyframes reveal{ from{ clip-path:inset(100% 0 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes zoom{ from{ transform:scale(1.18); } }
@keyframes drift{ from{ transform:scale(1); } to{ transform:scale(1.08) translate(-1.5%, -1%); } }
@keyframes float{ 50%{ transform:translateY(-10px); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@keyframes wheel{ 0%{ opacity:0; transform:translateY(0); } 30%{ opacity:1; } 100%{ opacity:0; transform:translateY(12px); } }
@keyframes draw{ from{ transform:scaleX(0); } }
@keyframes draw-y{ from{ transform:scaleY(0); } }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(156,74,36,.45); } 100%{ box-shadow:0 0 0 10px rgba(156,74,36,0); } }
@keyframes tick{ 0%, 100%{ transform:rotate(0); } 50%{ transform:rotate(180deg); } }
@keyframes shimmer{ to{ background-position:-200% 0; } }
@keyframes toast-in{ from{ opacity:0; transform:translate(-50%, 16px); } }

.motion .h-line > span{ animation:up 1.1s var(--ease) backwards; animation-delay:calc(var(--d, 0) * 120ms + 150ms); }
.motion .h-hero__copy > [data-in]{ animation:rise 1s var(--ease) backwards; animation-delay:calc(var(--d, 0) * 120ms + 150ms); }
.motion .h-hero__frame{ animation:reveal 1.4s var(--ease) .2s backwards; }
.motion .h-hero__frame img{ animation:zoom 2s var(--ease) .2s backwards, drift 22s ease-in-out 2.2s infinite alternate; }
.motion .h-hero__caption{ animation:rise 1s var(--ease) 1s backwards, float 6s ease-in-out 2s infinite; }
.motion .h-ring{ animation:fade 1s ease 1.2s backwards; }
.motion .h-ring svg{ animation:spin 22s linear infinite; }
.motion .h-woods a{ animation:rise 1.1s var(--ease) backwards; animation-delay:calc(var(--d, 0) * 140ms + 300ms); }
.motion .h-scroll::after{ animation:wheel 1.8s ease-in-out infinite; }
.motion .h-marquee__track{ animation:marquee 45s linear infinite; }
.motion .h-marquee:hover .h-marquee__track{ animation-play-state:paused; }

/* Scroll reveals. Hidden starting state only under .motion; backwards fill keeps hover transforms working. */
.motion [data-anim]:not(.is-in), .motion [data-stagger]:not(.is-in) > *{ opacity:0; }
.motion [data-anim].is-in{ animation:rise 1s var(--ease) backwards; animation-delay:calc(var(--d, 0) * 100ms); }
.motion [data-stagger].is-in > *{ animation:rise .9s var(--ease) backwards; animation-delay:calc(var(--i, 0) * 80ms); }
.motion .h-steps:not(.is-in)::before{ transform:scaleX(0); }
.motion .h-steps.is-in::before{ animation:draw 1.6s var(--ease) .2s backwards; }
@media (max-width:900px){
  .motion .h-steps:not(.is-in)::before{ transform:scaleY(0); }
  .motion .h-steps.is-in::before{ animation-name:draw-y; }
}
/* Detail pages: cards rise in one after another, 70ms apart */
.motion [data-rise] > *{ animation:rise-sm .7s var(--ease) backwards; animation-delay:calc(var(--i, 0) * 70ms + 80ms); }
.motion .mega__cols li{ transition:none; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  [data-anim], [data-stagger] > *{ opacity:1 !important; }
}

/* ---------------------------------------------------------------- 25. Small screens (no horizontal scroll at 360px) */
@media (max-width:420px){
  :root{ --page:calc(100% - 32px); }
  .btn{ padding:14px 22px; }
  .btn-lg{ padding:15px 24px; font-size:16px; }
  .h-hero__cta .btn, .h-hero__cta .h-btn{ width:100%; }
  .h-facts dt{ font-size:26px; }
  .h-facts{ gap:12px 16px; }
  .h-example dl > div{ grid-template-columns:80px 1fr; }
  .od-send__value{ flex-wrap:wrap; }
  .page-head__tags, .od-head__tags{ width:100%; }
  .admin-page-title{ font-size:19px; }
}