/* Bonoj — shared custom styles (Tailwind handles most utility styling) */

:root {
  --bonoj-cream: #FBF7EF;
  --bonoj-cream-2: #F3ECDD;
  --bonoj-green: #1F3B2C;
  --bonoj-green-light: #2E5540;
  --bonoj-green-soft: #A9C4AE;
  --bonoj-gold: #C79A4B;
  --bonoj-biscuit: #EAD2A3;

  /* Semantic text tokens — use these (via text-[var(--bonoj-text)] etc.)
     instead of raw dark:/light: pairs, so contrast is guaranteed correct
     in both themes without depending on Tailwind's class cascade order. */
  --bonoj-text: var(--bonoj-green);       /* main body text */
  --bonoj-text-soft: rgba(31, 59, 44, 0.82); /* de-emphasized text — 6.5:1 on cream */
  --bonoj-text-muted: rgba(31, 59, 44, 0.72); /* placeholders / hints — 4.7:1 on cream (was 3.1:1) */
  --bonoj-success: #1F6B3B;                /* in-stock / positive status (6.1:1 on cream) */
  --bonoj-heading: var(--bonoj-green);

  /* Gold stays the brand accent for fills, dots, borders and focus. Gold used AS TEXT on cream needs the darker
     variant (#C79A4B on #FBF7EF is only 2.4:1). Text ON a gold fill is deep green (4.7:1), never white (2.6:1). */
  --bonoj-gold-text: #7A5410;              /* 6.3:1 on cream, 5.7:1 on cream-2 */
  --bonoj-on-gold: #1F3B2C;
  --bonoj-danger: #B91C1C;                 /* 6.0:1 on cream */
  --bonoj-focus: #8A5F14;                  /* 5.3:1 on cream */
  --bonoj-surface: #FFFFFF;
  --bonoj-border: rgba(31, 59, 44, 0.18);
}

html.dark {
  --bonoj-cream: #10241A;
  --bonoj-cream-2: #16301F;
  --bonoj-text: var(--bonoj-biscuit);
  --bonoj-text-soft: rgba(234, 210, 163, 0.86);
  --bonoj-text-muted: rgba(234, 210, 163, 0.72); /* 6.1:1 on the dark background */
  --bonoj-success: #6FCF97;
  --bonoj-heading: var(--bonoj-biscuit);
  --bonoj-gold-text: #E3B968;              /* 8.8:1 on dark */
  --bonoj-danger: #F87171;                 /* 5.9:1 on dark */
  --bonoj-focus: #E3B968;
  --bonoj-surface: #16301F;
  --bonoj-border: rgba(234, 210, 163, 0.22);
}

body {
  background-color: var(--bonoj-cream);
  color: var(--bonoj-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Browsers often give form controls their own default text color instead of
   inheriting the page's — force them to match so dark mode stays readable. */
input, select, textarea {
  color: var(--bonoj-text);
  background-color: transparent;
}
input::placeholder, textarea::placeholder {
  color: var(--bonoj-text-muted);
}

/* ---------- Scroll progress bar ---------- */
#bonoj-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  background: linear-gradient(90deg, var(--bonoj-gold), var(--bonoj-green-light));
  z-index: 200;
}

/* ---------- Navbar ----------
   Glass, but restrained: one small fixed surface, a modest blur radius and a mostly-opaque tint so text stays
   readable over any image and the GPU has little to composite. No saturate(), no large shadow. */
.glass-nav {
  background: rgba(251, 247, 239, 0.84);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(31, 59, 44, 0.14);
}

html.dark .glass-nav {
  background: rgba(16, 36, 26, 0.84);
  border-bottom: 1px solid rgba(169, 196, 174, 0.16);
}

.glass-card {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(31, 59, 44, 0.14);
}

html.dark .glass-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* ---------- Banner carousel ---------- */
.banner-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}
.banner-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.banner-dot {
  /* a real <button>: 24px tap area around an 8px dot */
  position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
}
.banner-dot::before {
  content: ""; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(31, 59, 44, 0.45);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.banner-dot[aria-current="true"]::before { background: var(--bonoj-gold); transform: scale(1.5); box-shadow: 0 0 0 1px var(--bonoj-green); }

/* ---------- Star rating ---------- */


/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bonoj-green-soft); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Product card hover ---------- */
.product-card { transition: transform 0.2s ease, border-color 0.2s ease; }
@media (hover: hover) { .product-card:hover { transform: translateY(-3px); border-color: var(--bonoj-gold); } }

/* ---------- Fade in ---------- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.4s ease forwards; }


/* Line clamp for product names/descriptions */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Product description formatting (bullets + numbers) */
.product-desc ul { list-style: disc; padding-left: 1.5rem; margin: .5rem 0; }
.product-desc ol { list-style: decimal; padding-left: 1.5rem; margin: .5rem 0; }
.product-desc li { margin: .15rem 0; }
.product-desc p { margin: .5rem 0; }

/* ---------- Carousel arrows (hero + top banner) ---------- */
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 44px; height: 44px; border-radius: 9999px; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); color: #1F3B2C; font-size: 18px; line-height: 1;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transition: background-color 0.2s ease;
}
.carousel-arrow:hover { background: #fff; }
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }
html.dark .carousel-arrow { background: rgba(16, 36, 26, 0.92); color: #EAD2A3; }
html.dark .carousel-arrow:hover { background: rgba(16, 36, 26, 1); }
@media (max-width: 767px) { .carousel-arrow { width: 40px; height: 40px; font-size: 16px; } .carousel-arrow.prev { left: 6px; } .carousel-arrow.next { right: 6px; } }

/* ---------- Language switcher (English ↔ বাংলা) ---------- */
.lang-btn {
  height: 40px;
  min-width: 40px;
  padding: 0 10px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.lang-btn:hover { opacity: 0.75; }
/* Very narrow phones (320px): keep the logo and all five header buttons on one row */
@media (max-width: 379px) {
  .nav-actions { gap: 4px; }
  .nav-actions > .bj-icon-btn { width: 36px; height: 36px; }
  .lang-btn { height: 36px; min-width: 36px; padding: 0 6px; font-size: 12px; }
}

/* ---------- Bangla typography ---------- */
/* Latin text (brand, IDs) keeps Poppins; Bengali letters use Hind Siliguri, loaded only in Bangla mode. */
html[lang="bn"] body {
  font-family: 'Poppins', 'Hind Siliguri', 'Noto Sans Bengali', 'Nirmala UI', 'Kalpurush', system-ui, sans-serif;
  line-height: 1.7;
}
html[lang="bn"] .font-serif,
html[lang="bn"] h1,
html[lang="bn"] h2 {
  font-family: 'Playfair Display', 'Noto Serif Bengali', 'Hind Siliguri', Georgia, serif;
}
/* Bengali vowel signs sit above and below the line, so tight line heights would clip them */
html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] .leading-tight,
html[lang="bn"] .line-clamp-2 { line-height: 1.45; }
html[lang="bn"] .uppercase { text-transform: none; letter-spacing: normal; }
html[lang="bn"] #trx-input,
html[lang="bn"] #coupon-input { text-transform: uppercase; } /* codes stay uppercase Latin */


/* =====================================================================
   Bonoj UI kit — shared, lightweight building blocks (v7 polish pass)
   Everything below uses only opacity / transform / colour transitions.
   ===================================================================== */

/* ---------- Accessibility foundation ---------- */
/* One focus treatment for every keyboard user. Specificity is (0,1,1) on purpose so it beats Tailwind's
   `outline-none` (0,1,0), which the pages use on inputs. :focus-visible means mouse clicks show no ring. */
html :focus-visible {
  outline: 2px solid var(--bonoj-focus);
  outline-offset: 3px;
}
html input:focus-visible, html select:focus-visible, html textarea:focus-visible {
  outline-offset: 1px;
  border-color: var(--bonoj-focus);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300; padding: 10px 16px; border-radius: 9999px;
  background: var(--bonoj-green); color: var(--bonoj-cream); font-weight: 600; font-size: 14px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* Contrast corrections for classes the pages already use (loaded before tailwind.css, so selectors are
   prefixed with `body` to win without !important). */
body .text-bgold { color: var(--bonoj-gold-text); }
body .bg-bgold, body .bg-bgold.text-white { color: var(--bonoj-on-gold); }
body .text-red-500, body .text-red-600 { color: var(--bonoj-danger); }
body .text-green-600 { color: var(--bonoj-success); }
body .opacity-50 { opacity: 0.78; }
body .opacity-60 { opacity: 0.8; }
body .opacity-70 { opacity: 0.86; }
body .opacity-75 { opacity: 0.88; }
html.dark body .text-bgreen { color: var(--bonoj-biscuit); }
html.dark body .bg-bgreen { background-color: var(--bonoj-green-light); }
html.dark body .hover\:bg-bgreenlight:hover { background-color: #3A6A50; }
html.dark body .bg-bgreensoft\/30 { background-color: rgba(169, 196, 174, 0.18); }
html.dark body .bg-red-100 { background-color: rgba(248, 113, 113, 0.16); }
html.dark body .bg-gray-200 { background-color: rgba(255, 255, 255, 0.14); }
.line-through { text-decoration-thickness: 1px; }
button:disabled, .bj-btn[aria-disabled="true"] { cursor: not-allowed; }

/* ---------- Buttons ---------- */
.bj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 24px; border-radius: 9999px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.bj-btn:active:not(:disabled) { transform: scale(0.98); }
.bj-btn:disabled { opacity: 0.5; }
.bj-btn-primary { background: var(--bonoj-green); color: #FBF7EF; }
.bj-btn-primary:hover:not(:disabled) { background: var(--bonoj-green-light); }
html.dark .bj-btn-primary { background: var(--bonoj-green-light); }
html.dark .bj-btn-primary:hover:not(:disabled) { background: #3A6A50; }
.bj-btn-gold { background: var(--bonoj-gold); color: var(--bonoj-on-gold); }
.bj-btn-gold:hover:not(:disabled) { background: #D4A85A; }
.bj-btn-outline { background: transparent; color: var(--bonoj-text); border-color: var(--bonoj-border); }
.bj-btn-outline:hover:not(:disabled) { border-color: var(--bonoj-text); }
.bj-btn-danger { background: #B91C1C; color: #fff; }
.bj-btn-danger:hover:not(:disabled) { background: #991B1B; }
.bj-btn-sm { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.bj-btn-block { display: flex; width: 100%; }

/* Round icon-only control (visual 40px, tap area 44px) */
.bj-icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9999px; cursor: pointer; color: inherit; flex: 0 0 auto;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.bj-icon-btn::after { content: ""; position: absolute; inset: -2px; }
.bj-icon-btn:hover { opacity: 0.75; }
.bj-icon-btn:active { transform: scale(0.94); }
.bj-icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bj-icon-sm { width: 16px; height: 16px; }
.bj-badge-count {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 9999px;
  background: var(--bonoj-gold); color: var(--bonoj-on-gold); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}

/* ---------- Forms ---------- */
.bj-input {
  width: 100%; min-height: 44px; padding: 10px 16px; border-radius: 12px; font-size: 15px;
  background: rgba(255, 255, 255, 0.62); border: 1px solid var(--bonoj-border); color: var(--bonoj-text);
  transition: border-color 0.15s ease;
}
html.dark .bj-input { background: rgba(255, 255, 255, 0.06); }
.bj-input[aria-invalid="true"] { border-color: var(--bonoj-danger); }
select.bj-input { appearance: auto; }
.bj-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.bj-hint { font-size: 12px; color: var(--bonoj-text-muted); margin-top: 4px; }
.bj-field-error { font-size: 13px; color: var(--bonoj-danger); margin-top: 4px; }
.bj-field-error:empty { display: none; }
.bj-input-wrap { position: relative; }
.bj-input-wrap .bj-input { padding-right: 48px; }
.bj-input-action {
  position: absolute; top: 0; right: 0; width: 44px; height: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: 0 12px 12px 0; cursor: pointer; color: var(--bonoj-text-soft);
}
.bj-input-action:hover { color: var(--bonoj-text); }
.bj-input-action[hidden] { display: none; }

/* ---------- Toasts (one shared system: storefront + admin) ---------- */
.bj-toast-region {
  position: fixed; z-index: 400; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
@media (min-width: 640px) { .bj-toast-region { left: auto; right: 24px; bottom: 24px; align-items: flex-end; width: 380px; } }
body.bj-has-sticky-buy .bj-toast-region { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.bj-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: 420px;
  padding: 12px 14px; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.45;
  background: var(--bonoj-green); color: #FBF7EF; border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  animation: bj-toast-in 0.2s ease-out both;
}
html.dark .bj-toast { background: #1E4530; }
.bj-toast[data-kind="error"] { background: #8F1D1D; }
html.dark .bj-toast[data-kind="error"] { background: #7F2323; }
.bj-toast[data-kind="success"] { background: #1F5C37; }
.bj-toast.bj-leaving { opacity: 0; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease; }
.bj-toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bj-toast-action { flex: 0 0 auto; min-height: 32px; padding: 4px 10px; border-radius: 8px; font-weight: 700; color: #FBF7EF; text-decoration: underline; text-underline-offset: 3px; }
.bj-toast-close { flex: 0 0 auto; width: 32px; height: 32px; margin: -4px -6px -4px 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: inherit; opacity: 0.85; }
.bj-toast :focus-visible { outline-color: #FBF7EF; }
@keyframes bj-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Loading / empty / error states ---------- */
.bj-skeleton { background: rgba(31, 59, 44, 0.09); border-radius: 12px; animation: bj-pulse 1.6s ease-in-out infinite; }
html.dark .bj-skeleton { background: rgba(234, 210, 163, 0.12); }
@keyframes bj-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.bj-skel-card { border-radius: 16px; overflow: hidden; }
.bj-skel-img { aspect-ratio: 1 / 1; border-radius: 0; }
.bj-skel-line { height: 12px; margin: 12px 16px 0; }
.bj-state { text-align: center; padding: 48px 16px; grid-column: 1 / -1; }
.bj-state-title { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.bj-state-text { color: var(--bonoj-text-soft); font-size: 14px; margin: 0 auto 18px; max-width: 420px; }
.bj-state-icon { width: 44px; height: 44px; margin: 0 auto 12px; color: var(--bonoj-gold-text); }
.bj-state .bj-icon { width: 100%; height: 100%; stroke-width: 1.5; }

/* Inline notice (price changes, stock changes) */
.bj-notice { border-radius: 14px; padding: 14px 16px; font-size: 14px; border: 1px solid var(--bonoj-border); background: rgba(199, 154, 75, 0.14); }
html.dark .bj-notice { background: rgba(227, 185, 104, 0.12); }
.bj-notice-title { font-weight: 700; margin-bottom: 4px; }
.bj-notice ul { list-style: none; padding: 0; margin: 0; }
.bj-notice li { margin: 4px 0; overflow-wrap: anywhere; }
.bj-notice[data-kind="error"] { background: rgba(185, 28, 28, 0.09); border-color: rgba(185, 28, 28, 0.35); }

/* ---------- Product card ---------- */
.bj-card { display: flex; flex-direction: column; }
.bj-card-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: rgba(31, 59, 44, 0.06); }
.bj-card-media img { width: 100%; height: 100%; object-fit: cover; }
.bj-card-body { display: flex; flex-direction: column; flex: 1; padding: 14px 14px 14px; gap: 6px; min-width: 0; }
.bj-card-title { font-size: 14px; font-weight: 500; line-height: 1.35; }
.bj-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bj-card-tag { position: absolute; z-index: 2; top: 10px; font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 9999px; pointer-events: none; }
.bj-tag-discount { left: 10px; background: var(--bonoj-gold); color: var(--bonoj-on-gold); }
.bj-tag-soldout { right: 10px; background: #4B5563; color: #fff; }
.bj-card-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bonoj-text-soft); }
.bj-stars { color: var(--bonoj-gold-text); letter-spacing: 1px; }
.bj-card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; padding-top: 2px; }
.bj-price { font-weight: 700; color: var(--bonoj-gold-text); }
.bj-price-old { font-size: 12px; text-decoration: line-through; color: var(--bonoj-text-muted); }
.bj-low-stock { font-size: 12px; font-weight: 600; color: var(--bonoj-danger); }
.bj-card-cta { position: relative; z-index: 2; margin-top: 8px; }

/* ---------- Quantity stepper ---------- */
.bj-qty { display: inline-flex; align-items: center; border: 1px solid var(--bonoj-border); border-radius: 9999px; background: rgba(255, 255, 255, 0.5); }
html.dark .bj-qty { background: rgba(255, 255, 255, 0.06); }
.bj-qty button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer; color: inherit; }
.bj-qty button:hover:not(:disabled) { background: rgba(31, 59, 44, 0.08); }
html.dark .bj-qty button:hover:not(:disabled) { background: rgba(234, 210, 163, 0.12); }
.bj-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.bj-qty output { min-width: 32px; text-align: center; font-weight: 600; font-size: 15px; }

/* ---------- Cart line ---------- */
.bj-line { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px 16px; padding: 14px; border-radius: 16px; align-items: start; }
.bj-line img { width: 80px; height: 80px; object-fit: cover; border-radius: 12px; }
.bj-line-name { font-weight: 500; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.bj-line-controls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.bj-line-sub { font-weight: 700; }
@media (min-width: 640px) {
  .bj-line { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; }
  .bj-line img { width: 96px; height: 96px; }
  .bj-line-controls { grid-column: auto; flex-wrap: nowrap; justify-content: flex-end; }
}
.bj-remove { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; color: var(--bonoj-danger); cursor: pointer; }
.bj-remove:hover { background: rgba(185, 28, 28, 0.1); }

/* ---------- Free delivery progress ---------- */
.bj-progress-track { height: 8px; border-radius: 9999px; background: rgba(31, 59, 44, 0.12); overflow: hidden; }
html.dark .bj-progress-track { background: rgba(234, 210, 163, 0.16); }
.bj-progress-fill { height: 100%; width: 100%; transform-origin: left; border-radius: 9999px; background: var(--bonoj-gold); }
.bj-progress-fill[data-done="true"] { background: var(--bonoj-success); }

/* ---------- Product page ---------- */
.bj-crumbs { font-size: 13px; color: var(--bonoj-text-soft); margin-bottom: 16px; }
.bj-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; list-style: none; padding: 0; margin: 0; }
.bj-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.6; }
.bj-crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.bj-crumbs [aria-current] { font-weight: 600; color: var(--bonoj-text); overflow-wrap: anywhere; }
.bj-zoom { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.bj-zoom-hint { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(251, 247, 239, 0.92); color: #1F3B2C; pointer-events: none; }
.bj-thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; padding: 3px; cursor: pointer; border: 2px solid transparent; }
.bj-thumb[aria-current="true"] { border-color: var(--bonoj-gold); }
.bj-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.bj-reassure { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; font-size: 14px; }
.bj-reassure li { display: flex; align-items: flex-start; gap: 10px; list-style: none; }
.bj-reassure .bj-icon { color: var(--bonoj-gold-text); margin-top: 1px; }
.bj-added { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px; background: rgba(31, 107, 59, 0.12); color: var(--bonoj-text); }
.bj-added:empty { display: none; }
html.dark .bj-added { background: rgba(111, 207, 151, 0.12); }
.bj-added a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bj-sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bonoj-cream); border-top: 1px solid var(--bonoj-border);
}
.bj-sticky-buy .bj-btn { flex: 1; }
@media (max-width: 767px) { body.bj-has-sticky-buy .bj-sticky-buy { display: flex; } body.bj-has-sticky-buy { padding-bottom: 76px; } }
.bj-sticky-buy[hidden] { display: none !important; }

/* Rating radio group (keyboard + screen-reader accessible) */
.bj-rating { display: inline-flex; gap: 2px; border: 0; padding: 0; margin: 0; }
.bj-rating legend { margin-bottom: 6px; padding: 0; font-size: 14px; font-weight: 500; }
.bj-rating label { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; font-size: 28px; line-height: 1; color: var(--bonoj-text-muted); }
.bj-rating input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bj-rating label[data-on="true"] { color: var(--bonoj-gold-text); }
.bj-rating label:has(input:focus-visible) { outline: 2px solid var(--bonoj-focus); outline-offset: 1px; border-radius: 10px; }

/* ---------- Lightbox / modal ---------- */
.bj-overlay { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 20, 14, 0.78); animation: bj-fade 0.15s ease-out both; }
@keyframes bj-fade { from { opacity: 0; } to { opacity: 1; } }
.bj-lightbox-img { max-width: min(96vw, 1100px); max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; background: #fff; }
.bj-lightbox-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(251, 247, 239, 0.95); color: #1F3B2C; cursor: pointer; }
body.bj-lock { overflow: hidden; }

/* ---------- Tabs (account) ---------- */
.bj-tabs { display: flex; padding: 4px; border-radius: 9999px; }
.bj-tab { flex: 1; min-height: 44px; border-radius: 9999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.bj-tab[aria-selected="true"] { background: var(--bonoj-green); color: #FBF7EF; }
html.dark .bj-tab[aria-selected="true"] { background: var(--bonoj-green-light); }

/* ---------- Order timeline ---------- */
.bj-timeline { list-style: none; margin: 0; padding: 0; }
.bj-timeline li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.bj-timeline .bj-when { color: var(--bonoj-text-soft); font-size: 13px; text-align: right; }
.bj-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.bj-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 12px; }
.bj-step-dot { width: 28px; height: 28px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; z-index: 1; background: rgba(31, 59, 44, 0.14); color: var(--bonoj-text); }
html.dark .bj-step-dot { background: rgba(234, 210, 163, 0.18); }
.bj-step[data-done="true"] .bj-step-dot { background: var(--bonoj-green); color: #FBF7EF; }
html.dark .bj-step[data-done="true"] .bj-step-dot { background: var(--bonoj-green-light); }
.bj-step::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: rgba(31, 59, 44, 0.14); }
html.dark .bj-step::before { background: rgba(234, 210, 163, 0.18); }
.bj-step:first-child::before { display: none; }
.bj-step[data-done="true"]::before { background: var(--bonoj-green); }
html.dark .bj-step[data-done="true"]::before { background: var(--bonoj-green-light); }
.bj-step span:last-child { margin-top: 6px; overflow-wrap: anywhere; }
.bj-pill { display: inline-block; padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 700; background: rgba(169, 196, 174, 0.35); color: var(--bonoj-green); }
html.dark .bj-pill { background: rgba(169, 196, 174, 0.18); color: var(--bonoj-biscuit); }
.bj-pill[data-kind="cancelled"] { background: rgba(185, 28, 28, 0.12); color: var(--bonoj-danger); }

/* Shop toolbar */
.bj-toolbar { display: grid; gap: 12px; margin-bottom: 20px; }
@media (min-width: 768px) { .bj-toolbar { grid-template-columns: minmax(0, 1fr) 220px 220px; } }
.bj-count { font-size: 14px; color: var(--bonoj-text-soft); min-height: 24px; }
.bj-count-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bj-link-btn { min-height: 44px; padding: 0 4px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--bonoj-gold-text); cursor: pointer; }
.bj-link-btn[hidden] { display: none; }

/* Footer */
.bj-footer a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.15s ease; }
.bj-footer a:hover { text-decoration-color: currentColor; }
.bj-footer ul { list-style: none; padding: 0; }
.bj-footer li { margin: 2px 0; }
.bj-footer li a { display: inline-block; padding: 6px 0; }

/* Policy pages */
.bj-prose h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 700; margin: 28px 0 8px; }
.bj-prose p, .bj-prose li { line-height: 1.75; margin: 8px 0; color: var(--bonoj-text-soft); }
.bj-prose ul { list-style: disc; padding-left: 22px; }
.bj-prose a { text-decoration: underline; text-underline-offset: 3px; color: var(--bonoj-gold-text); }

/* Mobile safety: nothing may push the page sideways */
html, body { max-width: 100%; overflow-x: clip; }
img { max-width: 100%; }

/* Reduced motion — required by the polish spec; also stops autoplay-driven slide transitions */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.6ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Override reduced motion specifically for the hero carousel track */
@media (prefers-reduced-motion: reduce) {
  #hero-carousel-track,
  .banner-track {
    transition-duration: 0.6s !important;
  }
}

/* The hero carousel and the top banner strip keep their slide animation even when the OS "reduce motion" setting is on (store owner's choice).
   Without this, the rule above makes every slide change an instant jump that looks like a blink. */
@media (prefers-reduced-motion: reduce) {
  #hero-carousel-track, #banner-track { transition-duration: 0.6s !important; }
}

/* Whole-card link: the title link stretches over the card; the focus ring is drawn around the card */
.bj-card-link:focus-visible { outline: none; }
.bj-card-link:focus-visible::after { outline: 2px solid var(--bonoj-focus); outline-offset: -2px; }

/* Checkout total: impossible to miss */
.bj-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(199, 154, 75, 0.16); border: 1px solid rgba(199, 154, 75, 0.5); font-size: 15px; }
.bj-total-row strong { font-size: 22px; line-height: 1.2; }
html.dark .bj-total-row { background: rgba(227, 185, 104, 0.12); }
fieldset { min-width: 0; }
.empty\:hidden:empty { display: none; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* File picker styled as a button but still keyboard-reachable (the real <input type=file> is visually hidden, not display:none) */
.bj-file { position: relative; cursor: pointer; }
.bj-file:has(input:focus-visible) { outline: 2px solid var(--bonoj-focus); outline-offset: 3px; }


/* ---------------------------------------------------------------------------------------------
   Utility compatibility block.
   public/css/tailwind.css is a pre-built file and only contains the utilities that were used when it was last
   compiled. The classes below are used by the new markup but were not in that build. They are prefixed with `html `
   so they out-rank the base utilities that tailwind.css (which loads after this file) defines at equal specificity.
   If you re-run `npm run build:css`, Tailwind will generate these itself and this block becomes redundant (harmless).
   --------------------------------------------------------------------------------------------- */
html .inline-flex { display: inline-flex; }
html .flex-col-reverse { flex-direction: column-reverse; }
html .break-all { word-break: break-all; }
html .bottom-2 { bottom: 0.5rem; }
html .h-1\.5 { height: 0.375rem; }
html .h-10 { height: 2.5rem; }
html .w-10 { width: 2.5rem; }
html .w-14 { width: 3.5rem; }
html .mt-3 { margin-top: 0.75rem; }
html .mt-5 { margin-top: 1.25rem; }
html .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
html .pt-12 { padding-top: 3rem; }
html .pb-12 { padding-bottom: 3rem; }
html .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
html .opacity-90 { opacity: 0.9; }
html .max-w-xl { max-width: 36rem; }
html .max-w-3xl { max-width: 48rem; }
html .min-h-\[44px\] { min-height: 44px; }
html .min-w-\[480px\] { min-width: 480px; }
html .min-w-\[560px\] { min-width: 560px; }
html .min-w-\[660px\] { min-width: 660px; }
html .min-w-\[720px\] { min-width: 720px; }
html .min-w-\[780px\] { min-width: 780px; }
html .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
html .text-\[var\(--bonoj-text\)\] { color: var(--bonoj-text); }
@media (min-width: 640px) {
  html .sm\:p-6 { padding: 1.5rem; }
  html .sm\:gap-4 { gap: 1rem; }
  html .sm\:gap-5 { gap: 1.25rem; }
  html .sm\:col-span-3 { grid-column: span 3 / span 3; }
  html .sm\:justify-end { justify-content: flex-end; }
}
@media (min-width: 768px) {
  html .md\:gap-10 { gap: 2.5rem; }
  html .md\:sticky { position: sticky; }
  html .md\:top-24 { top: 6rem; }
  html .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  html .lg\:col-span-1 { grid-column: span 1 / span 1; }
  html .lg\:col-span-2 { grid-column: span 2 / span 2; }
  html .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.bj-footer { border-top: 1px solid var(--bonoj-border); }
.col-span-full { grid-column: 1 / -1; }


/* ---------- Homepage search ---------- */
.bj-home-search { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 9999px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--bonoj-border); }
html.dark .bj-home-search { background: rgba(255, 255, 255, 0.06); }
.bj-home-search:focus-within { border-color: var(--bonoj-focus); }
.bj-home-search .bj-icon { color: var(--bonoj-text-soft); }
.bj-home-search input { flex: 1; min-width: 0; min-height: 44px; background: transparent; border: 0; outline: 0; font-size: 15px; color: var(--bonoj-text); }
.bj-home-search input:focus-visible { outline: 0; }
.bj-home-search input::placeholder { color: var(--bonoj-text-muted); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ---------- Admin dialogs: wider, single scroll area, sticky header + footer ---------- */
.bj-dialog { width: 100%; max-width: 32rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 24px; border-radius: 16px; background: var(--bonoj-cream); color: var(--bonoj-text); }
html.dark .bj-dialog { background: #16301F; }
.bj-dialog-wide { max-width: 56rem; }
.bj-dialog-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 12px; margin-bottom: 8px; background: inherit; border-bottom: 1px solid var(--bonoj-border); }
.bj-dialog-foot { position: sticky; bottom: 0; z-index: 2; padding: 12px 0 0; margin-top: 16px; background: inherit; border-top: 1px solid var(--bonoj-border); }
.bj-form-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .bj-form-grid.bj-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bj-form-grid.bj-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bj-form-grid .bj-span-all { grid-column: 1 / -1; }
@media (max-width: 639px) { .bj-dialog { padding: 0 16px 16px; max-height: calc(100dvh - 1rem); } }

/* ---------- Admin: ordered product lists (Homepage rows / featured order) ---------- */
.bj-order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bj-order-item { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; border: 1px solid var(--bonoj-border); background: rgba(255, 255, 255, 0.5); }
html.dark .bj-order-item { background: rgba(255, 255, 255, 0.05); }
.bj-order-item img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.bj-order-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.bj-order-pos { font-size: 12px; color: var(--bonoj-text-soft); min-width: 1.5rem; text-align: center; }
.bj-order-btns { display: flex; flex: 0 0 auto; }
.bj-order-btns button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; color: inherit; }
.bj-order-btns button:hover:not(:disabled) { background: rgba(31, 59, 44, 0.1); }
html.dark .bj-order-btns button:hover:not(:disabled) { background: rgba(234, 210, 163, 0.14); }
.bj-order-btns button:disabled { opacity: 0.3; cursor: not-allowed; }
.bj-order-btns .bj-danger { color: var(--bonoj-danger); }
.bj-pick-results { display: grid; gap: 4px; margin-top: 8px; }
.bj-pick-result { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 12px 4px 4px; border-radius: 10px; text-align: left; cursor: pointer; }
.bj-pick-result:hover { background: rgba(31, 59, 44, 0.08); }
html.dark .bj-pick-result:hover { background: rgba(234, 210, 163, 0.12); }
.bj-pick-result img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.bj-pick-result span { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }